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.

SVG Demo

You can view the SVG using Opera 8 beta 3. 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 8 beta 3. No plug-ins required!

Alternatively, you can also see a screenshot.

Screenshots

Opera screenshotOpera screenshotOpera screenshot

View more screenshots of Opera.

Skins

Opera skin - FreshOpera skin - Breeze IIOpera skin - Emil

Customize the look of Opera with free skins and set-ups.

Tutorials

Learn more about using Opera in the Opera tutorials.

Promote Opera

Show the world that you use Opera by placing a Opera button on your site.