SVG CheatSheet

SVG is XML. You can put any of the following SVG examples in an HTML file, and open the file in browser.

SVG Basics

Line

The line element just takes the attributes x1, x2, y1 and y2 to make a line from (x1,y1) to (x2,y2).

Rectangle

rect – the rectangle is declared using a rect element.
x, y – the co-ordinates of the top left corner of the rectangle.

Circle

Ellipse

Polygon

Numbers can be separated by space or comma.
Each pair of numbers represent a point. That is, the {x,y} coordinates of a point.
There must be even number of values.
The last point will be connected to the first point.

Polyline

polyline is similar to polygon element, except the last point does not connect to the first.

SVG Path

The path element is the most powerful element and it can effectively replace any other SVG shapes {rect, circle, line, polygon}.

Path element is also the most complex to understand. If you are scripting SVG with JavaScript, it’s essential to understand the path element.

moveto, lineto

M x y → Move the pen to x y.
L x y → Draw a line to x y.

Path

M → moveto
L → lineto
m → moveto (coordinates relative to previous point)
l → lineto (coordinates relative to previous point)

Path with Cubic Spline

path tag is the most versatile and most frequently used. It can be used to draw curves using bezier curves.

Path’s Default Stroke Style

By default, path’s stroke style is none.
So, you will need to add style="stroke:red" or similar.

lowercase = relative coordinate

Lowercase command names mean use relative coordinates (relative to current point). So, here, we use l to zigzag. Each time, the y coordinate increases by 5, while x goes 8 to the right and -8 to the left.

z = close path

Shortcut Notation

Horizontal line has a shortcut notation. Instead of L 30 0, you can write H 30. Similarly for vertical lines.

H x → Horizontal line to. The y coordinate is the same as current point’s y coordinate.
h x → Horizontal line to, x units relative to current point.

V y → Vertical line to. The x coordinate is the same as current point’s x coordinate.
v y → Vertical line to, y units relative to current point.

Quadratic Bezier Curve

Quadratic bezier curve has just 1 control point.

Q a1 a2 x y → Draw quadratic bezier curve to {x,y}, with control point at {a1,a2}.
q → (relative coordinate).

T x y → Same as Q, except the control point is a reflection of previous Q’s, and if none, use current point.
t → (relative coordinate).

Cubic Bézier Curve

Cubic bezier curve has 2 control points.

C a1 a2 b1 b2 x y → Draw cubic bezier curve to {x,y}, with control points {a1 a2} and {b1 b2}.
c → (relative coordinate).
S b1 b2 x y → Same as C, except that first control point is last C’s ending control point reflected thru current point. If last command is not C, then use current point as first control point.
s → (relative coordinate).

SVG Path: Elliptical Arc

An elliptical arc draws an arc from the current point to a specified point. The arc command begins with the x and y radius and ends with the ending point of the arc. Between these are three other values: x axis rotation, large arc flag and sweep flag.

A rx ry rotate large_arc_flag sweep_flag x y → Draw a elliptical arc from the current point to x,y. The ellipse has radius rx ry (major/minor axis), rotated by rotate (in degrees, clockwise.).
The large_arc_flag and sweep_flag should be 1 or 0, they control which section of the ellipse to use.
a → (relative coordinate).

Basic Parameters

Rotation

Ellipse, rotated 30 degrees

Ellipse, rotated 61 degrees

Ellipse, rotated 91 degrees

Ellipse, rotated 181 degrees

Line Markers

Line markers are simple shapes placed regularly along a path. This can be useful for giving directional arrows or marking distance at a set interval.

If markerUnits is not specified, it defaults to “strokeWidth” This means that 1 in a marker is equivalent to the strokeWidth of the graphic that the marker is applied to.

We need your help!

Do you know a SVG example that we haven’t included in this SVG CheatSheet?

Help us keep the SVG CheatSheet up-to-date and enrich it by sharing the useful SVG examples that you have with other coders.

Share your knowledge

Search