A Basic Article with SVG

Kyle Siegrist


This article shows how to combine XHTML for basic exposition and SVG for graphics. This document can be used as a basic template.


Main Contents

  1. Introduction
  2. MathML
  3. SVG

Ancillary Material

1. Introduction

This is a compound XML document that includes basic exposition in XHTML (the rigorous, XML version of HTML) and SVG (Scalable Vector Graphics) for two-dimensional graphics. Both markup languages are W3C standards, although currently only the Firefox and Opera browsers support 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.

Any mathematical expressions would need to be constructed out of basic HTML tags and images; see the Basic HTML Article for details. If you want MathML in addition to SVG, you should be reading the Basic Article with MathML and SVG instead of this article.

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 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 SVG 1.1//EN"
<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 and SVG, and gives a link to a document type definition (DTD). The last line with the html tag gives a reference to a namespace.

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. You can probably figure out what each tag does.

<svg:svg version="1.1"
  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 "/>