SVG is huge no matter the actual graph size

Help
1

Why is my svg output huge even for very small graphs (4 nodes)?

Adding bb, size, or viewport arguments has no effect.

Similarly using layout engines dot or circo.

Here’s the svg header for a 4 node graph laid out by dot:

<svg width="1375pt" height="1422pt"
 viewBox="1152.00 1152.00 1578.00 1692.00"  .... etc.

I can constrain it somewhat when displaying the svg in a web page by using width= and height= arguments on the object or img tag that I use to display the svg, but that’s a hack, and the margin around the graph is still too large.

I’m using graphviz 2.47

2

Can you share the graph?

3 
digraph mygraph {
graph [ mindist="3.0" notranslate="true"   margin="16.0"  pad="16.0"  labelloc=t   size="2.5,1.5"  inputscale="72"  compound="true" fontname="NimbusSans-Bold" concentrate="false"  nodesep="0.50"  sep="+16.0"  esep="+12.0"  ranksep="1.0"  maxiter="500"  overlap="prism"  truecolor="false" dpi="72"  splines="spline"  rankdir="TB"]
node [ pin="true"  margin="32.0"  fixedsize="true" fontsize="100.0" fontname="NimbusSans-Bold"]
edge [ weight="300"  len="0.25"  arrowsize="4.0" arrowhead="normal" fontsize="42.0" labeldistance="1.5" tailclip="true" headclip="true" color="#000000" penwidth="1.0" fontname="NimbusSans-Bold"]
"36510" [ ID="36510" pos="162.0,846.0" width="2.50" height="2.50" shape="rectangle" style="filled,rounded" fontcolor="#000000" fillcolor="#f0e68cff" pencolor="#000000" label="d"]
"36507" [ ID="36507" pos="90.0,594.0" width="2.50" height="2.50" shape="rectangle" style="filled,rounded" fontcolor="#000000" fillcolor="#f0e68cff" pencolor="#000000" label="a"]
"36509" [ ID="36509" pos="90.0,342.0" width="2.50" height="2.50" shape="rectangle" style="filled,rounded" fontcolor="#000000" fillcolor="#f0e68cff" pencolor="#000000" label="c"]
"36508" [ ID="36508" pos="162.0,90.0" width="2.50" height="2.50" shape="rectangle" style="filled,rounded" fontcolor="#000000" fillcolor="#f0e68cff" pencolor="#000000" label="b"]
"36507" -> "36509" [ origin="36507" target="36509"  ID="65556" weight="0" style="solid" color="#000000ff" ]
"36509" -> "36508" [ origin="36509" target="36508"  ID="65557" weight="0" style="solid" color="#000000ff" ]
"36508" -> "36510" [ origin="36508" target="36510"  ID="65558" weight="0" style="solid" color="#000000ff" ]
"36510" -> "36507" [ origin="36510" target="36507"  ID="65559" weight="0" style="solid" color="#000000ff" ]
}

I also just tried removing the pos= arguments; made no difference to the dimensions of the svg.

4

FYI Margin is in inches so your defaulting your Node margin to 32.0 inches! and then your setting the font size to 100 (normally would be 11 or 12).

I would suggest removing all you “custom” sizes and add them back one at a time now you know their in inches!!!

Playground here: Untitled / Gordon Smith / Observable (observablehq.com)

1 Like
5

I don’t see any harm in our someday adding dimensions to input units (e.g. 2.0i, 100px, 18pt, etc.) as this could be done in way that is completely backward compatible and it might be constructive.

2 Likes
6

@schmoo2k That solved it, and the observable link saves a lot of time.

@scnorth That would be very welcome to have. As a result of this error, I’m making a note to self to be more diligent about commenting code that generates dot source as to what units values are in, but your solution would be self-documenting.

Also, some units (mindist) have to be deduced by their default values, since the doc doesn’t explicitly say what the units are.

7

Good idea. Filed feature request
https://gitlab.com/graphviz/graphviz/-/issues/2100 to track

1 Like