First of all, we can add links to a SVG file! Did you know? Well, I didn't. It's like the old good image map (
<map /> tag, remember? If you don't know this tag, probably you are not yet 20 years old) but with SVG, so it's pretty cool.
The question is, how to use it?
Well, it's easy, just wrap each tag you want to be a link with
a tag but instead use
href attribute, use
xlink:href. Like this:
The problem start when we want to embed this in the page.
The instant way to embed an image is, surprise surprise, use
img tag. But when we will try to to so, we will be disappointed to discover that the links are not working anymore.
In other hand, it's actually does make sense.. Who heard about links inside an image? Even in the 90's we needed to use
map for links on image.
Much shorter than describe the problem :) Instead of using
img tag, we can use
object tag get the url via the
data attribute. Like this: