web图像优化(3)

SVG优化

保持SVG精益意味着剥离任何不必要的东西。 用编辑器创建的SVG文件通常包含大量的冗余信息（元数据，注释，隐藏层等等）。 这些内容通常可以安全地移除或转换为更简单的形式，而不会影响正在呈现的最终SVG

image

Jake Archibald的SVGOMG是一个GUI界面，使您能够通过选择优化来优化您的SVG，并对输出的标记进行实时预览

SVG优化的规则

• 缩小和gzip您的SVG文件。 SVG实际上只是用XML表示的文本资产，如CSS，HTML和JavaScript，应该缩小和压缩以提高性能。
• 使用预定义的SVG形状（如<rect>，<circle>，<ellipse>，<line>和<polygon>）来代替路径。使用预定义的形状可以减少生成最终图像所需的标记数量，这意味着浏览器解析和栅格化的代码更少。减少SVG的复杂性意味着浏览器可以更快地显示它。
• 如果您必须使用路径，请尝试减少曲线和路径。简化和结合他们，你可以。 Illustrator的简化工具擅长于消除复杂图形中的多余点，同时消除不规则性。
• 避免使用组。如果你不能，试着简化它们。
• 删除不可见的图层。
• 避免任何Photoshop或Illustrator的影响。他们可以转换成大的光栅图像。
• 仔细检查任何不支持SVG的嵌入式光栅图像
• 使用工具来优化您的SVG。 SVGOMG是Jake Archibald为SVGO提供的超级方便的基于Web的图形用户界面，我发现它非常宝贵。如果使用Sketch，可以在导出时使用SVGO Compressor插件（用于运行SVGO的Sketch插件）缩小文件大小。

通过SVGO以高精度模式（导致尺寸改善29％）与低精度模式（尺寸改善38％）运行SVG源的一个例子。

image

SVGO是一个优化SVG的基于节点的工具。 SVGO可以通过降低定义中的数字精度来减小文件大小。 点之后的每个数字都会添加一个字节，这就是为什么更改精度（位数）会严重影响文件大小的原因。 要非常小心地改变精度，因为它可以直观地影响你的形状的外观

image

需要注意的是，虽然SVGO在前一个例子中表现良好。在很多情况下，但对于不会过分简化路径和形状，可能并非如此。

使用SVGO命令行:

svgo input.svg -o output.svg

可以调整精度

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

不要忘记压缩SVG！

不要忘记Gzip您的SVG资产或使用Brotli服务他们。因为它们是基于文本的，所以它们压缩得非常好

image

当Google发布新徽标时，我们宣布最小的版本只有305字节

image

有很多先进的SVG技巧，你可以用它来进一步修改（一直到146字节）！不用说，无论是通过工具还是手动清理，可能还有一点你可以削减你的SVG。

SVG Sprites

SVG对于图标来说可以是强大的，提供了一种表示为精灵的方法，而不需要图标字体所需的奇怪变通方法。它具有比图标字体（SVG笔画属性）更好的粒度CSS样式控制，更好的定位控制（无需围绕伪元素和CSS显示）和SVG更容易访问。

像svg-sprite和IcoMoon这样的工具可以自动将SVG结合成可以通过CSS Sprite，Symbol Sprite或Stacked Sprite使用的精灵。Una Kravetz有一个关于如何使用gulp-svg-sprite实现SVG sprite工作流程的实用文章。 Sara Soudein也在她的博客中介绍了从图标字体到SVG的过渡。