Visit wherehaveibeen.info to make maps of your travels. Title banner

Creating A Static PNG or JPG
 Image Map from an SVG File

These instructions are in part derived from this
excellent post at the Electric Fairground.

Note: I use and recommend the $15 MapEdit for doing
 the final editing of the PNG or JPG imagemap.

1. Open up a new page on wyswig editor like MS Front Page, MS Expressions, Adobe Dreamweaver, Coffe Cup HTML Editor or Sea Monkey.  Try Sea Monkey first for a free one.

2. Open and SVG file in Notepad or other text editor and copy the XML code.  Paste it in the top field of Polygonator (http://wherehaveibeen.info/polygonator.htm) and click on the Process link. Paste the text from the lower field of the Polygonator application in the body section of the new page you just opened in the html editor (in the first few images below I notice I had put the image map in the header section above the body tag, don't do this).

polygonator process

polygonator processing results


3. Remove any <area shape="poly" .../> tags that don't have coordinates that are numbers.  For instance, these three area tags should be removed:

<area shape="poly" coords="<?xml" href="targetpage.html" alt=
"Description" /><area shape="poly" coords="ap</dc:title>,ascading,
SS),ircles,hange,olor,olor" href="targetpage.html" alt=
"Description" /><area shape="poly" coords="adeira," href=
"targetpage.html" alt="Description" />

But any that look like this should be kept because they represent provinces, states or countries:

<area shape="poly" coords="1228,669,1229,667,1229,663,1231,662,
1230,658,1230,657,1232,655,1236,654,1236,649,1239,649,1238,646,
1239,645,1240,644,1244,644,1246,643,1247,641,1249,640,1253,635,
1256,634,1259,633,1263,631,1268,629,1270,629,1273,630,1274,635,
1275,639,1276,641,1280,644,1277,646,1284,650,1287,649,1285,652,
1289,657,1285,660,1282,660,1279,662,1274,664,1271,663,1268,663,
1264,664,1254,664,1249,665,1249,668,1249,672,1249,676,1248,677,
1245,674,1240,674,1237,676,1233,674,1232,672,1230,669" 
href="targetpage.html" alt="Description" />

4. Also remove all the href="targetpage.html" mentions in the area tags even if the href is coded to send somewhere other than targetpage.html.  Just remove all the href code setting. 

 5.  Just above the all the area tags, insert this tag: <map> to indicate the start of the image map. You can create an image of something small, such as Sanibel real estate, or in this case, as large as Africa.  Also include in the map an id and name such as id="africa_image_map" and name="africa_image_map", so the full tag looks like this:  

<map id="africa_image_map" name="africa_image_map>

6. After all the area tags and before the </body> tag put in the tag </map> to indicate the end of the image map.


7. Find a png version of your svg map or convert it to png.  This online app will do it for free: http://www.online-utility.org/image_converter.jsp

8. Insert the png version of your map as an image in your web page.

9. For the img image tag, add usemap="#[insert your image map name here]". So for an African map, the image tag reads: 

<img src="africa_map.png" alt="africa_map" id="africa_map_load" 
name="africa_map_load" style="border-style:none; usemap=
"#africa_image_map"/>

and the map tag reads:

<map id="africa_image_map" name="africa_image_map"> 

10. Now the web page is openable in MapEdit which I believe is the best imagemap editor.  There can tweak the imagemap. Polygonator has a flaw in that it offsets all the polygon coordinates by hundreds of pixels so the actual image map may not be immediately visible in Mapedit.  First try to open your new web page in Mapedit.  If you don't see the image map, which is a red outline of the provinces, states or countries of your country or continent, click on the "View" menu and zoom out until you can.

At first you can't see the image map.

Zooming out.

Now you can see the red outline
 image map in the lower right corner.

11. Polygonator has another flaw in that it may duplicate and offset the duplicate provinces, states or countries.  You can delete the duplicates.  The duplicates may act as a source of frustration.

I think these are all the duplicates.

12.  When your satisfied you have gotten rid of duplicate, click on each of the states and provinces until your whole red outline image map is highlighted and there is a plus in the middle of the image map.  Using the plus sign, drag the image map over the png image of your country or continent.

I erased Mali and there is another 
duplicate which is white outlined in blue.

I dragged my map over.  It's too big but we will fix that in the next step.  Also 
I will need to clean up the islands and micro-countries and redraw those 
area tags by hand as they are too much trouble to deal with at this level.

 13.  The scale of your image map may not be correct so after you have dragged over your image map complex, look on the lower right corner of it for an inconspicuous green "left facing" corner outline or angle, looking like a backward capitol L.  Now Click and drag that corner to resize your image map so that the outlines fit best over the states and borders.  It takes a little bit of patience to do this right.

 Resizing Handle

Intermediate Snapshot

Final Result

14. Once the image map is lined up and in proportion, click on each state, province or country and add their names to the Alt and Title fields, so that when a user hovers over the country, state or province, the name comes up in the mouse info.

15. Now your pretty much done unless you wish to add JavaScript in the onclick box or other field. Save the file in MapEdit and open it again in the HTML editor.