A simple tools to generate HTML imagemap or coordinates list (eg. to be inserted into a database) from an Inkscape SVG file. Also usefull for creating imagemap and generate area-coloured images on the fly using the coordinates (eg. in PHP with GD library). It requires Java to run.
- Works with Inkscape Polygons
- Save to HTML ImageMap or coordinate list
- Allows to add URL to areas
- Visual feedback of the editing
It's a very useful program. I took a SVG map that I needed from Wikimedia Commons, and converted it into a HTML image map successfully. However, it took me some time to do it because of the lack of some important information. Specially about the requisites of the SVG file to convert. Thanks to some information found on Launchpad (answers.launchpad.net/inkscape/+question/81736) and after many trial and error tests, I discovered some important rules that the SVG file must meet: 1. The paths must be straight lines, without any Bézier curve. Because my graphic used lots of curves, I used an extension of Inkscape, located on "Extensions > Modify path > Flattern Beziers". It allows you to set the level of flatness, which is a desirable feature to keep the looks as much close to the original graphic as possible. 2. The paths must be closed. It may sound obvious, but when you work with graphics from external sources, it isn't :/ . Many paths look like closed, but they aren't really! InkscapeMap returned a cryptic message: "org.xml.sax.SAXParseException; c not implemented yet" when I tried to load the SVG file. Detecting the end nodes of each path and joining them, one by one, had been a very tedious task :S . So I tried to select all the nodes of each path and use the option of the node editor called "Join selected end nodes with a new segment". Fortunately this action ignores the nodes that are already joined and only creates a segment between the end nodes. In my case, because the end nodes were so close, the new segments were imperceptible :) . 3. Some paths composed by subpaths caused me problems. Not all, but some ones that were too complex. In these very few cases I had to break them apart using the option "Path > Break apart". Finally I could convert my map without more problems. This application saved me much more time than what I spent trying to figure out these issues. Thank you Marco!
Thanks for Inkscapemap, it's excellent!
When maps are detailed and/or sloppy created, regardless of InkScape version, you can use Adobe Illustrator: Steps: # Open a *vector* file in Illustrator # Ungroup all objects, remove clipping masks, remove all strokes, leave just fill and go to Object > Expand # Select all objects and go to Object > Path > Simplify, under Options *check* Straight lines and then OK # Export the vector from Illustrator as SVG *1.0* (nothing "Adobe", nothing optimized, standard SVG) # Open InkScape, go to File > Inskscape Preferences > SVG Output, *uncheck* Allow relative coordinates and *check* Force repeat commands # Open the SVG file in InkScape # Convert objects to paths, Path > Object to Path, then select tool Edit path by nodes (F2), select *all* nodes (drag) and then click on the 11th icon from the left - Make selected segments lines (The last step in InkScape are just in case erros still occur, the objects should have already been optimized successfully by Illustrator.) ATTENTION: # if you have a compound vector path (i.e. imagine a "lake" inside a country) you *have* to delete it manually (delete the "lake", not the country), otherwise you will receive error.
Works, It doesn't support relative coordinates so in 0.48 you need to alter the output preferences. Alternatively you can try out this modified version which uses the Apache Batik parser: http://tovare.com/articles/createhtmlimagemapsusinginkscape/
It works, but currently (4/11/2010) supports only Inkscape svg files saved with 0.45.1 version (available from tab "Files" above. It needs an update!