Scalable Vector Graphics (SVG)

2008 Dec 22

SVG is an XML application specified by W3C: 1.1, 1.2.

Unlike raster graphics which describe a rectangle of specific pixels, vector graphics is mathematical where an image is described in terms of geometric shapes using spatial coordinates.

Like HTML and XML, all SVG elements have optional class and id attributes which can be used to specify styles. See CSS Selector Syntax.

Documents and Style

A simple SVG document looks like the following:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www/w3/org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="140" height="170">
  <title>Cat</title>
  <desc>Stick Figure of a Moose</desc>
  <!-- the drawing goes here -->
<svg>

Although style can be an attribute for each element, it is a goal to have the ability separate structure and presentation. In SVG there are four ways to specify presentation style.

Inline Styles

This is the non separted form where a style attribute is used for an element (see Basic Shapes). Inline styles override internal stylesheets.

Internal Stylesheets

Internal stylesheets take the following form:

   <svg ...>
   <defs>
   <style type="text/css">
      <![CDATA[
      circle {
         fill: #369;
         stroke: magenta;
         stroke-width: 2;
      }
      ]]>
   </style>
   </defs>

External Stylesheets

External stylesheets have the obvious advantage of a single point change affecting many documents consistently. They are used as in the following example:

<?xml version="1.0"?>
<?xml-stylesheet href="cartoon_style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www/w3/org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="140" height="170">
  <!-- the drawing goes here -->
<svg>

External stylesheets use CSS Selector Syntax with SVG properties and values, for example.

.heavy { stroke-width: 7; }
ellipse { stroke-dasharray: 3 2; }
circle.red { fill: red; fill-opacity: 0.6; }

Presentation Attributes

Rather than use the inline style="..." attribute form, it is possible to write each property as an individual attribute, for example:

<rect x="9" y="20" width="18" height="29"
   fill="blue" stroke="green" stroke-dasharray="3 1">

Presentation attributes have teh lowest priority and are overriden by the other three (above).