Exporting Diagrams as SVG and PDF

Sprotty for itself supports to export SVGs via Ctrl+E or the context menu in diagrams. The diagrams we show therefore also support this feature, together with its twirks and issues. This will show you how to export SVG diagrams of your liking and how to best transform such to PDF, for example for papers.

When exporting SVGs with Sprotty, it will not put the SVG you see on your screen directly into an SVG file, but rather make a copy of it on default zoom level. That means that no shown smart zoom options will be in the exported SVG.

Manual SVG Export

If you want to include the smart zoom readability optimizations in the exported SVG as well, you can also export the SVG manually with the help of your browser's developer tools. In VS Code and Chrome/Chromium/Firefox you can open them with Ctrl+Shift+I or by searching for Developer Tools in VS Code's command palette. In the Elements tab you can click on Select an element to inspect it (Ctrl+Shift+C) and on the area around your diagram in the widget. This should highlight the <svg> tag of the diagram in the dev tools. Copy that and all contents (Right click on the element->Copy->Copy outer HTML) and paste that into a .svg file. In the main <svg> tag, add the following attributes and save the file.

version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"

This SVG can be best viewed in Chrome or edited in Inkscape.

Convert to PDF

This cannot be done with this tool directly, but with external tools after exporting an SVG as described above. To convert the SVGs to PDF I would suggest using Inkscape or Chrome's print to PDF.

Possible Issues

The Texts overlap/have bigger gaps than they are supposed to!

This is probably because your SVG viewer does not support the fonts embedded in the exported SVG or some other issue. This should be resolvable if you install the Overpass Font on your system as we use that in our diagrams and embed them in the SVG as well.

Some parts of the diagram are left out / texts are shown as boxes

Please make sure that the render options for the diagram are set as you want to export it. The smart zoom and other optimizations such as not rendering elements that are not in the viewport might mess with the exported SVG. When in doubt, just deactivate these options for the export.

This is still not working

Please ask us, we will help you.