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