MathML in SVG

XHTML web pages with Math Markup language, Scalable Vector Graphics, or both have been supported since FireFox 1.5 as long as the MathMl and the SVG were separate. This has precluded physical science diagrams with mathematical formulas for labels in an SVG image. The two had to be rendered separately on the page as seen in the first section of this page below.

The diagram and formulas on this page are NOT image files. Image files are typically used to accomplish both diagrams and formula on web pages. The above are part of the XHTML source code. View the source, control-u in FireFox, to see the code. This means that the above can be read by search engines and can be edited with a simple text editor. No more editing an image file to change a label. And a spell checker can be used on those same labels.

Energy of a rolling marble

$\text{KE}=\frac{1}{2}m{v}^2$

$\text{RE}=\frac{1}{2}I{\omega }^2\text{where}I=\frac{2}{5}m{r}^2\text{and where}\omega =\frac{v}{r}$

A rolling marble possesses both linear kinetic energy (KE) and rotational kinetic energy (RE).

As written above, the diagram is unclear as to which arrow is supposed to be conceptually connected to which energy. As of late 2007, major browsers did not allow the MathMl formulas to appear inside of the SVG diagram. Only in 2008 was this ability fully realized in a major browser distribution, FireFox 3. FireFox 3 Beta 3 and Amaya 10 pre-release allow MathMl in SVG and SVG in MathMl.

$\text{where}I=\frac{2}{5}m{r}^2\text{and where}\omega =\frac{v}{r}$

The above MathMl in SVG have the following appearance in FireFox 3 Beta 3:

At present even the specifications regarding how to properly integrate MathMl into SVG are apparently not entirely specific. The nature of the exactly correct way to do this remains unclear, as a result the following may not work exactly the same way in the future. Possibly as a result of this, the exact placement of the foreignObject in FireFox 3 differs from Amaya 10 pre-release. The foreignObject placement shifts slightly between these two browsers. See the links below for further information.

Like any moron I simply copied examples I saw elsewhere, used a browser to attempt to render the code, and only as a last resort ran the file through a validator. I did alter the examples, dropping the svg: prefixes. The resulting page is still functional in FireFox 3 Beta 3 and Amaya 10 but will no longer pass w3 validation. A Relax NG based validator was used to validate this page on 10 March 2008. The page validated as XHTML5, SVG 1.1 plus MathML 2.0 (experimental) based on the root namespace.

Credits:

MathMl with other standards
SVG in MathML in …
Why you should use mathml

Physci spring 2008 • Physci spring 2008 • Physci • Courses • COMFSM