html 5 支持五种 svg 嵌入方式：一、内联 SVG 代码；二、Object标签嵌入外部文件；三、img 标签引用静态 SVG；四、iframe隔离嵌入；五、javaScript 动态生成 SVG 元素。
如果您希望在网页中嵌入可缩放且不失真的图形，html5 提供了原生支持 SVG 矢量图形的能力。以下是向 HTML5 页面添加 SVG 图形的具体方式：
一、直接在 HTML 中内联 SVG 代码
SVG 元素可作为普通 HTML 标签直接写入文档流，浏览器 会即时渲染，便于样式控制和脚本操作。
1、在 或任意容器元素内部，插入 svg> 开始标签，并指定 width 和 height 属性。
2、在 标签内添加基础图形元素，例如
立即学习 “ 前端免费学习笔记（深入）”；
3、为图形设置必要属性，如 cx、cy、r（圆形），或 x、y、width、height（矩形）。
4、可选地通过 style 属性或外部 css 设置 fill、stroke、stroke-width 等视觉属性。
二、使用 object 标签嵌入外部 SVG 文件
将 SVG 保存为独立 .svg 文件后，可通过 标签引入，保持文件结构分离并支持交互与脚本访问。
1、创建一个纯 SVG 文件（如 icon.svg），内容以 根元素开头，不含 html> 或 。
2、在 HTML 页面中插入 标签，设置 data 属性指向该 SVG 文件路径。
3、为 指定 type 属性值为 “image/svg+xml”。
4、添加 width 和 height 属性确保尺寸可控，并设置 aria-label 或 title 提升可访问性。
三、通过 img 标签引用 SVG 文件
当 SVG 仅作静态展示、无需 dom 操作或 CSS 样式穿透时， 是最轻量的引用方式，兼容性好且加载行为与位图一致。
1、准备一个符合规范的外部 SVG 文件（无 XML 声明或脚本，推荐 UTF-8 编码）。
2、在 HTML 中使用 标签，将 src 属性设为该 SVG 文件的相对或绝对路径。
3、必须设置 width 和 height 属性，否则部分 浏览器 可能无法正确解析固有尺寸。
4、添加 alt 属性描述图形语义，确保 屏幕阅读器可识别，并设置 loading=”lazy” 优化初始加载性能。
四、使用 iframe 嵌入 SVG 内容
适用于需完全隔离 SVG 文档上下文的场景，例如避免样式冲突或运行不受信任的 SVG 脚本。
1、将 SVG 文件单独部署为可访问的 URL（如 /assets/chart.svg）。
2、在页面中插入 标签，设置 src 指向该 SVG 地址。
3、配置 width、height 及 frameborder=”0″ 保证显示整洁。
4、添加 sandbox 属性（如 sandbox=”allow-scripts”）按需启用功能，并设置 title 属性说明嵌入内容用途。
五、动态生成 SVG 元素并通过 javascript 插入
适合根据数据实时构建图形（如图表、流程图），利用 DOM API 创建并追加 SVG 节点，实现高度灵活性。
1、使用 document.createElementNS(“http://www.w3.org/2000/svg”, “svg”) 创建 SVG 根元素。
2、调用 setAttribute() 设置 width、height、viewBox 等核心属性。
3、为每个图形子元素（如 circle、text）重复执行 createElementNS 并设置对应属性。
4、通过 appendChild() 将子元素逐级加入 SVG 容器，最终将 SVG 插入目标 HTML 节点（如 document.getElementById(“container”)）。
以上就是
