How To Make Links In An Embedded Svg File Open In The Main Window, Not In A Separate Object

I have an SVG file (generated by Graphviz) that contains URL links. I would like these links to be clickable. First I tried which displays the i

Solution 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:

<axlink: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).