SVG 布局首选 Flex：需设 viewBox、避免宽高冲突、响应式必配 preserveAspectRatio；内联 SVG 才支持 CSS 控制内部元素，symbol+use 需显式设 fill 或用 currentColor。
SVG 元素不能用 float 或 display: inline-block 布局？
直接对 <svg></svg> 标签设 float: left 或 display: inline-block 有时无效，不是 bug，而是 SVG 默认 display: inline 且基线对齐方式特殊。文字旁的 SVG 会下沉，看起来像“没对齐”。
- 加
vertical-align: middle或top修正行内对齐 - 设
font-size: 0在父容器上可消除行内元素默认间距 - 更可靠的方式是把
<svg></svg>包进<div>，再用 Flex 布局控制 <h3>用 CSS Flex 布局 SVG 容器最稳</h3> <p>Flex 是目前最可控、兼容性足够（IE11+）的 SVG 布局方案，尤其适合图标组、响应式图表容器、SVG 与文本混排等场景。</p> <pre class="brush:php;toolbar:false;"><div style="display: flex; gap: 12px; align-items: center;"> <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg> <span>设置</span> <svg width="24" height="24" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12"/></svg> </div></pre> <ul> <li> <code>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。
- 必须配对使用：
<svg viewbox="0 0 100 100" width="100%"></svg> - 如需完全流体（比如全屏背景图），用
preserveAspectRatio="xMidYMid meet"防止裁切 - 慎用
height="100%"：父容器必须有明确高度，否则计算链断裂，SVG 高度塌陷
嵌入 SVG 后 CSS 无法控制内部元素？
通过 <img src="icon.svg" alt="html5如何布局SVG_html5矢量图形布局指南" > 或 background-image 引入的 SVG 是“黑盒”，内部 <path></path>、<circle></circle> 无法被页面 CSS 选中或动画。
立即学习“前端免费学习笔记（深入）”；
- 要动态着色或交互，必须内联 SVG：
<svg>...</svg> - 内联后可用类名控制：
<path class="icon-fill" d="..."></path>，再写.icon-fill { fill: currentColor; } - 想复用又保持样式可控？用
<symbol></symbol>+<use></use>，但注意<use></use>不继承外部 CSS（需显式设fill或用currentColor）
viewBox 和 preserveAspectRatio 的组合行为——它决定 SVG 在缩放时是“填满”还是“居中保持比例”，而这个选择直接影响移动端图标是否被意外裁掉。
