# LaTeX to SVG

Render a LaTeX formula to a standalone SVG file with KaTeX 0.19.1, the math typesetting engine used across the web. Pick display or inline mode and a font size in pixels. The file is sized from KaTeX's font metrics and embeds KaTeX's stylesheet and only the fonts the formula uses, so it looks the same everywhere it is shown in a web browser. Made for web pages, docs, blogs and slides built in the browser.

## Frequently asked questions

### How is the SVG made without a browser?

KaTeX typesets the formula to HTML on the server, and the tool wraps that HTML in an SVG foreignObject together with KaTeX's stylesheet and the woff2 font files the formula needs, embedded as data URLs. The width and height come from KaTeX's font metrics and the real glyph widths of those fonts, so the canvas fits the formula with a small margin.

### Where does the SVG display correctly?

It displays in Chrome, Edge, Firefox and Safari, whether you use it as an img element, a CSS background, inline SVG markup or open the file directly, and in apps built on a browser engine. Vector editors and converters such as Inkscape, Illustrator, Figma's SVG import, librsvg and resvg do not render HTML inside foreignObject, so the formula appears blank there.

### Why is the formula not converted to vector paths?

No permissively licensed library in this tool's stack lays out KaTeX's math as glyph outlines, and a separate typesetter would not match KaTeX's output. Embedding KaTeX's own HTML keeps its exact spacing and fonts. If a vector editor needs outlines, open the SVG in a browser and print it to PDF, which keeps the formula as vector shapes that editors can import.

### What is the difference between display and inline mode?

Display mode typesets the formula as a standalone equation: large operators carry their limits above and below, fractions stay full size and \tag numbers are allowed. Inline mode uses the compact text style meant for formulas inside a sentence, with smaller fractions and limits placed beside sums and integrals.

### What does the font size control?

It sets the size of the math font in pixels, from 8 to 200, as a whole number, with 24 as the default. The SVG's width and height scale with it, so a formula rendered at 48 pixels is twice as large as one at 24. Because the result is vector based, you can still scale it later with CSS.

### Which LaTeX commands are supported?

Everything KaTeX 0.19.1 supports: fractions, roots, sums and integrals, matrices and environments such as aligned, cases, pmatrix and array, accents, arrows, \mathbb, \mathcal, \mathfrak, \text, \color and \tag. You can define your own macros with \def or \newcommand inside the formula. Full documents, \usepackage, TikZ and the mhchem \ce commands are not available.

### What happens when the formula has an error?

No file is produced and the tool tells you what went wrong and at which character, counted from 1. It names unknown commands, unbalanced braces, double superscripts and commands missing an argument, so you can jump straight to the spot and fix it.

### Are there any limits?

A formula can be up to 10,000 characters long, macros may expand at most 1,000 times, and sizes given to commands such as \rule, \kern and \hspace are capped at 100em. Commands that load or link outside content, such as \href, \url and \includegraphics, are disabled and appear as unsupported red text.

### What color and background does the SVG have?

The background is transparent. When you paste the SVG markup into an HTML page, the formula takes the text color of the surrounding element, and as an image file it is drawn in black. Use \color or \textcolor inside the formula to set colors that stay fixed everywhere.

### How large is the file and is it accessible?

Each file carries KaTeX's stylesheet of about 24 KB and every font face the formula uses as base64 woff2, so a typical formula is 75 to 150 KB. Characters that KaTeX's fonts lack, such as Chinese or Japanese inside \text, use the viewer's own fonts. The SVG has role img with the LaTeX source as its title and aria-label for screen readers.

Your ad here?

[Email us](mailto:hi@dennn.is?subject=Advertising%20on%20OneClick%20Pro)

[Ad The agent-ready plugin suite for WordPress.](https://sleekwp.com/?ref=oneclickpro)