Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert SVG image path to Image Map coordinates?

Tags:

svg

imagemap

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)

like image 793
RulE_BreakeR Avatar asked Nov 13 '22 22:11

RulE_BreakeR


1 Answers

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.

like image 147
frshjb373 Avatar answered Jan 18 '23 05:01

frshjb373