SVG

• Scalable Vector Graphics
• Supports vector graphics, raster graphics (bitmaps), and text
• Supports the following types of media elements: audio, video, and animation (similar to the SMIL 2.0 media elements)
• Is an XML language

Usage in web browsers

• After the SVG elements have all been modified or created, the updated SVG image is displayed (once the UI is free)
• The use of dual frame buffers makes no noticeable difference

• Modifying a large number of SVG elements is roughly twice as fast as replacing them
• Presumably, it's much faster to iterate through and update a large number of DOM elements than it is to delete and re-create them

Web workers

• The DOM elements have to be modified or created by the main thread, which holds up the browser until it's done

Limitations

• Gradients using more than 2 color points are not supported (i.e. a rectangle or triangle with a different color point at each corner)

Gradients

• Linear gradients can have 2 or more color points (on the same line)
• Radial gradients can have 2 or more color points

Interactive animation

ECMAScript

• Using SVG DOM (a superset of the XML DOM)

Scripted animation

SMIL

• Synchronized Multimedia Integration Language
• Used in SVG for animation (with some differences, and some additional elements)
• Useful for describing audiovisual presentations
• SMIL is an XML language

Standard elements

• animate :  Changes scalar attributes and properties over time
• set :  Shorthand for animate
• animateMotion :  Moves an element along a path
• animateColor :  Changes the color of attributes or properties over time

Extensions added by SVG

• animateTransform :  Changes SVG transformation attributes over time
• path attribute :  Supports SVG's path syntax for animateMotion
• mpath element : Supports child mpath elements for animateMotion, which reference an SVG path element
• keyPoints attribute :  Supports keyPoints attribute for animateMotion to specify velocity
• rotate attribute : Supports rotate attribute for animateMotion to specify whether an object is rotated so that its x-axis points in the same (or opposite) direction as the path

Examples

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;">
    <circle cx="6cm" cy="2cm" r="100" style="fill:red;"
            transform="translate(0,50)" />
    <circle cx="6cm" cy="2cm" r="100" style="fill:blue;"
            transform="translate(70,150)" />
    <circle cx="6cm" cy="2cm" r="100" style="fill:green;" 
            transform="translate(-70,150)"/>
  </g>
</svg>

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  ...
</svg>

Native browser support

• Supported: FF 3.5, Safari 4, Chrome 4, Opera 10
• Not supported: IE8, Google Chrome Frame (IE)
• Possibly supported: IE9