(October 2019)

SVG (salable vector graphics) is an XML language for describing vector graphics. Like HTML, SVG has a DOM. It’s even possible to manipulate the SVG DOM with JavaScript.

The root element of an SVG document is the <svg> tag. The <g> element groups basic shapes together.

In addition to basic shapes, SVG supports gradients, rotation, filters, animations, etc.

<svg version="1.1"
     width="300" height="200"

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>


Element declared later in the SVG file render on top of elements declared earlier.

Position elements on a coordinate grid, measured in pixels, with the top left corner as the 0,0 point of origin.

When serving SVG, a web server should send these HTTP headers:

Content-Type: image/svg+xml
Vary: Accept-Encoding

Gzip compression is possible in SVG, although not all viewers support it, particularly when loading local files. Name compressed files like foo.svgz, and serve them with these HTTP headers:

Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding

Basic shapes: circle, ellipse, line, polygon, polyline, rect, path.

Paths combine straight and curved lines to create complex shapes. Polylines are limited to only straight lines.

Define a path with the lone d attribute. The value of d is a series of commands and coordinates operating line a plotter (e.g., M 10 10 go move to that coordinate point). Uppercase command letters denote absolute coordinates, while lowercase command letters mean coordinates relative to the previous command.

Straight line path commands:

Curved path commands: