• 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


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


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

Interactive animation


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

Scripted animation


  • 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


<?xml version="1.0"?>
<svg xmlns="">
  <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;" 
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
<svg xmlns=""

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: 
Resources URL: 
Sources URL: 
Topic type: 

See Also