SVG 格式详细说明：向量图形的网页标准

当你放大一张 JPG 或 PNG 图片到 400%，你会看到像素——那些马赛克方块是所有点阵图格式的本质限制。但如果你放大一个 SVG 图形，它永远保持清晰，边缘锐利，没有任何劣化。这就是向量图形的核心魔法，而 SVG 是网页世界实现这个魔法的标准格式。

向量 vs 点阵：两种根本不同的思维

理解 SVG 首先要理解向量和点阵的根本差异。

点阵图（Bitmap/Raster）：图像由固定数量的像素格子组成，每个格子有一个颜色值。JPG、PNG、GIF、BMP 都是点阵图。点阵图的解析度是固定的——一张 100×100 像素的图放大到 1000×1000 的显示尺寸，电脑只能猜测和插值中间的像素，结果必然模糊。

向量图（Vector）：图像由数学描述的几何形状组成——点、线、曲线、多边形，以及填充颜色和笔画属性。向量图没有“解析度”的概念，因为每次渲染都是根据数学公式重新计算的。放大 10 倍、100 倍、1000 倍，结果都同样清晰。

这就是为什么 Logo、图示、插图通常用向量格式设计，而照片只能是点阵图——你没办法用几个数学公式来描述一张复杂的人脸照片。

SVG 的独特性：它是 XML 文字

SVG 全名是 Scalable Vector Graphics（可缩放向量图形），由 W3C（万维网联盟）制定，1999 年首次发布。SVG 在向量图形格式中有一个非常独特的特性：它是纯文字的 XML 格式。

你可以用任何文字编辑器开启和编辑 SVG 文件。一个简单的 SVG 圆形看起来像这样：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" stroke="navy" stroke-width="3"/>
</svg>

这段 XML 描述了一个圆心在 (50,50)、半径 40、蓝色填充、深蓝色外框的圆形。不管你把这个圆形显示在多大的萤幕上，它都是完美的圆形。

文字格式带来的好处：

• 可用版本控制管理：SVG 文件可以用 Git 进行差异比较（diff），追踪每次修改。
• 可程式化生成：可以用任何程式语言动态生成 SVG，用于资料视觉化、动态图表等。
• 可搜寻和索引：SVG 中的文字内容可以被搜寻引擎索引。
• 可直接嵌入 HTML：SVG 程式码可以直接写在 HTML 文件里，成为 DOM 的一部分。

可缩放的实际意义

“可缩放”对现代多装置网页来说意义重大：

• Retina/高 DPI 萤幕：现代手机和萤幕的像素密度是传统萤幕的 2–3 倍。JPG/PNG 图示在高 DPI 萤幕上如果没有提供对应解析度的版本，就会显得模糊。SVG 完全没有这个问题。
• 响应式设计：一个 SVG Logo 可以在行动装置的 32px 导览列和大型萤幕投影的 1920px 横幅上同样清晰，不需要准备多个不同解析度的版本。
• 列印：SVG 在列印到高解析度印表机时同样完美，没有点阵化的问题。

SVG 的网页使用

SVG 在网页上有多种使用方式：

• 图片标签：<img src="logo.svg">，最简单的使用方式，SVG 作为图片显示。
• CSS 背景：background-image: url('icon.svg')，作为 CSS 背景使用。
• 内联 SVG：直接把 SVG 程式码写进 HTML，可以用 CSS 控制样式、用 JavaScript 操作 DOM 元素，实现动画和互动效果。
• 字型替代：图示字型（如 Font Awesome）正在被 SVG 图示取代，因为 SVG 在可存取性和效能上都更好。

SVG 的动画能力

SVG 支援多种动画机制：

• CSS 动画：用 CSS animation 和 transition 属性控制 SVG 元素的动画。
• SMIL 动画：SVG 内建的动画标签（<animate>、<animateTransform>），虽然 Chrome 曾宣布要弃用，但最终保留了支援。
• JavaScript 操控：透过 JavaScript 动态修改 SVG DOM，实现任意复杂的动画和互动效果。

设计工具支援

主流的向量设计工具都原生支援 SVG：

• Adobe Illustrator：最专业的向量设计工具，汇出 SVG 需要注意设定才能获得干净的程式码。
• Figma：现代 UI 设计的主流工具，支援直接汇出 SVG，程式码相对干净。
• Sketch：Mac 平台的 UI 设计工具，原生 SVG 汇出。
• Inkscape：免费开源的向量绘图工具，原生格式就是 SVG。
• Affinity Designer：Adobe 的替代品，支援完整的 SVG 工作流程。

SVG 的限制

• 不适合照片：复杂的自然图像无法用向量路径有效描述。
• 复杂 SVG 可能比 PNG 大：一个包含数千个路径的复杂插图，其 SVG 文件可能比等效的 PNG 截图大得多。
• 安全问题：SVG 可以包含 JavaScript，在某些情境下（如允许用户上传 SVG）需要考虑 XSS 安全风险。
• 渲染差异：不同浏览器对 SVG 进阶功能的支援程度略有差异。

不上传的做法

如果这个档案是机密的，最安全的做法是让它根本不离开你的电脑。图片格式转换完全在浏览器里执行：档案从你的硬碟读进记忆体、在本机处理、再写回硬碟，不会送到任何服务器。

1. 开启图片格式转换。
2. 从你的电脑选择档案。它是在本机读取的，不会上传。
3. 选择输出格式，需要的话调整品质。
4. 下载结果。原始档案留在原处。

在浏览器里直接完成，档案不会离开你的电脑：图片格式转换