SVG 布局首选 Flex：需设 viewBox、避免宽高冲突、响应式必配 preserveAspectRatio；内联 SVG 才支持 CSS 控制内部元素，symbol+use 需显式设 fill 或用 currentColor。
SVG 元素不能用 float 或 display: inline-block 布局？
直接对 标签设 float: left 或 display: inline-block 有时无效，不是 bug，而是 SVG 默认 display: inline 且基线对齐方式特殊。文字旁的 SVG 会下沉，看起来像“没对齐”。
- 加
vertical-align: middle或top修正行内对齐 - 设
font-size: 0在父容器上可消除行内元素默认间距 - 更可靠的方式是把
包进，再用 Flex 布局控制用 CSS Flex 布局 SVG 容器最稳
Flex 是目前最可控、兼容性足够（IE11+）的 SVG 布局方案，尤其适合图标组、响应式图表容器、SVG 与文本混排等场景。
设置-
viewBox必须设，否则width/height可能被忽略或拉伸 - 避免同时设
width/height和style="width: ..."，CSS 会覆盖 HTML 属性，但部分浏览器解析顺序不一致 - 若需等宽等高 SVG 图标，统一用
flex: 0 0 24px控制尺寸
响应式 SVG：别只靠
width="100%"width="100%"看似简单，但脱离viewBox就会失真；没设height时，多数浏览器按原始宽高比缩放，但 Safari 对无height的 SVG 渲染高度可能为 0。- 必须配对使用：
- 如需完全流体（比如全屏背景图），用
preserveAspectRatio="xMidYMid meet"防止裁切 - 慎用
height="100%"：父容器必须有明确高度，否则计算链断裂，SVG 高度塌陷
嵌入 SVG 后 CSS 无法控制内部元素？
通过
background-image引入的 SVG 是“黑盒”，内部立即学习“前端免费学习笔记（深入）”；
- 要动态着色或交互，必须内联 SVG：
- 内联后可用类名控制：
.icon-fill { fill: currentColor; } - 想复用又保持样式可控？用
，但注意不继承外部 CSS（需显式设fill或用currentColor）
viewBox和preserveAspectRatio的组合行为——它决定 SVG 在缩放时是“填满”还是“居中保持比例”，而这个选择直接影响移动端图标是否被意外裁掉。 -
