LaTeX to SVG: equations, TikZ pictures and pages
Convert LaTeX to SVG with dvisvgm, from a DVI or a PDF, with text as paths so it looks right anywhere. Also MathJax for equations, and a browser route.
Published
The standard tool for turning LaTeX output into SVG is dvisvgm, a command-line program that CTAN lists as part of both TeX Live and MiKTeX. Compile the document to DVI with latex, then run dvisvgm --no-fonts on the result, and you get an SVG cropped to the content with every letter drawn as a path. If you already have a PDF, convert that instead, with dvisvgm, with Inkscape, or in a browser. For a single equation on a web page, MathJax draws LaTeX mathematics as SVG directly.
The options quoted here are from the dvisvgm manual for version 3.6.1, Inkscape’s command-line manual, and the MathJax 4.0 documentation.
The short version
latex formula.tex
dvisvgm --no-fonts formula.dviThe first command writes formula.dvi. The second writes formula.svg. That is the whole conversion for a one-page document. These are terminal commands, and they are the same on every system that has a TeX distribution installed.
A document made for one picture
To export one equation or one TikZ picture, give it a document of its own:
\documentclass{article}
\pagestyle{empty}
\begin{document}
\[ e^{i\pi} + 1 = 0 \]
\end{document}\pagestyle{empty} removes the page number, which would otherwise be part of the picture. No cropping is needed after that. The dvisvgm manual says the --bbox option “defaults to min”, and min “computes the minimal/tightest bounding box”, so the SVG is trimmed to the ink on the page.
The standalone class does the trimming on the LaTeX side instead. CTAN describes it as letting “TeX pictures or other TeX code” be compiled on their own, and says “by default the preview package is used to display the typeset code without margins”. It matters most for the PDF route below, where the SVG takes the size of the PDF’s page:
\documentclass{standalone}
\usepackage{tikz}
\begin{document}
\begin{tikzpicture}
\draw (0,0) circle (1);
\node at (0,0) {$r=1$};
\end{tikzpicture}
\end{document}From DVI with dvisvgm
DVI is the route dvisvgm was built for, and the one with the most control.
| Option | What the manual says it does |
|---|---|
--no-fonts (-n) | “dvisvgm doesn’t create SVG font elements but uses paths instead.” The files “tend to be larger but are concurrently more compatible” |
--font-format=woff2 (-f) | Embeds the fonts as WOFF2, WOFF or TTF instead of SVG fonts |
--exact-bbox (-e) | Computes “the precise bounding box of each character”, for when the edge of a letter is clipped |
--bbox=fmt (-b) | Sets the bounding box: min, dvi, papersize, a paper size such as A4, or one length to add as a margin round the minimal box |
--page=ranges (-p) | Chooses pages. Without it dvisvgm “converts only the first page and not the whole document” |
--output=pattern (-o) | Names the files. The default is %f.svg for one page and %f-%p.svg for several |
--precision=digits (-d) | Sets the maximum number of decimal places |
Why —no-fonts matters
Without it, dvisvgm embeds the letter shapes as SVG <font> elements. Its manual is frank about the result: “only few SVG renderers support these elements. Most web browsers and vector graphics applications don’t evaluate them properly so that the text components of the resulting graphics might look strange.”
So choose by where the SVG is going:
- A cutting machine, a laser, a plotter, a drawing program, a slide: use
--no-fonts. Every glyph is an ordinary filled path and nothing depends on a font. - A web page, where the text should stay selectable: use
--font-format=woff2. The manual notes that most web browsers support WOFF and WOFF2 but “only few external SVG renderers” do.
A clipped letter at the edge of the picture is the other common fault. The manual explains that by default the size of each glyph is taken from the font’s metrics, which “don’t necessarily correspond with the bounds of the visual glyphs”, and that --exact-bbox analyses “the actual shape of each character” instead.
Several pages
SVG has no pages, so dvisvgm writes one file for each: report-01.svg, report-02.svg and so on.
dvisvgm --no-fonts --page=1-5 report.dviFrom PDF
If the document only compiles with pdflatex, xelatex or lualatex, start from the PDF.
With dvisvgm:
dvisvgm --pdf formula.pdfTwo things differ from the DVI route. The bounding box cannot be changed: “SVG documents generated from PDF and PostScript always inherit the bounding boxes of the input files”, which is why a standalone document helps. And dvisvgm needs a helper to read the PDF. The manual says it uses Ghostscript if it finds a version older than 10.01.0, and otherwise mutool, part of MuPDF, which must be “present in a directory which is part of the system’s search path”. If the command fails on a new system, a missing mutool is the first thing to check. When Ghostscript does the work, the manual says text is “always converted to path elements”.
With Inkscape:
inkscape --pages=1 --pdf-poppler --export-type=svg formula.pdfInkscape’s manual says its default PDF import stores text as text, and that with --pdf-poppler “text consists of groups containing cloned glyphs where each glyph is a path”. Use the second when the SVG must not depend on fonts. Adding --export-plain-svg leaves Inkscape’s own editor data out of the file.
In a browser, with nothing to install: PDF to SVG converts one page of a PDF to an SVG made of the page’s own vector paths. It reads the file on your device and does not upload it.
We tested it on a real LaTeX document, the 80-page manual of the LaTeX svg package from CTAN. Page 1 became an SVG of 210 × 297 mm with a viewBox of 0 0 595.276 841.89, which is A4 in points. It held 127 paths and no <text> elements, and the tool’s list of things left out was empty: every font was embedded in the PDF, so every letter came through as an outline. The file was 1.2 MB, because a full page of text is a great many outlines. Expect the size to follow the amount of text.
The page keeps its paper size, so for one equation or figure compile it with the standalone class first, or trim the result with Crop SVG.
Just an equation, on the web
MathJax typesets LaTeX mathematics in a web page, and one of its output formats is SVG. Its documentation says this output “is relatively self-contained” so “it can be saved and used as an independent image”, and adds the catch: “because mathematical characters in SVG output are produced by SVG paths, not characters in a font, they can’t be copied and pasted.”
One setting decides whether a copied equation works on its own. With fontCache set to 'local', the default, “each expression has its own cache within the SVG image itself”, which “makes the SVG self-contained”. With 'global', a single cache serves the whole page, which “makes the images dependent on other elements of the page”, so an SVG copied out of such a page can come out blank. With 'none', every character is written as an explicit path.
To lift an equation from a page that uses MathJax’s SVG output, copy the <svg> element with the browser’s developer tools. Download an SVG from a website shows how.
MathJax typesets mathematics, not whole documents, so for a TikZ picture or a page use one of the routes above.
Check the result
Open the SVG in the SVG viewer. It shows the size, the viewBox and a count of what is inside.
| What you see | Cause | Fix |
|---|---|---|
| Letters are wrong, missing or oddly spaced | The file uses SVG <font> elements, which most programs do not support | Convert again with --no-fonts |
| A letter is cut off at the edge | Glyph sizes were taken from the font’s metrics | Add --exact-bbox |
| The page number is in the picture | The document has a page style | Add \pagestyle{empty} |
| A whole empty page round the figure | The SVG came from a PDF and took its page size | Use the standalone class, or crop the SVG |
| Only the first page was converted | That is dvisvgm’s default | Add --page=1- for every page, or a range such as --page=2-4 |
dvisvgm --pdf fails | No usable Ghostscript or mutool was found | Install MuPDF’s mutool, or convert the DVI instead |
| The count shows text elements | The converter kept live text | Use --no-fonts, or Inkscape with --pdf-poppler |
Using the SVG
With the text as paths, the file behaves like any other drawing. Set an exact size with Resize SVG, since a formula exported at the size of 10-point type is small for a sign or a slide. To cut or engrave it, see SVG for Cricut and vinyl cutters. For the opposite direction, putting an SVG into a LaTeX document, see SVG in LaTeX.