![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Before you start
SVG is a technology positioned for many uses in the Web space. You can use it to present simple graphics (as with JPEG) or complex applications (as with Macromedia Flash). An earlier tutorial from June 2006 introduced the basic features of the format (see Resources). This tutorial continues to focus on SVG for Web development, as it demonstrates dynamic effects that open up new means of enhancing Web pages. The lessons are built around examples that you can view and experiment with in your favorite browser.
Developed by the W3C, SVG has the remarkable ambition of providing a practical and flexible graphics format in XML, despite the notorious verbosity of XML. It can be developed, processed, and deployed in many different environments -- from mobile systems such as phones and PDAs to print environments. SVG's feature set includes nested transformations, clipping paths, alpha masks, raster filter effects, template objects, and, of course, extensibility. SVG also supports animation, zooming and panning views, a wide variety of graphic primitives, grouping, scripting, hyperlinks, structured metadata, CSS, a specialized DOM superset, and easy embedding in other XML documents. Many of these features allow for dynamic effects in images. Overall, SVG is one of the most widely and warmly embraced XML applications.
Dynamic SVG is a hot topic, and several tutorials and articles are available that include fairly complicated examples of dynamic SVG techniques. This tutorial is different because it focuses on a breadth of very simple examples. You will be able to put together the many techniques you learn in this tutorial to create effects of whatever sophistication you like, but each example in this tutorial is simple, clear, and reasonably self-contained. The tutorial rarely deals with any SVG objects more complex than the circle shape, and it keeps embellishments in scripting and XML to a minimum. The combination of simple, step-by-step development and a focus on real-world browser environment makes this tutorial unique.
SVG is an important weapon in every Web developer's and designer's arsenal. Programmers should use this tutorial if they deal with any Web applications. Web designers should use this tutorial to learn how to deploy efficient vector graphics on the Web.
In this tutorial you learn about scripting, CSS, and basic animation features of SVG to use dynamic effects with vector graphics on the Web. You gain a variety of basic techniques that you can use to put together attractive and sophisticated Web environments using SVG.
This tutorial assumes knowledge of XML, XML namespaces, CSS, XHTML, basic SVG and basic ECMAScript (which you may be familiar with under the name, JavaScript), and Document Object Model (DOM). The links in Resources direct you to helpful information if you aren't familiar with SVG basics, including prerequisites such as XML, XML namespaces, and CSS, or if you need to learn about ECMAScript and DOM.
The examples in this tutorial require only a Web browser that supports SVG, with ECMAScript enabled. Firefox 1.5, or more recent, has such support built in, as does Opera 9. Safari has announced support for SVG in coming versions, but for now the support is only available in nightly development snapshots with no guaranteed stability. Mac OS X users might want to try the Camino Web browser for SVG support. Internet Explorer users require a plug-in such as the Adobe SVG Viewer. Firefox 1.5.0.4 on Ubuntu Linux is the browser that appears in browser output screenshots in this tutorial. Firefox is a popular Web browser available on Windows, Mac OS X, Linux, and other platforms. It is based on Mozilla's rendering engine.
About the examples in this tutorial
In this tutorial, you will find many examples of SVG files, either stand-alone or embedded in XHTML. All the files used in this tutorial are in a zip file called tutorial-files.zip (see Downloads). In this package, all files start with a prefix that indicates the section that covers them and the order of examples within the section. For example, the names of files from the first example in the third section start with "eg_3_1".
Files that end with .svg are stand-alone SVG. Those ending with .xhtml are XHTML. A few files use other extensions such as .css for stand-alone CSS and .xsl for XSLT transform files.
I further list the example files in each panel and explain how each relates to the other. If you follow along with the tutorial, you should be able to locate and experiment with the examples.
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
