HTML5支持五种SVG嵌入方式：一、内联SVG代码；二、object标签嵌入外部文件；三、img标签引用静态SVG；四、iframe隔离嵌入；五、JavaScript动态生成SVG元素。
如果您希望在网页中嵌入可缩放且不失真的图形，HTML5 提供了原生支持 SVG 矢量图形的能力。以下是向 HTML5 页面添加 SVG 图形的具体方式：
一、直接在 HTML 中内联 SVG 代码
SVG 元素可作为普通 HTML 标签直接写入文档流，浏览器会即时渲染，便于样式控制和脚本操作。
1、在 <body> 或任意容器元素内部，插入 <svg> 开始标签，并指定 width 和 height 属性。
2、在 <svg> 标签内添加基础图形元素，例如 <circle>、<rect> 或 <path>。
立即学习“前端免费学习笔记（深入）”；
3、为图形设置必要属性，如 cx、cy、r（圆形），或 x、y、width、height（矩形）。
4、可选地通过 style 属性或外部 CSS 设置 fill、stroke、stroke-width 等视觉属性。
二、使用 object 标签嵌入外部 SVG 文件
将 SVG 保存为独立 .svg 文件后，可通过 <object> 标签引入，保持文件结构分离并支持交互与脚本访问。
1、创建一个纯 SVG 文件（如 icon.svg），内容以 <svg> 根元素开头，不含 <html> 或 <body>。
2、在 HTML 页面中插入 <object> 标签，设置 data 属性指向该 SVG 文件路径。
3、为 <object> 指定 type 属性值为 "image/svg+xml"。
4、添加 width 和 height 属性确保尺寸可控，并设置 aria-label 或 title 提升可访问性。
三、通过 img 标签引用 SVG 文件
当 SVG 仅作静态展示、无需 DOM 操作或 CSS 样式穿透时，<img> 是最轻量的引用方式，兼容性好且加载行为与位图一致。
1、准备一个符合规范的外部 SVG 文件（无 XML 声明或脚本，推荐 UTF-8 编码）。
2、在 HTML 中使用 <img> 标签，将 src 属性设为该 SVG 文件的相对或绝对路径。
3、必须设置 width 和 height 属性，否则部分浏览器可能无法正确解析固有尺寸。
4、添加 alt 属性描述图形语义，确保 屏幕阅读器可识别，并设置 loading="lazy" 优化初始加载性能。
四、使用 iframe 嵌入 SVG 内容
适用于需完全隔离 SVG 文档上下文的场景，例如避免样式冲突或运行不受信任的 SVG 脚本。
1、将 SVG 文件单独部署为可访问的 URL（如 /assets/chart.svg）。
2、在页面中插入 <iframe> 标签，设置 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")）。
