Softonic

SVG 경로 생성기

단계 1 / 2

빈 영역을 클릭해 점을 추가하세요. 점을 드래그해 이동할 수 있습니다. 버튼으로 마지막 점을 제거하세요.

다음

SVG <path>에 포함된 d 속성은 매우 간단한 도메인 특화 언어입니다: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. 각 문자는 명령어(moveto, lineto, cubic Bezier, close-path)이며, 각 숫자는 좌표 또는 제어점을 나타냅니다. 이 빌더에서는 캔버스를 클릭해 앵커 포인트를 놓고 드래그해 모양을 다듬으며, 경로가 실시간으로 그려지는 과정을 확인할 수 있습니다. 부드럽게 처리를 켜면 직선 구간이 삼차 베지에 곡선으로 바뀌고, 도형을 닫은 뒤 생성된 d 속성이나 전체 SVG를 복사하세요.

경로를 생성하는 방법

  1. 1

    클릭하여 점 추가

    클릭할 때마다 캔버스에 앵커 포인트가 추가되고, 경로는 `M`(moveto)부터 순서대로 점들을 잇습니다.

  2. 2

    드래그하여 모양 다듬기

    아무 점이나 드래그해 옮기고, 버튼으로 가장 최근 점을 삭제하세요. 최소 두 개의 점이 필요합니다.

  3. 3

    직선 또는 부드럽게

    점들을 직선 `L` 구간으로 이어 두거나, "부드럽게"를 켜서 삼차 베지에 곡선 `C`로 변환하세요.

  4. 4

    닫거나 열어두기

    "경로 닫기"를 켜면 시작점으로 돌아가는 `Z`가 추가되고, 열어 두면 다각선/스트로크가 됩니다.

  5. 5

    d 속성 복사

    생성된 `d` 문자열은 공백으로 구분된 깔끔한 형태로 어떤 SVG에도 바로 붙여넣을 수 있으며, 전체 SVG를 복사하거나 다운로드할 수도 있습니다.

SVG 경로 명령어 차트

위의 시각적 빌더는 M, L, C, Z 명령어(moveto, 직선, 삼차 베지에 곡선, close-path)를 생성합니다. 아래의 나머지 명령어 목록은 다른 곳에 붙여넣는 d 문자열을 읽고 직접 편집할 때 참고하는 자료입니다. 대문자는 절대 좌표를 사용하며, 소문자는 현재 펜 위치로부터의 상대적 오프셋을 사용합니다.

명령어 명칭 구문
M / m Moveto M x y
L / l Lineto L x y
H / h 수평선 H x
V / v 수직선 V y
C / c 삼차 베지에 C x1 y1 x2 y2 x y
S / s 부드러운 삼차 베지에 S x2 y2 x y
Q / q 이차 베지에 Q x1 y1 x y
T / t 부드러운 이차 베지에 T x y
A / a 호(arc) A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

구현 예시: 둥근 체크 표시

M 4 12 L 10 18 L 20 6

다음 세 명령을 실행하세요: (4, 12)로 이동, (10, 18)으로 선을 이동, (20, 6)으로 선을 이동합니다. stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"를 경로에 추가하면 깔끔한 체크마크 글리프가 생성됩니다.

arc 명령어는 가장 어려운 명령어입니다.

A rx ry x-axis-rotation large-arc-flag sweep-flag x y는 일곱 개의 숫자로 구성됩니다:

  • rx, ry, 타원의 반지름
  • x-axis-rotation, 타원의 회전 각도(도 단위)
  • large-arc-flag, 짧은 아크에는 0, 긴 아크에는 1
  • sweep-flag, 반시계 방향은 0, 시계 방향은 1
  • x, y, 종점

기수를 하나씩 뒤집어 보세요. 같은 두 종단점이 네 가지 다른 방식으로 어떻게 연결될 수 있는지 확인할 수 있습니다.

팁

  • 숫자는 작고 정수에 가깝게 유지하세요. 좌표를 픽셀 격자나 반픽셀에 맞추고, 소수점 17자리 사용을 피하세요.
  • 경로가 독립적으로 쓰일 때는 대문자 명령어를 선호하세요. 나중에 경로를 평행 이동할 계획이라면 소문자(상대) 명령어가 편리합니다.
  • 채울 때만 닫으세요. 경로가 순수하게 선으로만 그려진다면 Z는 시각적 변화를 주지 않고 1바이트를 절약합니다.
  • SVGO로 실행하세요. 뒤따르는 0, 중복 공백, 반복되는 명령어가 깔끔하게 정리됩니다.

자주 묻는 질문

d의 좌표는 viewBox와 동일한 단위입니다. viewBox="0 0 24 24"용으로 설계된 경로를 viewBox="0 0 100 100"에 배치하면 왼쪽 상단 사분면에 표시됩니다. 좌표를 스케일링하거나 viewBox의 크기를 조정하세요.

경로를 이동하거나 반복할 계획일 때입니다. 상대 명령어는 도형의 이식성을 유지하므로, 어느 위치에나 새로운 M을 앞에 붙이면 이후의 모든 요소가 함께 이동합니다.

네, <polyline points="0,0 10,10 20,0">는 <path d="M 0 0 L 10 10 L 20 0" />로 변경됩니다. 다각형은 최종적으로 Z가 추가됩니다. 대부분의 최적화 도구는 경로 압축 효과가 더 뛰어나기 때문에 이를 자동으로 처리합니다.

드로잉 인 효과를 적용하려면 CSS stroke-dasharray 및 stroke-dashoffset을 사용하세요. 요소를 경로에 따라 이동시키려면 SMIL <animateMotion>를 사용하고, href를 경로 ID로 지정하세요.

아니요, 경로 명령어는 브라우저에서 계산되며 결코 다른 곳으로 전송되지 않습니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

Pantone to HEX 변환기

화면과 인쇄 매칭을 위해 Pantone PMS 색상을 가장 가까운 HEX, RGB, CMYK 값으로 변환하고 견본 미리보기를 제공합니다.

이미지 색상 반전

이미지의 모든 RGB 채널을 반전시켜 네거티브를 생성합니다. 창의적인 편집이나 필름 스캔본을 확인하는 데 유용합니다.

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

이 도구는 다른 언어로도 제공됩니다