SVG文件xlink:href指向图片在网站项目中失效问题求助

这个问题我之前踩过坑，核心原因是浏览器的安全限制：当你直接在浏览器打开SVG文件时，它处于独立的文档上下文，浏览器对外部资源加载的限制比较宽松；但把SVG作为img标签或background-image引入时，它会被当作外部资源处理，浏览器会严格限制跨域资源的加载，同时部分浏览器不支持这种嵌套场景下的外部图片加载。

下面给你几个靠谱的解决方案，按优先级排序：

1. 将外部图片转为Base64嵌入SVG（最推荐） #

把你的PNG图片转成Base64编码，直接嵌入到SVG内部，彻底解决跨域和加载限制问题。步骤很简单：

• 用Base64编码工具把目标PNG转成Base64字符串（本地命令行也能搞定：Mac/Linux下执行base64 Untitled-19.png，Windows用PowerShell运行[convert]::ToBase64String((Get-Content -path "Untitled-19.png" -Encoding Byte))）
• 替换SVG里的xlink:href属性值，比如原来的代码：

  <image xlink:href="https://s10.postimg.org/ky5y39vvd/Untitled-19.png" width="xxx" height="xxx" />
  

  改成：

  <image href="data:image/png;base64,这里替换成你的Base64字符串" xlink:href="data:image/png;base64,这里替换成你的Base64字符串" width="xxx" height="xxx" />
  

  （同时写href和xlink:href是为了兼容新旧SVG标准）

这个方法兼容性拉满，不需要依赖外部服务器，唯一的小缺点是SVG文件体积会略有增大，但对于大多数场景来说完全可以接受。

2. 配置图片服务器的CORS规则 #

如果不想修改SVG，你需要在存放PNG图片的服务器上配置跨域资源共享（CORS），允许你的网站域名访问该图片。具体操作是在服务器的响应头中添加：

Access-Control-Allow-Origin: 你的网站域名（比如https://your-site.com）

测试环境可以临时用*允许所有域名，但生产环境不推荐，会有安全风险。

不过这个方法有个前提：你必须能控制图片所在的服务器，如果是第三方图床（比如你用的postimg），可能没法修改它的CORS配置，那这个方法就用不了。

3. 将SVG内联到HTML中 #

不要用img或background-image引入SVG，而是直接把SVG的代码复制粘贴到HTML文件里。这样SVG处于页面的主文档上下文，浏览器对外部图片的加载限制会宽松一些，但同样要注意：如果图片是跨域的，还是需要配置CORS规则。

这个方法的优点是可以动态修改SVG内容，但缺点是会增加HTML的体积，不利于维护，适合小型SVG。

内容的提问来源于stack exchange，提问作者Piotr