codebar / tutorials

🗒 codebar's tutorials

http://tutorials.codebar.io/

257 stars 241 forks source link

SVG and canvas tutorial #100

Open despo opened 10 years ago

brunogirin commented 5 years ago

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