SVG Primer

Foreward

[ Beta Document: May Not Be Completed ]

Prerequisites

This primer is targeted towards those who are interested in learning Scalable Vector Graphics (SVG) for use within a Web browser. Some familiarity with HTML, XML, and JavaScript will help you to understand the content and examples of this document.

Downloads

Unless your browser includes native SVG support, you will need to download an SVG plugin.

• (required) Adobe SVG: Download and install the plugin from this site. If you are using Mozilla and the plugin does not seem to work, find and copy the file NPSVGVw.dll to the plugins directory in your Mozilla installation directory.
• (optional) Batik: If you are interested in using SVG from within your Java application, such as to rasterize an SVG document into an image, you might want to take a look at Apache's Batik project.

What this Article Covers

This article introduces Scalable Vector Graphics and is targeted towards developers who are interested in learning the basic grammar and implementation.

What this Article Does Not Cover

This article does not discuss in detail the rasterization of SVG documents, the modularized SVG specification (W3C SVG Spec 1.1), or exporting vector graphic data from third party applications, such as Adobe Illustrator.

Where Do You Get Your Information?

This primer is derived from the W3C specifications for SVG 1.0, the tutorials in the Adobe SVG Zone, and other tutorials available on the Web. References are cited upon use throughout the document. See Appendix A for a complete list of links.

How To View Examples Provided in this Document

To view the examples in this document, copy and paste the example text into a new file and save it with .svg extension. You can view the file directly in your browser, or use the following HTML to view the newly created .svg file from within a web page.

<embed
   src = "your-svg-file.svg"
   name = "svgObject"
   height = "200"
   width = "200"
   type = "image/svg-xml"
   pluginspage = 
      "http://www.adobe.com/svg/viewer/install/"
/>

Index

• Introduction
  • What is SVG?
  • What does "Scalable" Mean?
  • What is a Raster Graphic?
  • What is a Vector Graphic?
  • Are DOM and CSS Supported?
  • In Short, SVG Is ...
• How SVG Works
  • Render Model
• SVG Structure
  • Bounding Box
  • Coordinates and Transformations
  • A Note about Styling Properties
• Text
  • The text Element
  • The tspan Element
  • The tref Element
• Shapes
  • Rectangles
  • Circles
  • Ellipses
  • Lines
  • Polylines
  • Polygons
• Paths
• Appendix A
  • References

Modification History

Introduction

What is SVG?

Scalable Vector Graphics (SVG) is a language for describing two-dimensional vector and mixed vector/raster graphics in XML. Three types of graphic objects can be used in SVG documents: vector graphic shapes such as lines and curves, images, and text. SVG includes features that permit transformations, clipping, masks, filters, and templates. (paraphrased from SVG 1.0 Specification)

In addition to combining and transforming graphics, and adding filters, an SVG document exposes a scriptable Document Object Model (DOM) and event model. Also, the SVG DOM can interact with a supported Web page DOM. This allows you to manipulate SVG documents from a web page, and visa-versa.

What does "Scalable" Mean?

"To be scalable means to increase or decrease uniformly. In terms of graphics, scalable means not being limited to a single, fixed, pixel size." (from SVG 1.0 Specification)

What is a Raster Graphic?

A raster graphic object, such as a Bitmap, JPEG, or GIF, is not scalable like a vector graphic object. Although the raster image can be resized, it is limited to the fixed pixel-by-pixel information. Once resized, an image loses that information, either by over-estimating what values should be used when the image size is increased, or throwing values away when the size is decreased.

What is a Vector Graphic?

A vector graphic object describes geometric data that is used to create shapes such as lines and curves. Vector graphics are a lot more flexible than raster graphics. And, vector graphics can be integrated with raster images.

Are DOM and CSS Supported?

SVG documents allow for the same type of manipulation that can be performed on Web pages using the DOM and CSS.

It is important to note that the SVG CSS grammar differs from the grammar used for Web Pages.

In Short, SVG Is ...

