Questions tagged [svg]

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 to it, like how to achieve something with SVG.

Scalable Vector Graphics

Scalable Vector Graphics (SVG) is a markup language for describing two-dimensional vector-graphics 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 xml-based format, it can be embedded within html 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>