IE11中SVG图标模糊的根本原因是其对transform:scale()和background-size的渲染异常，会将缩放SVG当作位图重采样；正确解法是用viewBox替代宽高缩放，并严格匹配原始坐标范围、删除width/height、显式设置preserveAspectRatio，且源文件须经SVGO清理。
IE11中svg图标变模糊的根本原因
不是SVG本身有问题，而是IE11对transform: scale()和background-size在SVG上的渲染逻辑异常——它会把缩放后的SVG当作位图重采样，强行引入插值模糊。哪怕原始SVG是100×100，用width: 20px; height: 20px直接缩放，在IE11里也大概率发虚。
用viewBox替代宽高缩放是最稳妥解法
IE11对viewBox的矢量缩放支持稳定，不触发光栅化。关键不是“能不能用”，而是“怎么设才不破环比例”：
-
viewBox必须与原始SVG内容的实际坐标范围严格一致（比如图标路径集中在0 0 24 24，就写viewBox="0 0 24 24"） - 删掉
width/height属性，改用CSS控制容器尺寸：svg { width: 24px; height: 24px; } - 避免同时设
width/height和viewBox——IE11会优先按宽高拉伸，再套viewBox，双重缩放=加倍模糊
内联SVG时preserveAspectRatio不能省
即使写了viewBox，IE11默认preserveAspectRatio="xMidYMid meet"，但一旦父容器宽高比异常（比如div宽高不等），图标可能被裁切或留白。显式声明更可控：
<svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"> <path d="M12..." /> </svg>
- 用
meet保持完整可见（推荐）；slice适合全屏背景类场景 - 如果图标内容偏左/偏上，可改用
xMinYMin或xMaxYMax微调锚点 - 注意：外部引用的
<img src="icon.svg">无法通过HTML控制preserveAspectRatio，必须走内联或CSS方案
不得已用background-image时的兼容写法
当必须用CSS背景SVG（比如伪元素、按钮背景），IE11对background-size的支持极差，得绕开：
立即学习“前端免费学习笔记（深入）”；
- SVG文件自身必须带
viewBox，且无width/height属性 - CSS里禁用
background-size: contain或cover，改用固定像素：background-size: 24px 24px - 为防IE误判DPI，加一句
image-rendering: -webkit-optimize-contrast（IE11识别该私有值，强制关闭平滑插值） - 别用
data:base64内联背景——IE11对长base64字符串解析易出错，模糊概率翻倍
真正麻烦的不是写法，而是SVG源文件本身：很多设计师导出的SVG默认带width/height和固定viewBox，甚至嵌了<style>。上线前必须用工具（比如SVGO）清理，否则所有CSS技巧都白搭。
