如何在 LESS 中使用 svg 图片并解决兼容性问题

前言

前端开发中，图片是必不可少的，而 SVG 格式的图片因为其矢量化、可缩放、清晰度高等特点，越来越受到前端工程师的青睐。但是，如何在 LESS 中使用 SVG 图片并解决兼容性问题呢？本文就为大家介绍。

使用 LESS 引入 SVG 图片

LESS 是一种动态样式语言，相较于 CSS 具有更强的拓展能力。使用 LESS 在网页中引入 SVG 图片，可以避免浏览器缓存的问题，同时也有利于代码管理。具体步骤如下：

1. 准备 SVG 图片文件，需保证图片清晰度高，国内网站优先选择 Base64 格式。
2. 使用 LESS mixin，定义一个 SVG 图片引入的方法，如下：

.bg-svg(@imgPath) {
    background-image: url('@{imgPath}.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

1. 在需要引入 SVG 图片的地方，使用上述定义的 LESS mixin，示例如下：

div {
    .bg-svg('../img/icon');
}

兼容性问题解决方案

在 Chrome 和 Firefox 等浏览器上，上述做法可以正常引入 SVG 图片并且显示正常。但是，在 Safari 等浏览器上，需要针对 SVG 格式图片做出一些特殊的处理，才能保证正常显示。

1. 解决 Safari 中 SVG 图片无法缩放问题：

在 LESS mixin 中增加 webkit 样式属性，并启用硬件加速（-webkit-transform: translate3d(0, 0, 0)），示例如下：

.bg-svg(@imgPath) {
    background-image: url('@{imgPath}.svg');
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -webkit-transform: translate3d(0, 0, 0);
}

1. 解决 Safari 中 SVG 图片在非 1x 情况下位置偏移问题：

在 LESS mixin 中增加 background-position 样式属性，示例如下：

.bg-svg(@imgPath) {
    background-image: url('@{imgPath}.svg');
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    -webkit-transform: translate3d(0, 0, 0);
    background-position: center;
}

总结

使用 LESS 引入 SVG 图片是一种非常优秀的做法，有利于代码管理、避免浏览器缓存问题，同时也更加有利于前端性能优化。但是，需要注意兼容性问题，特别是 Safari 浏览器中的问题，需要做出相应的兼容处理。

希望本文能为大家带来一些帮助，并且能够启发大家发掘 LESS 等工具的更多玩法，更好地应用在实际开发中。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486bb3b48841e98945427f9