SVG

(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"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <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>

</svg>

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:

M x y move to absolute coordinates x, y.
m x y move to relative coordinates x, y.
L x y draw a line to x, y.
H x draw a line horizontally to x.
V y draw a line vertically to y.
Z close the path by drawing a line from the current position to the original point.

Curved path commands:

C x1 y1, x2 y2, x y draws a cubic bezier curve, with tree coordinates:
- x1 y1 the control point for the start of the curve
- x2 y2 the control point for the end of the curve
- x y where the line ends
S x2 y2, x y a shorthand for the above, following an earlier curve, where the first control point of this curve mirrors the last control point of the previous curve
Q x1 y1, x y a quadratic curve
T x y a shorthand like S, but for a chained quadratic curve

SVG

Links