How to insert a SVG object into HTML with links?

Question

I don't want to add a link to a svg (which is not possible because the svg isn't provided by me), but want to add a link like <a href=""><img src="foo.svg"/></a>. Only that this time it is not an img, but a object (so I can include a svg).

It works with some browser, but for example not with firefox. What is the default idea how to do something like that?

Answer 1

Put the link inside the svg file instead, e.g:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
 <a xlink:href="">
  ...
 </a>
</svg>

Answer 2

With svgweb you can embed arbitrary SVG cross-browser, and modify it via regular DOM methods. This includes attaching event listeners to any part of the SVG.

svgweb home page:
http://code.google.com/p/svgweb/

svgweb quickstart (also discusses adding event listeners):
http://codinginparadise.org/projects/svgweb/docs/QuickStart.html

Even if you can't put it in a traditional anchor tag this way (I haven't tried, it might work), you'll at least be able to handle click events and navigate based on them, which is really what you're after.

Answer 3

In Firefox <object> captures all the clicks and doesn't let them "bubble" out of the SVG document. A sensible workaround is to cover the SVG with another element that gets the click first.

Fortunately this can be done with pure CSS:

a {position:relative; display:inline-block;}
a:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0;}

You might want to add :-moz-any-link pseudo-class to the selector to make it Gecko-only.