前言:SVG是什么?
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG的优势
- SVG 可被非常多的工具读取和修改(比如记事本)
- SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
回归正题,项目中经常使用SVG格式的图片,一般用于小的icon,不太复杂图形的图片也会使用svg,个人觉得svg最大的优势就是体积小,加载速度快,可拓展性高。一般的UI软件都支持导出SVG,但是过于复杂的图形不建议使用svg,因为在HTML中是用过于复杂的SVG图形,有时候渲染出来会出现莫名其妙的问题。
本次需求中,有几个状态icon我觉得可以使用svg来渲染,起初开发的时候,在电脑端渲染出来是没有任何问题的,自己也用手机进行了测试(本人手机红米K40)也是没有问题。提测之后,测试提出了bug,说是在ios上这些icon有些发糊,开始自己还不信,因为用了svg挺久了,没出现过这种问题啊,毕竟“SVG 图像可在任何的分辨率下被高质量地打印”啊!然后自己进行测试,你别说,还真他喵的糊了,后查询资料,确实是这样。
问题分析
img标签引入的svg在苹果浏览器是无法支持的,会被直接解析成普通图片的格式(.png.jpg)。
所以就会出现安卓手机上一点都不模糊,而苹果手机却模糊的要死。
解决办法
采用iframe、object来加载。
<iframe src="icon.svg"></iframe>
<!--或者-->
<object type="image/svg+xml" data="icon.svg"></object>
使用object标签引入svg的话会有点击事件不能触发的问题,不要慌,这是因为object标签进行了多层包裹,我们只需要把点击事件绑定到object标签父级元素即可。
拓展
通过img标签引入的svg图片如何改变颜色,我常用 filter 和 transform去解决。
.svg-img {
filter: drop-shadow(#ff0 100px 0);
transform: translateX(-100px);
}