Clickable SVG Images for Website

Question

I'm using pydot to generate SVG graph images. I noticed on this website: http://safemap.sourceforge.net/demo/index-no-refresh.html that they have a clickable SVG. (This website also shows how you can style SVGs with CSS: https://css-tricks.com/using-svg/)

I've been searching for documentation on generating clickable SVGs with pydot, but couldn't find anything.

Answer 1

Pydot is a wrapper for Graphviz. It is reasonable to check if you can do it in Graphviz first.

Turns out you can:

1. To associate URLs with nodes, you can use Graphviz's URL attribute.
2. To make links clickable in the browser, you can use this answer.

Now, can you do it with pydot? I believe so, but haven't tested. From taking a look at pydot's source I see it supports any attributes - in the tests we see user passes shape:

self.graph_directed.add_node( pydot.Node('node', shape='box') )

and in the pydot itself we see that it can support any kind of attributes, not just shape:

class Node(object, Common):
    (...)
    def __init__(self, name = '', obj_dict = None, **attrs):
        (...)
        self.obj_dict[ 'attributes' ] = dict( attrs )

So I'd try using pydot.Node('node', url='http://somewhere'). If it fails, I'd construct a .dot file manually and pass it through pydot.

Warning

If you plan to use SVGs within <img/>, chances are your links won't work due to security policy of your web browser. In this case you need to embed it directly into your HTML like the website you linked does. This is especially important if the images are hosted on different domain than the host page.

Answer 2

You may

• use the URL attribute of nodes and edges
• use HTML-Like Labels for nodes and edges

the latter gives you more freedom of formatting by using tables.