How MathJax Renders Crisp Math with Inline SVG

MathJax delivers sharp, high-resolution mathematical formulas across all modern web browsers by converting LaTeX, MathML, or AsciiMath markup directly into inline Scalable Vector Graphics (SVG). This article explains the underlying mechanism of MathJax’s SVG rendering pipeline, detailing how it parses mathematical syntax, converts characters into precise vector paths, calculates typography metrics, and injects self-contained SVG DOM elements that scale infinitely on any display.

Input Parsing and Internal Tree Construction

The rendering process begins when MathJax identifies mathematical notation within a web page. MathJax passes this raw input through an input processor specific to the syntax used (such as LaTeX or MathML).

The processor converts the markup into an internal Abstract Syntax Tree (AST) called the Math Item format. This tree structure represents the semantic hierarchy and spatial relationships of the formula, defining operations, fractions, radicals, superscripts, subscripts, and matrices as connected nodes.

Vector Path Mapping and Font Independence

Unlike traditional web typography that relies on system fonts or external web font files (WOFF/WOFF2) to render characters as text, MathJax’s SVG output mode bypasses browser font-rendering engines entirely.

MathJax includes pre-compiled vector definitions for every mathematical glyph across its supported font sets (such as MathJax TeX, STIX, or Neo Euler). When generating an equation:

MathJax references its internal glyph database.
It translates each symbol, variable, and delimiter into an SVG <path> element composed of explicit bezier curves and coordinate points.
Common glyphs are stored in a hidden <defs> block within the SVG and referenced via <use> tags, optimizing memory usage and DOM size.

Because the glyphs are drawn as explicit vector paths, the mathematical symbols are immune to missing local fonts, browser-level font-substitution bugs, and cross-platform font-smoothing differences.

Geometric Layout and Positioning Engine

Mathematical typesetting requires precise spatial alignment that standard HTML and CSS layout models cannot natively achieve. MathJax uses an internal layout engine to compute exact dimensions:

Bounding Box Calculation: MathJax calculates the width, height, and depth (distance below the baseline) of every glyph and sub-expression.
Coordinate Mapping: Using a virtual coordinate system (typically 1000 units per em), the engine computes exact (x, y) coordinates for accents, limits, fraction bars, and radical signs.
Transform Groups: Elements are positioned inside nested SVG <g> (group) elements with transform="matrix(...)" or transform="translate(x, y)" attributes, ensuring that complex structures like matrices and nested fractions align correctly.

Inline SVG DOM Injection and Browser Scaling

Once the geometry is calculated, MathJax generates an inline <svg> element and inserts it directly into the HTML document at the equation’s location.

<mjx-container class="MathJax" jax="SVG">
  <svg xmlns="http://www.w3.org/2000/svg" width="4.5ex" height="2.2ex" viewBox="0 -750 2000 1000">
    <defs> ... </defs>
    <g stroke="currentColor" fill="currentColor" ...> ... </g>
  </svg>
</mjx-container>

Using inline SVG provides several rendering advantages:

Infinite Scalability: Because SVGs are vector-based, the browser calculates rendering paths dynamically. Equations remain crisp and pixel-perfect at any zoom level, high-DPI (Retina) display, or print resolution.
CSS Integration: The root SVG inherits surrounding font sizes using relative CSS units (ex and em) and uses currentColor for fills and strokes, allowing formulas to match adjacent text size and color automatically.
Layout Stability: MathJax sets explicit width, height, and viewBox attributes on the SVG container, preventing layout shifts (Content Layout Shift) while the page renders.

Through this combination of AST parsing, standalone vector path extraction, and inline SVG construction, MathJax ensures uniform, crisp mathematical rendering across every browser and operating system without external rendering dependencies.