SVG Path에서 좌표 추출 및 배열 변환기
SVG 패스 데이터(d 속성)를 분석하여 X, Y 좌표 위치값 및 명령어 리스트를 JSON/CSV 형식으로 파싱
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
SVG 파일 내 `<path>` 태그의 `d` 속성에 들어있는 복잡한 드로잉 텍스트 명령어(M, L, C, Z 등)를 분석하여, 각 단계의 좌표값만 추출해 개발에 활용할 수 있도록 정규화된 JSON이나 CSV 리스트로 정리해 주는 도구입니다.
사용 방법
- 분석을 원하는 SVG 패스 `d` 속성 문자열(예: M10 10 L20 20...)을 입력합니다.
- 추출할 출력 형식(구조화된 JSON, 순수 X/Y 포인트 쌍, CSV 표 데이터)을 설정합니다.
- 좌표 추출하기 버튼을 실행하여 변환된 결과를 확인하고 복사합니다.
자주 묻는 질문
- 이 도구는 어떤 용도로 사용하나요?
- 웹 프론트엔드 개발 시 HTML Canvas 상에 SVG 모양을 똑같이 그리거나, Three.js/WebGL에서 좌표 정점(Vertex) 데이터로 가공할 때, 혹은 모션 애니메이션 라이브러리에 키프레임 좌표 배열을 주입할 때 매우 유용하게 쓰입니다.