Html中svg图片在Chrome浏览器不展示的问题

昨天在做一个div的背景时，为了自适应图片是切的svg，然后在我的电脑上图片就是不显示，美工在自己电脑上实验可以直接展示，不同的地方在于他用的国产浏览器，我用的Chrome浏览器。

img标签展示

打开svg文件，其中也就是存储着base64格式的字符串，创建一个img标签，直接复制base64中的字符串到img src中，发现图片可以展示。

background image展示

Google发现png图片在转为svg的时候会有格式上的问题，在MacOS系统下的浏览器上展示有问题的svg会有不展示的问题存在，解决方式有以下两种：

• 将background中的url路径直接换为svg中的base64字符串

1
2
3
4
5
6

.bg {
    // 原始
    background: url(bg.svg);
    // 替换为(url中的字符串从svg中可以找到)
    background: url('data:img/png;base64,=====LONG BASE 64 ENCODE HERE=====');
}

• 修改svg

1
2
3
4

// 原始
xlink:href="data:img/png;base64,
// 修改为
xlink:href="data:image/png;base64,