Skip to content

SVG

https://www.youtube.com/watch?v=9Y4P3FvZ5bg

Why SVG

what's it actually?

  • 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
xmlns="http://www.w3.org/2000/svg"

viewBox

<circle>

default fill is black

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

<rect>

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

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

Path

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
z

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

Last update: 2022-11-04