liminfoSVG Path Editor
SVG Path 에디터 - M, L, C, Q, A 명령어 시각적 편집
| # | 명령 | 이름 | 매개변수 |
|---|---|---|---|
| 1 | M | 이동 | 10, 10 |
| 2 | L | 선 | 90, 10 |
| 3 | L | 선 | 90, 90 |
| 4 | L | 선 | 10, 90 |
| 5 | Z | 경로 닫기 |
SVG Path Editor 소개
SVG 경로 시각화 도구는 SVG path 요소의 `d` 속성에 사용되는 압축된 경로 명령어 구문을 해석하는 개발자 전용 도구입니다. `M10 10 L90 90 C50 50 80 20 100 0 Z`와 같은 경로 문자열을 붙여넣으면, 절대 좌표와 상대 좌표 명령어를 모두 포함한 모든 토큰을 즉시 파싱하여 명령어 문자, 이름, 매개변수를 구조화된 표로 보여줍니다.
Inkscape, Figma, Illustrator 같은 벡터 편집기에서 생성된 복잡한 경로 데이터를 디버깅해야 하는 프론트엔드 개발자, 아이콘 디자이너, SVG 애니메이터에게 유용한 도구입니다. 숫자들로 가득한 경로 문자열을 머릿속으로 해석하는 대신, 각 세그먼트가 어떤 모양을 이루는지 한눈에 확인할 수 있습니다. 경로를 수정하면 SVG 미리보기가 실시간으로 업데이트됩니다.
기술적으로 이 파서는 정규식 기반 토크나이저를 사용하여 16가지 SVG 경로 명령어 타입을 모두 인식합니다: M (이동), L (선), H (수평선), V (수직선), C (3차 베지어), S (부드러운 3차 베지어), Q (2차 베지어), T (부드러운 2차 베지어), A (호), Z (경로 닫기) — 각각 절대 좌표(대문자)와 상대 좌표(소문자) 형태를 지원합니다. 모든 처리는 브라우저 내에서만 이루어집니다.
주요 기능
- 네이티브 SVG 요소를 사용한 실시간 경로 미리보기
- 모든 세그먼트를 명령어 문자, 이름, 매개변수로 분해하는 명령어 표
- M, L, H, V, C, S, Q, T, A, Z 및 상대 좌표(소문자) 포함 16가지 SVG 경로 명령어 지원
- 영어(moveTo, lineTo, cubicBezier)와 한국어 명령어 이름 전환 지원
- 매개변수를 정렬하여 읽기 쉽게 표시하는 모노스페이스 폰트
- 100% 클라이언트 사이드 처리 — 경로 데이터가 브라우저 밖으로 전송되지 않음
- 큰 화면에서 미리보기와 테이블을 나란히 표시하는 반응형 레이아웃
- 다크 모드 지원으로 SVG 캔버스와 데이터 표 모두 적절한 대비 유지
자주 묻는 질문
SVG path의 d 속성이란 무엇인가요?
SVG `<path>` 요소의 `d` 속성은 도형의 모양을 정의하는 일련의 그리기 명령어를 포함합니다. M(이동), L(선), C(3차 베지어), A(호), Z(닫기) 같은 명령어 다음에 숫자 좌표가 옵니다. 이 압축된 표기법은 직접 읽기 어렵기 때문에 시각적 파서가 유용합니다.
이 도구가 지원하는 SVG 경로 명령어는 무엇인가요?
모든 표준 SVG 경로 명령어를 지원합니다: M/m (이동), L/l (선), H/h (수평선), V/v (수직선), C/c (3차 베지어), S/s (부드러운 3차 베지어), Q/q (2차 베지어), T/t (부드러운 2차 베지어), A/a (호), Z/z (경로 닫기). 대문자는 절대 좌표, 소문자는 이전 위치 기준 상대 좌표를 사용합니다.
절대 좌표 명령어와 상대 좌표 명령어의 차이는 무엇인가요?
대문자 명령어(M, L, C 등)는 SVG 원점으로부터의 절대 좌표를 사용합니다. 소문자 명령어(m, l, c 등)는 이전 명령어의 끝점으로부터의 상대 좌표를 사용합니다. 상대 좌표 명령어는 쉽게 위치를 바꿀 수 있는 재사용 가능한 경로 조각을 만들 때 유용합니다.
표의 매개변수 열을 어떻게 읽어야 하나요?
매개변수는 각 명령어 뒤에 오는 숫자들입니다. 예를 들어 `M 10 20`의 매개변수 10과 20은 x, y 좌표를 나타냅니다. `C 20 30 40 50 60 70`은 두 개의 제어점 좌표와 하나의 끝점 좌표를 나타내는 6개의 매개변수를 가집니다. 정확한 의미는 명령어 타입에 따라 다릅니다.
경로를 수정하면 실시간으로 변경 사항을 볼 수 있나요?
네. 텍스트 입력란과 SVG 미리보기는 React 상태를 통해 실시간으로 연결되어 있습니다. 경로 데이터를 변경하면 즉시 시각적 미리보기와 파싱된 명령어 표 모두에 반영됩니다.
경로가 미리보기에 표시되지 않는 이유는 무엇인가요?
경로가 빈 것처럼 보이면, 좌표가 0~200 범위의 viewBox 밖에 있거나 도형이 매우 작을 수 있습니다. 이 도구는 경로를 `fill="none"`과 파란색 stroke으로 렌더링합니다. 잘못된 명령어 구문은 빈 결과나 잘린 도형을 만들 수 있습니다.
Figma나 Illustrator에서 내보낸 SVG를 디버깅하는 데 사용할 수 있나요?
네. Figma, Illustrator, Inkscape에서 생성된 SVG 소스 코드에서 `d` 속성 값을 복사하여 입력란에 붙여넣으세요. 도구가 모든 명령어를 파싱하여 목록으로 표시하므로 경로의 각 부분이 어떤 시각적 세그먼트에 해당하는지 쉽게 파악할 수 있습니다.
이 도구는 무료인가요?
네, SVG 경로 시각화 도구는 사용 제한, 계정 요구, 소프트웨어 설치 없이 완전히 무료입니다. 모든 처리가 브라우저에서 로컬로 실행되므로 경로 데이터가 서버로 전송되지 않습니다.