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!
1 Answer 1
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-specific xlink:show attribute with the value new. The SVG spec says the following:
[xlink:show] attribute is provided for backwards compatibility with SVG 1.1. It provides documentation to XLink-aware processors. In case of a conflict, the target attribute has priority, since it can express a wider range of values.
And the values of the target attribute can be:
- _replace
- _self
- _parent
- _top
- _blank
Thus, in your SVG you need to write as follows:
<a xlink:href="http://example.com" target="_blank">[...]</a>
But currently all browsers capable of showing SVG support both xlink:show and target attributes (I haven't tested in IE9 though).
-
7He wants to open it in the containing window. I think you want "_parent" or "_top".– gilly3Commented Aug 10, 2011 at 21:33
-
9Perfect, many thanks for these two answers. Adding a
target='_top'to my Graphviz HTML label gives the result I was looking for.– mojonesCommented Aug 11, 2011 at 8:41 -
3Note, as in the posted example, that it must be 'target=', not 'xlink:target=' (even though you want 'xlink:href='). This tripped me up for a bit. Commented Sep 17, 2012 at 23:23
-
1
-
2@cazort I don't know an exact answer to your question, but depending on how you embed SVG, you can add
<base target="_blank" />to your<head>element and all links in the document will open in new tab. Should help if you embed SVG in an HTML iframe. Commented Oct 4, 2017 at 9:47