Convert SVG image path to Image Map coordinates?

Question

Can I convert SVG image paths to Image map coordinates?

Lets assume that I have this SVG Image

http://www.openclipart.org/people/ArtFavor/anatomy26.svg
i want to convert the paths in the SVG somehow to Imagemap coordinates so i can make an effect/script http://www.netzgesta.de/mapper/ on it!!

Meaning i want to make that highlight effect when i roll on a specific part of that anatomy ( the script to be used doesn't have to be "mapper" but i just put it as an example)

Launcher

Answer 1

You might be interested by this script: creating-an-image-map-from-svg

Saros

Answer 2

Most precise way I've found to convert your vector/svg graphics is to open the vector/eps file in Adobe Illustrator (I used Adobe Illustrator CC 2017).

Highlight a path, and in the Attributes (in main menu, Window > Attributes) set "Image Map" field to desired shape. If you're building an image map for a literal map, then select "Polygon." You can optionally set the "URL" field too.

Once you go through each shape and assign applicable attributes, go to main menu, File > Export > Save For Web (Legacy). Then click on "Preview" in bottom left and that will open window in a browser. On preview you can view the HTML image map code below the image.

NOTE: your vector/svg shapes must be paths. So you may have to release compound paths (by right clicking highlighted shape and selecting "Release Compound Path."

Not very intuitive as far as figuring out in Adobe, but by far the most accurate way I've figured out how to do this.

Aftershock

Genius, I've been trying to manually handle this... this works perfectly, especially for maps – Amalle

I had to set the URL field for it to work... may help others. – Amalle

Answer 3

I found this very promising looking guide. It uses a program called Mapedit and Sea Monkey, both of which I believe are free. http://socrtwo.info/image_map.htm

Edit:

An easy way to accomplish the same thing is to

1. Save your image as a .PNG with Inkscape
2. Open in Gimp,
   • add alpha channel,
   • delete any whitespace that is supposed to be clear
3. The magic:
   • Use image-maps.com to map your image,
   • make that a <div> with opacity of something like 0.1,
   • put a <div> exactly under the mapped image with the same picture in it.

Any highlighted areas can be clipped from the original SVG, saved as PNG and sandwiched between the divs for rollovers and whatnot. (I made world maps with glowing countries this way, and it worked a little better than expected.

Radiomicrometer