SVG转为Data URI后内嵌样式失效，寻求技术解决方案

针对你遇到的SVG通过Base64编码的Data URI嵌入为<img>时，<image>元素的display: none样式失效的问题，给你几个可行的解决方案：

1. 使用SVG内部样式表替代inline style #

当SVG作为外部资源（比如<img>的src）加载时，浏览器对inline style的处理会有严格限制，改用内部<style>标签定义样式的兼容性更好。修改你的SVG代码如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="30 100 700 300" style="enable-background:new 0 0 750 500;" xml:space="preserve">
  <style type="text/css">
    image { display: none; }
  </style>
  <g>
    <image xlink:href="some-image-link"></image>
  </g>
</svg>

2. 改用UTF-8编码的Data URI（跳过Base64） #

Base64编码偶尔会因为转义或编码错误导致SVG内容解析异常，直接使用UTF-8编码的Data URI更直观且不易出错。需要把SVG中的特殊字符做URI转义（比如双引号"转%22，小于号<转%3C等），最终嵌入方式示例如下：

<img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%2230%20100%20700%20300%22%20style%3D%22enable-background%3Anew%200%200%20750%20500%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20image%20%7B%20display%3A%20none%3B%20%7D%0A%20%20%3C%2Fstyle%3E%0A%20%20%3Cg%3E%0A%20%20%20%20%3Cimage%20xlink%3Ahref%3D%22some-image-link%22%3E%3C%2Fimage%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E" />

你可以用编程语言的URI转义函数（比如PHP的rawurlencode()）自动处理SVG内容，避免手动转义出错。

3. 备选方案：使用SVG的visibility属性或尺寸控制 #

如果上述方法仍有问题，可以尝试用visibility: hidden替代display: none，或者直接给<image>设置width="0" height="0"来隐藏元素：

<image xlink:href="some-image-link" visibility="hidden" width="0" height="0"></image>

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