有人跟我说svg可以转base64用于background-image

有人跟我说用svg可以转base64用于background-image

做个小知识点记录,没啥~

1、svg转base64

转换链接:https://www.sojson.com/image2base64.html

2、使用两者区别

(1)使用一个63.8k的svg与使用转base64之后的两个文件

a、使用svg

在这里插入图片描述

b、使用base64

在这里插入图片描述

(2)使用一个225k的svg与使用转base64之后的两个文件

a、使用svg

在这里插入图片描述

b、使用base64

在这里插入图片描述

3、svg转base64有什么好处吗?

(1)减少http请求

(2)脱离与图片文件的关系

4、svg转base64坏处呢?

(1)svg文件越大造成使用转码后的文件体积越大

(2)代码显臃肿

(3)如果发生手误删除编码中的几个字符,难以恢复,需要重新转码

5、总结

两者使用在不同分辨率下放大缩小都不会失真或者变模糊,建议不要使用svg转base64

6、后续(只是记录)

跟我说的人是在做微信小程序的,因为微信小程序可以运行在多个平台上,各个平台的实现原理也是不一样的,在background-image的使用上,小程序只能用外链或者是base64,不能使用本地资源,因为在真机上会有问题。所以他才用svg转base64。记录over!

猜你喜欢

转载自blog.csdn.net/weixin_42060560/article/details/109615358