SVG - Scalable Vector Graphics

"Things to watch: SVG - Scalable Vector Graphics - at last, graphics which can be rendered optimally on all sizes of device"

Tim Berners-Lee, inventor of the World Wide Web

SVG is an acronym for Scalable Vector Graphics and is a W3C standard. It's a language for describing two-dimensional graphics and graphical applications in XML.

SVG is a royalty-free vendor-neutral open standard developed under the W3C Process. To learn more about SVG, please visit W3C.org or Dev.Opera.com.

SVG Demo

You can view the SVG using Opera 8 or newer. No plug-ins required!

Note: Some SVG plug-ins do not support SVG 1.1 Tiny; which is required by this page. You may be viewing an incomplete animation.

Example

A simple example of what SVG looks like.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

<svg xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <g fill-opacity="0.6" stroke="#fff" stroke-width="1px">
    <circle cx="100px" cy="50px" r="50" fill="#00f" 
                      transform="translate(0,0)" />
    <circle cx="100px" cy="50px" r="50" fill="#ff0" 
                    transform="translate(30,50)" />
    <circle cx="100px" cy="50px" r="50" fill="#f0f" 
                    transform="translate(-30,50)"/>
  </g>
</svg>

You can view the SVG using Opera 9.27. No plug-ins required!

Alternatively, you can also see a screenshot.