必须设置viewbox，否则svg在高dpr屏下会模糊或白屏；正确写法是viewbox="0 0 24 24"（按实际尺寸），并删除width/height属性。
SVG没设viewBox导致高DPR下模糊或白屏
不写viewBox的SVG在Safari、旧WebView里大概率白屏，或在Retina屏上被当位图拉伸——浏览器 fallback 到 300×150 默认尺寸再缩放，路径坐标失真，边缘糊成一片。这不是CSS能修的，是HTML解析阶段就定死的行为。
必须补全：viewBox="0 0 24 24"（数值按实际导出尺寸填），且删掉width和height属性。如果设计稿是24×24，就别写width="48" height="48"，那只会让浏览器二次缩放，触发亚像素渲染抖动。
- 导出时关掉 Sketch/Figma 的 “Responsive” 选项，防止生成
width="100%" height="100%" - 用
svgo --multipass --precision=1压缩，自动剔除冗余width/height和小数坐标 - 检查
<svg></svg>标签是否含xmlns——缺失会导致IE11及部分旧Android WebView不渲染
<use></use>引用图标时尺寸失控的常见写法
很多人直接写<use href="#icon-home"></use>，但没包在<svg></svg>里，或<svg></svg>没设width/height，结果图标要么缩成点，要么撑满父容器。根源是<use></use>本身不渲染，它只复制<symbol></symbol>内容，而渲染尺寸由外层<svg></svg>决定。
正确写法：<svg class="icon" width="1em" height="1em"><use href="#icon-home"></use></svg>。注意：
-
<symbol></symbol>定义里已有viewBox，外层<svg></svg>只需设相对单位宽高，不用重复viewBox - 不要在
<use></use>上写fill，它不继承样式；统一靠fill="currentColor"+ 外层color控制 -
<symbol></symbol>必须放在顶部或里，否则<use></use>可能找不到ID
行内SVG引发文字基线偏移的CSS修复
直接把<svg></svg>写在段落里，默认是display: inline，会按文字基线对齐，图标总比文字低一截——这不是bug，是HTML规范行为。强行加margin-top或line-height治标不治本，换字体或字号就失效。
稳定解法只有两个：
- 给图标
<svg></svg>加display: inline-block; vertical-align: middle; - 或者用flex容器包裹：
<div style="display: flex; align-items: center"> <svg>...</svg><span>文字</span> </div> - 绝对避免用
transform: translateY()微调，它触发重绘，且在DPR≠1时产生亚像素偏移
内联SVG体积膨胀引发首次渲染延迟
把几十个图标全内联进HTML，看似免请求，实则拖慢HTML解析和首屏渲染。Lighthouse常报“Main thread work”超标，源头就是未压缩的SVG代码：大量<metadata></metadata>、<defs></defs>、注释、冗余style块。
关键动作不是“少用SVG”，而是“精简再内联”：
- 用
svgo处理每个SVG文件，加--remove-title --remove-desc --remove-metadata参数 - 禁止重复内联同一图标；改用
<symbol></symbol>集中定义 +<use></use>引用，HTML里只留1份定义+多个引用 - 若图标超20个，考虑构建时转为React/Vue组件，按需动态导入，而非全量塞进HTML
真正卡顿的从来不是SVG本身，而是未经裁剪的原始导出数据混在HTML里，让浏览器多解析几百ms。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
