SVG排版教程 | image元素如何正确引入图片？

老铁留言：SVG公众号排版遇到image元素通过xlink:href属性引入图片，在公众号图文里无法正常显示，这是为什么？懂点君写个案例给大家看看。

代码案例

案例中分别通过xlink:href属性和href属性引入图片，然后在本地上和公众号上查看显示效果。​​​​​​​

<svg viewBox="0 0 1200 1200" style="display: block;width: 100%;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君">
    <!-- href属性引入 -->
    <image x="0" y="0" width="600" height="600" href="https://mmbiz.qpic.cn/mmbiz_png/URGhbghw5oVWvMbXBTwu0SE0XpQkgAuVtpDf5RuD6O4hzibxI186E3r9viboicZDaRYSLvj6vHicxSq4vkiaMYB8gTA/0?wx_fmt=png"></image>
    <!-- xlink:href属性引入 -->
    <image x="600" y="600" width="600" height="600" xlink:href="https://mmbiz.qpic.cn/mmbiz_png/URGhbghw5oVWvMbXBTwu0SE0XpQkgAuVtpDf5RuD6O4hzibxI186E3r9viboicZDaRYSLvj6vHicxSq4vkiaMYB8gTA/0?wx_fmt=png"></image>
</svg>

显示效果

在本地上（用文件打开查看）的显示效果

在公众号上的显示效果

结论：href属性无论是在本地上还是在公众号上都能正常显示（左上角是href属性引入的图片）；xlink:href属性在本地上能正常显示，在公众号上无法正常显示。

问题原因

懂点君通过Chrome浏览器调试发现，xlink:href属性在公众号文章里被过滤掉了，也就是这个属性直接被清空了，所以才导致xlink:href属性在公众号上无法正常显示图片。另外，xlink:href属性已经被抛弃了，开发的时候也不推荐使用这个属性了！

哦，对了，注意一下，明天不上班！

推荐阅读

1. 如何解决Photoshop导出的GIF有锯齿或者白边？

2. GIF图如何禁止循环播放？Photoshop设置了也没用！

3. 如何快速获取动图的播放时长？

4.【SVG案例库】SVG公众号排版交互图文案例汇总