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:
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 (<). 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: