Figma导出SVG在Safari无法渲染的问题求助（Next.js环境）

• 检查SVG内部图片引用
  Figma导出的拼贴SVG可能用了data:image编码，Safari对部分base64编码的兼容性不如Chrome。打开Hero.svg查看<image>标签的href（或旧的xlink:href）属性，要是是base64格式，试试重新导出时勾选「嵌入图片」，或者手动重新编码图片（避免特殊字符未转义）。

• 修复SVG语法兼容性
  Safari对SVG语法要求更严格，做这些检查：

  • 确保所有标签闭合，比如<image>要写成<image .../>，不能留未闭合的标签
  • 移除Chrome支持但Safari不兼容的特性，比如复杂滤镜、特殊混合模式，先简化SVG测试是否能显示
  • 把xlink:href替换成标准的href属性，Safari对旧的xlink语法支持有问题

• 调整Next.js渲染方式

  • 放弃next/image，直接用原生<img>标签渲染：

    <img src="/assets/Hero.svg" alt="Hero collage" />
    

  • 要是直接嵌入<svg>代码，确保width、height和viewBox属性匹配，避免冲突导致渲染失败

• 优化SVG文件
  用本地的SVG压缩工具（比如SVGOMG）处理你的SVG，它会自动清理冗余代码、修复兼容性问题，比如移除无效命名空间、统一属性写法，处理后再放回项目测试

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