SVG Graphics Geometry
Guide
css-matrix
Guide
css-matrix
  • Part 0. SVG coordinate systems

    • viewBox와 user space
    • transform attribute와 matrix
  • Part 1. Path grammar

    • path d 명령어 — M, L, Z
    • H, V — 축 정렬 직선
    • C — cubic Bézier
    • Q — quadratic Bézier
    • S, T — smooth continuation
    • A — elliptical arc
    • path bounding box
  • Part 2. Stroke geometry

    • 점에서 stroke까지의 거리
    • join, cap, miter limit
    • stroke align과 outline 개념
    • miter length 공식
  • Part 3. Fill rules

    • nonzero vs evenodd
    • fill hit testing
  • Part 4. Path sampling

    • flatten tolerance
    • path length
    • point at length와 tangent
  • Part 5. Paint servers

    • linearGradient 좌표
    • clipPath와 mask 개념
  • Part 6. Path editor capstone

    • path handle 모델
    • handle hit testing
    • handle drag로 segment 갱신
    • mini path editor — SVG round-trip
  • Part 7. Fill & winding deep dive

    • winding vs ray casting
    • compound path — 여러 subpath
    • self-intersection
    • path boolean
    • fill vs stroke hit 우선순위
    • scanline parity
  • Part 8. Pattern & gradient

    • radialGradient
    • pattern tile
    • gradientUnits와 spreadMethod
  • Part 9. SVG filter & Figma effects

    • Figma DROP_SHADOW → SVG filter
    • filter chain 개요
    • blur · offset · merge
    • inner shadow
    • layer blur vs background blur
    • Figma effect 매핑표 전체
  • Part 10. Figma ↔ SVG bridge

    • vector network vs path d
    • fill · stroke export
    • boolean operations export
    • mask · clip export
  • Part 11. Icon design

    • pixel grid · optical alignment
    • fill vs stroke icons
    • symbol · sprite · currentColor
    • path simplification
  • Appendix A. SVG in CSS

    • currentColor 아이콘
    • sprite · data URI
    • viewBox · export 최적화
  • Appendix B. Engine extras

    • stroke-dasharray · offset path
    • adaptive flatten
    • arc → cubic 변환
    • multi-subpath handle editing
  • Part 12. Foundations primer

    • SVG 한 장 지도
    • 좌표 스택 — pointer → user space
  • Part 13. Figma ↔ SVG (deep)

    • Figma paint types & gap map
    • radial · angular gradient export
    • image · pattern fill
    • stroke align export
    • blend mode · layer opacity
  • Part 14. SVG spec breadth

    • markers — 화살표와 dash 끝
    • text · textPath
    • paint-order · opacity · filters
    • arc flatten 통합

커리큘럼 로드맵

완료 (v0.3) — 001–024

Part강의상태
0001–002 좌표계✅
1003, 007–012 path grammar✅
2004–006, 013 stroke✅
3014–015 fill rules 입문✅
4016–018 sampling✅
5019–020 paint servers 입문✅
6021–024 path editor✅

완료 (v0.9) — 001–065

Part강의상태
7025–030 fill & winding 심화✅
8032–034 pattern & gradient✅
9031, 035–039 SVG filter & Figma effects✅
10040–043 Figma ↔ SVG bridge✅
11044–047 Icon design✅
부록 A048–050 SVG in CSS✅
부록 B051–054 Engine extras✅
12055–056 Foundations primer✅
13057–061 Figma ↔ SVG (deep)✅
14062–065 SVG spec breadth✅

Part 7. Fill & winding 심화 (025–030)

ID제목
025winding vs ray casting
026compound path / 여러 subpath
027self-intersection
028path boolean (union/subtract/intersect)
029fill vs stroke hit 우선순위
030scanline parity 시각화

Part 8. Pattern & gradient ✅

ID제목
032radialGradient
033pattern tile
034gradientUnits / spreadMethod

Part 9. SVG filter + Figma effects ✅

ID제목
031Figma DROP_SHADOW → feDropShadow
035filter chain 개요
036blur / offset / merge
037inner shadow
038layer blur vs background blur
039Figma effect 매핑표 전체

Part 10. Figma ↔ SVG bridge ✅

ID제목
040vector network vs path d
041fill / stroke export
042boolean operations
043mask / clip export

Part 11. Icon design ✅

ID제목
044pixel grid & optical alignment
045fill vs stroke icons
046symbol / sprite / currentColor
047path simplification

부록 A. SVG in CSS ✅ (css-matrix와 분담)

ID / 주제담당
048 currentColorsvg-matrix
049 sprite, data URIsvg-matrix
050 viewBox / simplifysvg-matrix
mask-image, clip-path: path()css-matrix
vector-effect: non-scaling-strokecss-matrix

부록 B. Engine extras ✅

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

Part 12. Foundations primer ✅

ID제목
055SVG capability map
056coordinate stack

Part 13. Figma ↔ SVG (deep) ✅

ID제목
057Figma paint gap map
058radial / angular gradient
059image / pattern fill
060stroke align export
061blend mode / opacity

Part 14. SVG spec breadth ✅

ID제목
062markers
063text / textPath
064paint-order / turbulence
065arc flatten unified
최근 수정: 26. 5. 16. PM 3:04
Contributors: jinho.park.s3, Cursor