SVG 是什么?矢量绘图原理、常见用途与在线编辑入门

SVG 是一种基于 XML 的矢量图形格式，用路径、形状和坐标描述图像，因此放大到任何倍数都不会模糊，适合图标、Logo、图表和网页图形。如果你想快速上手，可以直接用浏览器打开在线编辑器（如 Vector Paint），画点、线、曲线和形状，设置填充与描边，再导出为 SVG 或 PNG/JPEG。本文讲清 SVG 的原理、与位图的区别、常见用途，以及用在线编辑器完成基本绘图和导出的具体操作。

SVG 的核心原理：用数学描述图形

SVG 不记录每个像素的颜色，而是记录“画什么”和“怎么画”：一条线由起点、终点和曲线控制点定义，一个圆由圆心和半径定义。浏览器或软件读取这些指令后实时渲染成图像。

这带来两个直接结果：

• 缩放不失真：无论放大到 10 倍还是 100 倍，图形边缘始终清晰，因为渲染依据的是数学路径而非固定像素。
• 文件通常更小、可编辑：简单图形用少量代码就能描述，且文字、颜色、位置都能直接修改，不需要重新绘制。

例如一个网页图标，用 SVG 写出来可能只有几行路径数据，放大到全屏仍然锐利；而同样内容的 PNG 放大后会看到明显锯齿和模糊。

SVG 与位图的区别

选择条件很明确：需要缩放、需要后期改颜色或形状、以线条和色块为主的内容，用 SVG；照片或像素级细节丰富的内容，用位图格式。

SVG 常见用途

• 网页图标与界面元素：体积小、可随 CSS 改变颜色，适配不同屏幕。
• Logo 与品牌图形：需要印刷和屏幕多尺寸复用时，矢量格式避免反复导出。
• 图表与示意图：流程图、结构图、数据可视化，线条和文字可精确控制。
• 海报与可交互图形：SVG 支持渐变、图案、透明度，也能配合脚本实现交互。

用在线编辑器绘制 SVG：基本流程

以 Vector Paint 这类在线 SVG 编辑器为例，它提供简单但功能完整的界面，支持绘制点、线、曲线和形状，并设置填充、渐变、描边、图层等。以下是一套可复用的操作顺序。

前提

• 使用支持 HTML5 的现代浏览器，无需安装 Flash。
• 明确要画的内容：图标、示意图还是海报草图。

绘制步骤

1. 新建画布：打开编辑器，选择 New 开始，或 Open 打开已有文件。
2. 绘制基本图形：用工具画线、矩形、椭圆、多边形、文字或导入图片。每个图形会作为一个独立对象存在。
3. 设置外观：
   • 填充：纯色、渐变或图案。
   • 描边：纯色或渐变、描边宽度、描边图案。
   • 透明度：调整形状整体不透明度。
4. 组织图层与顺序：用图层管理复杂图形，通过 Pull shape forward / Push shape backwards、Shape to front / Shape to back 调整前后关系；用 Group shapes / Ungroup shape 组合或拆分对象。
5. 对齐与定位：使用 Align left / center / right、Align top / center / bottom，并选择相对页面、相对选中包围盒或相对第一个选中对象对齐。
6. 调整视图：Zoom in / Zoom out、Zoom to selected、Zoom to canvas，必要时用 View canvas as wireframe 查看结构，用 View ruler 辅助定位。
7. 保存与导出：用 Save / Save As 保存工程，用 Export as PNG 或 Export as JPEG 导出位图，或保留 SVG 开放格式用于网页和其他矢量软件。

验证结果

• 放大画布，确认边缘依然清晰、没有像素化。
• 检查图层顺序是否符合预期，被遮挡的元素是否在正确层级。
• 导出 PNG/JPEG 后打开查看，确认尺寸和清晰度满足用途。

常见卡点

• 图形被遮挡：多半是图层或前后顺序问题，用 Shape to front / Layer to front 调整。
• 对齐结果不对：检查对齐基准是页面、选中包围盒还是第一个选中对象。
• 导出后变模糊：如果导出的是 PNG/JPEG，放大后模糊属于位图特性；需要无损缩放就保留 SVG。
• 复杂图形难管理：及时分组、命名图层，避免所有对象堆在同一层。

导出格式怎么选

• SVG：需要继续编辑、网页使用、任意缩放，选它。
• PNG：需要透明背景的位图、用于不支持 SVG 的场景。
• JPEG：不需要透明、以照片或复杂色彩为主，且能接受有损压缩。

如果后续还要修改颜色或形状，优先保留 SVG 源文件，再按需导出位图副本。