Scalable Vector Graphics
SVG Overview
SVG Basics
Dynamic SVG
In Depth
Overview of SVG

The tutorials presented here are designed as an overview and introduction to SVG features and functionality. The purpose is to provide enough information so that you, as an SVG creator, will have a basic understanding of the format's potentials for development. Hopefully, these pages will even inspire you to try developing your own SVG demos. Almost all of the graphics here were developed using Adobe® Illustrator® 9.0. Many of the illustrations also incorporate simple JavaScript functions that the user is encouraged to explore and reuse.

(Note: Internet Explorer for the Macintosh does not support JavaScript access to plug-ins. This is a browser limitation, not a shortcoming of the Adobe SVG Viewer. For this reason, Macintosh IE 5 users cannot properly view examples incorporating JavaScript functions. Please use Netscape for these examples For more information, please see the FAQ.)

The tutorials are divided into four parts. The first part, called "Getting Started with Illustrator 9," is a simple explanation of Illustrator's new SVG export options; "SVG Basics" covers basic graphic and display capabilities of SVG; "Dynamic SVG" covers various animation and interactivity capabilities of SVG; and finally, the last part covers various workflow topics.

Navigating through the tutorials
The last three sections are frames-based for your convenience. You should work through the lessons in order, but you can use the navigation area at left to quickly jump back to any completed lesson whenever you like.

To begin the tutorials, click "Getting Started." The first lesson appears. Have fun!

Back to Top

Pancho Producciones
Proyecto MECESUP
Depto. de Física, Universida Técnica Federico Santa María. (c)2000