Skip to content

svg

Jump to bottom
Andrew Hick edited this page Jan 27, 2026 · 3 revisions

How to create SVG (Scalable Vector Graphics) images.

This page is a work in progress

SVG syntax

Main tag

<svg width="400" height="400" viewBox="0 0 400 400" aria-label="My first graphic">
<!-- svg content goes here -->
</svg>

Common properties

The following properties are shared between elements.

  • fill: Specify a colour to fill a shape with, such as #dd0, none or other values
  • stroke: Specify a stroke colour for a shape, such as #222 or other values
  • stroke-dasharray: create a dotted line by specifying how many pixels are "on" and how many are "off" in the dotted pattern
  • stroke-linecap: TO DO add values round
  • stroke-width: how wide a stroke is in pixels

Lines

<line x1="80" y1="80" x2="200" y2="200" stroke="#222" stroke-width="1"/>
  • x1,y1: coordinates of the start of the line
  • x2,y2: coordinates of the end of the line

Rectangles

<rect x="0" y="0" width="600" height="400" fill="#fff" />
  • x,y: coordinates of the top left corner
  • width, height: width and height in pixels
  • rx,ry: the radius by which the corners will be rounded (split into horizontal and vertical)

Circles and ellipses

<circle cx="140" cy="140" r="70" fill="none" stroke="#000" stroke-width="1"/>

<ellipse cx="150" cy="150" rx="75" ry="50" fill="#36d" stroke="#000" stroke-width="1" />
  • cx, cy: coordinates of the centre of the circle or ellipse
  • r: radius of a circle
  • rx, ry: radius of an ellipse along the x and y axes

Paths

  • d = data
  • M = Move to (every path needs this at the start)
  • L = Line to
  • Q = quadratic curve (1 point bezier), where Q x1,y1 x2,y2 gives:
    • the point you were previously at is the start point
    • x1,y1 is the control point
    • x2,y2 is the end point
  • T creates a quadratic curve which automatically smooths the angle from the previous curve
  • C = cubic curve (2 point bezier), where C x1,y1 x2,y2 x3,y3 gives:
    • x1,y1 is the 1st control point
    • x2,y2 is the 2nd control point
    • x3,y3 is the end point
  • S creates a cubic curve which automatically smooths the angle from the previous curve
  • A = arc where A rx,ry rotation large-arc-flag sweep-flag end-x end-y gives:
    • start point of the line is where you left off
    • rx,ry is the x and y radius of the arc
    • rotation is only needed for ellipses, doesn't do anything for circles
    • large-arc-flag is 1 if the ellipse takes the long path rather than the short path
    • sweep flag is 1 for clockwise, 0 for anti-clockwise
    • end-x,end-y is the end point of the arc For arcs, don't specify a centre, specify start and end points!
  • Z = close path
  • lowercase letters = relative rather than absolute coordinates

Polygons

<polygon points="60,100 100,180 140,140 180,180 220,100" />

Text

<text x="50" y="50" font-size="24" fill="#000" text-anchor="middle">hello</text>
  • x: the x-coordinates of the start, middle or end of the text depending on the value of text-anchor
  • y: the y-coordinate of the baseline of the text
  • font-size: the font size in SVG pixels
  • text-anchor: whether the coordinates refer to the text start, middle or end

Styles

TO DO: work out which properties (that I've used) can be replicated in CSS

TO DO: SVG1 doesn't allow all properties to be specified in a stylesheet. Make a note about SVG2.

Reuse

Groups

TO DO

Symbols

TO DO

Guides

The following guides from Josh W Comeau are brilliant and helped me create my first SVG images:

Clone this wiki locally