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