-1

Given a graph in an SVG-file generated using Graphviz, is there a way (converter) to get back the basic description of this graph in terms of the DOT language? (no styling, it would be sufficient to have nodes, edges, and maybe their labels)

Maybe there exists a converter already?

For example:

Input (an SVG-file):

<SVG ...>
  <g id="graph0" class="graph"...>
    <title>G</title>
     ...
    <!-- a1 -->
    <g id="node1" class="node">
      <title>a1</title>
      <ellipse fill="none" stroke="#000000" .../>
      <text text-anchor="middle" ...>Label-1</text>
    </g>
    <!-- a2 -->
    <g id="node2" class="node">
      <title>a2</title>
      <ellipse fill="none" stroke="#000000" .../>
      <text text-anchor="middle" ...>Label-2</text>
    </g>
    <!-- a1&#45;&gt;a2 -->
    <g id="edge1" class="edge">
      <title>a1-&gt;a2</title>
      <path fill="none" stroke="#000000" d="..."/>
      ...
    </g>
  </g>
</svg>

Output (we want to get a description in terms of DOT language):

digraph G {

  a1 -> a2;

  a1 [label="Label-1"];
  a2 [label="Label-2"];

}
user35603
  • 765
  • 2
  • 8
  • 24

1 Answers1

0

Given the input:

digraph G {
  a1 -> a2;

  a1 [label="Label-1"];
  a2 [label="Label-2"];
  }

... in test1.svg, the command

dot -Tsvg test1.dot >test1.svg

... produces:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 8.0.1 (20230327.1645)
 -->
<!-- Title: G Pages: 1 -->
<svg width="85pt" height="116pt"
 viewBox="0.00 0.00 84.69 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>G</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-112 80.69,-112 80.69,4 -4,4"/>
<!-- a1 -->
<g id="node1" class="node">
<title>a1</title>
<ellipse fill="none" stroke="black" cx="38.35" cy="-90" rx="38.19" ry="18"/>
<text text-anchor="middle" x="38.35" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">Label&#45;1</text>
</g>
<!-- a2 -->
<g id="node2" class="node">
<title>a2</title>
<ellipse fill="none" stroke="black" cx="38.35" cy="-18" rx="38.19" ry="18"/>
<text text-anchor="middle" x="38.35" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">Label&#45;2</text>
</g>
<!-- a1&#45;&gt;a2 -->
<g id="edge1" class="edge">
<title>a1&#45;&gt;a2</title>
<path fill="none" stroke="black" d="M38.35,-71.7C38.35,-64.24 38.35,-55.32 38.35,-46.97"/>
<polygon fill="black" stroke="black" points="41.85,-47.1 38.35,-37.1 34.85,-47.1 41.85,-47.1"/>
</g>
</g>
</svg>

If we focus on the sixth to fourth lines from the bottom of the SVG file, which show the code to draw the edge a1 -> a2, we can see there is no explicit indication in the SVG code that this edge connects the node a1 to the node a2. Information that tells us the edge connects those two nodes, and information about the names of nodes a1 and a2 exists only in comments, like <!-- a2 --> and <!-- a1&#45;&gt;a2 -->.

In contrast, we'd have to extract information that is visible in the rendered output, like the label Label-1, from SVG code, e.g. <text text-anchor="middle" x="38.35" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">Label&#45;1</text>.

Thus:

  1. A converter from SVG to DOT would have to be based on a XML parser to be able to get information like Label-1. That isn't a hardship because those are readily available.
  2. A converter would be very sensitive to the format of comment fields in the XML, and might thus not be robust between versions of dot because the comment format could easily change (or, indeed, comments could be deleted just to make the SVG file smaller) without any effect on the visible, rendered graph.

I'd only be tempted to write such a converter:

  • as a last resort (if I had absolutely no other way of getting copies of the original .dot files)
  • if I knew the version of GraphViz being used to generate the SVG wouldn't change over time, and
  • if I had lots of graphs to convert (because if I only had a few, it would be easier to interpret the SVG by eye than to build a sufficiently robust conversion program).

Parenthetically, I tried creating SVG from the following:

digraph G {

  a1 -> a2;
  a1 -> a3 -> a4;

  a1 [label="Label-1"];
  a2 [label="Label-2"];
  a3 [label="Label-3"];

  {a2; a4; rank="same"}
} 

... and none of the last line of code that includes rank="same" appears in the SVG file so any back-conversion would miss that sort of styling.

Simon
  • 10,679
  • 1
  • 30
  • 44
  • Why didn't you mention `a1->a2` of the edge as this contains link from `a1` to `a2` (an extra label is coded inta a `` element) – albert Apr 06 '23 at 08:35