svg在retina屏下模糊主因是viewbox缺失、坐标含小数、css强制缩放、抗锯齿干扰等渲染链路问题；应设整数viewbox与路径坐标，加shape-rendering="crispedges"，禁用transform缩放，优先内联svg。
SVG 本身是矢量格式，在 Retina 屏（高 DPR）下天然支持无损缩放，出现锯齿或模糊，基本不是 SVG 的“本质问题”，而是渲染链路上的几个关键点被忽略了——比如 viewBox 缺失、坐标非整数、CSS 强制缩放、浏览器抗锯齿策略干扰等。
确保 SVG 标签带正确的 viewBox 和整数坐标
viewBox 是 SVG 清晰渲染的前提。没有它，浏览器会按原始宽高硬拉伸，尤其在高 DPR 下极易触发插值模糊。同时，路径中避免使用小数坐标（如 d="M0.5,0.5"），应统一为整数（d="M1,1"），否则渲染器会在亚像素层面采样失准，造成边缘毛刺或虚线错位。
- 导出 SVG 时，在 Sketch/Figma/Adobe Illustrator 中勾选“使用整数坐标”或“对齐到像素网格”
- 手动检查源码：确认
<svg></svg>标签含viewBox="0 0 [width] [height]"，且宽高为整数 - 用文本编辑器批量替换
d="M(\d+\.\d+),(\d+\.\d+)"类路径为四舍五入后的整数（如 M12.3,45.7 → M12,46）
禁用浏览器默认平滑渲染，强制锐利边缘
部分 Safari、旧版 Android WebView 或启用了缩放的页面，会对 SVG 自动启用抗锯齿（smooth edges），反而让线条和文字发虚。可通过属性直接干预渲染行为：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在
<svg></svg>标签上添加shape-rendering="crispEdges"（优先用于线条/边框类图标） - 若含文字，加
text-rendering="geometricPrecision"或optimizeLegibility - 配合 CSS：
image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;（对内联 SVG 有效）
避免 transform 缩放与非整数容器尺寸
用 transform: scale(1.2) 或 width: 24.5px 这类非整数尺寸控制 SVG，会让浏览器进入 subpixel 插值模式，矢量优势瞬间归零。正确做法是：
- 所有 CSS 尺寸（width/height/max-width）用整数 px 或 rem（根字号已按 DPR 动态调整）
- 禁用 transform 缩放；需要响应式时，改用 viewBox 缩放或 CSS 容器 + preserveAspectRatio
- 若通过
<img src="icon.svg">引入，确保 SVG 文件自身尺寸与 HTML 中设置的宽高成整数比（如 SVG 内是 24×24，HTML 设 width=48px，则 DPR=2 时仍对齐）
优先内联 SVG，减少加载与解析干扰
外链 SVG（尤其是通过 <img> 或 CSS background-image）在某些环境（如微信小程序、iOS WKWebView）中会被降级为位图处理，丢失矢量特性。内联 SVG 可完全掌控渲染上下文：
- 将 SVG 代码直接写入 HTML，或通过 JS 注入 DOM（避免 XSS 风险前提下）
- 内联后可动态加 class 控制颜色、大小，也方便加上述 shape-rendering 等属性
- 配合构建工具（如 vite-plugin-svg-icons）自动转为 symbol 雪碧图，兼顾性能与可控性
