# SVGs are broken in subtle ways (spacing issues) **URL:** \ **Category:** Help\ **Created:** [January 4, 2025, 4:49pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645 "2025-01-04T16:49:40Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![meator](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/meator/32/1795_2.png) [@meator](https://forum.graphviz.org/u/meator)\ **Post date:** [January 4, 2025, 4:49pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/1 "2025-01-04T16:49:40Z")
Hey. I have noticed that the SVG (and only SVGs, PNGs and JPEGs are fine) tend to insert padding and space where it shouldn’t. Sample 1 has extra padding to the right and Sample 2 has extra space after purple text. I suspect font issues. I have tried to display similar SVGs on Windows, but they were identical. It could rely on the fonts that are available during the DOT → SVG rendering process. How can I solve this? EDIT: I have tried to install Microsoft fonts from [http://corefonts.sourceforge.net](http://corefonts.sourceforge.net). I have tested my dot graphs and observed that in the places where there was excessive whitespace before, there is now not enough whitespace (in all of them, not only in the following example): ![image](https://global.discourse-cdn.com/graphviz/original/2X/5/5c2eaf2bec955b943cb717e1e451cc304a7517cb.png) Sample 1: ```dot digraph { node [shape=plaintext] provider [label=<
My table element
>] } ``` Sample 1 SVG: ![first](https://global.discourse-cdn.com/graphviz/original/2X/a/a6315eb46bbadda093b7553c486e91b4b508d80e.svg) Sample 1 screenshot: ![image](https://global.discourse-cdn.com/graphviz/original/2X/0/0c30ae581c9c5659186b22c43d69af9ebf3c0cf6.png) Sample 2: ```dot digraph { bgcolor="white" ratio=compress size="12" subgraph answers { node [shape=rectangle,penwidth=2] allow_missing [color=red,label="Documentation is NOT linked\n(not recommended)"] error_out [color=yellow,label="Error message is printed\nmeson fails during setup"] online_doc [color=green,label="Tagfile taken from dependency\ndocumentation source taken from online documentation"] direct_link_answer [color=yellow,label="Tagfile taken from dependency\ndocumentation source taken from internal meson subproject\n(for developers only, do not distribute)"] local_link_answer [color=green,label="Tagfile taken from dependency\ndocumentation source taken from installed documentation"] } find_dep_tagfile [label="Find UniSettings dependency tagfile\n(using pkg-config's tagdir or using meson native dependency)"] allow_missing_tagfiles [label="Is \"docs-allow-missing-tagfiles\" set?"] local_link [label="docs-local-link" set?>] direct_link [label="docs-devel-direct-link" set?>] find_dep_tagfile -> allow_missing_tagfiles [label="not found"] allow_missing_tagfiles -> allow_missing [label="Yes"] allow_missing_tagfiles -> error_out [label="No (default)"] find_dep_tagfile -> local_link [label="found"] local_link -> online_doc [label="No (default)"] local_link -> direct_link [label="Yes"] direct_link -> direct_link_answer [label="Yes"] direct_link -> local_link_answer [label="No (default)"] } ``` Sample 2 SVG: ![second](https://global.discourse-cdn.com/graphviz/original/2X/1/1cbb0a64947b4d15b857ec744e1c61ef01f5ecf0.svg) Sample 2 screenshot: ![image](https://global.discourse-cdn.com/graphviz/original/2X/5/5a021909f8383370713aae009ba8939b8c4de456.png) ---
**Author:** ![PolarGoose](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@PolarGoose](https://forum.graphviz.org/u/PolarGoose)\ **Post date:** [January 4, 2025, 6:21pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/2 "2025-01-04T18:21:14Z")
@meator, I’m not an expert. However, I also had many similar problems with the SVG format. Unfortunately, SVG is a terrible format for pictures with text. SVG doesn’t embed fonts. Thus, there is no guarantee that the SVG image will look the same on every system. In my case, for instance, GraphViz was using a different `Times New Roman` font than my browser. I don’t know why. The spacing issues are caused by GraphViz calculating the positions of the text based on the font that it uses at the moment of generation. But when you open SVG, you might use a different font, and thus, the spacing gets messed up because the text sizes are different. This is also why PDF format embeds fonts. I have tested your Dot Graph. I get the same issue on Windows. If you add `node [fontname="Consolas", fontsize=12];` in the beginning, then SVG works properly. It is definitely a problem with the font. You can try different font types to see which one works. The best option would be to choose a different format, like PDF. ---
**Author:** ![meator](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/meator/32/1795_2.png) [@meator](https://forum.graphviz.org/u/meator)\ **Post date:** [January 4, 2025, 7:33pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/3 "2025-01-04T19:33:49Z")
I have done some googling and have stumbled upon [Unwanted space around html font tags with svg output (#1891) · Issues · graphviz / graphviz · GitLab](https://gitlab.com/graphviz/graphviz/-/issues/1891) This looks right it is not going to get solved anytime soon. I would understand if the image was rendering all right on the computer which generated it but was generating wrong on other computers, but the SVG is broken right as it leaves `dot`. ---
**Author:** ![meator](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/meator/32/1795_2.png) [@meator](https://forum.graphviz.org/u/meator)\ **Post date:** [January 4, 2025, 7:37pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/4 "2025-01-04T19:37:19Z")
I have thought that using monospace fonts would fix the spacing (since it’s uniform), but no. ---
**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\ **Post date:** [January 4, 2025, 8:39pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/5 "2025-01-04T20:39:38Z")
Exactly, either use pdf, or `dot -Tsvg:cairo` because cairopango SVG goes to the trouble of embedding font glyphs as paths (shapes) but the graphviz native driver is hope-based and just emits the raw text and hope the downstream renderer does whatever cairopango does internally (when graphviz estimates the size of rendered text). Of course as we’ve learned, sometimes it’s OK and sometimes it’s not. My impression is the problems are a little worse on Windows. It’s probably too late to make -Tsvg default to -Tsvg:cairo ---
**Author:** ![smattr](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/smattr/32/85_2.png) [@smattr](https://forum.graphviz.org/u/smattr)\ **Post date:** [January 5, 2025, 8:31am UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/6 "2025-01-05T08:31:30Z")
> [@scnorth](#): > > `dot -Tsvg;cairo` `dot -Tsvg:cairo`? ---
**Author:** ![PolarGoose](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@PolarGoose](https://forum.graphviz.org/u/PolarGoose)\ **Post date:** [January 5, 2025, 9:20am UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/7 "2025-01-05T09:20:22Z")
@scnorth, Thank you for the suggestion. Unfortunately, `svg:cairo` renders the font very ugly. The picture below shows the comparison between `dot -Tsvg:cairo 1.txt -o 1.svg` and `dot -Tpdf 1.txt -o 1.pdf` ![Untitled](https://global.discourse-cdn.com/graphviz/original/2X/2/23adc2c3b6503e20a733a12e6da40e02099b1987.jpeg) As you can see, the SVG has correct spacing, but the font is very ugly. At the same time, PDF is rendered perfectly, exactly as you would expect. Note: I can’t attach the proper image because this website downsamples it dramatically, and now it is hard to see the difference. You have to generate `pdf` and `svg:cairo` yourself. ---
**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\ **Post date:** [January 5, 2025, 12:40pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/8 "2025-01-05T12:40:11Z")
Thank you, fixed. (But, I’m starting to worry that MacBook keyboard problems are still with us.) ---
**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\ **Post date:** [January 5, 2025, 1:15pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/9 "2025-01-05T13:15:40Z")
The same example, processed with dot -Tsvg:cairo and then loaded into MacOS Safari (latest release) looks good. I’ll attach the image. I’m sorry to see these problems. The most obvious suspect is the port of PangoCairo to the environment that manifests this problem (some version of Windows?) The bug appears to be outside Graphviz. Graphviz is oblivious to how any renderer handles individual glyphs. If someone would like to pursue this, probably that means submitting a bug to the GTK project. Perhaps they would be responsive to an example created by making small modifications to their demo text rendering program at [PangoCairo – 1.0: Rendering with Cairo](https://docs.gtk.org/PangoCairo/pango_cairo.html) It’s tempting at this point to conclude it was a mistake to even have SVG drivers in Graphviz, because of these problems. TGraphviz is certainly dependent on precise text rendering and that looks like the Achilles’ heel of SVG. For better or worse, though, SVG is also quite useful as one of the only structured formats Graphviz generates. It’s interesting that MacOS core graphics doesn’t support SVG in any way. Also, Adobe Illustrator .ai file format is proprietary; apparently they did not find SVG to be sufficient, either, although Adobe was involved with defining its standard. ![Screenshot 2025-01-05 at 7.58.23 AM](https://global.discourse-cdn.com/graphviz/original/2X/c/cbcbb34d8dc1f09cef68dc8a2c9a2dc6a3eced4a.jpeg) ---
**Author:** ![PolarGoose](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@PolarGoose](https://forum.graphviz.org/u/PolarGoose)\ **Post date:** [January 5, 2025, 2:09pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/10 "2025-01-05T14:09:44Z")
I did my test on `Windows 11` using `Graphviz-12.2.1`. I tried to open SVG with different tools, but they all showed the same ugly font rendering. Below is an `svg:cairo` generated on Windows: ![image](https://global.discourse-cdn.com/graphviz/original/2X/f/fdc299f8679acd84e19732b0bc585e185ff92388.png) Below the image I generated on Ubuntu with `svg:cairo`, opened on Windows: ![image](https://global.discourse-cdn.com/graphviz/original/2X/8/84c7d7401ec95c1e0fa7273cedd19f77a0dbab54.png) The rendering is much better. However, here is the pdf generated on Ubuntu and opened on Windows: ![image](https://global.discourse-cdn.com/graphviz/original/2X/9/9313ea1a2ec61f5c90545fea119cc031d5aecb1e.png) It is much better. ---
**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\ **Post date:** [January 5, 2025, 2:44pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/11 "2025-01-05T14:44:21Z")
It’s a little surprising that the default (Times/serif) font looks so ragged when generated in SVG on Windows. It might be instructive to add the `-v` flag when running the command and try to notice what font file is being bound. There’s an outside chance it might help to run `fc-cache` first (in Windows cmd or Powershell) in case fontconfig isn’t finding the right fonts for some reason. ---
**Author:** ![meator](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/meator/32/1795_2.png) [@meator](https://forum.graphviz.org/u/meator)\ **Post date:** [January 5, 2025, 3:56pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/12 "2025-01-05T15:56:22Z")
I am surprised that my issue has sparked such conversation. By the way, [Doxygen has brought me to this issue](https://github.com/doxygen/doxygen/issues/11308). Its [`INTERACTIVE_SVG`](https://www.doxygen.nl/manual/config.html#cfg_interactive_svg) feature relies on the simple SVG outputted by `-Tsvg`. The SVG format is popular for some Doxygen users\[1\] (including myself) for its high quality rendering, scaling and the selectability of text. These graphs are intended to be viewed in my online Doxygen documentation. Would it be possible to bundle some font with the website, use that font to generate the graph and then convince the web browser to use the website’s font (which could be for example a `.woff2` file hosted on the website) to render the SVG? I’m looking for a way to completely remove the reader’s installed fonts from the equation. * * * 1. Doxygen Awesome, a poppular theme for Doxygen, recommends using `-Tsvg`: [Doxygen Awesome: Tips & Tricks](https://jothepro.github.io/doxygen-awesome-css/md_docs_2tricks.html#tricks-graphviz) ---
**Author:** ![PolarGoose](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@PolarGoose](https://forum.graphviz.org/u/PolarGoose)\ **Post date:** [January 5, 2025, 5:42pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/13 "2025-01-05T17:42:10Z")
Also, generated PNG on Ubuntu: ![image](https://global.discourse-cdn.com/graphviz/original/2X/9/94b1b284d2b58546aa22247c0a5b548d7af506d9.png) It is also very good. Much better than `svg:cairo`. I think I know why `svg:cairo` and `pdf` are different. `svg:cairo` renders the font during image generation as if it is a shape, and it uses some default font rendering options like anti-aliasing and so on. `pdf` embeds the font, and then when you open a PDF, the font is rendered according to your screen DPI and font settings. That is why it looks good. Also interesting that fonts in a `PNG` image are rendered decently. But Cairo seems to be using different font rendering settings. ---
**Author:** ![PolarGoose](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@PolarGoose](https://forum.graphviz.org/u/PolarGoose)\ **Post date:** [January 5, 2025, 6:32pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/14 "2025-01-05T18:32:08Z")
Yes, it seems that you can tell Doxygen to use a particular font during SVG generation and add CSS style with the font to all pages. Check that the SVG file uses the correct font name during generation (just open the SVG file and look for `font-family` attribute) ---
**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\ **Post date:** [January 5, 2025, 10:27pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/15 "2025-01-05T22:27:27Z")
That may explain a lot of things. I was going to point out how the Graphviz pango driver enables several font antialiasing options, but it doesn’t help any of this because it would only affect pixel based output. An article unrelated to Graphviz mentions the possible benefits of `shape-rendering="optimizeQuality"` on SVG elements, but I didn’t see any difference locally. Curiously, a Stackoverflow comment says to set it to “optimizeQuality” on the root element, but MDN documentation doesn’t say this is a legal value, and implies it is only valid on circle, ellipse, line, path, polygon, polyline and rect. Also, here’s someone from [10 years ago](https://stackoverflow.com/questions/32051023/pango-cairo-layout-path-method-does-not-respect-kerning) complaining that font kerning is broken in Windows pangocairo, but in win32 fonts only. I realize this is not important, we are just nerding out tonight. ---
**Author:** ![PolarGoose](https://avatars.discourse-cdn.com/v4/letter/p/4491bb/32.png) [@PolarGoose](https://forum.graphviz.org/u/PolarGoose)\ **Post date:** [January 6, 2025, 7:32am UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/16 "2025-01-06T07:32:54Z")
🙂 By the way, interestingly enough, it seems that it is possible to embed the font inside SVG to make it work the same way as PDF does. SVG supports HTML CSS style definitions. Thus, we can convert `.woff` font into BASE64 and put it inside the `.svg` file ```auto ``` Thus, GraphViz could generate SVG with the font inside. ---
**Author:** ![scnorth](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/scnorth/32/89_2.png) [@scnorth](https://forum.graphviz.org/u/scnorth)\ **Post date:** [January 6, 2025, 3:47pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/17 "2025-01-06T15:47:34Z")
So it’s just a bunch of programming? It’s good to know it’s feasible, but it looks difficult within the graphviz core svg driver. After wasting a little time in CoPilot, then looking at the Pango font face object API [Pango.FontFace](https://docs.gtk.org/Pango/class.FontFace.html), I have to conclude this is only possible if Graphviz somehow finds and reads the same font file that PangoCairo has. I have no idea if that is even possible. ---
**Author:** ![steveroush](https://avatars.discourse-cdn.com/v4/letter/s/a9adbd/32.png) [@steveroush](https://forum.graphviz.org/u/steveroush)\ **Post date:** [January 6, 2025, 5:31pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/18 "2025-01-06T17:31:00Z")
- I believe that the cairo svg driver already embeds fonts, though seemingly using a different technique (see [Font FAQ | Graphviz](https://www.graphviz.org/faq/font/#what-about-svg-fonts)) - if you are asking for Graphviz to embed fonts, please [create an issue here](https://gitlab.com/graphviz/graphviz/-/issues/) - If anyone wants to jump in and take on this request, the Graphviz svg driver is pretty approachable (see plugin/core/gvrender\_core\_svg.c) - In the interim, it seems that font embedding can be accomplished with a post-processor (e.g. [https://transfonter.org/](https://transfonter.org/)) ---
**Author:** ![meator](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/meator/32/1795_2.png) [@meator](https://forum.graphviz.org/u/meator)\ **Post date:** [January 6, 2025, 7:34pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/19 "2025-01-06T19:34:54Z")
I was successful with using [web fonts](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Text_styling/Web_fonts) in Doxygen to eliminate the rendering inconsistencies. I have documented my solution at [SVG dot graphs have added padding · Issue #11308 · doxygen/doxygen · GitHub](https://github.com/doxygen/doxygen/issues/11308#issuecomment-2573771030) This was pretty hard to figure out. I was in the middle of writing a post on this topic ranting about it not working, but then I realized where I made the error. I am not a webdev. But using web fonts to solve this should guarantee that the fonts will be available on the target system and that it will be identical to the font used when creating the SVG. ---
**Author:** ![bterwijn](https://sea2.discourse-cdn.com/graphviz/user_avatar/forum.graphviz.org/bterwijn/32/1877_2.png) [@bterwijn](https://forum.graphviz.org/u/bterwijn)\ **Post date:** [March 21, 2025, 11:02pm UTC](https://forum.graphviz.org/t/svgs-are-broken-in-subtle-ways-spacing-issues/2645/20 "2025-03-21T23:02:56Z")
The SVG text layout engine ignores trailing/leading white spaces leading to layout issues. I found this fixes the problem: [preserve trailing white spaces in text of svg\_textspan() (2223eff3) · Commits · Bas Terwijn / graphviz · GitLab](https://gitlab.com/bterwijn/graphviz/-/commit/2223eff37fe5a1319b50216e2635758f63d65684) I’ve send a merge request,