어떤 SVG 경로 명령이 지원됩니까?

모든 표준 명령: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. 둘 다 절대적인 (uppercase)와 관계되는 (lowercase) 변종은 지원됩니다.

제어 포인트는 어떻게 표시됩니까?

Cubic bezier 곡선 (C/c)를 위해, 2개의 파란 통제 점은 당신이 곡선이 형성한 방법을 정확하게 보여주는 dashed 선에 의하여 각 닻에 연결됩니다. 차분한 곡선 (Q/q)를 위해, 단 하나 자주색 통제 점은 보입니다. 앵커 포인트는 작은 빨간색 점으로 그려집니다.

Visualizer에서 경로를 편집 할 수 있습니까?

현재 경로 데이터 텍스트 및 시각화 업데이트를 편집합니다. 캔버스에 드래그하여 제어 포인트의 직접 조작은 향후 업데이트 계획입니다.

SVG 경로 Visualizer

SVG 경로 d-attribute를 붙여 제어 포인트 시각화로 즉시 렌더링합니다.

Control points Grid

SVG Path Data (d attribute)

Preview

Was this tool helpful?

Send output to:

How to use SVG Path Visualizer

SVG 경로 d-attribute 문자열을 입력 상자에 붙여 넣습니다.
이 경로는 auto-calculated viewBox와 미리보기 판에서 즉시 렌더링됩니다.
파란 점 쇼 입방 bezier 통제 점, 자주색 점 쇼 quadratic bezier 통제 점 및 빨간 점 쇼 닻 점.
정확한 포지셔닝을 위해 그리드 오버레이를 토글, 또는 복사 / 다운로드 버튼을 사용하여 경로 내보내기.
경로 데이터를 편집하고 실시간 결과를 볼 수 있습니다.

SVG 경로 시각화은 무엇입니까?

SVG 경로 데이터 문자열은 암호화 될 수 있습니다. - 혼자서 읽을 수 없는 문자와 숫자의 긴 문자열. 이 도구는 실제 모양, bezier 곡선, 앵커 포인트를 보여주는 경로 데이터를 라이브 렌더링합니다. SVG 경로 또는 곡선이 당신이 기대하는 방법을 보이지 않는 이유를 디버깅 할 때 invaluable입니다.

도구는 모든 표준 SVG 경로 명령을 지원합니다: M/m (모브), L/l (라인), H/h (horizontal), V/v (수직), C/c (cubic bezier), S/s (smooth 입방), Q/q (수직 bezier), T/t (smooth quadratic), A/a (arc) 및 Z/z (닫는 경로). 컨트롤 포인트는 닻에 줄에 의해 연결된 컬러 도트로 표시됩니다.

FAQ

어떤 SVG 경로 명령이 지원됩니까?: 모든 표준 명령: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. 둘 다 절대적인 (uppercase)와 관계되는 (lowercase) 변종은 지원됩니다.
제어 포인트는 어떻게 표시됩니까?: Cubic bezier 곡선 (C/c)를 위해, 2개의 파란 통제 점은 당신이 곡선이 형성한 방법을 정확하게 보여주는 dashed 선에 의하여 각 닻에 연결됩니다. 차분한 곡선 (Q/q)를 위해, 단 하나 자주색 통제 점은 보입니다. 앵커 포인트는 작은 빨간색 점으로 그려집니다.
Visualizer에서 경로를 편집 할 수 있습니까?: 현재 경로 데이터 텍스트 및 시각화 업데이트를 편집합니다. 캔버스에 드래그하여 제어 포인트의 직접 조작은 향후 업데이트 계획입니다.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 SVG Path Visualizer on Wikipedia·Developer Tools on Wikipedia·SVG Path Visualizer on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-06

SVG 경로 Visualizer

Something went wrong

How to use SVG Path Visualizer

SVG 경로 시각화은 무엇입니까?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts