강의 구성

SVG를 렌더링·편집·변환의 1급 모델로 다루는 독립 강의입니다. 전체 로드맵: ROADMAP.md · Figma filter 표: figma-filter-mapping.md

Part 0. SVG coordinate systems

• 001. viewBox와 user space
• 002. transform attribute와 matrix

Part 1. Path grammar

• 003. path d 명령어 — M, L, Z
• 007. H, V — 축 정렬 직선
• 008. C — cubic Bézier
• 009. Q — quadratic Bézier
• 010. S, T — smooth continuation
• 011. A — elliptical arc
• 012. path bounding box

Part 2. Stroke geometry

• 004. 점에서 stroke까지의 거리
• 005. join, cap, miter limit
• 006. stroke align과 outline 개념
• 013. miter length 공식

Part 3. Fill rules (intro)

• 014. nonzero vs evenodd
• 015. fill hit testing

Part 4. Path sampling

• 016. flatten tolerance
• 017. path length
• 018. point at length와 tangent

Part 5. Paint servers (intro)

• 019. linearGradient 좌표
• 020. clipPath와 mask 개념

Part 6. Path editor capstone

• 021. path handle 모델
• 022. handle hit testing
• 023. handle drag로 segment 갱신
• 024. mini path editor — SVG round-trip

Part 7. Fill & winding deep dive

• 025. winding vs ray casting
• 026. compound path — 여러 subpath
• 027. self-intersection
• 028. path boolean
• 029. fill vs stroke hit 우선순위
• 030. scanline parity

Part 8. Pattern & gradient

• 032. radialGradient
• 033. pattern tile
• 034. gradientUnits와 spreadMethod

Part 9. SVG filter & Figma effects

• 031. Figma DROP_SHADOW → SVG filter
• 035. filter chain 개요
• 036. blur · offset · merge
• 037. inner shadow
• 038. layer blur vs background blur
• 039. Figma effect 매핑표 전체
• Figma effect → SVG filter 매핑표

Part 10. Figma ↔ SVG bridge

• 040. vector network vs path d
• 041. fill · stroke export
• 042. boolean operations export
• 043. mask · clip export
• Figma node → SVG 매핑

Part 11. Icon design

• 044. pixel grid · optical alignment
• 045. fill vs stroke icons
• 046. symbol · sprite · currentColor
• 047. path simplification

Appendix A. SVG in CSS

• 048. currentColor 아이콘
• 049. sprite · data URI
• 050. viewBox · export 최적화

mask-image, clip-path: path(), vector-effect 등 CSS 전용 주제는 css-matrix 부록을 참고하세요.

Appendix B. Engine extras

• 051. stroke-dasharray · offset path
• 052. adaptive flatten
• 053. arc → cubic 변환
• 054. multi-subpath handle editing

Part 12. Foundations primer

• 055. SVG 한 장 지도
• 056. 좌표 스택 — pointer → user space

Part 13. Figma ↔ SVG (deep)

• 057. Figma paint types & gap map
• 058. radial · angular gradient export
• 059. image · pattern fill
• 060. stroke align export
• 061. blend mode · layer opacity
• Figma paint gap map

Part 14. SVG spec breadth

• 062. markers
• 063. text · textPath
• 064. paint-order · opacity · filters
• 065. arc flatten 통합