Skip to content



How SVG describes an image

  • container that defines a new coordinate system and viewport
  • can embed an SVG in HTML or another SVG

TODO: nested SVGs???

<svg> properties

  • width
  • height



default fill is black

<circle r="120" cx="125" cy="125" fill="none" stroke="red" stroke-width="10" />


<rect x="0" y="0" height="100" width="100" rx="15" ry="100" />

Round corners

  • how many pixels before it stops curving
  • same as border-radius

if either rx or ry is 0, then it goes back to 90 degree angles


<line x1="10" y1="125" x2="225" y2="225" stroke="green" />


M 213.1,6.7
  • Move to (don't draw anything)

upper case: absolute lower case: relative

c -32.4-14.4-73.7,0-88.1,30.6

closes the path

Mx,y Move to the absolute coordinates x,y
mx,y Move to the right x and down y (or left and up if negative values)
Lx,y Draw a straight line to the absolute coordinates x,y
lx,y Draw a straight line to a point that's relatively right x and down y (or left and up if negative values)
Hx Draw a line horizontally to the exact coordinate x
hx Draw a line horizontally relatively to the right x (or to the left if a negative value)
Vy Draw a line vertically to the exact coordinate y
vy Draw a line vertically relatively down y (or up if a negative value)
Z(orz) Draw a straight line back to the start of the path

SVG Sprites


<svg xmlns="" style="display:none;">
  <symbol id="icon-circle" viewBox="0 0 32 32">
    <circle cx="16" cy="16" r="16" />
<svg xmlns="" width="32" height="32">
  <use href="#icon-circle" />

Using SVG Sprites in React

function Icon({ id, ...props }) {
  return (
    <svg {...props}>
      <use href={`/images/sprite.svg#${id}`} />

<Icon id="icon-circle" />

Last update: 2023-04-24