사용 방법
- 1 비주얼 SVG Path 에디터를 열고 처리할 내용을 입력·붙여넣기·선택하세요.
- 2 필요에 맞게 옵션과 출력 형식을 조정하세요.
- 3 결과를 확인한 뒤 복사하거나 다운로드하세요.
비주얼 SVG Path 에디터
500×500 캔버스에서 앵커를 찍고 베지에 핸들을 드래그하면 SVG Path d 속성과 CSS clip-path: path() 코드를 즉시 생성합니다. 하트·별 템플릿 제공.
🎨 SVG 드로잉 캔버스 (500x500)
⚙️ 경로 제어 및 설정
📤 코드 내보내기
SVG Path d 코드
CSS clip-path 속성
📖 SVG Path 그리기 가이드
"포인트 추가" 모드에서 캔버스를 클릭하면 앵커가 추가되며 기본값은 곡선(C)입니다. 녹색 클로버 앵커를 드래그하면 노드가 이동하고, 파란색 핸들로 베지에 곡선의 휘어짐을 조절합니다. "포인트 삭제" 모드에서 앵커를 클릭하면 삭제됩니다. 완성 후 d 속성이나 clip-path 코드를 복사해 사용하세요. 모든 처리는 브라우저 안에서 이루어집니다.
주요 사용 사례
500×500 캔버스에서 앵커를 찍고 베지에 핸들을 드래그하면 SVG Path d 속성과 CSS clip-path: path() 코드를 즉시 생성합니다. 하트·별 템플릿 제공. 일상 업무, 개발, 학습, 빠른 확인에 활용할 수 있습니다.
개인정보와 데이터 처리
이 도구는 브라우저에서 작동합니다. 민감한 자료를 처리하기 전에 기기와 브라우저 환경을 확인하세요.
비주얼 SVG Path 편집기: 마우스로 경로를 그려 d 속성과 clip-path 생성
SVG의 path 요소는 'M 100 100 C 150 50 …' 같은 d 속성으로 모양을 표현하는데, 좌표와 베지어 곡선의 제어점을 손으로 쓰다 보면 실수하기 쉽습니다. 이 편집기는 500 × 500 캔버스에서 클릭과 드래그만으로 경로를 그릴 수 있게 해 주고, 오른쪽 패널에 해당 SVG d 코드와 CSS clip-path: path() 규칙을 바로 보여 줍니다. 아이콘이나 로고 초안, 이미지를 불규칙한 모양으로 잘라 내는 작업, 또는 SVG 경로 명령이 실제로 어떻게 동작하는지 배우는 데 유용합니다.
'포인트 추가' 모드에서 캔버스를 클릭하면 앵커가 추가됩니다. 첫 번째 점은 시작점(M)이 되고, 그다음 점들은 기본적으로 곡선 노드(C)로 파란색 제어 핸들 두 개를 가집니다. '선택/편집' 모드로 바꾸면 초록색 클로버 앵커를 드래그해 노드를 옮기거나, 핸들을 드래그해 곡선의 방향과 휘어짐을 조절할 수 있습니다. 노드를 선택한 뒤 '노드 유형'에서 직선 노드(L)나 곡선 노드(C)로 바꿀 수도 있습니다. '포인트 삭제' 모드에서는 앵커를 한 번 클릭하면 지워집니다. 마우스, 트랙패드, 터치스크린 모두 지원합니다.
'그리드 스냅'을 켜면 앵커가 20픽셀 간격의 격자에 맞춰져 대칭이거나 반듯한 도형을 그리기 쉬워지며, 격자 배경은 언제든 켜고 끌 수 있습니다. '경로 닫기 (Z)'를 체크하면 마지막 점이 첫 점과 이어져 색을 채울 수 있는 닫힌 도형이 됩니다. 처음부터 그리기 번거롭다면 하트, 별, 물방울, 알파 머리 모양 템플릿을 불러와 고쳐 쓰세요. 모든 좌표는 정수로 반올림되어 생성되는 코드가 짧고 바로 붙여 넣을 수 있습니다.
d 속성은 0부터 500까지의 좌표계를 기준으로 하므로 SVG에 넣을 때 viewBox="0 0 500 500"을 함께 지정하면 SVG 크기에 맞춰 모양이 비율대로 커지고 작아집니다. 반면 CSS clip-path: path()는 좌표 단위가 픽셀이라 요소 크기에 따라 늘어나지 않으므로 500 × 500픽셀 요소에 쓰는 것이 가장 알맞습니다. 반응형으로 잘라 내려면 SVG의 clipPath와 clipPathUnits를 쓰거나 transform으로 요소를 확대·축소하세요. 모든 편집은 브라우저 안에서 이루어지며 데이터를 업로드할 필요가 없습니다.
자주 묻는 질문
d 속성의 M, L, C, Z는 무슨 뜻인가요?
M(moveto)은 펜을 시작점으로 옮기고, L(lineto)은 현재 위치에서 지정한 좌표까지 직선을 그립니다. C(curveto)는 3차 베지어 곡선을 그리며 앞의 두 좌표 쌍이 제어점, 마지막 쌍이 끝점입니다. Z(closepath)는 경로를 시작점으로 이어 닫습니다. 이 편집기는 이 네 가지 명령만 사용해 결과를 읽기 쉽고 손으로 고치기도 편합니다.
clip-path: path()를 적용했는데 왜 모양이 요소 크기에 맞춰 바뀌지 않나요?
clip-path의 path() 함수는 픽셀 좌표를 쓰기 때문에 캔버스의 (500, 500)은 요소의 왼쪽 위에서 오른쪽과 아래로 각각 500픽셀 떨어진 위치를 뜻하며, 요소 크기에 따라 환산되지 않습니다. 요소가 500 × 500픽셀이 아니라면 transform: scale()로 맞추거나, SVG의 <clipPath clipPathUnits="objectBoundingBox">에 0~1 범위로 환산한 좌표를 사용하세요.
생성한 경로를 웹페이지에 어떻게 넣나요?
d 코드를 <svg viewBox="0 0 500 500"><path d="…" /></svg> 안에 넣고 fill, stroke 등으로 색과 선을 지정하면 됩니다. viewBox가 있으니 SVG의 너비와 높이를 자유롭게 정해도 모양이 비율을 유지하며 확대·축소됩니다. 같은 d 문자열을 CSS offset-path에 쓰면 요소가 경로를 따라 움직이게 할 수도 있습니다.
기존 SVG 경로를 붙여 넣어 편집할 수 있나요?
현재는 지원하지 않습니다. 이 도구는 캔버스에서 처음부터 그리거나 하트, 별, 물방울, 알파 머리 모양 템플릿에서 시작해 수정하는 방식이며, 출력 칸의 코드는 읽기 전용이라 가져오기에 쓸 수 없습니다. 복잡한 기존 아이콘을 고치려면 Inkscape나 Figma 같은 전문 벡터 편집 프로그램을 권합니다.
관련 도구
🎨
디자인 및 색상
브라우저 목업 및 스크린샷 꾸미기
웹페이지 스크린샷을 올리면 macOS 스타일 브라우저 프레임, 그림자, 그라데이션 배경을 입혀 고해상도 PNG로 내보냅니다.
Open
🎨
디자인 및 색상
CSS 네온 및 발광 텍스트 생성기
다중 레이어 text-shadow, 네온 색상, 발광 반경 및 숨쉬기 깜빡임 속도를 조율하고 CSS 코드를 복사합니다。
Open
🎨
디자인 및 색상
스마트 이미지 컬러 피커 및 픽셀 확대경
로컬 이미지를 업로드하고 픽셀 아트 스타일 정밀 돋보기로 색상을 정밀 추출하며, HEX, RGB, HSL 복사 및 WCAG 색상 대비 검사를 제공합니다。
Open
🎨
디자인 및 색상
CSS Flexbox 및 Grid 레이아웃 생성기
CSS Flexbox 및 Grid 그리드 레이아웃을 시각적으로 조율 및 프리뷰하고, 코드와 애니메이션을 즉시 생성합니다。
Open
