# Beautiful SVG diagrams with TikZ and dvisvgm

28 Jan '18

Using dvisvgm, you can produce beautiful SVGs, for example the diagrams in my git merge vs rebase tutorial.

Installing LaTeX is the first step. Windows users want MikTeX, and can follow the Ghostscript installation instructions on the dvisvgm FAQ.

On macOS, it’s a bit more involved. First, use MacTeX, which can be installed with homebrew. You’ll also need Ghostscript if you want things like fonts to work properly with dvisvgm.

$brew cask install mactex$ brew install ghostscript


dvisvgm is installed with MacTeX. In the current version (2.1.3), you also need to tell dvisvgm where to find Ghostscript. I’ve submitted a patch for it to work automatically, but that isn’t in MacTeX yet. To do this, add the following to your .bash_profile:

export LIBGS="$(brew --prefix ghostscript)/lib/libgs.9.dylib"  Or, for Fish shell fans, put this in your ~/.config/fish/config.fish file: set -x LIBGS (brew --prefix ghostscript)/lib/libgs.9.dylib  Then, make sure dvisvgm finds Ghostscript. You’ll have to make sure your shell reloads the changes to .bash_profile. $ source ~/.bash_profile
$dvisvgm \ --clipjoin \ --bbox=papersize \ --page=1- \ example.dvi  The dvisvgm options are important. --clipjoin prevents clipping issues. --bbox=papersize instructs dvisvgm to use the papersize information in the DVI file. Some other options for --box, dvi and preview do not work reliably when I tried them, especially if your TikZ coordinates can be negative (easy to do). Finally, and this is awesome, since you can have multiple TikZ pictures in one TeX file, --page=1- tells dvisvgm to process all pages, and output them to separate SVG files. Nice. And this is the resulting SVG: I have performed one extra operation on the file. SVGO optimised SVG files by stripping out unnecessary rubbish and greatly reduces the filesize of SVG files. The only downside is you’ll need npm installed. (I hate NPM and Javascript, but SVGO is really the best thing out there to optimise SVG files.) $ brew install npm
$npm install -g svgo  SVGO has loads of options, too many to specify on the CLI. You can download the config.yml file I use, or use this SVGO GUI to try them out yourself. $ svgo --config=config.yml example.svg


And that’s it!

Older