Philip W. L. Fong <pwlfong@cs.uregina.ca>
$Date: 2005/09/19 20:00:41 $
This tutorial covers a usable subset of SVG materials described in the first 3 chapters of the following reference: J. David Eisenberg, SVG Essentials, O'Reilly, 2002.
Read the article Scalable Vector Graphics (SVG): An Executive Summary for the motivations behind the design of SVG.
I used the Mozilla browser with the Adobe SVG Plug-in on Mac OS X (Jaguar) when I developed this page. To view this page properly, you may need to install additional software on your machine. Consult the Appendix for more information.
<?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">
<svg width="100" height="100">
<title>An Empty SVG Image</title>
<!-- Contents go here -->
</svg<
<?xml ...> and <!DOCTYPE ... >.<svg> ... </svg> pair.width and height
attributes of the <svg>
tag specify the dimensions of the image. The coordinates of the
origin (0, 0) is at the upper left corner of
the image. The x-axis extends to the right, while the y-axis stretches
downward.<title> tag gives a descriptive title to the
image.<!-- and -->.
<?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">
<svg width="300" height="100">
<title>Circles</title>
<!-- A circle with a black frame -->
<circle cx="50" cy="50" r="40" style="stroke: black; fill: none;" />
<!-- 2 concentric circles: one with a red frame, the other solid yellow -->
<circle cx="150" cy="50" r="40" style="stroke: red; fill: none;" />
<circle cx="150" cy="50" r="25" style="stroke: none; fill: yellow;" />
<!-- A yellow circle with a red frame -->
<circle cx="250" cy="50" r="40" style="stroke: red; fill: yellow;" />
</svg>
cx and cy attributes specify the
centre coordinates of a circle.r attribute specifies the radius of a circle.style attribute,
which could be used for specifying color information.
stroke and fill properties can be set
to none or one of aqua, black,
blue, fuchsia, gray, green,
lime, maroon, navy, olive,
purple, red, silver, teal,
white, or yellow.
<?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">
<svg width="200" height="200">
<title>Ellipses</title>
<!-- Upper left -->
<ellipse cx="50" cy="50" rx="10" ry="40" style="stroke: black; fill: none;" />
<!-- Upper right -->
<ellipse cx="150" cy="50" rx="40" ry="10" style="stroke: green; fill: none;" />
<!-- Lower left -->
<ellipse cx="50" cy="150" rx="40" ry="40" style="stroke: none; fill: blue;" />
<!-- Lower right -->
<ellipse cx="150" cy="150" rx="40" ry="30" style="stroke: black; fill: yellow;" />
</svg>
rx and ry attributes specify the
radius of an ellipse along the X and the Y axis respectively.
<?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">
<svg width="200" height="100">
<title>Rectangles</title>
<rect x="10" y="10" width="180" height="80"
style="stroke: none; fill: red;" />
<rect x="30" y="20" width="140" height="60"
style="stroke: none; fill: yellow;" />
<rect x="50" y="30" width="100" height="40"
style="stroke: none; fill: red;" />
<rect x="70" y="40" width="60" height="20"
style="stroke: none; fill: yellow;" />
</svg>
x and y attributes specify the coordinates
of the upper left corner of a rectangle.
<?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">
<svg width="100" height="100">
<title>Lines</title>
<!-- Upper horizontal line -->
<line x1="10" y1="10" x2="90" y2="10" style="stroke: red;" />
<!-- Diagonal line -->
<line x1="90" y1="10" x2="10" y2="90" style="stroke: red;" />
<!-- Lower horizontal line -->
<line x1="10" y1="90" x2="90" y2="90" style="stroke: red;" />
</svg>
x1 and y1 specify the
x- and y-coordinates of one end of a line, while the other end is specified
by the attributes x2 and y2.
<?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">
<svg width="300" height="100">
<title>Polygons</title>
<!-- Parallelogram -->
<polygon points="10,10 70,10 90,90 30,90" style="stroke: red; fill: yellow;" />
<!-- Star -->
<polygon points="110,35 140,35 150,10 160,35 190,35 167,55 179,90 150,73 121,90 133,55"
style="stroke: red; fill: yellow;" />
<!-- Star with intersecting lines -->
<polygon points="210,35 290,35 221,90 250,10 279,90" style="stroke: red; fill: none;" />
</svg>
points attribute specifies a series of pairs of
x- and y-coordinates.
<?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">
<svg width="800" height="500">
<title>A Complete Example</title>
<!-- Tree -->
<polygon points="150,100 250,375 50,375" style="stroke: none; fill: green;" />
<rect x="125" y="375" width="50" height="60" style="stroke: none; fill: maroon;" />
<!-- Roof -->
<polygon points="350,175 700,175 750,325 300,325" style="stroke: none; fill: red;" />
<!-- Frame -->
<line x1="350" y1="325" x2="350" y2="435" style="stroke: black;" />
<line x1="350" y1="435" x2="700" y2="435" style="stroke: black;" />
<line x1="700" y1="435" x2="700" y2="325" style="stroke: black;" />
<!-- Window -->
<rect x="400" y="350" width="100" height="40" style="stroke: black; fill: none;" />
<line x1="400" y1="370" x2="500" y2="370" style="stroke: black;" />
<line x1="450" y1="350" x2="450" y2="390" style="stroke: black;" />
<!-- Door -->
<rect x="575" y="370" width="50" height="65" style="stroke: none; fill: maroon;" />
<circle cx="590" cy="400" r="4" style="stroke: none; fill: black;" />
</svg>
The command line tool
rsvg
is a rasterizer for
SVG --- it renders SVG files into PNG and/or JPEG.
$ rsvg in.svg out.png
The above command converts the SVG file in.svg
into a PNG file out.png. Online manual page
for the rsvg tool is accessible through
the usual man facility.
$ man rsvg
PNG and JPEG files generated by rsvg can be
viewed using any Linux image viewer. The xv
image viewer is quite stable. To invoke, enter the following
shell command.
$ xv &
On Linux, there doesn't seem to be a good way to view SVG images embedded in an HTML page. You need to do this on Mac OS X or MS Windows.
The Adobe SVG Plug-in for Mozilla and Netscape allows you to view SVG graphics embedded in an HTML document (such as the page you are viewing). Equipped with it, the Mozilla (or Netscape) browser can also be used for browsing stand-alone SVG files. I have used the plug-in on Jaguar, and I'm not sure if it works at all on Panther.
I also recommand the Java-based SVG viewer Squiggle, which comes with the Batik SVG Toolkit. As a part of the Apache XML Project, Squiggle is relatively complete and stable. It supports the conversion of SVG to popular raster graphics file formats such as PNG, JPEG and TIFF. Installation and usage information can be found at the viewer's home page.
The The Adobe SVG Viewer and MS Internet Explorer should be sufficient for viewing webpages with embedded SVG graphics.
I recommend the Java-based Squiggle viewer as a stand-alone SVG viewer (see the section on Mac OS X).
$Id: svg.html,v 1.1 2005/09/19 20:00:41 pwlfong Exp $