CS170 Lab: SVG - Scaleable Vector Graphics

Highlights of this lab:

Lab Exercise:


Introduction

These notes introduce SVG or Scalable Vector Graphics which is a system for representing computer graphics using the XML programming language. Although the examples you'll see in this lab are quite simplistic, there are advanced users of SVG such as mapmakers and meterologists who use SVG to create "highly detailed graphic images in a truly portable format." [J. David Eisenberg, SVG Essentials, O'Reilly, 2002.]

Before getting into implementation details, a brief explanation of computer graphics is in order. There are two types of graphics:

Sample SVG File

The image shown here was generated by the SVG code given in the box below.

Filename: shape.svg
Mandatory elements are shown in blue; options shown in green.
The "xml" declaration line must not be preceded by spaces or blank lines.
Note that the syntax for comments is the same for XML as for HTML. i.e. a comment begins with "<!--" and ends with "-->".

<xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">


<!-- Comment: The svg10.dtd is the Document Type Definition for SVG 1.0.
  The specification for SVG that corresponds to this DTD is available at:
  http://www.w3.org/TR/2001/REC-SVG-20010904/
-->


<svg width="100" height="100 ">


<title>Sample Image for CS170</title>

<!-- Head -->
<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />

<!-- Eyes -->
<circle cx="55" cy="80" r="10" style="stroke: black; fill: black;" />
<circle cx="85" cy="80" r="10" style="stroke: black; fill: black;" />

<!-- Glass line -->
<line x1="21"  y1="80" x2="60"  y2="80" style="stroke: black;" />
<line x1="60"  y1="80" x2="80"  y2="80" style="stroke: black;" />
<line x1="90"  y1="80" x2="119"  y2="80" style="stroke: black;" />

<!-- Smile -->
<polyline points="45 110, 55 120, 85 120, 95, 110"
   style="stroke: black; fill: none;" />



</svg>

SVG Shape Descriptors

As you can see from the previous example, SVG uses specific instructions to draw different shapes. These are defined in the W3C site on Basic Shapes. Here is a summary of the instructions for those shapes:

Shape Instruction
rectangle <rect x="left-x" y="top-y" width="width" height="height"/>
circle <circle cx="center-x" cy="center-y" r="radius />
ellipse <ellipse cx="center-x" cy="center-y" rx="x-radius ry="y-radius />
line <line x1="start-x" y1="start-y" x2="end-x" y2="end-y">
polyline - like a polygon, but not closed at the ends <polyline points="pairs of x-y coordinates" />
polygon - SVG will automatically connect the last point to the first <polygon points="pairs of x-y coordinates" />

The previous table only shows the part of the instructions that define the structure of the shape.

To define the presentation of the shape you use:
style=" stroke:characteristic; fill:characteristic;" Some of the available stroke and style attributes are:

stroke: colour Colour values can be:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive purple, red, silver, teal, white, or yellow.
A hexadecimal value in the form #rrggbb representing values for red, green, and blue.
stroke-opacity: n Where n can be a value between 0.0 and 1.0.
0.0 means transparent and 1.0 means opaque.
If this attribute is not specified, opaque is the default.
fill: colour Colour values as above.
fill: none Specifies no fill at all i.e. an empty shape.
fill-opacity: n Values as above.

To put the struture and presentation attributes together in one instruction, here is the example given at the start of this document:


<  circle cx="70" cy="95" r="50"    style="stroke: black; fill:none"  />;

               ^-- structure                   ^-- presentation

The explanation given in these notes is intended to get you started using SVG. For more details look into the following references. Notice in particular, Dr. Fong's reference on Generating SVG images from C++. Since SVG is a simple text format, you can use a C++ program to generate an SVG file. This is extremely attractive to programmers in computer graphics. By using fractal geometry in a C++ program you can create a simple arithmetic expression that generates an infinitely complex geometric shape.

References

Of course you can search the Internet for any number of references!


Lab Exercise:


CS Dept Home Page
CS Dept Class Files
CS170 Lab Files

Copyright: Department of Computer Science, University of Regina.