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="..."/>` 코드 조각을 가져오세요.
What an SVG path actually is
Every curve, icon, and complex shape in an SVG comes down to one attribute: d, the path data. It is a compact string of single-letter commands followed by numbers — a tiny drawing language where a virtual pen moves, draws lines, and sweeps curves across the canvas. The string M 20 80 C 40 10, 65 10, 95 80 tells the pen to move to (20, 80), then draw a cubic Bézier curve. This tool takes any such d string, renders it live on a grid, computes its bounding box, and lists every command in plain language so you can understand exactly what each segment does.
The command alphabet
Path commands come in pairs: an uppercase letter uses absolute coordinates (measured from the SVG origin), and the same lowercase letter uses relative coordinates (measured from wherever the pen currently sits). The tool parses and labels both.
| Command | Name | What it draws |
|---|---|---|
| M / m | Move to | Lifts the pen and repositions it — no line drawn |
| L / l | Line to | Straight line to a point |
| H / h, V / v | Horizontal / Vertical | Straight line along one axis only |
| C / c | Cubic Bézier | Curve shaped by two control points |
| S / s | Smooth cubic | Cubic that auto-mirrors the previous control point |
| Q / q | Quadratic Bézier | Curve shaped by one control point |
| T / t | Smooth quadratic | Quadratic that auto-reflects the previous control point |
| A / a | Arc | A segment of an ellipse |
| Z / z | Close path | Draws a line back to the start |
Understanding Bézier curves
The curve commands are where most people get lost, so it helps to see the difference. A quadratic Bézier (Q) has one control point: the curve starts at the pen, ends at the end point, and bends toward that single control point like a magnet pulling the line. A cubic Bézier (C) has two control points — one influencing the departure from the start, the other the approach to the end — which is why cubic curves can have an S-shape that quadratics cannot. The "smooth" variants (S and T) save you from repeating coordinates: they automatically reflect the previous control point so consecutive curves flow seamlessly, which is how long, wavy outlines are built without specifying every control point by hand.
A worked example
The pre-loaded sample is M 20 80 C 40 10, 65 10, 95 80 S 150 150, 180 80. Read it left to right: M 20 80 moves the pen to (20, 80). C 40 10, 65 10, 95 80 draws a cubic curve whose first control point is (40, 10), second is (65, 10), and end point is (95, 80) — both control points sit high above the baseline, so the curve arcs upward into a hill. Then S 150 150, 180 80 draws a smooth cubic: because it is an S, its first control point is automatically the reflection of the previous one across (95, 80), and you only supply the second control point (150, 150) and the end (180, 80). Those control points sit below the line, so this segment dips into a valley. The result is a smooth wave. The tool's command list spells all of this out, segment by segment, with the exact coordinates.
The bounding box and scale
After rendering, the tool reads the path's true bounding box via the browser's native getBBox() — the smallest rectangle (x, y, width, height) that contains the actual drawn geometry. This is genuinely useful: the numbers in a d string rarely tell you how big the shape ends up, especially once curves bulge past their control points. Knowing the real bounds lets you set a correct viewBox so the icon is not clipped or floating in empty space. The scale slider (0.25× to 4×) zooms the rendering so you can inspect a tiny detail or fit a large path into view, and it uses a non-scaling stroke so the outline stays a consistent visual weight at any zoom.
Use cases and tips
- Learning by reverse-engineering. Paste a path copied from an icon set and watch the command list explain it — the fastest way to learn the path syntax.
- Debugging a broken shape. If an SVG renders wrong, the parsed command list reveals a misplaced control point or a missing
Zat a glance. - Sizing for production. Use the bounding box to derive an accurate
viewBoxand remove wasted padding. - Tip — keep coordinates small and clean. Paths built around a 0–100 or 0–24 grid are easier to read and edit than ones with long decimals.
- Tip — prefer relative commands for reusable shapes. Lowercase commands let you reposition a whole path by changing only the initial
M. - Pitfall — arcs are the hardest command. An
Atakes seven numbers including two flags (large-arc and sweep) that flip which of four possible ellipse segments is drawn; if an arc looks wrong, those flags are usually the cause.
Rendering, parsing, and the bounding-box calculation all happen in your browser. Nothing you paste is uploaded, and you can copy the result as a ready-to-use <path> element with one click.