2023年12月28日
（切图笔记）通过data:image方式引用svg图片作背景 亲测好用 需要注意这点
切图笔记 记录切图网日常， 现在切图网切图的时候 对于图片的处理 不单纯的只限于 jpg png等格式，svg也越来越多的替代了更多时候的情况，因为svg是矢量格式 不会失真，而且兼容性也好，支持代码修改图片颜色，加载也快，所以是一个非常不错的选择。
svg作为图片插入 或者作为背景引用 都是常规操作，但是svg也可以通过代码方式直接作为背景引用的， 适合网站上箭头出现次数多，而且颜色多的情况，只需要一个svg即可解决，附代码。
/*background-image: url(“data:image/svg+xml,<svg xmlns=’http://www.w3.org/2000/svg’ width=’32’ height=’32’ viewBox=’0 0 1024 1024′><path d=’M970.496 543.829333l30.165333-30.165333-415.829333-415.914667a42.837333 42.837333 0 0 0-60.288 0 42.538667 42.538667 0 0 0 0 60.330667l355.413333 355.498667-355.413333 355.285333a42.496 42.496 0 0 0 0 60.288c16.64 16.64 43.861333 16.469333 60.288 0.042667l383.914667-383.701334 1.749333-1.664z’ fill=’%233D3D3D’ p-id=’5009′></path></svg>”);*/
需要注意的是，当你拿到一个svg图片，需要像上面这样引用的话，需要改一个地方，否则会失败
svg作为背景图片 不能出现 #号 要改为 %23，比如颜色 fill=’#3D3D3D’ 要改为 fill=’%233D3D3D’
标签：data:image, svg, 背景, 背景图片
关注“qietuwang”微信公众号，获取一手干货内容推送
本文由切图网原创，转载请保留版权：
（切图笔记）通过data:image方式引用svg图片作背景 亲测好用 需要注意这点
https://www.qietu.com/cn/dataimage-svg-beijing/
微信扫一扫二维码访问
