![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Before you start
Learn what to expect from this tutorial and how to get the most out of it.
Scalable Vector Graphics (SVG) 1.1 is an XML language for describing two-dimensional vector graphics. Developed by the World Wide Web Consortium (W3C), it has the remarkable ambition of providing a practical and flexible graphics format in XML, despite the notorious verbosity of XML. 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, Cascading Style Sheets (CSS), a specialized Document Object Model (DOM) superset, and easy embedding in other XML documents. Overall, SVG has been one of the most widely and warmly embraced XML applications.
You can develop, process, and deploy SVG in many different environments, from mobile systems such as phones and Personal Digital Assistants (PDAs), to print environments. This tutorial focuses on SVG for Web development, offering step-by-step instruction for Web developers and designers to learn how to use SVG in practical Web sites. The lessons are built around examples that you can view and experiment with in your favorite browser. This tutorial doesn't go into a lot of detail about the SVG language. Instead, it provides a broad enough view of the language to guide you in deploying it on the Web.
Who should take this tutorial?
SVG is a technology positioned for many uses in the Web space. You can use it for presenting simple graphics (as with JPEG) or complex applications (as with Macromedia Flash). As such, it's an important weapon in every Web developer's and designer's arsenal. Programmers should take this tutorial if they deal with any Web applications. Web designers should take this tutorial to learn how to deploy efficient vector graphics on the Web.
In this tutorial, you'll learn the basics of SVG in order to publish vector graphics on the Web using SVG. You'll learn how to render such images in a browser either stand-alone or embedded in XHTML.
This tutorial assumes knowledge of XML, XML namespaces, CSS, and basic XHTML. Even though this tutorial focuses on SVG on the Web, it requires no prior knowledge of SVG and starts with the basics of the language. If you aren't familiar with XML, take the tutorial Introduction to XML. If you need to learn about XML namespaces, read the article Plan to use XML namespaces, Part 1. If you're not familiar with CSS, especially as used with XML, take the tutorial Display XML with Cascading Stylesheets: Use Cascading Stylesheets to display XML, Part 1: Basic techniques to present XML in Web browsers. This tutorial introduces the use of CSS to style XML in browsers. If you aren't familiar with XHTML, a good place to start is XHTML, step-by-step. You should also understand the basic mathematics of the two-dimensional rectilinear coordinate system, also known as the Cartesian coordinate system. You might remember this best from high school mathematics as how to specify points along X and Y axes.
I highly recommend that you try out the examples in this tutorial. They only require a Web browser that supports SVG. Firefox 1.5 or later 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 where you have no guaranteed stability. Mac OS X users might want to try the Camino Web browser for SVG support. Microsoft® Internet Explorer users will require a plug-in such as the Adobe SVG Viewer. When showing browser output examples, I show screenshots of Firefox 1.5.0.2 on Ubuntu Linux®. Firefox is a popular Web browser available on Microsoft Windows®, Mac OS X, Linux, and other platforms. It is based on Mozilla's rendering engine.
About the examples in this tutorial
This tutorial features many examples of SVG files, either stand-alone or embedded in XHTML. All the files used in this tutorial are in the zip file, x-svggraphics-tutorial-files.zip. In this package, all files start with a prefix indicating what section they're covered in and what 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 that end with .xhtml are XHTML. A few files use other extensions such as .css for stand-alone CSS and .xsl for XSLT transform files.
I do take care to further list the example files in each panel and how each relates to the other, so if you follow along with the tutorial, you should be able to locate and experiment with the examples easily enough.
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
