SVG无损缩放的核心是viewBox：它定义内部坐标系并决定如何映射到容器，配合相对单位（如em、%）实现等比缩放；写死width/height或滥用transform:scale()会导致模糊、裁剪或交互错位。
SVG 本身是矢量，但缩放行为取决于容器和属性
HTML 中的 <svg> 元素天生支持无损缩放，这不是“额外加上的功能”，而是它作为 XML 矢量图形格式的底层特性。但实际显示是否清晰、是否拉伸变形、是否响应式，完全取决于你怎么设置它的尺寸控制逻辑。
常见错误现象：<svg width="100" height="100"> 写死像素值后用 CSS 放大，结果边缘发虚或内容被裁剪；或者用 transform: scale() 强行缩放，导致点击区域错位、文字模糊、stroke-width 不随比例变化。
- 优先用
viewBox定义坐标系，不设width/height（或只设相对单位如%、em），让浏览器自动按比例渲染 - 避免同时写死
width/height和viewBox后再用 CSS 设置宽高——这会触发两次缩放，极易失真 - 如果必须用
transform: scale()（比如做动画），记得同步调整transform-origin和监听pointer-events是否仍准确
viewBox 是 SVG 缩放协同的核心配置项
viewBox 不是“可选优化”，它是决定 SVG 如何映射到容器空间的唯一权威参数。它的值 viewBox="0 0 100 100" 表示：把内部坐标系 (0,0)→(100,100) 的区域，完整铺满当前 <svg> 的显示区域。
使用场景举例：一个图标 SVG 原始画布是 24×24，你希望它在按钮中随字体大小等比缩放，就该写成：
立即学习“前端免费学习笔记（深入）”；
<svg viewBox="0 0 24 24" width="1em" height="1em"> <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7z"/> </svg>
这里 width="1em" 让 SVG 跟随父级字号缩放，viewBox 确保内部路径永远按比例重绘，而不是拉伸像素。
-
viewBox的四个值顺序是min-x min-y width height，不能颠倒 - 修改
viewBox的width/height会改变缩放倍率，但不会裁剪——除非配合preserveAspectRatio - 若想居中并保持宽高比，用默认的
preserveAspectRatio="xMidYMid meet"；若要填满且允许裁剪，改用"xMidYMid slice"
CSS 控制 SVG 尺寸时，哪些属性会破坏矢量性
不是所有 CSS 缩放都安全。width/height + viewBox 是推荐组合；transform: scale() 和 zoom（已废弃）则容易出问题。
典型错误：svg { width: 200px; transform: scale(2); } —— 这会让渲染引擎先按 200px 渲染 SVG，再整体放大两倍，本质是位图放大，文字和描边都会糊。
-
font-size对<text>有效，但前提是text的font-size用的是相对单位（如em、rem），否则不会随 SVG 缩放变化 -
stroke-width默认是绝对单位（如1px），缩放后不会变细；要用stroke-width="0.1"配合viewBox才能真正等比缩放描边 - 用
max-width: 100%替代固定width，可防止 SVG 在小屏溢出，同时保留矢量缩放能力
嵌入方式影响缩放行为：img vs inline vs object
同一份 SVG 文件，用不同方式插入 HTML，缩放表现可能完全不同。
例如：<img src="icon.svg"> 是最简方式，但无法用 CSS 控制内部元素（如改颜色、hover 动画），且某些旧版 Safari 对 viewBox 解析不稳定；而 <svg> 内联写法完全可控，但体积大、复用难。
- 内联 SVG：支持伪类、CSS 变量、JS 操作 DOM 节点，缩放最可靠，适合少量关键图标
-
<object data="icon.svg">：可交互、可脚本控制，缩放行为接近内联，但加载失败时 fallback 较麻烦 -
<img>：轻量、缓存友好，但无法样式化内部，且 IE11 及更早版本不支持 SVGviewBox缩放（会当固定尺寸位图处理）
真正容易被忽略的是：哪怕用了 viewBox，如果 SVG 源文件里自带 width/height 属性（比如从 Sketch 或 Figma 导出时默认带的），这些属性会和 CSS 冲突，必须手动删掉或覆盖。
