svg 无损缩放的核心是 viewbox 属性；它定义内部坐标系可视区域，配合 width/height 或 css 尺寸实现等比缩放，缺失则导致像素化或裁切。
HTML 中的 <svg></svg> 标签本身不是“矢量缩放”，它只是承载矢量图形的容器；真正实现无损缩放的是 SVG 的底层数学描述机制，而 viewBox、width/height 和 CSS 尺寸控制方式共同决定了缩放行为是否可控、是否失真。
viewBox 是 SVG 无损缩放的核心参数
viewBox 定义了 SVG 内部坐标系的原点和可视区域范围，格式为 "min-x min-y width height"。它不指定物理尺寸，只定义“画布上哪一块内容该被显示”。浏览器会按比例拉伸内容以填满 <svg></svg> 的实际渲染尺寸。
- 没设
viewBox时，SVG 会按原始像素单位（如width="200"）固定渲染，放大后可能模糊或锯齿 - 设了
viewBox="0 0 100 100"后，即使<svg width="400" height="400"></svg>，图形也会等比拉伸，不失真 - 若
viewBox宽高比与实际width/height不一致，会出现拉伸变形——此时需配合preserveAspectRatio
width/height 属性和 CSS 设置的区别
width 和 height 作为 <svg></svg> 的 HTML 属性，作用于布局盒模型；而用 CSS（如 style="width: 100%; height: auto;"）设置，会受父容器和响应式规则影响，但两者都依赖 viewBox 才能真正保形缩放。
- 仅用 CSS 改变尺寸但没设
viewBox→ 图形像素化（尤其在高清屏上明显） - 设了
viewBox但用width/height写死像素值 → 失去响应性，但缩放仍无损 - 推荐组合：
viewBox+width="100%"+height="auto"+ 可选 CSSmax-width
嵌入 SVG 文件时 viewBox 容易被忽略
当通过 <img src="icon.svg"> 或 <object data="chart.svg"></object> 引入外部 .svg 文件时，viewBox 必须写在 SVG 源文件的根 <svg></svg> 标签内，HTML 层无法补救。
- 外部 SVG 文件没写
viewBox→ 即使 HTML 侧设了width，缩放后边缘常出现裁切或留白 - 用
<img>加载 SVG 时，CSS 无法操作内部元素（比如改颜色、加 hover），这是和内联 SVG 的关键区别 - 调试建议：右键“查看页面源代码”，确认外部 SVG 文件首行
<svg></svg>是否含viewBox属性
真正决定 SVG 能不能“矢量缩放”的，从来不是标签名或嵌入方式，而是 viewBox 是否存在、是否合理、是否被外部加载流程覆盖。很多看似“SVG 缩放失真”的问题，其实只是 viewBox 缺失或值写反了（比如 "0 0 200 100" 却配了正方形容器）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
