tutorials
tutorials copied to clipboard
SVG and canvas tutorial
Here's a suggested plan for SVG:
Lesson 1 - Introducing SVG
- Quick intro to image formats: vector vs raster
- Tools: same tools as HTML, show dev tools
- SVG tag
- Standalone
- Embedded in HTML
- Shapes
- line
- rect
- circle
- ellipse
- polygon
- text + tspan: differences with HTML text, no wrap
- Ordering (no Z attribute)
- Styling SVG with CSS
- fill (and how it applies to text)
- stroke (and how it applies to text)
Lesson 2 - Path
- Polyline
- Path
- Move
- Line (L, H, V)
- Arc
- Quadratic (Q, T)
- Cubic (C, S)
- Close path (Z)
- Fill rule
- Nonzero
- Evenodd
Lesson 3 - Groups and Transforms
- Groups (g)
- Transforms
- Translate
- Rotate
- Scale
- skewX + skewY
- Matrix
Lesson 4 - Advanced SVG
- Image
- Colours
- Gradients
- Styling text
- Stroke, fill, etc
- textPath docs
- Markers
- Animations
- Viewbox