Scalable vector graphics

“SVG” to its friends

December 22, 2019 — April 2, 2025

computers are awful
faster pussycat
photon choreography

Suspiciously similar content

The SVG format is the Grand Central Station of vector graphics, with branch lines to PDF and other compatible formats like Adobe Illustrator, EPS, and xfig.

Figure 1

1 Inkscape

Open source Inkscape can do everything, although I find its Adobe Illustrator pretensions (perhaps unfairly) grating. It’s aimed primarily at general vector graphic design, which means the functions I want for sciency stuff are not front-and-centre, but it can be done.

2 Boxy

A fresh option leveraging web technology is Jarosław Foksa’s Boxy, a web app with pseudo-desktop apps for various platforms. I think it is free, but closed source?

3 Processing

Java-based visual wrangling system Processing can generate SVGs.

4 Converting formats

4.1 Inkscape

Inkscape can convert between many formats, including SVG, PDF, EPS, and PNG. It can also be used to convert between vector formats. To convert a PDF to SVG, use the command line:

inkscape -f input.pdf -A output.svg

Although this requires the massive Inkscape GUI to be installed, its results are consistent and high quality, so it’s what I tend to do in practice.

4.2 pdf2svg

pdf2svg is handy in conjunction with (almost) any of the other programs to convert between vector formats.

5 SVG-render

Go to SVG to JPEG/PNG to render a PNG. Docs here.

5.1 dvisvgm

dvisvgm converts DVI files (e.g. mathematics, tikz) to SVG.

dvisvgm dependencies

Note that if ghostscript libraries are not discoverable on your system it will fail to render SVGs correctly. Getting ghostscript installed appropriately can be fiddly on MacOS; On recent Macs it should be sufficient to install MacTex 2023 with the install ghostscript dynamic library option checked. Before MacTex 2023 there are workarounds involving setting the ghostscript library path. For example, if I have Apple Silicon and homebrew ghostscript installed, I can set the following environment variables:

export LIBGS=/opt/homebrew/lib/libgs.dylib

6 Algorithmically generating SVG

Javascript is very good at SVG wrangling. Over at javascript graphics I have a list of libraries for generating SVGs, including Two.js, snap, etc.

More generally, any procedural diagram system can be converted to SVG.

7 Libraries of line art

See the free content page.

8 Minimising size of

Figure 2

Victor Zhou shows how to minimize bloaty SVGs using svgo:

npm install -g svgo
$ svgo test.svg -o - | gzip -cfq9 > test.svgz

9 Vectorizing raster graphics

9.1 Vectorizer.ai

Currently free, Vectorizer.AI produces high-quality results.

9.2 potrace

The classic Potrace converts bitmap images to SVG. Apparently, it is integrated into Inkscape.

10 References

Carlier, Danelljan, Alahi, et al. 2020. “DeepSVG: A Hierarchical Generative Network for Vector Graphics Animation.” In.