为什么SVG在本地服务器正常显示，Chrome、Firefox直接打开文件不显示

• 浏览器本地文件安全策略限制：直接通过file://协议打开本地HTML文件时，浏览器默认开启了本地资源访问的同源限制，禁止页面跨目录加载外部静态资源（包括SVG、字体等），避免恶意本地文件窃取用户本地数据。而通过localhost本地服务器访问时走的是HTTP/HTTPS协议，符合同源策略判定规则，因此可以正常加载资源。
• 相对路径解析偏差：如果你的CSS是独立的外部文件，url(../images/icon-star.svg)的相对路径是相对于CSS文件所在目录计算的，本地打开HTML时如果浏览器路径基准解析异常，也会导致资源加载路径错误。

方法1：临时调整浏览器安全配置（仅测试使用，不推荐长期开启） #

• Firefox：地址栏输入about:config，搜索security.fileuri.strict_origin_policy，将值改为false即可关闭本地文件的严格同源限制。
• Chrome：右键Chrome快捷方式，选择「属性」，在「目标」输入框的原有内容末尾添加 --allow-file-access-from-files（注意前面需加空格），保存后通过该快捷方式打开浏览器即可。

方法2：修改资源引用方式（永久生效，推荐） #

• 将SVG文件转为Base64编码，直接写入CSS的background-image属性中，格式为background-image: url(data:image/svg+xml;base64,【替换为你的SVG文件Base64编码】);，完全规避外部资源加载问题。
• 改为内联SVG方案，直接把SVG代码写入HTML对应位置，替代CSS伪元素的背景图方案。
• 若为路径解析问题，可将相对路径改为相对于HTML文件的相对路径，或者直接使用本地绝对路径定位SVG文件。

方法3：通过本地服务器访问项目（开发阶段最优解） #

开发过程中始终通过本地静态服务器启动项目访问，比如VS Code的Live Server插件、Python自带的python -m http.server命令、Node生态的serve包等，都可以快速启动本地HTTP服务，完全避开本地文件协议的安全限制，和线上部署环境的表现也完全一致。

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