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

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)

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>

Quick Info