SVG Map legends

When adding a legend (or key) to the bottom of a map, here's a way to allow the items to flow to the next line while keeping the marker and text together. Here's an example of converting the marker from PNG to SVG and tacking on text. First convert the marker to SVG using Imagemagick:

convert marker.png marker.svg

Next, edit the SVG to expand the viewbox to allow for the added text, then add the text. Note that Imagemagick set the viewBox values so you'll have to work in those units when you add the text.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="32" viewBox="1900 120 1100 1750">
	<path fill="#6993F8" stroke="#000" stroke-width="80" stroke-linejoin="round"
	d="M730.94,1839.629c-38.766-190.301-107.116-348.665-189.903-495.44c-61.407-108.872-132.544-209.363-198.364-314.938
	c-21.972-35.244-40.934-72.477-62.047-109.054c-42.216-73.137-76.444-157.935-74.269-267.932
	c2.125-107.473,33.208-193.684,78.03-264.172c73.719-115.935,197.201-210.989,362.884-235.969
	c135.466-20.424,262.475,14.082,352.543,66.748c73.6,43.038,130.596,100.527,173.92,168.28
	c45.22,70.716,76.359,154.26,78.971,263.232c1.337,55.83-7.805,107.532-20.684,150.418
	c-13.034,43.409-33.996,79.695-52.646,118.454c-36.406,75.659-82.049,144.982-127.855,214.346
	C915.083,1340.208,787.024,1550.912,730.94,1839.629z"/>
<text x="1500" y="1600" font-size="1200">US</text>
</svg>

Here's the result: US

Simple markers

When markers are simple and can be constructed using SVG primitives, there's no need to convert your marker images to SVG. In this example, the marker is a circle so the SVG circle primitive is used.

Note: Don't copy this code from the screen and paste it into your page. It won't work. To get it to display on this webpage, the less-than symbols had to be converted to their character-entity equivalent (&lt;). Instead, view the source of this page and copy the code for the result below.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="32" viewBox="0 120 100 21">
<circle fill="#FC766A" stroke="#000000" stroke-width="1" cx="11" cy="16" r="9"/>
<text x="25" y="22" font-size="18">Japan</text>
</svg>

Here's the result: Japan