# SVG Reference Summary

`<?xml version="1.1" encoding="utf-8"?>`
```
<svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="18" height="18"
    viewBox="-32 -32 64 64"
></svg>
```

*svgz*

coordinate system
	(0,0) is left-top
		*viewBox* can change this
	viewBox="left top width height"
		`viewBox="0 0 16 16"`
		`viewBox="-64 -64 128 128"`
			(0,0) is now center
	x is horizontal, positive is right
	y is vertical, positive is down
		*transform* can change this
		`transform="scale(1,-1)"`
			(0,0) is now bottom-left
			see below

line
	<line x1 y1 x2 y2 />
rect
	<rect x y width height rx ry />
circle
	<circle cx cy r />
ellipse
	<ellipse cx cy rx ry />

attributes
	fill *color*
	fill-opacity *percent*
	fill-rule
		- `nonzero` - any contained region is filled
		- `evenodd` - 'holes' occur if a path doubles over itself
	stroke *color*
	stroke-width *length*
	stroke-opacity *percent*
	pathLength *length*
	stroke-linecap
		- `square` - around the endpoint
		- `round` - around the endpoint
		- `butt` - flat, no extension
	stroke-linejoin
		- `miter` - corner to a point
		- `round` - corner rounded
		- `bevel` - corner flat cutoff
	opacity *percent*
	transform, see below
		transform-origin
	id
	class
	style

polyline
	<polyline points="x,y x2,y2 ..." stroke="red" stroke-width="2" />
polygon
	<polygon points="x,y x2,y2 ..." fill="blue" fill-rule="evenodd" />
	like *polyline*, but closes to complete shape
path
	<path d="m1,1 h10 v10 z" />
	d
		* caps matter
			- *lowercase* is *relative*
			- *uppercase* is *absolute*
		- `m` - *move*
			- `m x,y`
		- `l` - *line*
			- `l x,y`
		- `h` - *horizontal*
			- `h x`
		- `v` - *vertical*
			- `v y`
		- [MDN - Bézier curve](https://developer.mozilla.org/en-US/docs/Glossary/Bezier_curve)
			- [Wikipedia - Bézier Curves](https://en.wikipedia.org/wiki/B%C3%A9zier_curve#Constructing_B%C3%A9zier_curves)
				- [lerp](https://en.cppreference.com/w/cpp/numeric/lerp)
					- fn lerp( a, b, t ) { a + t*( b - a ) };
					- fn lerp2( a, b ) { fn( t ) { a + t*( b - a ) } };
				- [linear interpolation](https://en.wikipedia.org/wiki/Linear_interpolation)
			- `q` - *quadratic* ( quadratic bezier curve )
				- `q x1,y1 x,y`
			- `t` - *quadratic smooth* ( quadratic bezier curve )
				- `t x,y`
				- `x1,y1` are reflected from previous curves
					- default to *current point* if not prev curve
			- `c` - *cubic* ( cubic bezier curve )
				- `c x1,y1 x2,y2 x,y`
			- `s` - *cubic smooth* ( cubic bezier curve )
				- `s x2,y2 x,y`
				- `x1,y1` are reflected from previous curves
		- `a` - *arc* ( elliptic arc )
			`a rx,ry angle large-arc-flag sweep-flag x,y`
			- *angle* is in *degrees*
			- *large-arc-flag*: `0` is *small*, `1` is *large*
			- *sweep-flag*: `0` is *counterclockwise*, `1` is *clockwise*
		- `z` - *close subpath*

transform
	- translate( x,y )
		- `y` is *optional*
	- scale( x,y )
		- `y` is *optional*
	- rotate( a, x,y )
		- `x,y` is *optional*
	- skew
		- skewx( a )
		- skewy( a )
		- `a` is an *angle*
	- matrix( a,b,c,d,e,f )
		- ```
		+-     -+   +- -+   +-                 -+
		| a c e |   | x |   | ( a*x + c*y + e ) |
		| b d f | * | y | = | ( b*x + d*y + f ) |
		| 0 0 1 |   | 1 |   | (       1       ) |
		+-     -+   +- -+   +-                 -+
		- ```

g
	- group; useful for mass transformations, etc.
	- <g transform="...">...</g>
use
	- <use href="#another-id" transform="translate(2,3)" />
	- attributes can be applied
defs
	- group element, not rendered
	- see <use />
symbol
	- group element, not rendered
	- *id*,*width*,*height*,*viewBox* useful
	- see <use />

( TODO )
****************
clippath
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-path
mask
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/mask
... (css)
https://drafts.fxtf.org/css-masking/#clipping
https://drafts.fxtf.org/css-masking/#masking
https://developer.mozilla.org/en-US/blog/css-color-module-level-4/
https://w3c.github.io/csswg-drafts/css-color-5/#color-mix
https://drafts.csswg.org/css-color-5/#color-mix
****************

gradients
	linearGradient
		- group element, see <stop />
		- `gradientTransform="rotate(90)"`
	radialGradient
		- group element, see <stop />
		- attributes: cx, cy
	stop
		- <stop offset="50%" stop-color="red" />
		- `fill="url('#gradient-id')"`

pattern
	- group element, not rendered
	- *id*,*width*,*height*,*viewBox* useful
	- `fill="url('#pattern-id')"`

text
	<text>hello world</text>
desc
	<desc>this is a longer description</desc>
title
	<title>The Title</title>

image
	<image href x y width height />

view ???

animate

style
script