SVG 경로 편집기

SVG 경로 데이터를 편집하고 변환합니다. 실시간 미리보기와 함께 경로를 크기 조정, 회전, 이동 및 뒤집습니다.

Path Data (d attribute)

ViewBox

Stroke

Fill

Stroke Width

Transforms

Scale X

Scale Y

Move X

Move Y

Rotate

Preview

SVG Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path
    d="M 10 10L 90 10L 90 90L 10 90Z"
    stroke="#00ffff"
    stroke-width="2"
    fill="none"
  />
</svg>

Path Commands Reference

M x y- Move to

L x y- Line to

H x- Horizontal line

V y- Vertical line

C x1 y1 x2 y2 x y- Cubic Bezier

S x2 y2 x y- Smooth Cubic

Q x1 y1 x y- Quadratic Bezier

T x y- Smooth Quad

A rx ry rot large sweep x y- Arc

Z- Close path

SVG Path Commands - 기술 세부 정보

SVG paths use a mini-language for drawing: M (moveto), L (lineto), H/V (horizontal/vertical line), C (cubic bezier), Q (quadratic bezier), A (arc), Z (close). Uppercase = absolute, lowercase = relative coordinates.

명령줄 대안

<!-- Basic path commands -->
<path d="M10 10 L90 10 L90 90 L10 90 Z" />

<!-- Arc command -->
<path d="M50 10 A40 40 0 1 1 50 90" />

참조

공식 사양 보기