Skip to main content

About

Ask Question
Tag Info
Info Newest Frequent Score Active Unanswered

Scalable Vector Graphics (SVG) is an XML-based two-dimensional vector graphics format that can also be used in HTML. Do not add this tag just because your project uses SVG. Instead, add the tag if your question is either about SVG or closely related, like how to achieve something with SVG.

Scalable Vector Graphics

Scalable Vector Graphics (SVG) is a markup language for describing two-dimensional images, animations, and applications. SVG is also a set of related graphics script interfaces. The SVG format differs from raster formats by encoding graphics predominately using math and matrix transformations, which allows SVG output to be resolution-independent. While SVG is an -based format, it can be embedded within using HTML parsing rules.

The current version is SVG 1.1 (Second Edition), released in 2011. SVG 1.2 is unpublished, the latest version is from 2005. SVG 2 is under active development.

Example SVG file

The following shows a fuchsia-coloured circle having a thick black border situated above text rotated by 15 degrees.

<?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.dtd'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" version="1.1">
  <style type="text/css">
    circle { fill: fuchsia; stroke: black; stroke-width:2 }
    text { font: 12pt sans-serif }
  </style>
  <circle cx="30" cy="20" r="10"/>
  <text x="10" y="40" transform="rotate(15)">Rotated text</text>
</svg>​

Rendered result

Example SVG Scene

Useful links

SVG Editors

SVG Manipulation Libraries

History Excerpt history

Code Language (used for syntax highlighting): default