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

 

Parent URL: 
category/data
Resources URL: 
notes/svg/resources
Sources URL: 
notes/svg/sources
Topic type: 
Topic

See Also