blue bar

Home  |  Resources SiteMap  

blue bar
    About the Tutorial
Print Version

About the Tutorial

Welcome to the SVG Tutorial. SVG (Scalable Vector Graphics) is the
recently released W3C open standard for creating two-dimensional (2D), dynamic, and interactive graphics to be delivered over the Web.

Course Description

This tutorial introduces you the fundamentals of SVG from the ground up. In this tutorial, you'll learn

  • the key concepts and functionality in SVG,
  • the structure, organization and syntax of an SVG document,
  • the major SVG graphic elements and their attributes, and
  • how to create graphical objects, animated and interactive graphics using SVG

Each session in this tutorial builds on the concepts learned in earlier sessions. Each drawing lesson contains coding examples to demonstrate you how the SVG graphics or painting effects are created. The quiz at the end of each session helps you test your knowledge of the materials you have just learned.

Target Audience

This tutorial is for SVG beginners. No prior experience with SVG is necessary.

Recommended Skills

XML experience is not required, but a familiarity with at least one tagging language (such as HTML) will be useful.


The tutorial demonstrates the building of SVG documents. To follow along, you will need an editor and a viewer:

  • A plain text editor, such as Notepad, is all you need to create SVG files.

  • An SVG viewer: The most up-to-date SVG viewer as of the time of this writing is Adobe's SVG Viewer, version 3.0, available free from Adobe.
    • Download SVG Viewer
  • A browser: The Adobe viewer works with most current browsers, such as Netscape Navigator 4.x (Netscape 6 is not supported) and Microsoft Internet Explorer 5.x and above.


About the Tutorial


SVG Overview


SVG Basics


Basic Drawing


Painting & Effects


Dynamic SVG














Created by: Ping Or

Project Committee:
Joaquin Vila
Barbara Beccue