SVG 踩坑实录（上）——那些让人抓狂的细节

2023-12-29 08:30:37

最近我在开发一个个人理财项目，当我做到导航栏的时候，发现了一个 bug。先对上图做一个money、labels 和 statistics 三个 icon 都是我从 iconfont 引入的 SVG 图标，当我导航到不同的页面时，所对应的 icon 也会高亮显示。从上图你可以看到，我明明导航到 statistics 页面，但高亮的却是 labels。这显然是个 bug。

于是我对这段代码进行了审查，发现问题出在 transform 的使用上。当我使用 transform 来对 SVG 图标进行缩放时，它并不会改变 SVG 图标的实际大小，只是改变了它的显示大小。因此，当我想让图标高亮显示时，我无法通过改变 SVG 图标的大小来实现，而是需要改变它的颜色。

我通过在 CSS 中添加以下代码解决了这个问题：

.icon-active {
  fill: #ff0000;
}

现在，当我导航到不同的页面时，对应的 SVG 图标会正确地高亮显示。

这个小小的 bug 让我意识到，在使用 SVG 图标时，有很多细节需要注意。如果你不注意这些细节，很容易就会踩坑。

在本文中，我将分享我在使用 SVG 图标时遇到的各种坑，包括兼容性问题、性能优化技巧以及一些使用技巧。希望这些经验教训能帮助大家避免踩坑，更轻松地使用 SVG 图标。

SVG 的兼容性问题

SVG 是一个相对较新的技术，因此它在某些浏览器中可能存在兼容性问题。例如，在 IE9 之前的版本中，SVG 是不被支持的。在 IE11 中，SVG 的支持也存在一些限制。

为了确保 SVG 在所有浏览器中都能正常显示，你可以使用 SVG 的 polyfill。 polyfill 是一种 JavaScript 库，它可以为不支持 SVG 的浏览器提供 SVG 的支持。

SVG 的性能优化技巧

SVG 图标通常比其他类型的图标要大，因此它们可能会影响页面的加载速度。为了优化 SVG 图标的性能，你可以使用以下技巧：

使用雪碧图 。雪碧图是一种将多个 SVG 图标合并成一个大图片的技术。这样可以减少 HTTP 请求的次数，从而提高页面的加载速度。
使用内联 SVG 。内联 SVG 是将 SVG 图标直接嵌入到 HTML 代码中。这样可以避免额外的 HTTP 请求，从而提高页面的加载速度。
使用 gzip 压缩 SVG 图标 。gzip 压缩是一种可以减小文件大小的技术。通过对 SVG 图标使用 gzip 压缩，可以减小它们的体积，从而提高页面的加载速度。

SVG 的使用技巧

除了兼容性和性能问题之外，在使用 SVG 图标时，你还需要注意一些其他的细节。例如：

确保 SVG 图标的尺寸合适 。SVG 图标的尺寸应该与其他元素的尺寸相匹配。如果 SVG 图标的尺寸太大，可能会影响页面的布局。
选择合适的 SVG 图标格式 。SVG 图标有两种格式：SVGZ 和 SVG。SVGZ 格式是经过 gzip 压缩的 SVG 格式。SVGZ 格式的图标体积更小，但它需要浏览器支持。如果你不确定浏览器是否支持 SVGZ 格式，你可以使用 SVG 格式的图标。
使用语义化的 HTML 代码来引用 SVG 图标 。你可以使用 <svg> 标签来引用 SVG 图标。<svg> 标签是一个语义化的 HTML 元素，它可以帮助浏览器更好地理解 SVG 图标。