关键在于让浏览器按整数物理像素渲染svg：内联引入、坐标与尺寸取整、正确使用viewbox、禁用transform缩放、适配高dpr、设置crispedges及display属性。
关键不是“加SVG”，而是让浏览器始终按整数物理像素渲染矢量路径。模糊几乎都来自亚像素对齐失败、viewBox误用或嵌入方式不当。
内联SVG并确保坐标与像素对齐
直接把<svg></svg>写进HTML，不通过<img>或<object></object>引入。这样能完全控制样式和坐标精度：
- 所有图形位置（
x、y）、尺寸（width、height）、描边（stroke-width）设为整数，例如<rect x="2" y="2" width="24" height="24" stroke-width="2"></rect> - 避免
x="0.5"、stroke-width="1.5"这类值，它们会让浏览器在两个物理像素间插值 - 用
getBoundingClientRect()在控制台检查实际渲染宽高是否为整数——若出现100.33333333333333，说明父容器布局已引入小数
正确使用viewBox实现无损缩放
不要只靠width和height硬设尺寸，那是位图思维。viewBox才是SVG矢量缩放的锚点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 必须声明
viewBox，例如<svg viewbox="0 0 24 24"></svg>，它定义了内部逻辑坐标系 - 宽高可设为
width="1em" height="1em"、width="100%"或height="auto"，由viewBox驱动比例缩放 - 禁用
transform: scale()缩放整个SVG，它会破坏描边精度；如需微调，改用transform: translateZ(0)触发GPU合成，不改变坐标系
适配高DPR屏幕（Retina等）
SVG本身支持高清屏，但需防止CSS或布局意外降级为位图渲染：
- 父容器避免
calc(50% - 1px)之类产生小数像素的计算；必要时用Math.round()校准，或加will-change: transform - 不设
image-rendering: pixelated——这是给位图用的，对SVG有害 - 图标类SVG建议加
shape-rendering="crispEdges"，关闭抗锯齿，提升线条锐度（慎用于含渐变或文字的SVG） - 若用
rem/em控制尺寸，确保根字体大小是整数，且未被缩放干扰
样式与显示行为细节
行内SVG默认受文本基线影响，易错位，也间接导致渲染异常：
- 显式设置
display: inline-block或display: block，消除baseline干扰 - 需要垂直居中时，用
vertical-align: middle（仅对inline/inline-block生效），而非margin-top硬调 - 避免在SVG上继承
font-size或line-height，它们可能意外影响<text></text>渲染 - 描边优先用偶数宽度（如2、4），配合
vector-effect="non-scaling-stroke"防缩放失真
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
