必须设置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和小数坐标
• 检查标签是否含xmlns——缺失会导致IE11及部分旧Android WebView不渲染

引用图标时尺寸失控的常见写法

很多人直接写，但没包在里，或没设width/height，结果图标要么缩成点，要么撑满父容器。根源是本身不渲染，它只复制内容，而渲染尺寸由外层决定。

正确写法：。注意：

• 定义里已有viewBox，外层只需设相对单位宽高，不用重复viewBox
• 不要在上写fill，它不继承样式；统一靠fill="currentColor" + 外层color控制
• 必须放在顶部或里，否则可能找不到ID

行内SVG引发文字基线偏移的CSS修复

直接把写在段落里，默认是display: inline，会按文字基线对齐，图标总比文字低一截——这不是bug，是HTML规范行为。强行加margin-top或line-height治标不治本，换字体或字号就失效。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

稳定解法只有两个：

• 给图标加display: inline-block; vertical-align: middle;
• 或者用flex容器包裹：
  文字
• 绝对避免用transform: translateY()微调，它触发重绘，且在DPR≠1时产生亚像素偏移

内联SVG体积膨胀引发首次渲染延迟

把几十个图标全内联进HTML，看似免请求，实则拖慢HTML解析和首屏渲染。Lighthouse常报“Main thread work”超标，源头就是未压缩的SVG代码：大量、、注释、冗余style块。

关键动作不是“少用SVG”，而是“精简再内联”：

• 用svgo处理每个SVG文件，加--remove-title --remove-desc --remove-metadata参数
• 禁止重复内联同一图标；改用集中定义 + 引用，HTML里只留1份定义+多个引用
• 若图标超20个，考虑构建时转为React/Vue组件，按需动态导入，而非全量塞进HTML

真正卡顿的从来不是SVG本身，而是未经裁剪的原始导出数据混在HTML里，让浏览器多解析几百ms。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！