SVG模糊主因是被当位图处理，应改用内联SVG、避免img引用、确保整数尺寸与viewBox对齐，并禁用触发CPU合成的CSS属性。
SVG 本身是矢量格式，理论上任意缩放都不应出现锯齿或模糊。但在高分屏（如 Retina、4K 屏）下出现边缘发虚、轻微锯齿，通常不是 SVG 格式的问题，而是渲染链路中某些环节“意外退化”为位图处理所致。
确保 SVG 始终以矢量方式渲染
关键在于避免让浏览器把 SVG 当成位图来处理：
- 不要用
transform或scale()时容易模糊 - 改用内联 SVG：
，这样 DOM 可控、样式可穿透、渲染全程走矢量管线 - 若必须用外部引用，优先使用
或，它们比
检查并修正 CSS 干扰项
很多“SVG 模糊”实际是 CSS 渲染层策略导致的亚像素合成问题：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 避免对 SVG 容器设置非整数
width/height（如23.5px），尽量用偶数整数值（24px、32px） - 禁用可能触发 CPU 合成的属性，例如
filter: drop-shadow()或opacity: 0.99；如需阴影，改用 - 慎用
transform: scale(1.2)等非整数缩放；若必须缩放，搭配transform-origin: center和will-change: transform（仅在交互时动态添加）
适配设备像素比（DPR）的进阶处理
虽然 SVG 不依赖像素，但嵌入容器或混合布局时，DPR 仍会影响渲染精度：
- 给 SVG 外层容器设置
font-size: 16px或明确的line-height，避免因继承导致的尺寸浮动 - 在高 DPR 设备上，可通过 JS 动态调整
viewBox缩放比例（如viewBox="0 0 48 48"配合width="24"），让路径更贴合物理像素网格 - 对 SVG 内部路径，可手动微调坐标值（如将
x="10"改为x="10.5"），使其落在 DPR 对齐的像素中心（类似 Canvas 的 0.5 像素偏移技巧）
补充：和位图混排时的注意事项
当 SVG 与 PNG/JPEG 共存于同一区域（如图标+文字+背景图），边缘对比会放大模糊感：
- 统一所有图标的来源格式：全部用 SVG，或全部用 @2x/@3x PNG，避免混合导致视觉不一致
- 若 SVG 图标用于按钮等可交互元素，确保其父容器未启用
backface-visibility: hidden（除非必要），该属性在 Safari 中可能干扰 SVG 渲染 - 检查是否启用了全局
image-rendering: -webkit-optimize-contrast类样式，它会强制位图插值逻辑影响 SVG 显示
