SVG Basics

Coordinates

Geometric commands (curves, lines, etc) rather than an aray of pixel values

Inherently scalable for different viewing sizes


		<svg viewBox="0 0 500 300">
			Your graphics go here
		</svg>

(0, 0) x y

Shape primitives

Shape primitives are not very flexible, but are easier to specify.
You can create rectangles with the rect element. The attributes x and y control the coordinates of its top left corner, and width and height control its dimensions.
You can create circles with the circle element. The attributes cx and cy control the centerpoint placement and r controls the radius.
If a parameter is 0, it can be omitted.

Copy and paste

This seems easier at first, but soon you have to change (copies of) the same thing all over the place. And keep track of the changes from one copy to the next.

Re-using SVG markup

The use element allows us to re-use SVG markup, even across documents!
Ever heard of Shadow DOM? This is where it came from. No, seriously!
You cannot override attributes set on the definition elements via use
Note that for legacy browsers you will need to use xlink:href instead of href. You will also need to add xmlns:xlink="http://www.w3.org/1999/xlink" to your root svg element.

x1 = [x1] y1 = [y1] x2 = [x2] y2 = [y2]

Lines

You can define lines with the L path command. Its two arguments are the endpoint coordinates.
You can use a lowercase l for endpoint coordinates that are relative to the starting point.
You can also define lines with the line element

Horizontal, Vertical Lines

You can use the H and V path commands to create horizontal and vertical lines.
You can use lowercase h and v for endpoint coordinates that are relative to the starting point.

Cubic Bezier

You can use the C path command to create cubic beziers.
Every other path command can be simulated (either exactly or closely) with cubic beziers. They are at the root of every drawing application.

Quadratic Bezier

You can use the Q path command to create quadratic beziers
Quadratic beziers are just cubic beziers with the two handles in the same place.

Smooth Cubic Bezier

The smooth (or "shorthand") cubic bezier command creates smooth curves by reflecting the last control handle. The curves join together without ugly kinks.

Smooth Quadratic Bezier

This is a combination of quadratic beziers and the shorthand cubic bezier syntax, thus eliminating all arguments beyond the endpoint.

Elliptical Arc

The A/a path commands create circular or elliptical arcs.
Their arguments are the two radii (equal, for circular arcs), the rotation (usually 0), two boolean 0-1 flags for which of the four possible arcs to use, and the endpoint.
Yes, that isn't the usual way to specify an ellipse. Like other path commands, we start with a current point, and end up with the current point for the next command.

Fill & Stroke

The interior of a shape is colored with the fill property.
The edge is colored with the stroke property. Width and dashing of the stroke can also be controlled.

Fill & Stroke

Linear and radial gradients are available in SVG. They can be used for both fill and stroke. They predate the CSS gradients by many years, and use an XML syntax. Unfortuately, current implementations don't let you use CSS gradients in SVG, but this will change.

Animated drawing with stroke-dasharray

If the stroke gap is sufficiently large, animating the dash length looks like drawing the shape with a pencil!
stroke-dasharray can be animated with CSS animations!

Animated drawing with stroke-dasharray

The first parameter to the stroke-length animation is the length of the path. If you edit the path, change this too.