Showing a SVG contains links, created by GraphViz, on HTML

Question

An SVG is create from the following test.dot file:

digraph {

    google[label="google"
        URL="https://google.com"
        target="_blank" fontcolor=blue
    ]
}

With "dot -Tsvg test.dot > test.svg", an test.svg is created.

The SVG can be shown in the following .html

<object data="test.svg" type="image/svg+xml">

the link is clickable in Chrome.

Now, if I add another line under the object line

<a href="https://stackoverflow.com/">Stackoverflow</a>

the new href wouldn't show up in Chrome.

If I use img and href as following in .html

<img src="test.svg">
<a href="https://stackoverflow.com/">Stackoverflow</a>

then the stackoverflow shows up with the svg, but the link in the SVG is not clickable anymore.

How can you make the SVG clickable and the stackoverflow href also showing?

Answer 1

You simply need to add closing tag (</object>) to the <object> tag, like so:

<object data="test.svg" type="image/svg+xml"></object>
<a href="https://stackoverflow.com/">Stackoverflow</a>

Demo on stackoverflow (uses base64 for the SVG, because we can't upload SVG here):

<object data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48IS0tIEdlbmVyYXRlZCBieSBncmFwaHZpeiB2ZXJzaW9uIDIuNDAuMSAoMjAxNjEyMjUuMDMwNCkKIC0tPjwhLS0gVGl0bGU6ICUwIFBhZ2VzOiAxIC0tPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjgzcHQiIGhlaWdodD0iNDRwdCIgdmlld0JveD0iMC4wMCAwLjAwIDgyLjY0IDQ0LjAwIj4KPGcgaWQ9ImdyYXBoMCIgY2xhc3M9ImdyYXBoIiB0cmFuc2Zvcm09InNjYWxlKDEgMSkgcm90YXRlKDApIHRyYW5zbGF0ZSg0IDQwKSI+Cjx0aXRsZT4lMDwvdGl0bGU+Cjxwb2x5Z29uIGZpbGw9IiNmZmZmZmYiIHN0cm9rZT0idHJhbnNwYXJlbnQiIHBvaW50cz0iLTQsNCAtNCwtNDAgNzguNjQxNiwtNDAgNzguNjQxNiw0IC00LDQiLz4KPCEtLSBnb29nbGUgLS0+CjxnIGlkPSJub2RlMSIgY2xhc3M9Im5vZGUiPgo8dGl0bGU+Z29vZ2xlPC90aXRsZT4KPGcgaWQ9ImFfbm9kZTEiPjxhIHhsaW5rOmhyZWY9Imh0dHBzOi8vZ29vZ2xlLmNvbSIgeGxpbms6dGl0bGU9Imdvb2dsZSIgdGFyZ2V0PSJfYmxhbmsiPgo8ZWxsaXBzZSBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIGN4PSIzNy4zMjA4IiBjeT0iLTE4IiByeD0iMzcuMTQyNCIgcnk9IjE4Ii8+Cjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjM3LjMyMDgiIHk9Ii0xMy44IiBmb250LWZhbWlseT0iVGltZXMsc2VyaWYiIGZvbnQtc2l6ZT0iMTQuMDAiIGZpbGw9IiMwMDAwZmYiPmdvb2dsZTwvdGV4dD4KPC9hPgo8L2c+CjwvZz4KPC9nPgo8L3N2Zz4=" type="image/svg+xml"></object>
<a href="https://stackoverflow.com/">Stackoverflow</a>

The click on the SVG above doesn't work because a different reason (basically the sandbox doesn't allow popup), below demo can show the better representation of the solution (with the same exact SVG, and no sandbox):

live demo deployed on github