使用SVG图像适合您的网站的性能吗？

SVG图像：网页设计的理想选择

可缩放矢量图形（SVG）是网页图形格式的绝佳选择，原因有很多，其中一个重要原因就是其相对较小的文件大小。然而，这并非绝对的。让我们深入探讨一下。

(本文是与SiteGround合作创作系列文章的一部分。感谢您支持使SitePoint成为可能的合作伙伴。)

矢量图像的优势

光栅图像（例如.JPEG、.PNG等）由网格中排列的方形像素构成。因此，图像越大，使用的像素就越多，导致文件大小增加。

不仅如此，基于像素的图形缩放效果并不好。这意味着什么？这是一张原始宽度为300 x 225像素的花朵.JPEG图像：

这是同一张图像在更高分辨率下的显示效果：

注意其模糊的边缘、模糊的表面以及图像整体质量的显着下降。

鉴于视网膜屏幕如今在用户设备上很常见，您的网站上使用光栅图像出现这种情况的风险很高。一种替代方法是提供高分辨率图形，但这当然会严重影响网页性能。

srcset 和 <picture></picture> 元素

幸运的是，现代HTML通过响应式图像（即srcset和<picture></picture>元素）来解决这个问题。在撰写本文时，除了IE11和Opera Mini之外，所有主流浏览器的最新版本都支持这两个元素。

响应式图像的目标是为使用的设备提供最佳质量的图像。这涉及提供各种分辨率的图像，但允许浏览器仅加载适合访问设备功能的图像。

如果您想了解更多关于这些技术如何工作的信息，Saurabh Kirtani撰写的《如何使用srcset构建响应式图像》深入探讨了这一主题。

以下是srcset在实践中的样子：

<code class="language-html"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173975437655791.jpg" class="lazy" alt="Is Using SVG Images Good for Your Website's Performance? "></code>

下面是<picture></picture>元素的示例：

<code class="language-html"><picture>
  <source media="(orientation: landscape)" srcset="retina-horizontal-使用SVG图像适合您的网站的性能吗？.jpg 2x, horizontal-使用SVG图像适合您的网站的性能吗？.jpg">
  <source media="(orientation: portrait)" srcset="retina-vertical-使用SVG图像适合您的网站的性能吗？.jpg 2x, vertical-使用SVG图像适合您的网站的性能吗？.jpg">
  <img src="/static/imghwm/default1.png" data-src="使用SVG图像适合您的网站的性能吗？.jpg" class="lazy" alt="使用SVG图像适合您的网站的性能吗？">
</source></source></picture></code>

如您所见，尽管根据访问设备只会提供一个图像副本，但这两种技术都需要您准备并上传多个图像副本到您的服务器。这不会影响您网站的性能，但会对您的时间和服务器带宽产生负面影响。

SVG是分辨率无关的

缩放是矢量图形的DNA，而SVG是一种基于XML的矢量图像格式。SVG由几何绘图指令（例如形状、路径、线条等）组成，这些指令与像素大小无关。从文件大小的角度来看，图像以什么大小呈现并不重要，因为这些指令保持不变。

分辨率无关的另一个含义是，您不需要为不同的设备准备同一图像的不同副本；一个尺寸适合所有设备，并且在任何屏幕分辨率下都显得清晰锐利。

也就是说，某些因素会对SVG文件大小产生负面影响，例如图像的复杂程度。绘图指令越复杂，文件大小就越大。

高效SVG文件的建议

一般来说，用于网页的SVG非常简单，例如徽标、地图、图标等。与它们的光栅对应物相比，此类简单的SVG图像可能具有较小的文件大小。

但是，您可以采取一些步骤来进一步优化文件大小，并确保您的访问者在您的网站上获得出色的体验。

以下是一些技巧：

从一开始就在设计中融入性能

您可以自己编写简单的SVG图形，也可以使用像Snap.svg这样的JavaScript库来绘制矢量图形。通常，为了完成工作，您只需启动一个矢量图形编辑器，例如Adobe Illustrator。

如果您使用图形编辑器，那么在设计阶段考虑简化SVG代码可以降低在以后优化时破坏作品的风险。

您可以朝这个方向迈出的第一步是在您选择的图形编辑器中正确设置画布大小。Sarah Drasner建议将其设置为100 x 100像素，具体取决于您的项目。这确保画布不会太小，从而产生大量小数位，您几乎无法在后期减少这些小数位而不会弄乱图形。另一方面，这个尺寸也不算太大。事实上，较大的画布意味着相应的路径点数量较多。

接下来，减少路径点的数量对于减少SVG文件的大小至关重要。这意味着尽可能使用形状而不是路径，但也将多个路径组合成较少的路径，除非您计划单独为它们制作动画。Adobe Illustrator提供“简化”面板以进一步减少路径点。这是一个简短的视频教程，用于说明其用法。

以智能方式导出SVG

充分利用图形编辑器的导出功能。如果不这样做，可能会导致一些SVG代码中充斥着您不需要的专有标记和膨胀。

例如，如果您拥有最新版本的Adobe Illustrator（在撰写本文时为CC 2017），请使用“导出为”选项导出SVG图形，然后选择.svg文件类型：

