The Journal of Online Mathematics and Its Applications, Volume 7 (2007)
Scalable Vector Graphics, David Lane

I. A Mathematical Gallery of SVG

1. Introduction

SVG (short for Scalable Vector Graphics) is the open source Worldwide Web Consortium (W3C) recommendation for two dimensional vector graphics. The current specification is SVG 1.1 (from January 2003).

The combination of SVG and JavaScript is a powerful platform for creating interactive graphics, comparable to Flash and Java in some respects. However, until now SVG has been largely overlooked, mainly because of incomplete browser support. This situation improved significantly in 2006 with the release of two browsers with native SVG support, Firefox and Opera, and the ongoing SVG development of others. Therefore this seems like a good time to review the current status of SVG, and explore some of the possibilities as a format for educational "mathlets."

Advantages of SVG

Like XHTML and MathML, SVG is a type of XML, so the files are uncompiled plain text--human readable and editable in your favorite text editor. No special authoring tools are required.

Because they're uncompiled, you can learn SVG can by copying and editing the code of others (such as the examples below). The format is quite easy, especially if you are already familiar with HTML or XML. In addition to these, there are many other good (and some out of date) tutorials and examples online. See the appendix on SVG Links and Resources for details.

If you don't like coding by hand, there are software tools available which you can use to create SVG's in a graphical environment. These include Adobe Illustrator and the open source program Inkscape.

SVG can be scripted using JavaScript and the SVG Document Object Model (SVG-DOM), an extension of the HTML DOM Level 2 familiar to web developers. SVG elements can also be animated using the Synchronized Multimedia Integration Language (SMIL), although the Firefox browser has yet to implement this feature.

Browser Support

Full browser support for SVG has been slow to develop, although the same could be said of MathML and PNG, both W3C recommendations as well. The best choices for viewing SVG are Opera 9 and Firefox 1.5+, both of which have native (no plug-in required) SVG support with a few limitations (Neither of these supports filters or embedded fonts, for example). Internet Explorer users (approximately 80% of the market) must use the Adobe SVG Viewer (ASV 3.03) plugin, which has a very complete implementation of the SVG standard.

Unfortunately for the SVG community, Adobe (following their acquisition of Macromedia) announced in September 2006 that they would cease updating or supporting ASV in 2008, and stop offering it for download in January 2009. This was due to the arrival of new browsers with native support, and in order to concentrate their efforts on Flash/Flex (Flex is the new "rich internet application" framework -- akin to Open Laszlo).

It's unclear what the ramifications of Adobe's decision are, but for the near term at least one company (the Renesis Viewer) is working on a replacement plugin. In the long run I'm (naively) hopeful that Microsoft will eventually decide to support SVG (Although Explorer has its own non-standard graphics format called VML, which of course is not supported by any other browser on the planet).

To see if your browser supports SVG, try this sample. If the sample does not work then you must change or update your browser, or else install the Adobe viewer. For more information see the separate appendix on SVG Browser Support.

SVG and HTML

You can embed SVG files in an HTML page using either the <object> tag or the (non-standard) <embed> tag. The issues are the same as for any format which requires a plugin, and (inevitably) involves some browser specific quirks. Although it's not part of the W3C HTML recommendation, I've found <embed> to be generally more reliable.

More intriguing, SVG "fragments" can be included "in-line" in an XHTML document, without using any <object> or <embed> tags. The method is the same as the way in which MathML content is served in many of the articles on this site. For the moment this method requires the use of Firefox or Opera.

I plan a second article and gallery which discusses SVG/HTML interaction and includes several examples of inline SVG.

2. The Gallery

Examples such as the "moving line" are meant to be used by the instructor in a classroom with a projector. Since our classrooms have Firefox installed, I don't have to worry about browser compatibility issues. Nonetheless I've tested each of these on as many platforms as I can and checked them against the W3C Markup Validator.

The images below are all screen captures. Click on the image to open the SVG in a new browser window.

Inscribed Triangle in a Semicircle

In this example, the point B is draggable, and the small square rotates to show that the angle ABC is always a right angle. The SVG file is named Thales.svg because the ancient mathematician Thales of Miletus is credited with "proving" (in some sort of sense) this basic result. This type of graphic could easily be modified to show various results from geometry and the history of mathematics. Even if the images were static (i.e. unscripted), it's better to use vector graphics than gif's or jpegs. I will examine this example in detail in Part II of this article.

Inscribed triangle in a semicircle

The Moving Line

This is a tool for explaining slopes and line plotting to algebra and precalculus students. Open the SVG, then click on the graph to drag and drop either of the two control points. The control points will snap to the nearest integer lattice point. The background graph paper is created dynamically, using JavaScript to write multiple instances of a <use> tag to the document tree.

Moving line example

A Unit Circle

This is a tool for showing sine and cosine by quadrant. The radius cursor is draggable, and the snap/nosnap control makes it snap to the nearest 5 degree increment.

Unit circle example

Parametric Plot

This is an example of a dynamic parametric plot. The parametric equations are

x(t) = 4 (sin(4 t) - 0.3) cos(t), y(t) = 4 (sin(4 t) - 0.3) sin(t)

Click anywhere on the canvas to start/stop the point moving. The JavaScript code in this example can easily be modified to change the parametric equations, the number of sample points and the speed of the point. The animation is based on the JavaScript setInterval() function, but there are other ways to accomplish the same thing. It would be easy to add on the polar grid from the previous example, and create a library of standard polar plots--e.g. roses, limacons, cardioids, and so forth.

Parametric plot example

Moving Gears

This is a project for exploring declarative (SMIL) animation, in contrast with the previous example, which used JavaScript. Note that declarative animation does not work (yet) in Firefox, so you need to view this either with Opera 9 or with IE + ASV 3.

Gear problems such as this are good challenge problems for a precalculus class. You might ask, for example, how many times (and why) the small gear revolves around the center before points P and Q line up again. (The small gear has 36 teeth and the ring gear has 110).

In case you were wondering: The <polygon>'s which define the gear teeth were created in a Mathematica notebook, exported as a "comma separated values" file, and then pasted into the <polygon> tag.

Moving gears example

The Sierpinski Gasket

This example illustrates the Sierpinski Gasket. In theory SVG ought to be the perfect tool for studying fractals, since you can zoom in without any pixelation effects. In practice I found that Firefox was surprisingly slow to render this SVG, whereas Opera and the Adobe viewer had no problems at all.

Sierpinski gasket

Want to learn more? Continue to Part II: SVG: The Nuts and Bolts