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

• curve https://css-tricks.com/svg-path-syntax-illustrated-guide/

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: 2023-02-03