6. SVG and MathML

Just two paragraphs are devoted to the vector standard SVG and the Mathematical Markup Language MathML in the HTML5 specification. Yet the integration of these two XML dialects is another milestone on the way toward web applications of the future. Whereas MathML delights primarily the science sector, everyone profits from SVG: Incorporating a standardized vector format into the browser is long overdue. The topic SVG alone fills entire books and would be far beyond the scope of this book, just as a detailed guide to MathML would not be appropriate here either. So in this chapter, we will only discuss the integration of SVG and MathML in an HTML5 document.

Prerequisite for using SVG and MathML in HTML5 is of course the implementation of both components in the browser. In addition, the parser also has to recognize svg and math elements and be able to pass their values to the layout engine to be represented as a graphic. At the time of this writing, only Firefox 4 fulfilled all the requirements. Figure 6.1 shows the result using the example of three MathML formulae with corresponding SVG graphics.

Figure 6.1 MathML and SVG in action

6.1 MathML

To explain the necessary markup, let’s use the example with the circle: In Listing 6.1 you can see the source code for the formula to calculate the radius r of a circle with a given area A.

Listing 6.1 MathML markup and formula for circle radius with given area

<math>
  <mrow>
    <mi>r</mi>
    <mo>=</mo>
    <msqrt>
      <mfrac>
        <mrow>
          <mi>A</mi>
        </mrow>
        <mrow>
          <mn>&Pi;</mn>
        </mrow>
      </mfrac>
    </msqrt>
  </mrow>
</math>

Each MathML block within an HTML5 document begins with <math> and ends with </math>. In between, you have optional tags for defining the formula—in our case, six different ones, introduced in the order in which they appear in Table 6.1.

Table 6.1 The MathML tags of Listing 6.1 and their meaning

The element mrow for grouping expressions appears three times: once for the whole expression and then twice more for distinguishing between numerator and denominator in the division mfrac. Radius r and area A are represented as mi elements, the equals sign is represented as a mo element, and the root expression is formed with a msqrt element. For pi we use the mn element in combination with the MathML entity Π—one of more than 2,000 MathML entities, which we could also have written as Unicode symbol Π (GREEK CAPITAL LETTER PI).

The formula for calculating the diagonal of the square in Figure 6.1 contains another entity as a multiplication sign, × (as Unicode symbol &#x00D7; MULTIPLICATION SIGN), and for squaring the rectangle sides a, b in the center example, we use the msup element (sup for superscript).

Of course, these three MathML examples only show the tip of the iceberg. Starting points for exploring the world of MathML can be found on the following websites. Do not miss the MathML Basics examples on the Mozilla project demo page. You will be surprised to see that writing complicated formulas is made possible by MathML! Check out these websites to learn more about MathML:

• MathML specification: http://www.w3.org/TR/MathML

• W3C Math working group: http://www.w3.org/Math

• Planet MathML: http://www.w3.org/Math/planet

• MathML Demos: http://www.mozilla.org/projects/mathml/demo

6.2 SVG

To the right of the relevant MathML formula, you can see the corresponding SVG graphic that illustrates the formula’s components. Let’s again stick with the example of the circle and look at the SVG code in Listing 6.2 for the circle graphic in Figure 6.1.

Listing 6.2 The SVG source code for the circle graphic

<svg width="100" height="100">
  <circle cx="50" cy="50" r="45"
          fill="none" stroke="black" />
  <path d="M 50 50 h 45"
        stroke="black" stroke-dasharray="5,5"/>
</svg>

At the beginning of the SVG block, we now have <svg> and at the end </svg>. In contrast to MathML, the start tag also specifies the width and height of the graphic, reserving the corresponding amount of space on the HTML page. The circle is a circle element with the center cx/cy and the radius r. The attributes fill and stroke determine what the circle looks like.

The dashed line to indicate the radius is created via a path element whose geometry data is determined in its d attribute. Similar to the canvas element, SVG allows not only lines, but also complex curves in open or closed form as polygons. The syntax for geometry instructions in the d attribute uses numbers for coordinates plus letters for identifying the path type, which follows the relevant abbreviation: So, d="M 50 50 h 45" means Move to point 50/50 and then draw a horizontal line to the right with a length of 45.

The square and rectangle demonstrate that other notations are also possible. Capital letters indicate absolute movements; lowercase letters indicate relative movements. The square’s diagonal is created with d="M 10 90 L 90 10". That would be the equivalent of Move to point 10/90 and then draw a line to point 90/10. The rectangle’s diagonal is done with d="M 5 80 l 90 -75", which means Move to point 5/80 and then draw a line from there to the point located 90 pixels to the right and 75 pixels up.

The dashed lines for the circle radius and the diagonals for the square and rectangle are created by the attribute stroke-dasharray, a feature that is unfortunately missing in the Canvas specification. Its attribute value determines the switch between draw line and insert space, and the switching process is repeated until the line is finished. For more complicated patterns, any number of values separated by commas can be entered.

Last but not least, the geometric forms square and rectangle are two rect elements with x, y, width, and height attributes, which means we have covered all elements and attributes appearing in the SVG code of the graphics. Of course, the same applies here as with MathML: This is just the tip of the iceberg, and this time really just the tiniest top bit of it. Beneath, geometric shapes of all kinds are lurking, as are mighty path drawing methods, text layouts, transformations, freely definable coordinate systems, filters, gradients, symbols, masks, patterns, compositing, clipping, scripting, styling, and even animations.

If you want to dive more deeply into the topic SVG, you should definitely invest in a book on SVG. The following links offer further opportunities to start exploring the topic online:

• The SVG specification: http://www.w3.org/TR/SVG11

• An SVG Primer for Today’s Browsers: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html

• W3C SVG Working Group: http://www.w3.org/Graphics/SVG

• Learn SVG: The Web Graphics Standard: http://www.learnsvg.com

Summary

With the arrival of IE9, all browsers finally offer native SVG support, after ten years of vector standard. We hope the same will apply to MathML; its integration in the HTML5 specification will play its part, just as it did with SVG. As essential components of the new web platform, MathML, and especially SVG, will certainly play an even more important role in the future.