How to create SVG image maps with Inkscape.

In this tutorial we’ll create responsive SVG image maps with Inkscape. You can use them to create really accurate hotspots on your web pages.

We’ll use this “find all mistakes” game as our example. 

Let’s begin by launching Inkscape 1.0 beta and opening our image there.

We recommend selecting, “link”, as the import type and “default import resolution” for the Image DPI.

Now we’ll simply draw some hotspots. We’ll give our paths both a fill and a stroke, but drop the opacity of the fill to zero. 

This invisible fill will let the SVG element recognize clicks on the center of itself in addition to the visible edges.

After we have created the hotspots, let’s save the file as optimized svg. Here is a quick overview of the settings. As you can see, we’ll remove most of the SVG related metadata to keep the file simple.

After the export we can view the file in a code editor.

If the exporter fails to include the background image, simply delete the warning and point the image file to the correct path.

If we now open the file in a browser, we can see that we have these awesome responsive vector hotspots.

If you want to see how we developed this into a working game, check out this slightly longer tutorial at fasterTutorials.com: https://youtu.be/YQ7Jyr7huWg

Thanks for watching and see you next time on one minute video tutorials.com

Leave a Reply

Your email address will not be published. Required fields are marked *