SVG 编辑器

SVG 编辑器完全指南：从入门到精通

SVG（Scalable Vector Graphics，可缩放矢量图形）是现代网页设计的核心技术之一。与传统的位图（如 JPEG 或 PNG）不同，SVG 使用数学描述来定义形状，这意味着无论你如何放大，它都不会失真。本在线编辑器旨在为你提供一个轻量、实时且功能强大的 SVG 创作环境。

1. 为什么你应该优先选择 SVG？

• 无限缩放： 矢量特性保证了在 Retina 屏幕或大型显示器上依然清晰。
• 小巧的文件体积： 对于图标和简单图形，SVG 的代码量通常远小于图片文件。
• CSS 与 JS 可控： 你可以直接通过代码改变 SVG 的颜色、形状甚至添加动画。
• SEO 友好： SVG 代码可以被搜索引擎爬取和索引，非常适合用于 Logo 和说明图。

2. 核心语法速查

如果你是初学者，了解以下基础标签将非常有帮助：

• <rect> : 绘制矩形，使用 x, y, width, height 属性。
• <circle> : 绘制圆形，使用 cx, cy, r 属性。
• <path> : 最强大的标签，使用 d 属性定义的命令（如 M-移动, L-画线, C-曲线）来绘制复杂形状。
• <g> : 分组标签，用于将多个元素组合在一起并统一应用样式。

3. 如何优化你的 SVG 代码？

在导出 SVG 用于生产环境前，建议进行以下优化：

1. 删除冗余元数据： 许多设计软件（如 AI 或 Sketch）导出的 SVG 包含大量的 metadata 和 comments ，这些都可以安全删除。
2. 简化路径： 使用本编辑器的实时预览功能，尝试减少路径中的锚点。
3. 使用 CSS 继承： 将公共的 fill 或 stroke 属性移动到 <g> 标签上，而不是每个子元素都写一遍。

4. 常见问题 FAQ

Q: 为什么我粘贴的代码没有显示？
A: 请确保你的代码包含完整的 <svg xmlns="http://www.w3.org/2000/svg"> 标签。如果代码有语法错误，底部的红色错误条会给予提示。

Q: 下载的 PNG 模糊怎么办？
A: PNG 下载是基于当前 SVG 定义的宽高生成的。如果需要更高分辨率，请先在代码中增加 width 和 height 属性。

Q: 我的隐私安全吗？
A: 绝对安全。所有的代码处理和预览都在你的浏览器本地完成，没有任何数据会上传到我们的服务器。