SVG Cheatsheet

Published:

A concise technical SVG reference.

<svg width="128" height="128" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg>

<svg width="128" height="128" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg"></svg>

Rectangle <rect>

Parameters: Position, Size, optional corner radius

<rect x="10" y="10" width="50" height="50" />
<rect x="10" y="10" width="50" height="50" rx="20" ry="20" />

Circle <circle>

Parameters: center position, radius

<circle cx="25" cy="75" r="20"/>

Ellipse <ellipse>

Parameters: center position, radius

<ellipse cx="30" cy="30" rx="20" ry="25" />

Line <line>

Parameters: position 1, position 2

<line x1="10" y1="10" x2="80" y2="30" />

Polyline <polyline>

Parameter: points - as separators can be used space, comma, LF/EOL

<polyline points="10,10 20,10 30,30 10,50 10,30" /> equals <polyline points="10 10,20 10,30 30,10 50,10 30" />

Polygon <polygon>

Parameter: points - as separators can be used space, comma, LF/EOL

<polygon points="10,10 20,10 30,30 10,50 10,30" />

Path <path>

Parameter: draw commands (d)

Path Commands

Commands use upper-case for absolute coordinates and lower-case for relative coordinates.

  • L x y and l dx dy for Line To
  • H x h dx horizonal line
  • V x v dx vertical line
  • Z z close path
  • Q x1 y1 x y quadratic Bèzier curve - target point xy, curve control point x1y1
  • T symmetric quadratic curve transition - must follow Q or T curve command - otherwise uses current point as first control point (resulting in a line)
  • C x1 y1 x2 y2 x y cubic Bèzier curve - with x y target point and x1y1 x2y2 curve control points
  • S symmetric cubic curve transition - must follow C or S curve command - otherwise uses current point as first control point
  • A arc - A rx ry x-axis-rotation large-arc-flag sweep-flag x y - large-arc-flag: the arc should be greater than or less than 180 degrees (circle draw direction)

Text <text>

Parameters: Position

This is a text sentence. This is a text sentence. This is a text sentence.

Inline Span <tspan>

This is a text sentence.

Text Path <textPath>

This is a text sentence.

Group <g>

Groups elements to apply properties to all elements of the group at once (like styles and transformation).

Raster Image <image>

<image href="" />

Clipping <clipPath> and Masking <mask>

Filter <filter>

CSS filters work on SVG.

SVG defines a filter element too:

Font <font>

⚠️ Web-Deprecated - see note on https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_fonts

<use>

<use> deep-clones into a non-DOM-exposed element (into a shadow DOM).