SVG 文件是什么？打开、创建、编辑与转换指南

SVG 是用 XML 描述的矢量图形。它保存形状、路径、填充和描边，而不是固定像素，因此 Logo、图标、图表和插画在不同尺寸下都能保持清晰。本指南介绍 SVG 的原理、适用场景，以及一套打开、编辑、转换和发布文件的实用流程。

SVG 文件是什么

SVG 是 Scalable Vector Graphics（可缩放矢量图形）的缩写，也是 W3C 维护的开放 Web 标准。PNG 记录像素颜色，SVG 记录绘制指令，所以浏览器可以在 24 像素、240 像素或打印尺寸下重新渲染同一份资源。

SVG 通常包含根 <svg>、<path>、<rect> 等元素，也可以包含文本、渐变、滤镜和无障碍元数据。viewBox 定义内部坐标系，width 与 height 定义默认显示尺寸。合理的 viewBox 是响应式 SVG 的基础。

SVG 适合用在哪里

需要适配多种屏幕尺寸的 Logo 与品牌标志。
用户界面图标、数据图表、地图和线性插画。
需要用 CSS 改色或让文字可选中的图表。
由 CSS 或 JavaScript 驱动的动画和交互图形。
由干净路径组成的印刷资源。

照片、纹理和颜色极其复杂的图像更适合 PNG 或 JPG。SVG 也不一定更小，复杂的自动描摹可能比压缩后的位图更大，应以真实用途比较体积和画质。

如何打开 SVG 文件

把文件拖入 Chrome、Firefox、Safari 或 Edge 即可预览。浏览器适合快速查看，但不方便检查每条路径或清理风险标记。需要缩放和检查 viewBox 时，可以使用 SVG 查看器。

需要精确绘图时，使用 Inkscape、Illustrator、Figma 等矢量软件。需要查看源代码时，用代码编辑器打开即可，因为 SVG 本质上是文本 XML。

如何创建 SVG 文件

可以在矢量软件中绘制、从设计系统导出，或手写简单文件。下面是一个有效的最小示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
  <title id="title">Blue circle and orange square</title>
  <circle cx="35" cy="40" r="24" fill="#2563eb" />
  <rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>

独立 SVG 需要命名空间。viewBox 提供稳定坐标系，title 为读屏软件提供上下文。生产环境还要检查颜色对比度、焦点行为，以及图像是装饰性还是信息性内容。

如何编辑现有 SVG

移动节点、调整曲线或修改文字时使用矢量编辑器。只改颜色、viewBox 或路径时，可以直接编辑 XML。完成后在 SVG 编辑器中保存，并用 SVG 查看器与原文件对比。

接收自第三方的文件应先通过 SVG 清理器，移除脚本、事件属性、异常外部引用和不必要的嵌入 HTML。

如何转换 SVG

PNG： 适合文档、应用商店和需要透明背景的固定像素预览，使用 SVG 转 PNG。
JPG： 适合不需要透明度的较小预览，使用 SVG 转 JPG。
PDF： 适合评审、共享和打印，使用 SVG 转 PDF。
Data URI： 适合在 CSS 或 HTML 中内联，使用 SVG 转 Data URI。

转换为位图时需要明确宽高，并在最终背景上检查透明边缘。

发布前检查清单

在浏览器和 SVG 查看器中预览。
检查 viewBox、比例和裁剪。
为有意义的图形添加 <title> 或旁边的无障碍标签。
内联不可信文件前先清理。
删除无用元数据和定义。
编辑完成后用 SVG 优化器压缩，并再次对比渲染结果。
将可编辑源文件与交付文件分开保存。

SVG 常见问题

SVG 一定比 PNG 好吗？

不一定。Logo、图标等可缩放形状适合 SVG；截图、纹理和必须固定像素的场景更适合 PNG。

没有设计软件可以打开 SVG 吗？

可以，现代浏览器或 SVG 查看器都能显示。需要精确绘图修改时再使用矢量软件。

PNG 或 JPG 能转换成 SVG 吗？

可以通过描摹生成路径，但这是近似结果。简单、高对比度图像效果更好，发布前应检查并简化路径。

SVG 为什么显示空白？

常见原因有 viewBox 错误、白色图形叠在白色背景、裁剪、滤镜不兼容或 XML 无效。用文本编辑器检查源代码，再在 SVG 查看器中定位问题。

SVG 文件安全吗？

上传的 SVG 应视为不可信 XML。展示或内联前先清理，除非明确受控，否则不要允许脚本和外部资源。

SVGView 工作流

先用 SVG 查看器预览，在 SVG 编辑器中修改，用 SVG 清理器处理不可信标记，再用 SVG 优化器减小交付体积。只有目标需要像素、文档或内联字符串时才转换，并始终保留可编辑源文件。

SVG 文件是什么？打开、创建、编辑与转换指南