GitHub Pages站点SVG图片在iOS设备无法加载如何解决

解决方案 #

• 补全SVG文件的命名空间声明
  iOS Safari对SVG语法的校验比PC、安卓浏览器更严格，要求<svg>根标签必须包含xmlns="http://www.w3.org/2000/svg"属性，缺少该属性会直接导致SVG无法渲染。打开你的layer1.svg文件，在根标签内补充该属性即可。

• 兼容低版本iOS的尺寸规则
  CSS属性aspect-ratio仅在iOS 15.4及以上版本支持，低于该版本的iOS设备无法识别该属性，会导致承载背景图的div没有高度，SVG完全无法显示。可以修改CSS用padding-top做降级兼容：

.spacer {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* 300/960 = 31.25%，模拟960/300的比例 */
  padding-top: 31.25%;
  height: 0;
}
/* 高版本系统仍然用aspect-ratio */
@supports (aspect-ratio: 960/300) {
  .spacer {
    aspect-ratio: 960/300;
    padding-top: 0;
    height: auto;
  }
}

• 校验文件路径大小写
  iOS Safari对文件路径的大小写敏感，需确认你的SVG文件名、路径写法的大小写和实际存储的文件完全一致，比如如果文件实际名为Layer1.svg，写为layer1.svg就会在iOS上报404无法加载。

• 排查SVG语法问题
  如果SVG内包含未闭合标签、嵌入式脚本、Safari不支持的滤镜特效，也会导致渲染失败。可以先替换为极简测试SVG验证加载逻辑正常，再逐一排查原SVG的语法问题。

• 清理缓存重试
  可以给SVG资源地址加版本号避免缓存影响，比如修改为url("./layer1.svg?v=1")。

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