SVG Graphics Geometry
Guide
css-matrix
Guide
css-matrix
  • Part 0. SVG 기초

    • SVG란 무엇인가
    • viewBox와 user space
    • transform attribute와 matrix
    • SVG 문서 구조와 기본 도형
  • 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 · CSS theming
    • sprite data URI
    • SVG optimization pipeline
  • Appendix B. Engine extras

    • dash offset animation
    • adaptive flatten
    • arc → cubic 변환
    • multi-subpath editing
  • Part 12. Foundations primer

    • capability map
    • coordinate stack
  • Part 13. Figma ↔ SVG (deep)

    • Figma paint 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 통합
  • Part 15. Curve calculus

    • de Casteljau subdivision
    • flatness와 chord error
    • 곡률 κ와 법선
    • arc center parameterization
    • G¹ smooth — S와 T
    • shoelace signed area
  • Part 16. Intersection & proximity

    • segment intersection
    • line ∩ cubic · curve ∩ curve
    • closest point on curve
  • Part 17. Offset curves

    • normal offset sampling
    • offset cusps
  • Part 18. Transform algebra

    • affine inverse & decompose
    • transform path vs group
  • Part 19. Rational curves

    • circle as cubic — κ constant
    • rational curves & exact arcs
  • Part 20. Tessellation & pixels

    • convex triangulation · ear clipping
    • evenodd parity → pixels
  • Part 21. Compositing math

    • Gaussian blur kernel
    • Porter–Duff & premultiplied α
  • Part 22. Math topic map

    • SVG 수학 주제 지도
  • Part 23. SVG animation

    • SMIL — animate 속성
    • SMIL — animateTransform
    • SMIL — animateMotion
    • stroke dash draw-on
    • CSS offset-path motion
    • path morph
    • JS motion along path
  • Part 24. Motion precision

    • uniform speed along path
    • cubic–cubic intersection
    • SVGPathElement length API
    • SMIL keyTimes & keySplines
    • degree elevation Q→C
  • Part 25. GPU mesh & WAAPI

    • triangulation with holes
    • WAAPI + SVG attributes
    • evenodd fill + triangle mesh

self-intersection

path가 스스로 교차하면 “안/밖”이 직관과 어긋날 수 있습니다. 같은 점도 014 fill-rule에 따라 inside가 바뀝니다. compound 구멍(026)과 달리, 한 subpath 안에서 edge가 겹칩니다.

데모에서 볼 것

5각 별 (self-intersecting):

M 50 0 L 61 35 L 98 35 L 68 57 L 79 91 L 50 70 L 21 91 L 32 57 L 2 35 L 39 35 Z
  • toolbar fill-rule: nonzero / evenodd
  • 포인터 이동 — inside 초록 / outside 연한 배경
  • readout: winding, crossings, inside (rule)=…

별 중앙 오각형·팔 교차부 근처를 nonzero ↔ evenodd로 바꿔 가며 클릭해 보세요. 한 점에서 insideNonZero !== insideEvenOdd인 영역이 있습니다.

두 규칙 (복습)

nonzeroevenodd
판정winding ≠ 0crossings % 2 === 1
별 중앙winding 누적에 따라 안일 수 있음밖인 경우 많음 (직관적 “구멍”)
8자 bow-tie 중앙상황에 따라 안밖 (테스트 고정)
import { classifyPointInPath, parsePathD } from "svg-matrix-core";

const segments = parsePathD(starD);
const c = classifyPointInPath(point, segments, "evenodd", {
  stepsPerCurve: 16
});

c.inside;           // 선택한 rule
c.insideNonZero;    // 참고
c.insideEvenOdd;
c.winding;
c.crossings;

bow-tie (8자) — 테스트 path

M 0 0 L 40 40 L 40 0 L 0 40 Z
const lobe = classifyPointInPath({ x: 5, y: 5 }, parsePathD(d), "evenodd");
// crossings === 2 → inside === false

014 fill.test와 동일 — 교차 루프 한가운데는 evenodd에서 밖.

왜 달라지나

        ╲   ╱
         ╲ ╱   ← edge가 두 번 지나감
          X
         ╱ ╲
        ╱   ╲
  • winding: 방향 있음 edge마다 ±1 — 루프가 겹치면 합이 0이 아닐 수 있음
  • evenodd: ray crossing 횟수만 — 짝수면 밖

self-intersect는 “버그”가 아니라 규칙 선택 문제입니다.

flatten · hit

classifyPointInPath는 016 flattenPathSegments로 polygon을 만든 뒤 014 winding/ray를 씁니다. 곡선이 있으면 stepsPerCurve를 키워야 교차 근처 hit이 안정적입니다 (015).

편집기 · export · boolean

상황권장
별·리본·레이스evenodd (Figma SUBTRACT/EXCLUDE도 often evenodd)
단일 외곽 실선nonzero
028 boolean 전결과 path에 어떤 rule로 fill할지 먼저 고정
102 meshevenodd raster + triangulation
import { figmaBooleanToFillRule } from "svg-matrix-core"; // figma-bridge
// SUBTRACT / EXCLUDE → evenodd

026은 여러 subpath 구멍, 027은 한 subpath 교차 — fill-rule 혼동하지 마세요.

Core API

함수역할
classifyPointInPathinside + winding + crossings + both rules
pointInPathboolean만
segmentsToSubpaths별은 보통 subpath 1개
evenoddParityFromRayCastpolygon 단위 (084)

관련

  • 014 · 025 · 026 · 028 · 084 · 100

오늘의 핵심

self-intersect path는 nonzero vs evenodd를 반드시 제품에서 선택해야 합니다. 별·8자는 evenodd가 “구멍” 직관에 가깝고, boolean·Figma export와 028 전에 rule을 고정하세요.

최근 수정: 26. 5. 17. PM 4:35
Contributors: jinho.park.s3, Cursor
Prev
compound path — 여러 subpath
Next
path boolean