.html后缀本地文件正常显示，.svg后缀显示异常的技术问询

一、你的SVG无法正常渲染的核心原因 #

查看你提供的SVG代码，<svg>标签里的viewbox是小写的，而SVG规范中这个属性是驼峰式的viewBox：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="800" width="600" viewbox="0.0 0 0.9384465146064759 0.504">

当以.svg后缀打开时，浏览器使用XML解析器，严格区分大小写，无法识别小写的viewbox，导致 viewBox 失效——此时SVG视口为800x600，但你的矩形元素尺寸都是0.01、0.1左右的极小值，所以会小到几乎看不见；而作为.html打开时，HTML解析器不区分大小写，自动将viewbox识别为标准的viewBox，因此能正常渲染。

二、常用SVG代码检查工具 #

• W3C SVG验证器：检查SVG是否符合W3C官方规范，能定位语法错误、命名空间缺失、属性大小写错误、无效属性值等问题
• Inkscape内置验证工具：打开SVG后，通过「文件 > 验证SVG」功能，可检测渲染相关的问题，比如无效的路径数据、不兼容的属性设置
• SVGOMG：主打SVG压缩，同时会附带基础代码检查，提示冗余代码、不规范的属性写法、可优化的结构
• 代码编辑器扩展（如VS Code的SVG Language Support）：实时语法检查，在编写时就提示属性大小写错误、命名空间问题、标签闭合问题

三、浏览器将SVG当作HTML打开时的自动修复行为 #

• 大小写容错：HTML解析器对标签和属性名不区分大小写，会自动将非标准的小写属性（如viewbox）映射为SVG规范的驼峰式名称（viewBox），这是你的文件能在HTML模式下正常显示的关键
• 忽略XML严格语法：跳过XML声明的严格要求，允许未闭合的标签（HTML自动补全），忽略CDATA标签直接解析内部内容
• 命名空间兼容：自动为SVG元素补全必要的SVG命名空间，即使代码中声明不完整也能正常解析
• 属性值容错：对无单位的数值、格式不严谨的属性值进行兼容处理，比如自动识别相对单位的数值
• CSS解析兼容：用HTML的CSS解析规则处理SVG内的样式，允许一些SVG严格模式下不支持的CSS写法

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