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 and other compatible formats like Adobe Illustrator, EPS, and xfig.

1 pdf2svg

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

2 AI vectorising

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-centre, 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.

Algorithmic glitter text
Carlier et al. (2020)
SuperformulaSVG for web/jasonwebb/SuperformulaSVG-for-web: A generative line art web app using the 2D superformula, with support for SVG and raster exporting
A Generative SVG Starter Kit

9 Libraries of line art

See the free content page.

10 Minimising size of

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.