Don't bother with overly complicated element id manipulation within an SVG. There's an easy way.
And that way is to simply add two lines in the Object Attributes and the Object Interactivity fields of any object within your SVG whether its a raster image or vector geometry. So yes it is totally possible to make fully responsive image maps with Inkscape (v1.0.2.2).
Steps
1. Import or create an object inside your canvas/art board bounds in your svg file using Inkscape.
2. Select the object once.
3. Right click the object to bring up the options dialog.
4. Select "Create Link."
5. Under the Object Attributes pane (might need to open that first) enter your canonical url within the Href: field e.g., "http://SOME-WEBSITE-URL.html" sans apostrophes.
6. Under the Interactivity section, within the onclick field, enter the script call e.g., "window.open('http://SOME-WEBSITE-URL.html','_parent');" sans apostrophes. Take note there is no space after the comma in this entry.
7. Save your SVG file and open it with Firefox or any browser to test your work.
Visual steps
You will now see your object will link to the page you specified AND the onclick event will change the mouse state from the standard pointer to the appropriate link click icon. Simple and effective and no mucking about inside the svg element id data.
Think green
Remember to always optimize your embedded raster images in your SVGs but only after you have scaled them properly outside of Inkscape. This is best done with GIMP. Your users, the internet and the planet will thank you for doing so as this cuts down considerably on bandwidth, processing and ultimately energy used to run the web. Developers should always consider the carbon footprint as part of their performance budget. And of course you silly graphic designers!
Are you a small business owner that is smart enough to know that Adobe Creative Cloud pay-every-month-rip-off (Photoshop/Illustrator/InDesign/Premiere) isn't the way to go? We offer reasonable tempered-by-fire consulting on hardware and libre software solutions that you own! Save thousands, not pay for silly SaaS products...give us a call at (559) 242-6647 and we’ll provide a perfect IT solution that respects your liberty, your privacy and just works.
Comments powered by CComment