I have an SVG file (generated by Graphviz) that contains URL links. I would like these links to be clickable. First I tried
<img src="path/to/my.svg"/>
which displays the image fine but the links are not clickable. Changing to object:
<object data="/path/to/my.svg" type="image/svg+xml">
makes the links clickable, but when the user clicks on them, the new page opens inside the object. Is there any way that I can make the links open in the main window?
This is using firefox 5.0, but if there are any cross-browser differences you know about I would appreciate the warning!
Best Answer
First, if you embed SVG as
<img>
, browsers won't open links, as well as they wont run scripts inside<img>
, because, well, you embed an image, and very probably your image may appear inside an<a>
, and you can't put links inside links.And to make links open in new tabs, you can use either the
target
attribute, like in HTML, or xlink-specificxlink:show
attribute with the valuenew
. The SVG spec says the following:And the values of the
target
attribute can be:Thus, in your SVG you need to write as follows:
But currently all browsers capable of showing SVG support both
xlink:show
andtarget
attributes (I haven't tested in IE9 though).