About

MathML is a W3C standard for encoding mathematical notation in XML. Browsers have inconsistent rendering support. Firefox implements full MathML rendering. Chrome and Safari offer partial support. If you embed raw MathML into a webpage or document, the output varies across platforms. Converting MathML to SVG produces a deterministic, resolution-independent vector graphic that renders identically everywhere. This tool parses MathML elements - mfrac, msqrt, msup, msub, mover, munder, mtable - and computes a two-pass layout: measurement pass for bounding boxes, then a positioning pass that emits SVG text and path elements.

Limitation: this tool approximates glyph metrics using a monospace-proportional model. Ligatures and complex OpenType math table features (like stretch variants for large delimiters) are simplified. For most algebraic, calculus, and linear algebra expressions, output fidelity is high. For extremely dense notation with deeply nested radicals inside matrices, manual SVG adjustment may be needed. Pro tip: keep your MathML well-formed. A missing closing tag will produce a parse error, not a silent misrender.

Formulas

The converter implements a recursive descent layout algorithm. Each MathML node produces a bounding box with three metrics: w (width), a (ascent above baseline), and d (descent below baseline). Total height is h = a + d.

Fraction layout (mfrac):

w = max(w_num, w_den) + 2p
a = a_num + d_num + g + t
d = a_den + d_den + g

Where p = horizontal padding, g = gap between fraction bar and content, t = fraction bar thickness (1px default).

Superscript offset (msup):

shift = a_base × 0.6
scale = 0.7 × fontSize_parent

Glyph width estimation:

w_char ≈ fontSize × k

Where k = 0.6 for normal glyphs, 0.62 for italic, 1.0 for wide operators like ∑.

The converter uses a hidden SVG measurement element with getComputedTextLength() for precise width calculation when available, falling back to the coefficient model above.

Reference Data

MathML Element	Purpose	SVG Mapping	Example
mi	Identifier (variable)	<text> italic	x, y
mn	Number	<text> normal	42, 3.14
mo	Operator	<text> normal	+, −, =
mfrac	Fraction	Stacked <text> + <line>	ab
msqrt	Square root	<path> radical + <line> vinculum	√x
mroot	Nth root	<path> + index <text>	³√x
msup	Superscript	Offset <text> smaller	x²
msub	Subscript	Offset <text> smaller	x_i
msubsup	Sub + Superscript	Both offsets	x_i²
mrow	Horizontal group	Sequential layout	Groups child elements
mover	Over accent	Stacked above	x
munder	Under accent	Stacked below	Limit notation
munderover	Under + Over	Both stacked	n∑i=0
mtable	Table/Matrix	Grid of <text> elements	Matrices, equation systems
mtr	Table row	Row in grid	Used inside mtable
mtd	Table cell	Cell in grid	Used inside mtr
mtext	Literal text	<text> normal	Annotations, words
mspace	Whitespace	Horizontal offset	Width attribute controls gap
menclose	Enclosure	<rect> or <line>	Box, strike, radical
mpadded	Adjusted spacing	Modified bounding box	Fine-tuning layout
mfenced	Fenced group (deprecated)	Parentheses + content	(a, b)
math	Root element	<svg> root	Container for all MathML

Frequently Asked Questions

The converter supports Presentation MathML elements: math, mi, mn, mo, mrow, mfrac, msqrt, mroot, msup, msub, msubsup, mover, munder, munderover, mtable, mtr, mtd, mtext, mspace, mpadded, menclose, and mfenced. Content MathML (apply, ci, cn) is not supported - convert it to Presentation MathML first.

Browser MathML renderers use the OpenType MATH table for precise glyph metrics, stretch variants, and kerning. This tool estimates character widths using a coefficient model where width ≈ fontSize × 0.6 for normal glyphs. For most expressions, the difference is under 2px per character. Deeply nested expressions may accumulate small layout shifts.

Yes. The SVG output uses standard elements: text, line, rect, and path. All text remains as live text elements with font-family declarations. You can open the SVG in any vector editor, reposition elements, change colors, or convert text to outlines for font-independent rendering.

Stretchy delimiters (parentheses, brackets, braces) are scaled vertically using SVG transform attributes. The converter calculates the total height of the enclosed content and applies a scaleY transform to the delimiter glyph. For very tall expressions (height exceeding 3× the base font size), the tool switches to a multi-segment path construction for braces.

The converter uses DOMParser in XML mode. Malformed XML produces a parsererror element in the DOM tree, which the tool detects and reports as a specific error message indicating the line and nature of the problem. Missing namespace declarations are handled by attempting both with and without the MathML namespace URI (http://www.w3.org/1998/Math/MathML).

The converter defaults to a serif font stack (Times New Roman, STIX Two Math, Latin Modern Math, serif) which matches traditional mathematical typesetting. If the user's system lacks these fonts, the SVG will render with the browser's default serif, which may alter spacing. For guaranteed portability, convert text to paths in a vector editor after export.