svg图标发虚的根本原因是被浏览器当作位图光栅化而非矢量重绘；正确做法是移除的width/height属性、确保svg含整数viewbox、优先内联svg并用css控制尺寸，safari还需整数坐标和-webkit-optimize-contrast。
SVG图标发虚不是因为缩放，而是被当位图光栅化了
直接用 <img src="icon.svg"> 加 width/height 属性，浏览器就会忽略 viewBox，先按原始尺寸（比如 24×24）光栅化成位图，再拉伸——矢量优势彻底失效。Retina 屏下这一步插值渲染，必然导致边缘亚像素模糊、文字锯齿、颜色泛灰。
常见错误现象包括：
同一页面中 SVG 图标比 PNG 更糊；
横屏切竖屏后图标突然变锐利或更虚；
DevTools 里看到元素尺寸是 24px，但实际渲染区域被浏览器悄悄扩大到 48×48 设备像素，却只填了左上角一小块。
- 必须移除
<img>标签上的width和height属性（哪怕只是写在 HTML 里，不带单位也触发光栅化） - 确保 SVG 源文件包含
viewBox="0 0 24 24"（宽高必须为整数，且与内部路径坐标系一致） - 避免用
object-fit: contain或scale()强行缩放容器——这只会让已光栅化的图二次失真
用 CSS 控制尺寸时，单位和 display 方式决定清晰度
把 SVG 当作“可缩放字体”来用，而不是“图片”，才能激活实时重绘能力。关键在于让它参与 CSS 布局流，而非被包裹在 img 的位图上下文中。
- 优先内联 SVG：
<svg width="1em" height="1em" viewbox="0 0 24 24">...</svg>，再用font-size或 CSS 变量控制整体大小 - 设
display: inline-block或display: block，避免默认inline行为引发的基线偏移和隐式缩放 - 禁用
vertical-align: baseline（它会让 SVG 底部对齐文本基线，造成视觉下沉和渲染错位） - 不要用
rem或vw直接设width/height属性值——它们可能在 DPR 切换时生成非整数逻辑像素，诱发 subpixel 插值
高 DPI 下仍模糊？检查 image-rendering 和 shape-rendering 是否生效
image-rendering: crisp-edges 和 shape-rendering: crispEdges 不是万能开关，它们只在满足前提时起效：SVG 必须是内联或通过 background-image 加载，且路径坐标全为整数。
- 给内联
<svg></svg>加属性：shape-rendering="crispEdges" text-rendering="geometricPrecision" - 若用 CSS
background-image: url(icon.svg)，必须配background-size: contain或100% 100%，且加image-rendering: -webkit-optimize-contrast（Safari）和image-rendering: crisp-edges（其他） - 构建工具（如 SVGR、webpack-svg-sprite）可能自动把整数坐标转成
10.0000001，导致crispEdges失效——需检查最终输出的 SVG 源码 - 全局 CSS 重置（如 Normalize.css）可能覆盖你的
image-rendering设置，建议用!important或更高优先级选择器
为什么 Safari 显示更糊？它对 viewBox 和坐标精度更敏感
iOS Safari 和 macOS Safari 对 SVG 渲染管线的整数对齐要求最严。一个 d="M0.5,0.5" 就足以让整张图进入亚像素采样模式，无论你加多少 crispEdges 都救不回来。
- 打开 SVG 文件，手动删掉所有小数点坐标（
M10.5,10.5→M10,10），路径起点/终点/控制点都必须是整数 - 确认
viewBox宽高是整数，且与设计稿原始画布完全一致（例如 Figma 导出时选 “Use Artboard Size”） - Safari 不支持
image-rendering: crisp-edges，必须显式写-webkit-optimize-contrast，且仅对background-image中的 SVG 生效 - 如果用了
transform: scale(1.2)或zoom，会强制触发二次光栅化——这类操作应全部替换为font-size或 CSS 自定义属性驱动
crispEdges，而是 SVG 源文件里那几处被构建流程悄悄污染的小数坐标，以及 Safari 对 viewBox 整数性的零容忍。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
