A Basic Article Combining MathML and SVG

Kyle Siegrist

Abstract

This article shows how to combine XHTML for basic exposition, MathML for mathematical expression, and SVG for graphics. This document can be used as a basic template, along with the files in the list below.

Keywords

Main Contents

  1. Introduction
  2. MathML
  3. SVG

Ancillary Material

MathML Style sheets

1. Introduction

This is a compound XML document that includes basic exposition in XHTML (the rigorous, XML version of HTML), MathML (the Mathematics Markup Language) for mathematical expressions, and SVG (Scalable Vector Graphics) for two-dimensional graphics. All three markup languages are W3C standards, although currently only the Firefox browser supports all of them. Nonetheless, compound documents like this are the future of mathematics on the web. This article can be used as a basic template, along with the CSS style sheet and the JavaScript file. If you have not already done so, please read the introductory article Mathematics with Structure and Style for basic information on best practices, HTML, CSS, and JavaScript.

Recall that the first part of a compound XML document contains declarations about the type of XMLs used, the document type definition, and other information. A document with MathML and SVG should be saved with extension xhtml, and should have the following initial declarations:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
    "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<?xml-stylesheet type="text/xsl" href="mathml.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

You don't really have to understand what all this means, but if you're curious, the first line declares that this is an XML document and gives the version and encoding. The second line declares that this is a compound document with XHTML, MathML, and SVG, and gives a link to a document type definition (DTD), The third line gives a references to an XSL style sheet which is necessary for content MathML (more about that later), and finally the html tag gives a reference to a namespace.

2. MathML

MathML comes in two flavors: Presentation MathML and Content MathML. Both versions encode a great deal about the structure of the mathematical expressions. We do not intend to give a tutorial of MathML in this article (see the resources for that). Rather, we will give a few examples that illustrate what MathML can do.

First, however, you will need to download the MathML style sheets listed in the table of contents and put them in your document directory. The last of these, ctop.xsl is only needed for Content MathML and hence can be omitted if you are just going to use presentation MathML.

Example 1

The roots of the quadratic equation a x 2 + bx +c=0 are given by

x= -b± b2 - 4ac 2a

The mathematical expressions in this example are written in Presentation MathML. The source code for the second expression is given below. Even though MathML is quite verbose, you can probably figure out what each tag does.

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <mrow>
        <mi>x</mi><mo>=</mo>
        <mfrac>
            <mrow>
                <mo>-</mo><mi>b</mi><mo>&plusmn;</mo>
                <msqrt>
                    <msup>
                        <mi>b</mi><mn>2</mn>
                    </msup>
                    <mo>-</mo>
                    <mn>4</mn><mo>&InvisibleTimes;</mo><mi>a</mi><mo>&InvisibleTimes;</mo><mi>c</mi>
                </msqrt>
            </mrow>
            <mrow>
                <mn>2</mn><mo>&InvisibleTimes;</mo><mi>a</mi>
            </mrow>
        </mfrac>
    </mrow>
</math>

Example 2

The following integral is important in the study of normal probability distributions, error functions, and other areas:

z 12 z 2 2

This example is written in Content MathML; the source code is given below. Again, even though the language is verbose, you can probably figure out what each tag does.:

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <apply><eq />
        <apply><int />
    <bvar><ci>z</ci></bvar>
        <lowlimit>
        <apply><minus />
            <infinity />
        </apply>
            </lowlimit>
            <uplimit><infinity /></uplimit>
            <apply><exp />
                <apply><times />
                    <apply><minus />
                        <cn type="rational">1<sep />2</cn>
                    </apply>
                    <apply><power />
                        <ci>z</ci>
                        <cn>2</cn>
                    </apply>
                </apply>
            </apply>
        </apply>
        <apply><root />
            <apply><times />
                <cn>2</cn>
                <pi />
            </apply>
        </apply>
    </apply>
</math>

3. SVG

SVG encodes graphical information in terms of points, lines, circles, and other geometric constructs. As with MathML, it's not the purpose of this article to give a tutorial of SVG (but see the resources for some links). Instead, we content ourselves with an example.

Example 2

The following graphic, adapted from a graphic by David Lane, is constructed from a polygon, a circle, a rectangle, and a path:

The SVG source code for the example is given below. As with MathML, you can probably figure out what each tag does. You might have noticed that each tag begins with svg:. This is to prevent possible name collisions with MathML.

<svg:svg version="1.1"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="430">
<svg:polygon style="stroke:blue; stroke-width:1.5;fill:silver"
    points="10,10 180,10 10,250 50,50 10,10" />
<svg:circle style="stroke:red; stroke-width:2; fill: yellow; opacity: 0.5"
    cx="100" cy="80" r="75" />
<svg:rect style="stroke:green; stroke-width:3; fill: #ded; opacity:.8"
    x="30" y="80" height="120" width="220" />
<svg:path style="fill:red;fill-rule:evenodd;stroke:none"
    d="M 230,250 C 360,30 10,255 110,140 z "/>
</svg:svg>