vector network vs path d

Figma vectorNetwork (vertices + segments)와 SVG d 는 같은 곡선의 두 표현입니다. 편집기는 network, 브라우저·export는 d가 일반적입니다.

데모에서 볼 것

M 80 120 C 140 40, 500 360, 560 120

• 파란 path — SVG d
• readout:
  • FIGMA_VECTOR_MODEL.figma → FIGMA_VECTOR_MODEL.svg
  • pathDToFigmaNetwork(d) → JSON vertices / segments
  • figmaNetworkToPathD(network) → rebuilt d (round-trip 확인)

network 구조

{
  vertices: [{ x, y }, …],
  segments: [
    { start: 0, end: 1 },                                    // line
    { start: 1, end: 2, tangentStart, tangentEnd }         // cubic
  ],
  closed: false
}

변환 API

import {
  figmaNetworkToPathD,
  pathDToFigmaNetwork,
  FIGMA_VECTOR_MODEL
} from "svg-matrix-core";

const network = pathDToFigmaNetwork(pathD);
const rebuilt = figmaNetworkToPathD(network);

pathFromD / pathDFromSegments(003)와 함께 쓰면 segments graph를 중간에 둘 수 있습니다.

path editor 연결

Figma plugin     → vectorNetwork
import           → parsePathD → segments
UI               → listPathHandles ([021](./lesson-021.md))
export SVG       → pathDFromSegments / figmaNetworkToPathD

024 capstone editor는 d 중심; Figma sync는 network ↔ d 브리지.

Core API

관련

• 003 · 021 · 024 · 042

오늘의 핵심

저장(network)과 전송(d)을 분리하면 Figma·SVG·내부 segments가 한 geometry 엔진을 공유합니다.