SVG 패스 편집기
컨트롤 포인트를 드래그하여 시각적으로 편집하고, 색상별 명령어 분석(M, L, C, Q, A, Z)을 확인하고, 실시간으로 도형을 미리보고, 원클릭으로 SVG 코드를 복사할 수 있는 인터랙티브 SVG 패스 편집기입니다. 8개 예제 경로와 완전한 명령어 치트시트 포함. 무료, 회원가입 불필요, 100% 브라우저 기반.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90"> <path d="M 10 80 L 50 10 L 90 80 Z" fill="none" stroke="#3b82f6" stroke-width="2" /> </svg>
M 10 80 L 50 10 L 90 80 Z
제안이 있으신가요?
새로운 도구를 요청하거나 개선 사항을 제안해 주세요 — Slack 커뮤니티에 참여하세요!
SVG 패스 편집기란?
SVG 패스 편집기는 SVG <path> 요소의 d 속성을 생성하고 편집하는 시각적 도구입니다. SVG 경로는 명령어 미니 언어(M=이동, L=직선, C=3차 베지어, Q=2차 베지어, A=호, Z=닫기)를 사용하여 복잡한 도형을 정의합니다. 이 편집기는 드래그 앤 드롭 컨트롤 포인트, 실시간 미리보기, 색상별 명령어 시각화, 즉석 코드 내보내기를 제공하여 벡터 그래픽 작업을 하는 개발자와 디자이너를 위한 도구입니다.
SVG 패스 편집기 사용법
- 예제 경로(삼각형, 하트, 별 등)를 선택하거나 SVG path d 속성을 직접 붙여넣으세요
- 미리보기에서 컨트롤 포인트를 드래그하여 도형을 인터랙티브하게 수정하세요
- 스타일 컨트롤로 채우기 색상, 선 색상, 선 두께를 조절하세요
- 정밀한 편집을 위해 그리드와 컨트롤 포인트 표시를 전환하세요
- 시각화 탭으로 전환하여 각 명령어의 색상별 분석을 확인하세요
- 생성된 SVG 코드 또는 path d 속성을 원클릭으로 복사하세요
자주 묻는 질문
이 편집기는 어떤 SVG 경로 명령어를 지원하나요?
이 편집기는 모든 표준 SVG 경로 명령어를 지원합니다: M(이동), L(직선), H(수평선), V(수직선), C(3차 베지어), S(부드러운 3차), Q(2차 베지어), T(부드러운 2차), A(호), Z(경로 닫기). 절대(대문자)와 상대(소문자) 변형 모두 지원됩니다.
베지어 컨트롤 포인트를 드래그할 수 있나요?
네. 편집기는 끝점(빨간색)과 컨트롤 핸들(주황색)에 대한 드래그 가능한 포인트를 표시합니다. 아무 포인트나 클릭하고 드래그하여 경로를 인터랙티브하게 변형할 수 있습니다. 드래그하는 동안 경로 데이터가 실시간으로 업데이트됩니다.
생성된 SVG 코드를 어떻게 사용하나요?
복사 버튼을 사용하여 SVG 코드를 복사한 후 HTML, React 컴포넌트 또는 SVG 호환 애플리케이션에 직접 붙여넣으세요. 출력에는 viewBox, fill, stroke, 경로 데이터가 포함된 완전한 <svg> 요소가 포함됩니다.
절대 좌표와 상대 좌표 SVG 경로 명령어의 차이는 무엇인가요?
절대 명령어(대문자: M, L, C)는 SVG 캔버스 원점(0,0) 기준 좌표를 사용합니다. 상대 명령어(소문자: m, l, c)는 현재 펜 위치 기준 좌표를 사용합니다. 예를 들어, 'L 50 50'은 절대 좌표 (50,50)으로 선을 그리고, 'l 50 50'은 현재 위치에서 오른쪽 50, 아래 50만큼 선을 그립니다.
SVG 데이터가 서버로 전송되나요?
아닙니다. 모든 편집과 렌더링은 브라우저에서 100% 처리됩니다. 어떤 데이터도 서버로 전송되지 않습니다. 브라우저 개발자 도구의 네트워크 탭에서 확인할 수 있습니다.