咨询：将内联SVG转为SVG文件以兼容Safari的实现方法

嘿，我来帮你解决Safari里内联SVG不显示的问题！把内联SVG转成单独的SVG文件再用<img>标签嵌入的操作其实超简单，分这几步走就行：

先把你现有代码里的内联SVG部分完整复制出来——就是从<svg>标签开头到</svg>标签结尾的所有内容。比如你代码里的SVG代码可能是类似这样的：

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 这里是你的SVG图形内容、样式等 -->
</svg>

把这段代码粘贴到任意文本编辑器（比如记事本、VS Code）里，然后保存成后缀为.svg的文件，比如custom-icon.svg，保存时记得选UTF-8编码，避免乱码问题。

接下来把原来页面里的内联SVG代码替换成<img>标签，指向你刚才保存的SVG文件路径就可以了。示例代码如下：

<!-- 替换前的内联SVG -->
<svg>...</svg>

<!-- 替换后的img标签 -->
<img src="custom-icon.svg" alt="这里写SVG的描述文字" width="200" height="200">

如果你的SVG文件和HTML文件在同一个文件夹里，直接写文件名就行；如果放在子文件夹里，就写相对路径，比如./assets/custom-icon.svg。

• 如果原来的内联SVG里有<style>内嵌样式，一定要把这部分也一起放到SVG文件里，不然替换后样式会丢失，显示效果不对。
• Safari对SVG的viewBox属性兼容性很好，建议你的SVG文件里保留这个属性，这样缩放图形时不会变形。
• 如果替换后还是不显示，可以先直接把SVG文件拖进Safari里打开，看看能不能正常显示——如果单独打开都不行，那可能是SVG代码本身有语法错误，得先排查代码问题。

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