SVG Responsive Image Map with HTML and CSS

Having an interactive map on your website is a fun way to engage your users and add interactivity to your site. This tutorial will show you how to build an interactive clickable map using HTML, CSS and a SVG file.

[newtoniantime]

Great lesson Bex. Thank you!

To other viewers:
Adding layers for each country gives us the group tag <g> around each path, makes it easy to switch to an <a> tag and add href or xlink:href (both works).

A tip:
Directly after you have closed/looped the path in Inkscape (or have the path focused), go to Objects>object properties

In the id-textfield, write what country you have marked. This will add an id attribute to the path, an easy way to secure structure and readability in the svg file. This is also the id that you can reference in the CSS-file to style your path.
So if you have made a path around England, write england in that id-textfield.

I recommend you move ALL the inline svg styling to a CSS-file, otherwise the svg will override your stylsheet references if you for example want to do #england:hover{something}

I hope someone found this helpful. Have a nice day!

[generalbrowsing]

very blur, please increase resolution