图像优化关键技巧6：SVG优化详解

注明：本人原创翻译，原版为Essential Image Optimization电子书，这里将其拆分为几篇文章发布。另外，文中部分链接可能会因为“网络”原因无法打开。不必着急，我会慢慢将其中一些比较好的内容翻译过来发表，都会在这个“Web图像技术深究”专题中。

目录

• ​介绍
• 如何判断我的图像是否需要优化？
• 如何选择正确的图像格式？
• “素人”JPEG
• JPEG的压缩模式
  • 渐进式JPEG的优点
  • 谁在生产环境中使用了渐进式JPEG？
  • 渐进式JPEG的缺点
  • 如何生成一个渐进式JPEG？
  • 色度（或颜色）抽样
  • JPEG引发的格式拓展
  • 使用JPEG优化编码器
  • 什么是MozJPEG？
  • 什么是Guetzli？
  • MozJPEG与Guetzli孰优孰劣？
  • Butteraugli
• 什么是WebP？
  • WebP的表现如何？
  • 谁在生产环境中使用WebP？
  • WebP编码如何执行？
  • WebP的浏览器支持
  • 如何将我的图像转换为WebP？
  • 如何在我的操作系统上查看WebP图像？
  • 如何提供WebP？
• SVG优化
• 避免使用有损编解码器重复压缩图像
• 减少不必要的图像解码和尺寸调整带来的损耗
  • 使用srcset提供HiDPI图像
  • 艺术化的响应
• 颜色管理
• 图像拼合技术
• 延迟加载非关键图像
• 避免display: none;的陷阱
• 图像CDN服务对你有意义吗？
• 缓存图像资源
• 预加载关键图像资源
• 图像的网络性能预算
• 最后的建议
• 附注

正文：

SVG的优化

保持SVG的优良，意味着要清除任何不必要的东西。使用编辑器创建的SVG文件通常包含大量冗余信息（元数据、注释、隐藏层等）。通常可以安全地删除此内容，或将其转换为更小的形式，而不影响当前要显示的最终SVG。

由Jake Archibald提供的SVGOMG，提供了一个GUI界面方便你通过选择选项优化你的SVG，并支持实时预览。

SVG优化的一些通用规则（SVGO）：

• 使用Minify和gzip压缩您的SVG文件。SVG实际上只是以XML格式表示的文本资源，和CSS、HTML以及JavaScript是一样的，我们应该使用Minify和gzip压缩它以提高性能。
• 使用预定义的SVG图形如<rect>，<circle>，<ellipse>，<line>和<polygon>取代路径。优选预定义的形状有助于减少生成最终图像所需的标签量，也意味着较少的浏览器解析和点阵描述代码。减少SVG复杂度也意味着浏览器可以更快地显示它。
• 如果您必须使用路径（Path），请尝试减少曲线路径，尽量简化和合并它们。Illustrator的简化工具可以帮助您在复杂的艺术品中消除多余的点，同时平滑不规则的曲线。
• 避免使用组（Group）。如果不能，请尝试简化它们。
• 删除不可见的图层。
• 避免使用任何Photoshop或Illustrator效果。它们会使生成较大的位图图像。
• 仔细检查SVG中任何非友好的嵌入的位图图像。
• 使用工具优化SVG。 SVGOMG是一个Jake Archibald为SVGO编写的一个方便的Web端操作界面。如果你使用Sketch，可以在导出时使用[SVGO压缩插件](Sketch plugin for running SVGO)以减小导出文件的体积。

使用SVGO高精度模式（体积减少29%）和低精度模式（体积减少38%）处理SVG原图后的对比示例。

SVGO是一种Node.js环境下优化SVG的工具。SVGO可以通过减少你的路径（Path）中的精度点数，来减少最终文件的体积。每增加一个点位数后就会增加一个字节，这就是为什么更改精度（位数）会严重影响文件的体积。但是，改变精度需要非常小心，因为它会影响你的图形的视觉效果。

需要注意的是，虽然SVGO在前面的例子中都表现良好，并不会过分简化曲线和形状，但是有很多情况下可能不是这样。如上图，观察火箭上的线条可以看到在较低的经度下，线条是如何产生了变形。

在命令行中使用SVGO：

如果您更喜欢GUI，SVGO可以作为全局的npm CLI安装：

npm i -g svgo

然后可以对本地的SVG文件执行，如下所示：

svgo input.svg -o output.svg

它支持您可能期望的所有选项，包括调整浮点精度：

svgo input.svg --precision=1 -o output.svg

有关支持选项的完整列表，请参阅SVGO 说明文件。

不要忘了压缩SVG！

此外，不要忘记使用Gzip压缩你的SVG资源或者使用Brotli来提供服务。因为SVG是文本的，所以压缩率会非常高（可以减少50%）。

当Google发布了一个新徽标时，我们宣布其最小版本的大小只有305个字节。

有很多高级的SVG技巧可以用来将其进一步删减体积（一直到146个字节）！可以说，无论是通过工具还是手动清理，可能你都有可能将SVG的体积再刮掉一些。

SVG Sprite

SVG在制作图标时非常强大，它就像一个精灵一样，提供了一种表示可视化图形的方式，在这种方式里没有奇怪的必须使用的字体。它有着比图标字体（SVG笔触属性）更精准的CSS样式控制，更好的定位控制（不需要各种伪元素和CSS display），并且SVG 更容易理解。

像svg-sprite和IcoMoon这样的工具，可以自动将SVG组合成sprite，并可以通过CSS Sprite，Symbol Sprite或Stacked Sprite来使用。Una Kravetz有一篇实用的文章值得看一下，其中说明了如何使用gulp-svg-sprite进行SVG Sprite工作流程。Sara Soudein也曾在她的博客中表述转变图标字体到SVG。

进一步阅读

Sara Soueidan的网页交付中的优化SVG技巧和Chris Coyier的实用SVG电子书都非常好。我还发现Andreas Larsen的优化SVG帖子很有启发（第1 部分，第2部分）。另外，在Sketch中准备和导出SVG图标也是一个很好的借鉴。