SVG is an XML-based language used to describe vector and raster graphics, that supports CSS, and that exposes a DOM so as to allowing the manipulation of the SVG document through script (or compiled language).

[ top ]

How SVG Works

SVG is an XML-based language used to describe graphics. Somewhere, somehow, an application must interpret an SVG document and be able to render the SVG data. That application could be a plugin, such as the Adobe SVG plugin, or integrated directly into the browser. In either case, an SVG document must get to the SVG-aware application. When the document is successfully parsed, the application then renders the data.

Remember, this article specifically discusses the use of SVG with Web pages. There are other ways of viewing and manipulating SVG documents beyond the Web.

Render Model

This is a description of how an SVG application should render an SVG document. This is only provided for background information.

An SVG application uses a "painters model" to apply "paint" in succession to a canvas. "Paint" applied to a painted area will partially or totally obscure the existing data. If the "paint" is not opaque then alpha blending compositing rules are applied.

SVG elements are "painted" according to an implicit order. The first element is "painted" first, and each additional element is painted on top of the first element.

Types of SVG elements are shapes, text, and raster graphics.

The rendering process is more detailed than the previous summary, and the W3 specification should be consulted for further information on how SVG documents are rendered.

[ top ]

SVG Structure

An SVG document must have an XML and document type declaration, and a document or document fragment must have an <svg /> root element. The root element must define the svg XML namespace, and can contain three basic types: text, shapes, and paths.

Based upon those requirements, the following basic SVG template can be constructed:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xml:space="preserve" width="2in" height="2in">
   ...
</svg>

If the XML declaration and document type declaration (the first two processing instructions) are removed, the previous SVG example would be servicable as an SVG document fragment. An SVG document fragment is useful for using inline SVG.

Bounding Box

Because an SVG document describes an image, basic information about the canvas should be (but does not have to be) specified. The bounding box is the specification of the boundaries for the image. The height and width attributes, used in conjunction with CSS length units, is used to specify the intrinsic dimensions (and print size) of the graphic. No value implies a size of 100%, and a value of 0 prevents the document from being displayed. The term canvas is being used loosely to describe the entire visible portion of the SVG document.

The viewBox attribute can be used to specify clipping regions of the bounding box.

Coordinates and Transformations

Where the width and height attributes are used to specify the dimensions of the bounding box, the viewBox and transform attributes are used to define and transform coordinate systems. SVG documents are rendered with an initial viewport coordinate system and user coordinate system, both starting out as equals. The user coordinate system can be changed using either viewBox or transform to map the custom (or user) coordinates to the viewport coordinates.

A Note about Styling Properties

Although SVG documents make use of CSS properties, the supported CSS styles vary from those commonly used with HTML. Section 6 of the SVG specification (refer Appendix A) defines the supported styles.

[ top ]

Text

Hey, this is a primer, and some immediate gratification is in order, so let's talk about text.

The text Element

The text element is used to render text in a straight line or along a path. Filters, gradients, patters, and clipping regions can be applied to text.

Child nodes of a text element, in addition to attributes specified on the text node, are used to create a glyph (a graphic object).

In the following example, an SVG document is defined to have the intrinsic dimensions of 200 pixels in width and 100 pixels in height. The text element specifies a font-size, font-family, x coordinate, and y coordinate. The x and y coordinates are relative to the parent element; in this case the svg element.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xml:space="preserve" width="200px" height="100px">
   <text
      font-size="25px"
      font-family="Times"
      x="10px"
      y="50px
   >First Text</text>
</svg>

The tspan Element

The tspan element is used to adjust text and font properties within a text element. There are many attributes defined for elements in the svg namespace, and many apply to the text and tspan elements. Keep in mind that there are many options available that are not covered in this primer.

The following example demonstrates a few interesting applications of the tspan element. Following the example is an explanation of each feature.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xml:space="default" width="200px" height="100px">
   <text
      style="font-family: Arial;font-size: 20px;"
      x="10px"
      y="50px">
         First
         <tspan
            stroke="#FF0000"
            style="letter-spacing: 10px;"
            rotate="90 50 30 10"
            dy="-10px"
         >
            Text
         </tspan>
   </text>
