SVG模糊主因是坐标未对齐物理像素，需确保容器尺寸、描边宽度及图形位置均为整数像素，优先内联SVG并配合shape-rendering、vector-effect等属性优化渲染。
SVG图形在HTML5中出现模糊，多数是因为坐标没有对齐到物理像素，导致浏览器进行亚像素渲染。解决的关键是让SVG的绘制位置、尺寸和描边都落在整数像素边界上。
确保SVG容器尺寸为整数像素
如果SVG元素或其父容器的宽高被CSS设置为小数值（比如width: 100.5px），浏览器会触发缩放或插值渲染，造成模糊。检查并强制使用整数尺寸：
- 用getBoundingClientRect()在控制台验证实际渲染尺寸是否为整数
- CSS中避免用rem、em或百分比间接产生小数，可改用px或配合clamp()限制范围
- 响应式场景下，用window.devicePixelRatio校准：例如Math.round(100 * window.devicePixelRatio) / window.devicePixelRatio
描边宽度与位置对齐像素网格
SVG中stroke-width为奇数且shape-rendering未优化时，描边容易跨像素居中，引发模糊。推荐做法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 将stroke-width设为偶数（如2、4），并配合vector-effect="non-scaling-stroke"防止缩放失真
- 对路径、矩形等图形，手动偏移x/y或transform使其锚点落在整数坐标，例如<rect x="1" y="1" width="100" height="50"/>优于<rect x="0.5" y="0.5" .../>
- 添加shape-rendering="crispEdges"可强制关闭抗锯齿（适合线条/图标），但慎用于渐变或文本
嵌入方式影响渲染精度
SVG作为<img>引入时，浏览器会当作位图处理，缩放易糊；而内联SVG（直接写在HTML中）能保持矢量特性并响应CSS像素对齐。建议：
立即学习“前端免费学习笔记（深入）”；
- 优先使用内联SVG，便于用CSS控制transform: translateZ(0)或will-change: transform触发GPU加速，减少合成模糊
- 若必须用<img>，确保src中的SVG文件本身已按整数画布尺寸导出（如viewBox="0 0 100 100"，且所有坐标取整）
- 避免对SVG图片设置width/height同时又不设aspect-ratio，以防拉伸变形
高DPR设备下的适配补充
在Retina屏等高分辨率设备上，CSS像素 ≠ 物理像素，需额外处理：
- 用@media (-webkit-min-device-pixel-ratio: 2)等条件样式，为高DPR设备提供双倍尺寸SVG或调整transform: scale(0.5)
- SVG内部使用viewBox定义逻辑坐标系，再通过width/height属性控制渲染尺寸，比固定px更可靠
- JavaScript中动态设置style.width和style.height时，记得除以window.devicePixelRatio再取整
