design
무료
회원가입 불필요
SVG 경로 시각화 도구
SVG 경로 `d` 속성을 붙여넣고 그리드와 함께 실시간으로 렌더링하며 각 파싱된 경로 명령을 탐색하세요.
도구를 불러오는 중…
이 도구에 대해
SVG 경로 `d` 문자열을 입력하면 즉시 그리드 배경의 캔버스에 렌더링됩니다. 도구는 모든 명령을 파싱합니다 — M, L, C, Q, A, Z, H, V, S, T — 그리고 좌표와 함께 분류 표에 나열합니다. 크기 슬라이더를 사용하여 확대/축소하고, 획 및 채우기 색상을 선택하며, 채우기를 켜거나 끌 수 있습니다. 경계 상자 크기가 계산되어 표시됩니다. 한 번의 클릭으로 경로를 바로 사용 가능한 `<path d="..."/>` SVG 요소로 복사하세요.
사용 방법
- 1 입력 필드에 SVG 경로 `d` 문자열을 붙여넣거나 직접 입력하세요 — 샘플 경로가 미리 로드되어 있습니다.
- 2 크기 슬라이더를 조정하고 선택기를 사용하여 획/채우기 색상을 선택하세요.
- 3 캔버스 아래의 파싱된 명령 목록을 검토하여 각 세그먼트를 이해하세요.
- 4 'SVG 요소로 복사'를 클릭하여 코드에 바로 사용할 수 있는 `<path d="..."/>` 코드 조각을 가져오세요.
자주 묻는 질문
관련 도구