SVG缩放失真或模糊的根源是浏览器对<svg>元素进行像素对齐或抗锯齿降级，正确解法是用viewBox定义逻辑坐标系并配合百分比宽高实现矢量自适应缩放，避免width/height硬设和transform: scale()。
SVG在HTML中缩放失真或模糊怎么办
直接给结论：不是SVG本身问题，而是浏览器渲染时对<svg>元素做了像素对齐或抗锯齿降级。常见于用width/height硬设尺寸、或CSS缩放transform: scale()后出现边缘发虚、线条抖动、文字糊掉。
用viewBox而非width/height控制缩放
viewBox才是SVG矢量缩放的正确锚点。它定义了坐标系逻辑范围，让SVG内部按比例自适应容器，保持路径精度。
- 错误写法：
<svg width="200" height="100">...</svg>—— 强制拉伸，可能触发位图化渲染 - 正确写法：
<svg viewBox="0 0 200 100" width="100%" height="auto">...</svg>—— 宽高可设为百分比、rem或auto，由viewBox保比例 - 若需固定宽高比又不想写JS，加
preserveAspectRatio="xMidYMid meet"防裁切
CSS缩放transform: scale()导致线条变粗或错位
浏览器对transform缩放的SVG会重新采样描边（stroke），尤其stroke-width为小数时容易失准。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 避免对整个
<svg>用scale()，改用viewBox缩放更可靠 - 必须用CSS缩放时，加
shape-rendering="crispEdges"或shape-rendering="geometricPrecision"属性控制渲染策略 - 小图标场景下，优先用
px单位设stroke-width（如stroke-width="1"），避免0.8这类值 - 注意：
transform会改变SVG坐标系原点，<use>引用或<text>定位可能偏移
高清屏（Retina）下SVG仍模糊的排查点
即使用了viewBox，在2x屏上仍糊，大概率是父容器或CSS引入了非整数像素布局。
立即学习“前端免费学习笔记（深入）”；
- 检查父级
div是否被flex/grid撑出小数像素宽高（如width: calc(50% - 1px)），用round()函数或transform: translateZ(0)强制重绘 - 禁用
image-rendering: pixelated（这是为位图准备的，对SVG有害） - 确保
<svg>没有设置font-size或line-height等继承样式干扰文本渲染 - 极少数情况：Chrome旧版本对
background-image: url(data:image/svg+xml,...)做base64内联时会压缩路径，改用外部.svg文件或URL编码转义更稳妥
真正影响SVG清晰度的，从来不是“要不要缩放”，而是“缩放时有没有让渲染引擎知道：这是矢量，别当图片处理”。viewBox是钥匙，而所有绕过它的CSS技巧，都只是临时补丁。
