如何在HTML或CSS中添加SVG文件？添加后不显示如何解决

问题原因 #

• GitHub仓库原生HTML预览限制：GitHub为了安全对仓库内的HTML预览做了内容安全策略限制，直接在仓库页面点开HTML文件预览时，会禁止加载同仓库的SVG、CSS等关联资源，这是平台的默认限制，不属于代码问题。
• SVG文件本身无效：你仓库内的media/logo.svg可能存在内容损坏、缺失xmlns必要声明的问题，导致浏览器无法解析。
• 路径匹配错误：GitHub Pages等部署环境对路径大小写敏感，如果你仓库里的SVG文件名、media文件夹名大小写和代码里写的不一致（比如文件是Logo.svg代码写的logo.svg），会导致资源404无法加载。
• SVG没有设置明确宽高：如果SVG文件内部没有定义width、height属性，你也没有在img标签或者CSS中给SVG指定宽高，浏览器会渲染为0尺寸的元素，看起来就像没有显示。
• 相对路径引用错误：你当前用的media/logo.svg是相对于HTML文件所在位置的相对路径，如果HTML文件没有放在项目根目录，路径指向错误会导致资源找不到。

解决方法 #

1. 验证资源加载场景
   如果是直接在GitHub仓库内预览HTML出现的问题，属于平台正常限制，你可以本地开启静态服务打开HTML文件，或者将项目部署到GitHub Pages，即可正常加载资源。
2. 校验SVG文件有效性
   直接在浏览器中打开本地的media/logo.svg文件，确认可以正常显示。如果无法显示，重新导出SVG，确保导出时保留了xmlns声明，SVG文件开头必须包含如下声明：

<svg xmlns="http://www.w3.org/2000/svg" width="你需要的宽度" height="你需要的高度" viewBox="0 0 画布宽 画布高">

3. 修正路径匹配
   确认media文件夹和HTML文件在同一级目录，且代码中写的文件名、文件夹名大小写和仓库中实际的命名完全一致。
4. 给SVG设置明确宽高
   可以直接在img标签上指定宽高：

<img src="media/logo.svg" alt="站点logo" width="120" height="40">

如果是CSS伪元素引入的方式，也可以给伪元素加上宽高限制：

.main_heading::before {
  content: url(media/logo.svg);
  display: block;
  width: 120px;
  height: 40px;
}

5. 修正其他语法错误
   你现有HTML里的<bottoom>、<bottom>都是非法标签，需要改成标准的<button>标签，同时修正viewport元标签的错误值：

<meta name="viewport" content="width=device-width, initial-scale=1">

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