SVG 경로 편집기
픽셀 이미지를 자동 추적하거나 완성된 SVG를 래스터로 바꾸는 대신 실제 경로 좌표를 편집합니다. SVG path의 d 값을 붙여넣고 하위 경로를 선택해 앵커와 베지어 제어 핸들을 드래그하세요. 노드를 추가·삭제하고 윤곽을 열거나 닫은 뒤 실행 취소/다시 실행과 벡터 SVG 출력을 이용할 수 있습니다. 절대·상대 M, L, H, V, C, S, Q, T, Z 명령을 받으며 2차 곡선은 같은 형상의 3차 제어점으로 바꿉니다. 원호 A 명령과 SVG 문서 전체는 명시적으로 거부하므로 지원하지 않는 도형이 몰래 달라지지 않습니다.
주요 기능
- 절대·상대 SVG 경로 데이터와 여러 열린·닫힌 하위 경로 가져오기
- 앵커와 베지어 입력·출력 제어 핸들 직접 드래그
- 노드·하위 경로 추가와 삭제, 선분·곡선 전환
- 포인터 드래그 한 번을 한 단계로 묶는 실행 취소와 다시 실행
- 정규화된 M/L/C/Z 경로 복사 및 독립된 벡터 SVG 저장
사용 방법
- SVG path 요소의 d 속성값만 붙여넣거나 내장 예제를 복원한 뒤 가져오세요.
- 조작 항목이나 노드 표에서 하위 경로와 노드를 선택하세요.
- 캔버스의 앵커·파란 핸들을 드래그하거나 좌표를 숫자로 입력하세요.
- 필요에 따라 노드를 추가·삭제하고 선분·곡선 및 열림·닫힘 상태를 바꾸세요.
- 정규화된 경로 데이터를 확인한 후 복사하거나 완성한 SVG를 저장하세요.
활용 예시
- 자동 추적한 로고 윤곽의 곡률을 손으로 다듬기
- 데스크톱 벡터 앱 없이 아이콘의 앵커 위치 수정하기
- 웹 컴포넌트에 넣을 SVG d 속성의 여러 하위 경로 살펴보기
자주 묻는 질문
어떤 SVG 명령을 붙여넣을 수 있나요?
절대·상대 M, L, H, V, C, S, Q, T, Z와 반복 좌표 및 여러 하위 경로를 받습니다. Q와 T는 같은 형상의 3차 제어점으로 변환합니다. 원호 A와 SVG 마크업 전체는 오류를 표시하고 거부합니다.
출력 경로가 M, L, C, Z만 쓰는 이유는 무엇인가요?
편집기는 지원하는 모든 선분을 앵커와 3차 핸들로 보관합니다. H, V, S, Q, T는 도형을 유지하며 정규화하고 명시적인 M, L, C, Z로 직렬화해 조작을 예측하기 쉽게 합니다.
닫힌 경로의 마지막 곡선도 편집할 수 있나요?
가능합니다. 마지막 노드의 출력 핸들과 첫 노드의 입력 핸들로 닫히는 곡선을 표현한 뒤 Z를 붙입니다. 하위 경로를 열거나 닫으면 마지막 연결선이 바뀝니다.
드래그를 한 번에 되돌릴 수 있나요?
포인터 드래그 시작 때 이전 상태 한 번을 기록하므로 실행 취소 한 번으로 드래그 전 좌표로 돌아갑니다. 버튼과 숫자 입력 편집은 각각 별도 단계입니다.
저장 파일이 실제 벡터 SVG인가요?
네. viewBox·채우기·선 스타일이 있는 독립 SVG 경로 파일입니다. 래스터 이미지를 담거나 외부 리소스를 요청하지 않습니다.
개인정보 안내
경로 데이터와 편집 결과는 이 브라우저 탭에서만 처리합니다. 서버 API에 그림을 보내거나 자동 저장하지 않습니다.
댓글과 질문