SVG 패스 편집기

SVG Path Editor

패스 데이터를 절대·상대 명령으로 바꾸고 이동·확대·회전·방향 뒤집기를 적용하며 경계 상자와 미리보기를 보여 줍니다.

`d` 속성을 읽어 변형한 것을 돌려줍니다. 절대·상대 변환, 이동, 배율, 경계 상자 중심 기준 회전, 방향 뒤집기, 원하는 소수 자릿수로 반올림까지 합니다. 결과는 Path2D로 그리므로 호 계산을 SVG 렌더러와 같은 방식으로 하고, 경계 상자와 그대로 붙여넣을 수 있는 viewBox도 알려 줍니다.

🔒 브라우저 안에서만 처리svgpathvectoredit

path의 d 속성

소수 자리: 3

명령 형식

이동 X: 0이동 Y: 0배율: 1×회전: 0°

미리보기

점선은 경계 상자, 빨간 점은 시작점입니다. 채우기는 nonzero 규칙입니다.

결과

M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z

<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h2v-6h-2v6zm0-8h2V7h-2v2z" />

명령

서브패스

숫자

바이트

113 → 97

경계 상자

x 2.00 y 2.00 w 20.00 h 20.00

viewBox

2.00 2.00 20.00 20.00

무엇을 하는지

· SVG 최적화 도구와 같은 파서로 읽으므로 1.5.5 같은 압축 표기와 호 플래그를 정확히 읽습니다. 절대·상대 변환, 소수 자리 반올림, 이동·배율·회전(경계 상자 중심 기준), 방향 뒤집기, 경계 상자 계산을 합니다.
· 회전하면 H·V는 L이 되고, 호의 반지름·축 회전·sweep 플래그는 SVG 1.1 부록 F.6의 식으로 다시 계산합니다. 경계 상자는 제어점이 아니라 곡선의 실제 극값으로 잡습니다.
· 곡선을 단순화(점 줄이기)하지는 않습니다. 그건 모양을 바꾸는 일이고, 정확도 기준을 정하는 것은 사람의 몫입니다.

파일 전체를 줄이려면 SVG 최적화를, 곡선의 속도감을 다듬으려면 이징 곡선 편집기를 쓰세요.

사용 방법

d 속성을 붙여넣습니다
`<path>` 없이 값만 넣으면 됩니다. `1.5.5`를 두 숫자로 읽는다든가 호 플래그에 구분자가 없다든가 하는 압축 표기도 괜찮습니다. 파서가 SVG 최적화 도구와 같은 것이라 그런 경우를 처리합니다.
필요한 변형을 겁니다
이동·배율·회전은 도형 자체에 적용되므로 결과에 `transform` 속성이 필요 없습니다. 회전은 경계 상자 중심을 기준으로 하는데, 아이콘에서 원하는 동작이고 그냥 `rotate()`를 쓸 때와는 다릅니다.
절대·상대와 소수 자릿수를 정합니다
상대 명령이 대개 더 짧고, 인라인으로 넣는 아이콘에서는 그게 중요합니다. 실제 크기를 좌우하는 것은 소수 자릿수입니다. 24 단위 아이콘 격자라면 세 자리로 충분하고, 여섯 자리에서 두 자리로 내리면 문자열이 절반이 되는 경우가 많습니다. 옮기면서 바이트 수를 보세요.
채우기가 이상하면 방향을 뒤집습니다
빨간 점이 시작점이라 뒤집은 결과가 눈에 보입니다. nonzero 규칙에서 안쪽 서브패스가 구멍이 되는지를 정하는 것이 방향이고, 선 점선 애니메이션이 따라가는 것도 방향입니다.
경로를, 또는 viewBox를 가져갑니다
결과 상자에 `d` 값과 바로 쓸 수 있는 `<path>` 요소가 있습니다. 통계 패널에는 경계 상자가 viewBox 문자열로 들어 있는데, 아이콘을 프레임에 정확히 채우는 가장 빠른 방법입니다.

자주 묻는 질문

왜 곡선을 단순화해 주지 않나요?

단순화는 모양을 바꾸는 일이고, 얼마나 바뀌어도 되는지는 이 그림에 대한 판단이라 도구가 대신 내릴 수 없습니다. 점 줄이기 알고리즘은 모두 허용 오차를 받는데, 그 결정을 내리기에 정직한 자리는 무엇을 잃는지 눈으로 보면서 할 수 있는 벡터 편집기입니다. 안전한 크기 조절 수단은 소수 자릿수 반올림이고, 그건 여기 있습니다.