MathJax for SVG

Table of Contents
Description
Download
Usage
Within standalone SVG documents
Within (X)HTML documents including SVG as <object>s
Within (X)HTML documents directly including SVG content
Labels Placement
Specifying the MathJax URL
Browsers Support Status
Author

This page is also available in Russian.

Description

The MathJax4SVG.js script provides support for MathJax in SVG documents.

Currently MathJax renders MathML stuff only in (X)HTML documents. Script does a simple trick: it envelops MathML into XHTML document and injects <script> element pointing to MathJax script into XHTML <head> section.

There are several ways to use SVG content at web pages:

The last two methods preclude the use of scripting, and therefore MathJax4SVG should not be applied to them. 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg [
<!ENTITY it "&#x2062;">
<!ENTITY leqslant "&#x2A7D;">
]>
<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	version="1.1"
	viewBox="0 0 200 200"
	width="200"
	height="200"
	>
	<defs>
		<script xlink:href="MathJax4SVG.js" type="application/ecmascript"/>
	</defs>
	<circle cx="100" cy="100" r="75" fill="lightblue" stroke="navy" stroke-width="2"/>
	<foreignObject x="60" y="85">
		<math xmlns="http://www.w3.org/1998/Math/MathML">
			<msqrt>
				<mi>x</mi>
				<mo>&it;</mo>
				<mi>y</mi>
			</msqrt>
			<mo>&leqslant;</mo>
			<mfrac>
				<mrow>
					<mi>x</mi>
					<mo>+</mo>
					<mi>y</mi>
				</mrow>
				<mn>2</mn>
			</mfrac>
		</math>
	</foreignObject>
</svg>

Note that all MathML entity references should be either resolved or declared in document type declaration.

If width or height attribute not specified, MathJax4SVG.js script set the width and the height of <foreignObject> automatically. 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html
	xmlns="http://www.w3.org/1999/xhtml"
	version="1.1"
	>
	<head>
		<script src="MathJax4SVG.js" type="application/ecmascript"></script>
	</head>
	<body>
		<p>
			<object data="UsageWithinXHTMLObjects.svg" type="image/svg+xml"/>
		</p>
	</body>
</html>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
	xmlns="http://www.w3.org/2000/svg"
	version="1.1"
	width="200"
	height="200"
	>
	<rect x="25" y="25" width="150" height="150" fill="wheat" stroke="orange" stroke-width="2"/>
	<foreignObject x="32.5" y="80">
		<math xmlns="http://www.w3.org/1998/Math/MathML">
			<munderover>
				<mi>∫</mi>
				<mrow>
					<mi>−</mi>
					<mi>∞</mi>
				</mrow>
				<mi>∞</mi>
			</munderover>
			<msup>
				<mi>e</mi>
				<mrow>
					<mi>−</mi>
					<msup>
						<mi>x</mi>
						<mn>2</mn>
					</msup>
				</mrow>
			</msup>
			<mspace width="thinmathspace"/>
			<mi>d</mi>
			<mi>x</mi>
			<mo>=</mo>
			<msqrt>
				<mi>π</mi>
			</msqrt>
		</math>
	</foreignObject>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html
	xmlns="http://www.w3.org/1999/xhtml"
	version="1.1"
	>
	<head>
		<script src="MathJax4SVG.js" type="application/ecmascript"></script>
	</head>
	<body>
		<p>
			<svg
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				width="200"
				height="200"
				>
				<polygon points="25 100 100 175 175 100 100 25" fill="lightgreen" stroke="darkgreen" stroke-width="2">
					<animateTransform
						attributeName="transform"
						type="rotate"
						dur="10s"
						keyTimes="0;.5;1"
						values="0 100 100;90 100 100;0 100 100"
						repeatCount="indefinite"
						additive="replace"
						/>
				</polygon>
				<foreignObject x="10" y="80">
					<math xmlns="http://www.w3.org/1998/Math/MathML">
						<mfrac>
							<mrow>
								<mo>∂</mo>
								<mi>S</mi>
							</mrow>
							<mrow>
								<mo>∂</mo>
								<mi>t</mi>
							</mrow>
						</mfrac>
						<mo>+</mo>
						<mi>H</mi>
						<mo>&#x2061;</mo>
						<mfenced>
							<mfrac>
								<mrow>
									<mo>∂</mo>
									<mi>S</mi>
								</mrow>
								<mrow>
									<mo>∂</mo>
									<mi>q</mi>
								</mrow>
							</mfrac>
							<mi>q</mi>
							<mi>t</mi>
						</mfenced>
						<mo>=</mo>
						<mn>0</mn>
					</math>
				</foreignObject>
			</svg>
		</p>
	</body>
