我帮你排查了代码里的几个明显问题，这些应该就是导致SVG在Live Server中无法显示，但单独打开正常的核心原因：

1. 容器类名拼写错误 #

你的HTML中SVG的容器类名是 ws__img0--containter（注意末尾少了一个字母n），但CSS中对应的选择器是 .ws__img0--container，拼写不一致导致容器的样式（比如text-align: center）完全没有生效，SVG可能因为布局问题被隐藏或偏移。

修复方法：
修改HTML中的容器类名，和CSS保持一致：

<div class="ws__img0--container"> 
  <img src="assets/images/GRLC.svg" alt="pic1" id="main__img"> 
</div>

2. SVG图片的CSS选择器不匹配 #

你在CSS中写了针对#mobile__img的尺寸样式，但HTML里SVG的id是main__img，这导致SVG没有被应用任何尺寸规则，在网格布局中可能因为没有默认尺寸而无法显示。

修复方法：
把CSS中的选择器改成对应SVG的id：

#main__img {
  height: 80%;
  width: 80%;
}

3. 额外验证步骤 #

如果修复以上问题后SVG还是不显示，可以做以下检查：

• 打开浏览器开发者工具（F12），切换到Network标签，刷新页面查看GRLC.svg的加载状态：如果显示404，说明文件路径有误，确认assets/images/GRLC.svg确实存在于项目根目录对应的位置。
• 查看Console标签是否有报错：比如SVG内部引用了外部字体或资源，在网页环境下加载失败也会导致SVG无法正常渲染。
• 检查.main__container的网格布局：确保第二列有足够的空间容纳SVG，可临时给.ws__img0--container加个边框（border: 1px solid red）来确认容器的位置和大小。

修正后的关键代码片段 #

HTML（SVG容器部分） #

<div class="ws__img0--container"> 
  <img src="assets/images/GRLC.svg" alt="pic1" id="main__img"> 
</div>

CSS（SVG容器与图片样式） #

.ws__img0--container { text-align: center; } 
#main__img { height: 80%; width: 80%; }

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