</svg>

In the preceding example, the font styles were set using the style attribute, to demonstrate an alternate means of specifying those CSS attribute values. Also, the xml:space attribute value was set to default so excess whitespace is not rendered as a part of the text node.

A few interesting things to note about the tspan example:

• The dy attribute is used to change the relative position of "Text" along the y axis.
• The rotate attribute is used to rotate each letter by a varying degree.
• The letter-spacing CSS attribute was used to increase the space between each letter.

The tref Element

The text nodes of the text and tspan elements can be either actual text, or references to text. The tref element is used to reference predefined text.

In the following example, a tref element is used to refer to "Text". The result of viewing this particular example is the same as viewing the previous example for the text element.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xml:space="default" width="200px" height="100px">
   <defs>
      <text id="Text">
         Text
      </text>
   </defs>

   <text
      style="font-family: Arial;font-size: 20px;"
      x="10px"
      y="50px"
   >
      First
      <tref xlink:href="#Text" />
   </text>
</svg>

[ top ]

Shapes

Shapes are equivalent to predefined paths (refer Paths Section) and can make use of stroke, fill, and as a clipping region. The SVG 1.0 specification defines six predefined shapes: rectangles, circles, ellipses, lines, polylines, and polygons.

Rectangles

The rect element is used to create a single rectangle. As with the text element, the x and y attributes define the position, and the width and height attributes specify the dimensions, and the rx and ry attributes are used to round the corners.

Note:Section 9 of the W3C SVG 1.0 Specification (refer Appendix A) includes the steps needed to create a rectangle with the above attributes by using a path.

The following example creates two rectangles, one on top of the other. The rx and ry attributes, as mentioned above, are used to round the corners. The stroke attribute is similar to the border-color attribute CSS authors are probably familiar with, and the stroke-width is similar to the CSS border-width attribute.

<-- Remark on the z-index -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400px" height="200px" viewBox="0 0 1200 400">
   <!-- Outside Rectangle -->
   <rect
      x="1" y="1"
      width="1198" height="398"
      fill="#EFEFFF" stroke="#0000FF"
      rx="150"
      ry="500"
      stroke-width="2"
   />

   <!-- Inside Rectangle -->
   <rect
      x="400" y="100"
      width="400" height="200"
      fill="#FFEFEF" stroke="#FF0000"
      rx="300"
      ry="50"
      stroke-width="2"
   />
</svg>

Circles

The circle element is used to create a single circle.

Where the x and y attributes are used to specify the position of an SVG element, the cx and cy attributes can be to specify the center of a circle, and the r attribute can be used to specify the radius.

The following is an example circle element.

<circle
   cx="600" cy="200"
   r="200"
   fill="#FFEFEF" stroke="#FF0000"
   stroke-width="2"
/>

Ellipses

The ellipse element is used to create a single elipse.

This element is similar to a circle, except the radius is specified for both the x and y axis using the rx and ry attributes. Note that these are the same attribute names used to create rounded borders for rectangles.

The following is an example ellipse element.

<ellipse
   rx="250" ry="100"
   cx="300" cy="200"
   fill="#FF0000" stroke="#000000"
   stroke-width="10"
/>

Lines

The line element is used to create a single line with specified start and end points.

The x1, y1, x2 and y2 attributes are used to specify the line coordinates.

The following is an example line element.

<line
   <!-- start coordinates -->
   x1="10" y1="10"
   <!-- end coordinates -->
   x2="800" y2="300" 
   stroke="#505050"
   stroke-width="1"
/>

Polylines

The polyline element is used to create a set of connected lines.

Polygons

The polygon element is used to create a set of connected lines that create a closed shape.

[ top ]

Paths

[ top ]

Appendix A

References

• Adobe SVG Zone
• W3C SVG Overview
• W3C Scalable Vector Graphics (SVG) 1.0 Specification
• W3C SVG: Section 6: Styling

[ top ]