![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Introduction
This tutorial assists developers who want to understand the concepts behind Scalable Vector Graphics (SVG) in order to build them, either as static documents, or as dynamically generated content.
XML experience is not required, but a familiarity with at least one tagging language (such as HTML) will be useful. For basic XML information, see the Introduction to XML tutorial. JavaScript is used for a single scripting example at the end of the tutorial, but is kept fairly simple.
Scalable Vector Graphics (SVG) makes it possible to specify, using text, graphical images that appear on the page. For example, where a traditional graphic would need to specify every pixel of a rectangle, an SVG simply states that the rectangle exists, and specifies its size, position, and other properties.
The advantages are many, including the ability to easily generate graphics (such as graphs and charts) from database information, and the ability to add animation and interactivity to graphics.
This tutorial demonstrates the concepts necessary for building SVG documents, such as basic shapes, paths, text, and painting models, and also animation and scripting.
The tutorial demonstrates the building of several 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. Editors specifically geared toward SVG do exist, and are listed in the Resources. This tutorial assumes you are using a text editor.
- An SVG viewer: The most up-to-date SVG viewer as of the time of this writing is Adobe's SVGViewer, version 3.0, available free from Adobe at http://www.adobe.com/svg/viewer/install/main.html. Other SVG viewers are listed in the Resources.
- A browser: The Adobe viewer works with most current browsers, such as Netscape Navigator 4.x and above (available at http://home.netscape.com/computing/download/index.html?cp=hophb2) and Microsoft Internet Explorer 5.x and above (available at http://www.microsoft.com/windows/ie/default.asp).
To see the examples in action, download the examples and uncompress them. Open a new browser window and use it to read the readme.html file.
Table of contents
Local resources
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular tutorial tags |
My tutorial tagsSkip to tags list
Popular tutorial tags |
My tutorial tags
