SVG vs PNG/JPG：为什么矢量格式对性能和 SEO 至关重要

PNG 和 JPG：适合照片，但对界面来说太重

PNG 和 JPG 是光栅格式：图像是一个像素网格。导出为 512×512 的 PNG 徽标会“拍摄”每一个点。为了在 Retina 屏幕上保持清晰，您通常需要提供两到三倍大的版本，这意味着两到三倍的体积 (KB)。JPG 在压缩照片方面表现更好，但它会破坏纯色区域，在文本周围添加伪影，并且不支持透明度。它们都不是为必须在导航中以 24 像素、在横幅中以 240 像素显示的徽标或图标而设计的。

SVG（可缩放矢量图形）通过曲线和坐标来描述形状，而不是通过像素。使用 PixelToPath 将 PNG 矢量化，就是用浏览器以确切屏幕尺寸重绘的路径替换固定的位图。结果是：文件通常小得多，并且在移动端、电脑和 4K 面板上都一样清晰。

SVG 实际上为网站改变了什么

对于界面来说，SVG 并不是美学上的“附加项”。它是提升性能的杠杆：减少网络传输的字节，减少需要维护的变体，更简单的缓存，以及所有现代浏览器中原生的矢量渲染。

对开发者或 SEO 来说最明显的收益：

• 体积：一个简单的徽标通常从 40 到 80 KB 的 PNG 变为仅几 KB 的 SVG，而且您可以省去 @2x / @3x 的导出
• 可扩展性：一个文件，在 16 像素或 4K 全屏下都一样清晰，无需 srcset 或图像媒体查询
• 核心网页指标：更少的数据下载 (LCP) 和通过 viewBox 提供的稳定保留空间 (CLS)
• 技术 SEO：移动端页面速度更快，一种谷歌可以解析的格式，并且 SVG 中可能包含文本

PNG vs SVG：徽标的体积并非微不足道

图像仍然是页面重量的最大来源之一。我们用 WebP 优化了照片，却忘记了页眉中的徽标和 CSS 中的二十多个 PNG 图标。但是这些文件在所有 URL 上都会重复：每一毫秒的损失都是整个网站的损失。

在展示网站或网络应用程序的典型场景中，使用 PixelToPath 矢量化后观察到的数量级：

场景	PNG / JPG	SVG
带透明度的 512 px 徽标	40 到 80 KB	2 到 12 KB，取决于颜色和节点数量
同一徽标为 Retina 以 @2x（1024 px）提供	体积翻倍，有时增至三倍	单个文件，保持不变
以 @3x（72×72）导出的 20 个界面图标	额外增加 40 到 160 KB	总共只有几 KB
来自 JPG 的平色徽标	图形和文字周围出现伪影和光晕	边缘干净，文件也更轻

规则很简单：所有形状、文本、象形图或徽标，转换为 SVG 后都会受益。照片和屏幕截图保留为 JPG、WebP 或 AVIF。SVG 不是万能的替代品：它是适合界面的正确格式。

可扩展性：从智能手机到 4K 始终清晰的文件

PNG 仅在其原始分辨率下清晰。放大时会看到像素。大幅度缩小时，浏览器必须重新采样。这就导致了对 @1x、@2x、@3x 文件、srcset 和 CSS 密度的复杂处理。每一个新的断点或新的屏幕密度（Retina、较新的手机、4K 显示器）都需要一次新的导出，或者一个“以防万一”过大的文件。

SVG 无视这种限制。渲染引擎根据请求的 CSS 尺寸计算曲线。32 像素的网站图标，导航中 48 像素的徽标，横幅中 400 像素的同一个品牌，4K 投影：都是同一个文件。没有模糊，没有锯齿，无需为高密度版本发起第二次请求。对于组件库来说，这也意味着更少的技术债务：一个图标，一个文件，适用于所有尺寸。

核心网页指标与 SEO：为什么谷歌在乎格式

移动速度是一个排名因素。核心网页指标 (LCP, INP, CLS) 衡量用户的体验。用 SVG 替换沉重的 PNG 徽标或一堆光栅图标，不会让页面从 4 MB 变成 40 KB。但在网站的视觉表现上，效果是立竿见影的，尤其是在 4G 网络上或 LCP 被页眉徽标卡住时。

具体来说，矢量格式在保持路径复杂性合理的前提下，有助于改善三个指标：

• LCP（最大内容绘制）：如果最大的可见元素是徽标或扁平化插图，几 KB 的 SVG 会比 150 KB 的 @2x PNG 到达得更早。这减少了页面其余部分的网络拥塞
• CLS（累积布局偏移）：带有 width、height 和 viewBox 的 SVG 在解析 HTML 时就会保留其显示框。不再需要等待位图解码才能知道比例，从而减少布局跳动
• INP 和主线程：一个简单的 SVG（徽标、图标）绘制成本很低。但请避免使用包含数千条路径的“照片”级 SVG：它们可能比 PNG 更重，并会增加处理器的负担。这就是为什么通过 PixelToPath 获得干净的路径（而不是逐像素复制）具有优势
• 速度之外的 SEO：谷歌会索引 SVG。集成的徽标可以携带无障碍标题。带有 alt 属性的 SVG 图像仍然是基础。而更轻的页面可以降低技术上的跳出率，这是排名所考虑的体验信号

在真实网站中，SVG 胜过 PNG/JPG 的地方

这不是纸上谈兵。以下是矢量格式能够立即带来回报的地方：

• 页眉和页脚徽标：单个文件，在 Retina 下清晰，通常是最常被浏览的元素之一，有时甚至是在极简首页上的 LCP
• 图标系统：不再需要 1x/2x 的 PNG 精灵图。每一个象形图都是一个 SVG（或 SVG 精灵图），可以用 CSS 样式化 (currentColor)，无需新的导出
• 网站图标 (Favicon) 和 apple-touch：一个现代的 SVG 网站图标加上一个后备 PNG，可以避免维护一堆 16、32、180 像素的尺寸
• 界面插图和空状态：矢量化的扁平绘图在全屏下依然清晰，而不会占用与页眉图像一样大的体积
• SEO 落地页：在页面装饰上节省的每一 KB 都能提升 Lighthouse、PageSpeed Insights 和移动端体验，这些都是影响排名的综合信号

为照片保留 JPG/WebP。将徽标、象形图和扁平化插图切换为 SVG。这就是最快的网站已经应用的分工。