SVG 图形生成器

📖 工具介绍

SVG 图形生成器是一款帮助前端与视觉工作者快速产出可缩放矢量图形代码的免费在线工具。手写 SVG 标签容易记错属性名、坐标与命名空间，本工具把常见图形抽象成六个可视化按钮：矩形、圆形、线条、多边形、路径与文本。你只要点选图形，在左侧面板调节填充色、描边色、描边宽度以及对应的坐标参数，右侧预览区就会即时画出矢量图形，下方同步生成符合标准的 SVG 源码。文本图形支持自定义文字内容与字号，路径图形支持使用 M、L、C 等命令手写贝塞尔曲线。预览区采用棋盘格背景，方便判断透明区域；生成的代码可以一键复制，也可以直接下载为 .svg 文件，插入网页或设计稿都不会失真。工具全程在浏览器本地构建 SVG DOM 并序列化，不发起网络请求，界面支持简中、繁中与英文三语，在手机上同样可以完成图形绘制。

✨ 功能特点

• 六种基础图形：矩形、圆形、线条、多边形、路径、文本一键切换
• 可视化属性面板：填充、描边、坐标随图形动态变化，所见即所得
• 标准 SVG 输出：通过命名空间构建 DOM 并序列化，代码规范可直接使用
• 棋盘格预览：透明区域一目了然，便于检查图形边界
• 复制与下载：源码一键复制，或导出为独立的 .svg 矢量文件
• 贝塞尔路径示例：内置平滑曲线路径示例，帮助快速上手

📝 使用方式

1. 在顶部点击你想绘制的图形类型按钮
2. 在左侧调节填充色、描边色、描边宽度以及对应坐标
3. 观察右侧预览区，确认图形形状与位置是否符合预期
4. 点击生成 SVG 或直接在源码区读取自动更新后的代码
5. 点击复制代码粘贴到项目，或点击下载 SVG 保存为矢量文件

⚠️ 注意事项

• 画布坐标系：所有坐标基于 300×200 视口，x 向右、y 向下递增
• 描边宽度：线条图形无填充，描边宽度设为 0 会看不见线条
• 路径语法：路径 d 使用标准 SVG 命令，命令间用空格或逗号分隔
• 文本渲染：文本内容通过安全方式写入，特殊字符不会破坏 SVG 结构
• 本地构建：SVG 在浏览器内构建与序列化，不产生任何网络请求