SVG内联元素尺寸由CSS width/height与viewBox共同决定，需确保viewBox匹配路径坐标且标签无width/height属性；img引用SVG会光栅化失真；内联SVG受行内布局影响，应设display:inline-block和vertical-align:middle。
svg元素尺寸由CSS width/height + viewBox共同决定
内联<svg></svg>是参与CSS布局的普通元素，它的渲染尺寸完全取决于你写的width和height样式（比如svg { width: 1.5em; height: 1.5em; }），再加上viewBox提供的缩放上下文。浏览器会按这个尺寸实时重绘矢量路径，不光栅化、不失真。
关键前提是：viewBox必须存在且值与内部路径坐标严格匹配（如所有路径都在0 0 24 24范围内，就不能写viewBox="0 0 32 32"）；同时<svg></svg>标签上不能有width或height属性（包括width="100%"或height="auto"），否则IE11/Safari会优先读取它，绕过CSS控制。
img[src="*.svg"]被当位图处理，缩放即失真
<img src="icon.svg" alt="为什么CSS中svg元素的盒模型尺寸计算与img不一致？" >走的是图片加载管线，浏览器把它当作一个“图像资源”，而不是可布局的DOM节点。即使SVG源码里有viewBox，<img alt="为什么CSS中svg元素的盒模型尺寸计算与img不一致？" >也只用它做初始光栅化参考——先按原始尺寸（比如24×24）生成位图，再用CSS或HTML属性拉伸，结果就是模糊、锯齿、边缘发虚。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
<img src="arrow.svg" style="max-width:90%" style="max-width:90%" alt="为什么CSS中svg元素的盒模型尺寸计算与img不一致？" >在Retina屏上明显糊 - 用
background-image: url("data:image/svg+xml,...")时加background-size: contain，Safari里路径变形
盒模型干扰让内联svg视觉偏移
内联<svg></svg>默认是display: inline，会受line-height、vertical-align、padding甚至父容器font-size影响定位。比如文字旁放一个<svg></svg>，它常被“吊高”一截，看起来路径上移——这不是SVG本身问题，而是行内布局规则在起作用。
解决办法：
- 显式设
svg { display: inline-block; vertical-align: middle; } - 避免给
<svg></svg>加padding或border（它们会撑大盒子，但不参与路径缩放） - 别用
font-size控制大小——它对<svg></svg>元素无尺寸作用，只影响子<text></text>
button等表单元素里嵌svg更易出问题
在<button></button>里直接写<svg></svg>时，部分浏览器（尤其是Safari iOS WebView）会对<svg></svg>施加额外的内边距或基线偏移，且无法通过常规line-height: 1修正。这时候最稳的做法是把<svg></svg>包一层<span></span>并设display: flex，或者干脆用background-image配合background-size: 100%（但注意：仅限纯色图标，复杂渐变/滤镜不适用）。
真正容易被忽略的，是动态插入的SVG——JS生成的<svg></svg>常常悄悄带上了width/height属性，或漏传viewBox，查DOM结构比调样式更快。