</html>

MathJax4SVG is able to place math labels automatically in SVG figures, as well as in MetaPost or Asymptote. For this purpose it introduces several attributes in custom namespace "https://github.com/urbic/mathjax4svg". Namespace prefix, mj4svg: for example, should be bound to this namespace identifier.

mj4svg:labelPlacement
Label position relative to reference point. The presence of this attribute at <foreignObject> element turns on the labels placement mechanism. All recognized values are self-explaining: "center", "right", "upperRight", "top", "upperLeft", "left", "lowerLeft", "bottom", "lowerRight".
mj4svg:labelX, mj4svg:labelY
Coordinates of label reference point. Default values are "0".
mj4svg:labelOffset
The width of additional gap between label and reference point. Default value is ".3em". 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns:mj4svg="https://github.com/urbic/mathjax4svg"
	version="1.1"
	viewBox="0 0 200 200"
	width="200"
	height="200"
	>
	<defs>
		<script xlink:href="MathJax4SVG.js" type="application/ecmascript"/>
	</defs>
	<rect x="50" y="50" width="100" height="100" fill="seagreen" stroke="darkslategray" stroke-width="2"/>
	<foreignObject mj4svg:labelX="50" mj4svg:labelY="100" mj4svg:labelPlacement="left">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>L</mtext></math>
	</foreignObject>
	<foreignObject mj4svg:labelX="100" mj4svg:labelY="50" mj4svg:labelPlacement="top">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>T</mtext></math>
	</foreignObject>
	<foreignObject mj4svg:labelX="150" mj4svg:labelY="100" mj4svg:labelPlacement="right">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>R</mtext></math>
	</foreignObject>
	<foreignObject mj4svg:labelX="100" mj4svg:labelY="150" mj4svg:labelPlacement="bottom">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>B</mtext></math>
	</foreignObject>
	<foreignObject mj4svg:labelX="50" mj4svg:labelY="50" mj4svg:labelPlacement="upperLeft">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>UL</mtext></math>
	</foreignObject>
	<foreignObject mj4svg:labelX="50" mj4svg:labelY="150" mj4svg:labelPlacement="lowerLeft">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>LL</mtext></math>
	</foreignObject>
	<foreignObject mj4svg:labelX="150" mj4svg:labelY="150" mj4svg:labelPlacement="lowerRight">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>LR</mtext></math>
	</foreignObject>
	<foreignObject mj4svg:labelX="150" mj4svg:labelY="50" mj4svg:labelPlacement="upperRight">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>UR</mtext></math>
	</foreignObject>
	<foreignObject mj4svg:labelX="100" mj4svg:labelY="100" mj4svg:labelPlacement="center">
		<math xmlns="http://www.w3.org/1998/Math/MathML"><mtext>C</mtext></math>
	</foreignObject>
</svg>

MathJax4SVG use "https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js" as a default MathJax URL. You can specify another one as the value of the mj4svg:mjURL attribute (in "https://github.com/urbic/mathjax4svg" namespace). The attribute is placed at the SVG document element.

✓✓✓✓??

Anton Shvetz