.SVG

Scalable Vector Graphics

Introduction

SVG is the W3C’s vector image format for the web. SVG 1.0 became a Recommendation in 2001 and SVG 1.1 in 2003. An SVG file is XML text that describes shapes, paths, text, gradients, patterns, masks and filters, so it can be written by hand, styled with CSS, scripted and searched.

Every current browser draws SVG directly, and it can sit inside an HTML page as an element. It is the usual format for logos, icons, charts and diagrams on the web. A gzip-compressed SVG uses the extension .svgz.

Software

Structure

An SVG file is an XML document whose root element is <svg> in the namespace http://www.w3.org/2000/svg. The viewBox attribute sets the coordinate system, and width and height its displayed size. Inside it, drawing elements such as path, rect, circle and text paint in document order, so later shapes sit on top. Shapes can be grouped with g, defined once in defs and reused with use.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="#0f7f49"/>
  <circle cx="50" cy="50" r="25" fill="white"/>
</svg>
A square with a circle on top