Department of Mathematics

Math 300: Mathematical Computing

SVG - Scalable Vector Graphics

SVG is a W3C standard for delivering vector graphics on the web. It provides a compliment of tools which will seem familiar to those who have experience with graphics applications, and in addition provides some animation features. The standard has been expanding slowly through this century. The initial standard, version 1.0, dates from 2001. The effective current standard, version 1.1, was finalized in 2003. There is a 1.2 standard, but it is limited: indeed it is called SVG Tiny 1.2, though the word "Tiny" actually refers to the fact that it is a standard for small-memory devices, such as cell phones. There are drafts of a full 1.2 standard, but the incorporation of SVG into HTML5 has changed the direction, and 1.2 will probably not be adopted. Instead, version 2.0 is scheduled to be adopted in 2014.

Support for SVG is improving. Opera has historically had the best support, with Firefox running close behind. Now that SVG is recognized as part of HTML, even Internet Explorer is beginning to support it natively.

If you are not familiar with the term vector graphics, it is used in contrast to the older form of computer imaging: raster graphics. In raster graphics all objects must be drawn pixel by pixel, so that even creating a line from one point to another might require you to write a function in a programming language. In vector graphics many of those details are taken care of by the browser or other software client: the user has only to worry about higher-level graphical objects such as lines, circles, polygons, and so on.

An SVG display must always start by specifying an area where the graphics are to be drawn. You can specify the version if you like, though that is not necessary.

<svg width="100%" height="100%" version="1.1">
Once that is done, it is a simple matter to specify the objects you want to display. For example, you might make a circle using a command such as the following.
<circle cx="100" cy="50" r="40" style="stroke:black; stroke-width:2px; fill: red;"/>

In this, cx denotes the x-coordinate of the center of the circle. Likewise, cy denotes the y-coordinate of the center of the circle. These coordinates are measured in pixels from the upper left corner of the drawing area. This means that while the x-coordinate behaves the way you are used to, the y-coordinate actually is zero at the top of the drawing area and increases in a downward direction. The parameter r denotes the radius (in pixels) of the circle, the stroke attribute describes the curve at the boundary of the circle, and the rest of the parameters are intuitive. Note that the tag ends with a slash (/) before closing. This is the usual way of ending an XML or HTML tag that requires no closing tag.

This is an archetype for most SVG shapes. The tag will have the name of the basic shape: e.g. line, circle, ellipse, rect. Each shape will have certain fixed parameters that describe the shape: e.g. two points for a line, center coordinates and radius for a circle. After that there are various style parameters that can be placed in a CSS style file or into the tag itself. Some of these are familiar to us, such as the color attribute; some are particular to SVG, such as the stroke and fill attributes.

These last two are worth describing in more detail. The stroke attributes describe any lines or curves that define the graphics shape. Thus, the stroke attributes give the color of a line segment and how thick it is to be. In the case of a circle, they describe the circle itself. By contrast, the fill attributes give information about the area enclosed by graphics shapes. Thus, fill attributes do not apply to line segments. For circles and ellipses and such, they control the color, opacity, gradients, and all aspects of the area enclosed by the part of the shape that was described by stroke attributes.

Frequently SVG files will require customized gradients or other such graphics constructs. These things are not visible objects, but rather values for attributes that other vector objects will possess. They are defined in a <def> section near the top of the SVG file. For example:

<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity :1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity :1"/>
The first line defines a linear gradient color scheme that will be oriented from left to right. We know that it is oriented left to right because its beginning is at x=0%, y=0%, while its end is at x=100% of the width of the graphics object where it is used, but y=0% still. In other words, the variation in the gradient happens only over the width of the graphics object, with no variation over the height. The first <stop> tag indicates the color at the start (x1,y1) of the gradient; in this case it is red+green = yellow. The second <stop> gives the color at the end of the gradient (x2,y2); here it is red. We can refer to the gradient in our graphics objects using the id attribute: here we will call it orange_red.

To create SVG files on the fly you can use a google wysiwyg editor. Before you start drawing, make sure to use the image properties menu item to change the size to what you need for your page.

Assignment C is posted.

The test solution is available.

Department of Mathematics, PO Box 643113, Neill Hall 103, Washington State University, Pullman WA 99164-3113, 509-335-3926, Contact Us
Copyright © 1996-2015 Kevin Cooper