SVG and canvas tutorial

[despo]

[brunogirin]

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