Scalable vector graphics

“SVG” to its friends

December 23, 2019 — March 1, 2024

computers are awful
faster pussycat
photon choreography

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

Figure 1

1 pdf2svg

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

2 AI vectorizing

Currently free, Vectorizer.AI produces high quality results.

3 potrace

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

4 Inkscape

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

5 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?

6 Processing

Java-based visual wrangling system processing can generate SVGs.

7 Converting formats

7.1 inkscape

7.2 pdf2svg

7.3 dvisvgm

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

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

8 Algorithmically generating

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.

9 Libraries of line art

See the free content page.

10 Minimizing 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

11 References

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