SVG 在线生成器
可视化配置图形参数，实时生成 SVG 代码，所见即所得，一键复制或下载。
什么是 SVG 在线生成器？
SVG（可缩放矢量图形）是用 XML 文本描述的矢量图形格式，广泛应用于网页图标、logo、插画和数据可视化。本工具把常用的 SVG 图形参数化：选择图形类型，调整宽高、填充色、描边等属性，即可实时预览并得到对应的 SVG 代码，无需手写任何 XML。
支持六种常用图形：矩形、圆角矩形、圆形、椭圆、星形和文本。星形图形根据外半径、内半径与角数自动计算顶点坐标生成 path，参数完全可控；文本图形支持自定义内容和字号。所有代码均使用标准 SVG 语法，兼容所有现代浏览器与设计软件。
生成的代码可以直接粘贴进 HTML 使用，也可以下载为 .svg 文件，通过 <img> 标签引用、在浏览器中打开预览，或导入 Figma、Illustrator 继续编辑。由于 SVG 是矢量格式，任意缩放都不会失真，是响应式设计的首选图片格式。
使用步骤
- 选择图形类型：矩形、圆角矩形、圆形、椭圆、星形或文本；
- 调整宽度、高度、填充色、描边色与描边宽度等参数；
- 点击「生成 SVG」，预览区实时显示图形，代码区同步更新；
- 点击「复制」拷贝代码，或点击「下载 SVG」保存为 .svg 文件。
常见问题
SVG 和 PNG 有什么区别？
SVG 是矢量图形，由数学路径描述，放大缩小不失真、文件体积小，可用 CSS 直接控制颜色；PNG 是位图，由像素组成，放大会模糊。图标、logo、插画适合 SVG，照片适合 PNG。
生成的 SVG 代码怎么用？
复制代码后直接粘贴到 HTML 中即可显示；也可以保存为 .svg 文件，在浏览器打开预览，或用
<img> 标签引用，或导入 Figma、Illustrator 等设计软件继续编辑。可以修改颜色或描边吗？
可以。填充色、描边色、描边宽度都可以在面板中直接调整；生成代码后，你也可以手动修改 fill 和 stroke 属性，SVG 支持任意十六进制颜色和渐变。
预览和代码显示的效果一致吗？
预览区直接渲染的就是生成的 SVG 代码本身，所见即所得。复制到任何支持 SVG 的环境（浏览器、设计软件、微信编辑器）效果都一致。
星形等复杂图形是怎么生成的？
星形由多边形 path 组成，工具根据外半径、内半径和角数实时计算每个顶点的坐标并生成 path 数据，无需手动编写任何坐标。