把 SVG 图标与文字混排在同一行时，常见两类偏差：图标把行高顶开，或者图标与相邻的词被拆到两行。两件事分别由 display 与断行规则决定。
让图标进入文本流
SVG 未按行内级参与布局时会独占一行。显式声明显示类型并给出尺寸即可进入文本流。
.icon {
display: inline;
width: 1em;
height: 1em;
vertical-align: -0.125em;
}宽高用 em 跟随字号，图标与文字同步缩放。vertical-align 取负值时图标下沉，用于对齐基线偏低的字形。
对齐取值的差别
| 取值 | 效果 | 适用场景 |
|---|---|---|
| baseline | 图标底边对齐文字基线 | 常规混排 |
| middle | 图标垂直中心对齐 x 高度中心 | 与短标签并列 |
| -0.125em | 相对基线做微调 | 字形下沉明显的字体 |
控制断行位置
图标与相邻词之间使用普通空格时，浏览器可以在该处断行。把空格换成不换行空格，两段内容就绑定成一个整体。
<p>下载<svg class='icon' aria-hidden='true'></svg> PDF</p>需要禁止断行时用 U+2060 连接符放在两者之间；需要保留断行能力又不留可见符号时用零宽空格 U+200B。
行高被顶开的处理
图标高度超过父级行高时会把整行撑开。给图标设置 max-height: 1em，并让父级 line-height 取固定值，段落行距就不会出现参差。
装饰性图标移出文本流
纯装饰图标用 background-image 配合 padding-left 更省事，不参与文本流，换行与行高都不受影响，代价是无法用 currentColor 继承文字颜色。
检查清单
- 显式声明显示类型与尺寸，不要依赖 SVG 的默认行为。
- 尺寸用 em 表达，保证随字号缩放。
- 图标与相邻词之间使用受控的空格字符。
- 无语义价值的图标考虑移出文本流并标记 aria-hidden。