182 Chapter 6—SVG and MathML
z MathML specification: http://www.w3.org/TR/MathML
z W3C Math working group: http://www.w3.org/Math
z Planet MathML: http://www.w3.org/Math/planet
z MathML Demos: http://www.mozilla.org/projects/mathml/demo6.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 ex-
ample 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 rel-
evant 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.