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
Browsers Support Status
Supported Browsers
Not Supported Browsers
Author

This page is also available in Russian.

Description

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.

Download

SourceForge project page is at http://sourceforge.net/projects/mathjax4svg/.

The latest version of MathJax4SVG script can be downloaded from SourceForge.

Usage

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"?>
<!--
$URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageWithinStandaloneSVG.svg $
$Id: UsageWithinStandaloneSVG.svg 7 2014-06-06 07:16:01Z concyclic $
-->
<!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"?>
<!--
$URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageWithinXHTMLObjects.xhtml $
$Id: UsageWithinXHTMLObjects.xhtml 5 2014-06-05 01:35:35Z concyclic $
-->
<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"?>
<!--
$URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageWithinXHTMLObjects.svg $
$Id: UsageWithinXHTMLObjects.svg 4 2014-06-03 13:58:53Z concyclic $
-->
<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"?>
<!--
$URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageWithinXHTML.xhtml $
$Id: UsageWithinXHTML.xhtml 2 2014-05-31 18:46:46Z concyclic $
-->
<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 "http://mathjax4svg.sf.net". 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"?>
<!--
$URL: svn+ssh://concyclic@svn.code.sf.net/p/mathjax4svg/code/sources/site/examples/UsageLabelsPlacement.svg $
$Id: UsageLabelsPlacement.svg 7 2014-06-06 07:16:01Z concyclic $
-->
<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns:mj4svg="http://mathjax4svg.sf.net"
	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>

Anton Shvetz

SourceForge.net Logo