Posted on 2020-03-06
by Oleg Grenrus

I occasionally write blog posts with some math. So far I have been using `latex-formulae`

family of packages. This week Andres Löh asked whether can be rendered as SVGs.

The answer is **yes**.

The `preview`

CTAN package, and the `dvisvgm`

tool make it very easy. I forked `latex-formulae`

into `latex-svg`

to use above mentioned tools. There are three packages on Hackage now:

- latex-svg-image: render LaTeX formulae to SVG images
- latex-svg-pandoc: render LaTeX formulae in pandoc documents
- latex-svg-hakyll: render LaTeX formulae in hakyll pages

To mention some differences between `latex-formulae`

and `latex-svg`

:

`latex-svg-image`

uses only`latex`

and`dvisvgm`

, ImageMagick*is not required*. You don't need to tweak`policy.xml`

to allow rasterization of PostScript. (See this StackOverflow question).`latex-svg-image`

supports global cache (off by default), which speedups`hakyll`

site builds. My blog builds in 20 seconds instead of three minutes with empty cache. I wouldn't worry about space usage too much, the cache contents take 15M after building my blog. which is way less than the size of`site`

executable.`latex-svg-hakyll`

has`initFormulaCompilerSVGPure`

variant, which doesn't need`IO`

to be created. You don't need to thread`renderFormulae`

function through. Together with global cache, the perfomance penalty is small.One drawback is that result pages become bigger (and slower). For example a formula-heavy https://oleg.fi/gists/posts/2018-12-12-find-correct-laws.html is

`576k`

in size with`latex-formulae`

`2819k`

in size with`latex-svg`

(almost 5 times larger).

Rendering SVG images is also more CPU expensive.

Otherwise the API and module names are the same. If you are already a user of `latex-formulae`

you can easily migrate to `latex-svg`

.

At the end few examples. We can type set quadratic formula

or an exponent tower like

or a charterization of equality of real numbers using "downsets"

from a recent post by Brent Yorgey.

The difference is clearly visible on high-DPI displays, for example mobile devices.

Site proudly generated by Hakyll