Illustrator的面板提供了一些设置，可帮助您减小文件大小并输出干净、几乎可用于网络的标记。您甚至可以通过单击面板内的“显示代码”按钮来预览代码。

有关Illustrator中每个选项的详细演练，Geoff Graham撰写的《从Adobe Illustrator获取SVG的不同方法》是一篇很棒的文章。

使用SVG优化工具压缩更多字节

导出SVG图形后，您仍然可以使用可用的出色SVG优化工具进一步缩小它。

SVGOMG（及其基于Web的GUI对应版本）以及Peter Collingridge的SVG编辑器是最流行的工具。

查看Guillaume Cedric Marty撰写的《优化SVG图像》，了解有关如何使用SVGOMG的更多信息。

启用Gzipped SVG文件的交付

SVG优化待办事项列表中的最后一步是在服务器上启用gzip压缩。SVG只是XML标记，因此它可以轻松进行压缩而不会出现任何问题。

在文件缩减方面的好处是显著的。SVG 1.1规范的附录J显示了未压缩和压缩SVG文件示例之间的比较表。结果压倒性地有利于压缩，文件大小减少了77-84%。

结论

SVG图形是网页的绝佳选择。用于简单的图标、徽标等时，通常比其光栅对应物性能更好，尤其是在您采取本文中列出的少量预防措施时。

我上面提到的技巧绝非详尽无遗。您可以进一步提高效率。有关详细的优化技术，以下资源是必读的：

• W3C SVG 1.1规范
• 网页上的SVG
• Sarah Drasner撰写的《高性能SVG》
• Sara Soueidan撰写的《优化SVG在网页上的交付的技巧》
• Andreas Larsen撰写的《优化SVG》

您的SVG优化工作流程是什么？点击评论框分享吧！

关于SVG和网站性能的常见问题解答（FAQ）

使用SVG对网站性能有什么好处？

可缩放矢量图形（SVG）为网站性能提供了许多好处。首先，SVG与分辨率无关，这意味着无论屏幕大小或分辨率如何，它们都能保持其质量。这对于响应式网页设计尤其有利。其次，与JPEG或PNG等其他图像格式相比，SVG通常具有较小的文件大小，这可以显著提高页面加载速度。最后，SVG可以用CSS和JavaScript进行动画处理和操作，从而提供更大的灵活性和交互性，而无需额外的HTTP请求。

SVG如何影响SEO？

SVG可以通过多种方式积极影响SEO。由于SVG文件较小，因此可以提高页面加载速度，这是Google的排名因素。此外，与其他图像格式不同，SVG可以被搜索引擎索引和抓取。这意味着您可以为SVG添加替代文本和其他元数据，从而进一步增强您的SEO工作。

SVG可以用于复杂的图形吗？

是的，SVG非常适合复杂的图形，例如徽标、图标和插图。与光栅图像不同，SVG在放大或缩小后不会失真，因此非常适合需要以各种尺寸显示的复杂设计。此外，SVG可以用CSS和JavaScript进行样式设置和动画处理，从而实现更复杂和交互式的设计。

使用SVG有什么缺点吗？

虽然SVG提供了许多好处，但也有一些潜在的缺点需要考虑。一些旧的浏览器可能不支持SVG，这可能会影响您的网站对某些用户的显示方式。此外，虽然SVG非常适合简单或中等复杂度的图形，但对于高度详细或照片类型的图像，它们可能不是最佳选择。

如何优化SVG以获得更好的性能？

有多种方法可以优化SVG以获得更好的性能。一种方法是缩小SVG代码，这将删除不必要的字符和空格，从而减小文件大小。您还可以使用gzip压缩来进一步减小文件大小。此外，考虑使用CSS和JavaScript来制作SVG动画或操作SVG，而不是嵌入多个SVG文件。

SVG可以提高移动网站的性能吗？

是的，SVG可以显著提高移动网站的性能。由于SVG与分辨率无关，因此它们可以在任何屏幕尺寸上保持其质量，这使得它们非常适合响应式网页设计。此外，它们较小的文件大小可以提高页面加载速度，这对于可能具有较慢互联网连接的移动用户尤其重要。

就性能而言，SVG与其他图像格式相比如何？

SVG在性能方面通常优于其他图像格式。它们的文件大小较小，可以提高页面加载速度。与在放大时可能会变得像素化的光栅图像不同，它们在任何尺寸下都能保持其质量。但是，对于高度详细或照片类型的图像，JPEG或PNG等格式可能更合适。

我可以使用SVG制作动画吗？

是的，可以使用CSS或JavaScript为SVG制作动画。这允许更具交互性和吸引力的设计，而无需额外的HTTP请求。但是，请记住，复杂的动画可能会增加文件大小并可能影响性能。

SVG是否易于访问？

是的，可以通过添加替代文本和其他元数据来使SVG易于访问。这允许屏幕阅读器向视力障碍的用户描述图像，从而提高您网站的可访问性。

如何学习创建和使用SVG？

网上有很多资源可以学习SVG。MDN Web文档、CSS-Tricks和各种编码训练营等网站提供有关创建和使用SVG的教程和指南。此外，还有许多工具（如Adobe Illustrator和Inkscape）可以帮助您创建SVG图形。

以上是使用SVG图像适合您的网站的性能吗？的详细内容。更多信息请关注PHP中文网其他相关文章！