Make links work inside SVG

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

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.

The solution

Much shorter than describe the problem :) Instead of using img tag, we can use object tag. object tag get the url via the data attribute. Like this:

Original Question