布局与缩放

<svg> 同时是 CSS 盒子 和 用户坐标系入口。盒子怎么嵌入页面，决定脚本、命中、无障碍能不能用；preserveAspectRatio 决定 viewBox 怎么贴进盒子。两者搞混，就会出现「矢量却发糊」「热区点不准」「响应式只拉变形」。

用户空间始终是 viewBox 用户单位。响应式改 CSS 盒子，不改内容坐标系。相机改 viewBox，不用 CSS scale 整棵 DOM。几何定义见 viewport 与 viewBox。

文档清单

文档	解决的问题
嵌入方式与 CSS 尺寸	inline / img / object / iframe / background；交互与脚本
preserveAspectRatio 与响应式	meet / slice / none；只改盒子不改内容

先立三条

1. 交互和图要进无障碍树，就 inline。 <img> 是一张图，内部节点不存在。
2. 装饰性、不可信、要沙箱，用 <img> 或 CSS background。 用户文件默认走这条，见 08。
3. 宽高比由 viewBox + preserveAspectRatio 管，不要靠改 viewBox 去「适应」每个断点。

职责切分：01 章定义用户空间；本章决定 这份文档如何长在页面上。白板/地图那种「改 viewBox 当相机」是交互状态，见 03 相机，不要写进媒体查询。

vector-effect 生产只用 non-scaling-stroke，让线宽不跟盒子放大；其它值 SVG 2 at-risk。

适用 / 不适用

适用	不适用
图标 sprite、响应式插画、可点热区	用 CSS transform: scale 冒充无限画布相机
同一份 viewBox 在不同 CSS 宽下展示	每个 breakpoint 改一套 viewBox 内容坐标
不可信预览用 <img>	把用户 SVG 当 inline 还开脚本

嵌入方式一旦选错，后面命中、WAAPI、读屏全部建立在错误宿主上。先定嵌入，再谈 04 动画。

失败形态

症状	原因
点不到 path	用了 <img> 还当 DOM 命中
放大发糊	无 viewBox，盒子被当位图拉
宽屏左右空、窄屏裁脸	meet / slice 选错
脚本在 object 里跑了	把不可信 SVG 当成了 inline / 同源 object

权威资料

• SVG 2 — Viewport and viewBox
• HTML — Embedded content（img / object / iframe）

核对日期：2026-08-26