复杂SVG设置为div背景图时在所有浏览器无法显示如何解决

你可以按照以下优先级排查解决问题：

• 修正现有代码语法错误
  你提供的HTML片段存在类属性语法问题，缺少闭合双引号，会导致CSS规则匹配失效，修正为：

<div class="landing"></div>

对应的CSS规则建议补充background-position避免位置异常：

.landing {
  background-image: url(bg.svg);
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

• 排查SVG文件本身问题
  1. 优先清理SVG冗余代码：复杂SVG从设计软件导出时往往带有大量编辑器冗余属性、未闭合标签、无效命名空间，可先使用SVG优化工具处理，必须保留根<svg>标签的width、height、viewBox三个核心属性，缺失viewBox会导致背景渲染时尺寸计算异常。
  2. 移除外部资源依赖：作为CSS背景的SVG无法加载外部资源，所有内部引用的字体、图片、CSS必须全部内联到SVG文件中，字体建议转矢量轮廓避免渲染差异，图片转base64嵌入。
  3. 检查SVG内部样式语法：确认没有未闭合的样式块、特殊字符未转义等问题，若使用内联data URI形式引入SVG需要对#等特殊字符做转义处理。
• 排查服务端/环境配置问题
  如果是线上部署场景，确认服务器配置了正确的SVG MIME类型，需将.svg后缀对应MIME类型设置为image/svg+xml，配置错误会导致SVG被当做普通文本返回，无法渲染为图片。
• 排查SVG效果兼容性问题
  复杂SVG常用的蒙版、混合模式、自定义滤镜在作为背景渲染时可能存在兼容性问题，你可以逐个关闭SVG内部的特殊效果定位问题点，部分老旧浏览器不支持的效果可以在导出时选择栅格化为内嵌位图处理。

内容的提问来源于stack exchange，提问作者harsh deep singh