工具 指南
design 免费 无需注册

SVG路径可视化工具

粘贴SVG路径`d`属性，在带网格的画布上实时渲染，并探索每个解析的路径命令。

正在加载工具…

关于此工具

输入任意SVG路径`d`字符串，即时在带网格背景的画布上渲染。工具解析每个命令——M、L、C、Q、A、Z、H、V、S、T——并在分解表格中列出它们的坐标。使用缩放滑块放大或缩小，选择描边和填充颜色，切换填充开关。计算并显示边界框尺寸。一键将路径复制为即用型`<path d="..."/>`SVG元素。

使用方法

  1. 1 将SVG路径`d`字符串粘贴或输入到输入框中——已预加载示例路径。
  2. 2 调整缩放滑块，并使用颜色选取器选择描边/填充颜色。
  3. 3 查看画布下方的已解析命令列表，了解每个路径段。
  4. 4 点击"复制为SVG元素"获取可直接用于代码的`<path d="..."/>`片段。

常见问题

相关工具
二维码生成器

可视化构建CSS线性和径向渐变，并复制可直接使用的CSS属性。
二维码生成器

可视化构建CSS box-shadow值，支持实时预览和多层叠加。
颜色转换 (HEX, RGB, HSL)

在 HEX、RGB、HSL、HSV 和 CMYK 之间转换颜色 — 实时预览。
{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI integrity hash, so the browser refused to run it and window.Alpine was never defined — silently breaking every FAQ accordion and Alpine tool.) #}