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.