Relative local file path for svg

Help
1

I am trying to create SVG file from dot with one of the nodes having URL which links to another SVG file.
All SVGs are locally generated and there is no web link for them.
I created node with something like this:

NODE1 [label = "My Node", URL = "file:///../images/diagram2.svg"];

Of course, the paths have to be relative so that when I take generated SVGs with root level folder structure to the other machines, it should be able navigate.
I cannot find a way to insert relative local files paths. The absolute paths work just fine but I cannot use it.

What is the best way to achieve this?

2

In the native SVG driver (that you get with dot -Tsvg) the path is passed through uninterpreted.

Here’s the generated code:

<!-- NODE1 -->
<g id="node1" class="node">
<title>NODE1</title>
<g id="a_node1"><a xlink:href="file:///../images/diagram2.svg" xlink:title="My Node">
<ellipse fill="none" stroke="black" cx="44.85" cy="-18" rx="44.69" ry="18"/>
<text text-anchor="middle" x="44.85" y="-14.3" font-family="Times,serif" font-size="14.00">My Node</text>
</a>
</g>
</g>

Everything appears to be correct. If there’s a problem, why do you believe it is in Graphviz?

3

Is the purpose of the URL to link to a different page (replace the current SVG graph with the new SVG file), or do you want to include the new SVG file as an image in the current node?
For Windows, this is how to do the latter:

graph E {
  s[image="images/Face-smile.svg" label=""]
}
4

@scnorth The SVG browser e.g. Edge cannot link the relative path given in the file:///.
Consider below use case:
I have 2 files:
diagram1.dot

digraph E {
    START [shape = "point"];
    NODE1 [label = "My Node", URL = "file:///../images/diagram2.svg"];

    START -> NODE1;
}

diagram2.dot

digraph E {
    NODE2 [label = "Simple Node"];
    NODE3 [label = "Complex Node"];

    NODE2 -> NODE3 -> NODE2;
}

Output generated from diagram2.dot with dot -Tsvg -o ..\images\diagram2.svg diagram2.gv
and from diagram1.dot with dot -Tsvg -o diagram1.svg diagram1.gv

Now, when I open diagram1.svg the browser shows the link correctly mapped to the address bar like below:
file:///C:/Shares/graphviz/diagram1.svg
However when I click on the My Node it tries to load the diagram2.svg by taking below path:
file:///images/diagram2.svg
and throws ERR_FILE_NOT_FOUND error.

5

@steveroush Thanks for the suggestion but mine is the first case.

6

I just found out that if I don’t use file:/// or file:// and just mention the path like URL = "../images/diagram2.svg" then it works just fine.