SVG
Scalable Vector Graphics (SVG), a W3C recommendation, is a language for describing two-dimensional graphics in XML. SVG allows for three types of graphic objects: vector graphic shapes (for example, paths that consist of straight lines and curves), images, and text. Graphical objects (including text) can be grouped, styled, transformed and composited into previously rendered objects. The SVG feature set includes nested transformations, clipping paths, alpha masks, and template objects.
SVG drawings can be interactive and dynamic. For example, animations can be defined and triggered by using scripts.
Sophisticated applications of SVG are possible by using scripts, which access the SVG Document Object Model (DOM) and provides complete access to all elements, attributes, and properties. A rich set of event handlers such as' onmouseover' and' onclick' can be assigned to any SVG graphical object.
Because of SVG's compatibility and leveraging of other web standards, features like scripting can be done on XHTML and SVG elements simultaneously within the same webpage.
The following list of topics, which will grow over time, introduces key features of SVG.
In this section
| Topic | Description |
|---|---|
This topic covers basic SVG animation and is a prerequisite for Intermediate SVG Animation. Basic knowledge of HTML and JavaScript is assumed. To fully understand the material presented in this topic, plan to spend about one hour of study. |
|
This topic introduces intermediate level SVG animation techniques and starts where the Basic SVG Animation topic left off. To fully understand the concepts presented in this topic, plan to spend about 1 hour of study. |
|
This topic looks at more advanced concepts of creating SVG animation for your website. Before you work through this tutorial, be comfortable with Basic SVG Animation, Intermediate SVG Animation, and have a solid understanding of HTML and JavaScript. |
|
This topic covers SVG coordinate transformations that are associated with the |
|
This topic introduces common ways to render SVG in your webpage and assumes that you have basic HTML and JavaScript knowledge. |
|
This topic shows you how to use SVG to zoom and pan, and ends with an example of a complex organizational chart that can be zoomed and panned. Basic HTML and JavaScript knowledge are assumed, as well as access to a browser that can render inline SVG in HTML5, such as Windows Internet Explorer 9 and later. |