HTML引用SVG时内部xlink:href图片无法显示的问题求助

问题根源 #

1. 跨域安全限制：当SVG通过img标签或background-image作为外部资源嵌入其他域名页面时，浏览器会触发跨域检查。如果SVG内部xlink:href指向的WebP图片所在服务器未配置允许引用域名的CORS响应头，浏览器会直接阻止加载该WebP资源。而直接打开SVG时，属于同源访问，不会触发这个限制。
2. 外部SVG的资源加载限制：浏览器将SVG当作图片资源解析时，会限制其内部的外部资源引用，尤其是跨域的二进制图片格式（如WebP），这是浏览器的安全策略，防止恶意资源注入。

可行解决方案 #

• 内嵌WebP为Base64：把SVG里引用的WebP图片转换成Base64编码，直接写入SVG的xlink:href属性中（格式为data:image/webp;base64,【编码内容】），彻底规避跨域问题。
• 配置CORS响应头：让WebP图片所在服务器返回Access-Control-Allow-Origin头，值设为引用SVG的域名或通配符*；同时确保SVG文件所在服务器也配置允许跨域的响应头。
• 直接内联SVG代码：不要用img或背景图引用SVG，而是把SVG的完整代码直接嵌入目标页面的HTML中，此时SVG内部的资源引用会遵循当前页面的跨域规则，只要WebP图片允许被当前域名访问就能正常显示。

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