SVG Output from GraphViz cropped / Image Size Problem with pandoc-plot and Graphviz in SVG

[mfhepp]

Hi all,
in case others are facing a similar issue: When using SVG as the output format for GraphViz figures, the output in both HTML and LaTeX is often cropped. One can avoid this by either using PDF or PNG as target formats, but both are sub-optimal of course. Another alternative is using a wider margin parameter in the DOT code (but also not nice),

Now, I think I found the core issue for this:

The resulting SVG markup contains viewBox values that are smaller than the actual width and height attributes, like so

<svg width="360pt" height="137pt"
 viewBox="0.00 0.00 353.38 125.30" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink">

If you manually set them equal to the width and height, like so

viewBox="0.00 0.00 360.00 137.00"

the issue is resolved, but that will of course be lost the next time you update the graph source-code.

The core issue seems to be a rounding bug in GraphViz, as described here:

https://gitlab.com/graphviz/graphviz/-/issues/1855

Updating GraphViz to version 3.0.0 (available since about a week) might fix this; at least that is what they say in the referenced issue. I could not yet try this due to version conflicts.

But the issue seems to be unrelated to pandoc-plot.

So no action needed; just in case others are facing the same issue and can benefit from my analysis.

[LaurentRDC]

Thanks Martin, we'll leave this issue up for a few weeks

[mfhepp]

Hi Laurent, a quick update:

1. Graphviz 4.0.0 seems to have fixed this on the Graphviz side.
2. Unfortunately, I still get cropped renderings from the very same DOT commands when rendering with pandoc-plot to SVG.

When I try to render the attached test document graphviz-test.md with the DOT commands from https://graphviz.org/Gallery/directed/fsm.html, the resulting SVG has incorrect size values.

When I render the same figure from the attached file fsm.dot with

dot -Tsvg fsm.dot

the size data is correct.

Directly from Graphviz:

<?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 4.0.0 (0)
 -->
<!-- Title: finite_state_machine Pages: 1 -->
<svg width="576pt" height="260pt"
 viewBox="0.00 0.00 576.00 260.10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(0.792769 0.792769) rotate(0) translate(4 324.09)">
<title>finite_state_machine</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-324.09 722.57,-324.09 722.57,4 -4,4"/>
<!-- LR_0 -->
...

From pandoc-plot:

<?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 4.0.0 (0)
 -->
<!-- Title: finite_state_machine Pages: 1 -->
<svg width="807pt" height="365pt"
 viewBox="0.00 0.00 726.57 328.09" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1.11111 1.11111) rotate(0) translate(4 324.09)">
<title>finite_state_machine</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-324.09 722.57,-324.09 722.57,4 -4,4"/>
<!-- LR_0 -->

Maybe you are passing additional parameter to the dot executable that irritate Graphviz?

[mfhepp]

graphviz-test.md

fsm.svg directly from dot

pandocplot9283831827512892202.svg from pandoc-plot

[mfhepp]

It could be that passing a DPI value for a vector output confuses Graphviz, see here. But this is just a wild guess. Scale or size directives when invoking the dot executable would be natural candidates, too.

Edit: Some chance that it is indeed caused by passing a dpi parameter to Graphviz when exporting SVG - see this old discussion.

[mfhepp]

My best guess is that omitting -Gdpi=#{dpi'} when the output format is SVG will do the trick, so the devil is IMO in

https://github.com/LaurentRDC/pandoc-plot/blob/master/src/Text/Pandoc/Filter/Plot/Renderers/Graphviz.hs

graphvizCommand :: Text -> OutputSpec -> Text
graphvizCommand cmdargs OutputSpec {..} =
  let fmt = fmap toLower . show . saveFormat $ oFigureSpec
      dpi' = dpi oFigureSpec
   in [st|#{pathToExe oExecutable} #{cmdargs} -T#{fmt} -Gdpi=#{dpi'} -o "#{oFigurePath}" "#{oScriptPath}"|]

[mfhepp]

Okay, so I think I now know

1. how to fix this
   and
2. a workaround:

You have to set the dpi parameter to 0, either in a YAML configuration file for pandoc-plot

# Default density of figures in dots per inches (DPI).
# This can be changed in the document specifically as well.
dpi: 0

or for an individual figure:

digraph finite_state_machine {
	fontname="Helvetica,Arial,sans-serif"
	node [fontname="Helvetica,Arial,sans-serif"]
	edge [fontname="Helvetica,Arial,sans-serif"]
	rankdir=LR;
	node [shape = doublecircle]; 0 3 4 8;
	node [shape = circle];
	0 -> 2 [label = "SS(B new)"];
...
}

But it would ideal for pandoc-plot to leave out the -Gdpi=#{dpi'} parameter when the output format is SVG and the renderer is Graphviz.

[LaurentRDC]

Thank you Martin for your thorough investigation.

I've pushed a fix which omits the -Gdpi parameter when exporting graphviz figures to SVG, as you have suggested. This will be part of the 1.5.4 version released today.

[LaurentRDC]

Release 1.5.4 is now available via conda. Please give it a try at your earliest convenience

[LaurentRDC]

I'll close this for now. but don't hesitate to reopen if the problem persists.

[mfhepp]

Thanks - sorry for my late reply; I can confirm that this fixed the issue!