Are you a 🤖?
Search
Search

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 logo The logo combines 2 entities displayed horizontally: the drawing of a flower or star shape with eight arms; and the text ‘SVG’. These 2 entities are set horizontally. SVG logo image/svg+xml 2007-11-01 The logo combines 2 entities displayed horizontally: the drawing of a flower or star shape with eight arms; and the text ‘SVG’. These 2 entities are set horizontally. SVG

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

<svg width="100" height="100">
 <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" stroke = "black" stroke-width = "3"/>
</svg>

Rectangle

  • rect – the rectangle is declared using a rect element.
  • x, y – the co-ordinates of the top left corner of the rectangle.
<svg width="100" height="82">
<rect x = "10" y = "10" width = "40" height = "68" fill = "yellow" stroke = "black" stroke-width = "3"/>
</svg>

Circle

<svg width="120" height="100">
    <circle cx = "50" cy = "50" r = "45" fill = "orange" stroke = "navy" stroke-width = "10"/>
</svg>

Ellipse

<svg width="250" height="100">
<ellipse cx="50" cy="50" rx="50" ry="30"
style="fill:red; stroke:green; stroke-width:5" />
</svg>

Polygon

<svg width="185" height="185">
<polygon points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill = "green" stroke = "black" stroke-width = "3"/>
</svg>
  • 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

<svg width="100" height="100" >
<polyline points = "20,20 40,25 60,40 80,120 120,140 200,180" fill = "none" stroke = "black" stroke-width = "3"/>
</svg>

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.

<svg viewBox = "0 0 1100 140" version = "1.1">
    <!-- A triangle with absolute coordinates -->
    <path d = "M 200 50 L 300 150 L 200 150 L 200 50" stroke = "red" stroke-width = "3" fill = "none"/>
    <!-- A triangle with relative coordinates -->
    <path d = "M 500 50 l 100 100 l -100 0 l 0 -100" stroke = "green" stroke-width = "3" fill = "none"/>
    <!-- Practical use of relative moves -->
    <path d = "M 700 50 l 100 100 m 0 -100 l 100 100 m 0 -100 l 100 100" stroke = "blue" stroke-width = "3"/>
</svg>

moveto, lineto

<svg width="100" height="100">
<path d="M 0 0 L 50 0 L 0 50 L 90 90"
style="stroke:black; fill:yellow; stroke-width:5" />
</svg>
  • M x y → Move the pen to x y.
  • L x y → Draw a line to x y.

Path

<svg width="100" height="100">
<path d="M 0 0 L 50 50 L 40 10 m 40 10 l 10 10"
style="stroke:black; fill:green"></svg>
  • M → moveto
  • L → lineto
  • m → moveto (coordinates relative to previous point)
  • l → lineto (coordinates relative to previous point)

Path with Cubic Spline

<svg width="100" height="100">
<path d="M 10 20 C 50 -15 90 45 10 80 L 60 80"
style="stroke:black; fill:none" />
</svg>

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

<svg width="100" height="100">
<path d="M 0 0 L 50 50" style="stroke:blue" />
</svg>

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

lowercase = relative coordinate

<svg width="100" height="100">
<path d="m 50 0
l  8 5
l -8 5
l  8 5
l -8 5
l  8 5
l -8 5
l  8 5
l -8 5"
style="stroke:black; fill:yellow" />
</svg>

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

<svg width="100" height="100">
<path d="m 10 10 l 0 20 l 30 30 z"
style="stroke:black; fill:yellow" />
</svg>

Shortcut Notation

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

<svg width="100" height="100">
<path d="M 10 10 h 10 v 10 h 10 v 10 h 10 v 10"
style="stroke:black; fill:yellow" />
</svg>
  • 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

A B C Sorry, your browser does not support inline SVG.

Quadratic bezier curve has just 1 control point.

<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
  Sorry, your browser does not support inline SVG.
</svg>
  • Q a1 a2 x y → Draw quadratic bezier curve to {x,y}, with control point at {a1,a2}.
  • q → (relative coordinate).
<svg width="100" height="100">
<path d="M 0 0 Q 100 0 , 100 100"
style="stroke:green; fill:yellow" />
</svg>
  • 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).
<svg width="100" height="100">
<path d="M 0 0 Q 100 0 , 100 100"
style="stroke:blue; fill:yellow" />
</svg>

Cubic Bézier Curve

Cubic bezier curve has 2 control points.

<svg width="100" height="100">
<path d="M 0 0 C 100 0, 0 100, 100 100"
 style="stroke:red; fill:yellow" />
</svg>
  • 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

<svg viewBox = "0 0 1100 400" version = "1.1">
    <g stroke = "yellow" stroke-width = "3" fill = "none">
        <path d = "M 50 200 a 100 50 0 1 1 250 50"/>
        <path d = "M 400 100 a 100 50 30 1 1 250 50"/>
        <path d = "M 400 300 a 100 50 45 1 1 250 50"/>
        <path d = "M 750 200 a 100 50 135 1 1 250 50"/>
    </g>
</svg>

Rotation

Ellipse, rotated 30 degrees

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 30, 0 0, 90 50 L 100 50"
style="stroke:green; fill:yellow" />
</svg>

Ellipse, rotated 61 degrees

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 61, 0 0, 90 50 L 100 50"
style="stroke:green; fill:yellow" />
</svg>

Ellipse, rotated 91 degrees

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 91, 0 0, 90 50 L 100 50"
style="stroke:green; fill:yellow" />
</svg>

Ellipse, rotated 181 degrees

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 181, 0 0, 90 50 L 100 50"
style="stroke:green; fill:yellow" />
</svg>

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.

<svg viewBox = "0 0 4000 2000" version = "1.1">
    <defs>
        <marker id = "StartMarker" viewBox = "0 0 12 12" refX = "12" refY = "6" markerWidth = "3" markerHeight = "3" stroke = "green" stroke-width = "2" fill = "none" orient = "auto">
            <circle cx = "6" cy = "6" r = "5"/>
        </marker>
        <marker id = "MidMarker" viewBox = "0 0 10 10" refX = "5" refY = "5" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3" stroke = "lightblue" stroke-width = "2" fill = "none" orient = "auto">
            <path d = "M 0 0 L 10 10 M 0 10 L 10 0"/>
        </marker>
        <marker id = "EndMarker" viewBox = "0 0 10 10" refX = "5" refY = "5" markerUnits = "strokeWidth" markerWidth = "3" markerHeight = "3" stroke = "red" stroke-width = "2" fill = "none">
            <rect x = "0" y = "0" width = "10" height = "10"/>
        </marker>
    </defs>
    <path d = "M 200 250 L 700 100 L 900 350 L 1200 400 L 1300 200 L 1700 680 L 2200 680 L 2600 400" fill = "none" stroke = "black" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)"/>
    <path d = "M 1000 750 S 2000 750 2500 1250 S 1200 1000 1300 1400 S 1700 1480 1900 1200" fill = "none" stroke = "tomato" stroke-width = "50" marker-start = "url(#StartMarker)" marker-mid = "url(#MidMarker)" marker-end = "url(#EndMarker)"/>
</svg>

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

Menu