SVG Graphics Geometry

SVG path, stroke, fill, and coordinate math for vector editors

강의 시작

SVG coordinates

viewBox, preserveAspectRatio, and transform stacks as real geometry—not DOM shortcuts.

Path & stroke

Parse path d, measure distance to segments, and understand join, cap, and miter.

Editor-first

Built for people implementing path tools, SVG export, and Figma-like vector workflows.

어떤 강의인가요?

css-matrix와 별개의 독립 강의입니다. DOM/CSS로 에디터 뼈대를 만든 뒤, SVG path·stroke·fill 수학을 깊게 다룹니다.

시리즈 위치

css-matrix           → DOM/CSS/SVG overlay, Figma to CSS
svg-matrix (here)    → SVG rendering & path geometry
webgl-webgpu-matrix  → GPU renderer

다루는 범위 (v0)

  • Part 0: SVG coordinate systems
  • Part 1: Path grammar
  • Part 2: Stroke geometry
  • Part 3+: Fill, sampling, paint servers (planned — see guide README)