怎样在HTML中插入一个SVG图形？ SVG嵌入网页方法
SVG（Scalable Vector Graphics，可缩放矢量图形）是现代网页开发中不可或缺的一部分。与传统的位图（如JPG、PNG）不同，SVG基于XML格式，无论放大多少倍都不会失真，且文件体积通常更小。在网页中嵌入SVG有多种不同的方式，每种方式都有其特定的应用场景、优缺点。本文将详细介绍在HTML中插入SVG图形的几种常见方法。
一、 直接内联嵌入（Inline SVG）
直接将SVG的XML代码复制粘贴到HTML文件中，这是最直接也是最灵活的方式。
优点： 可以直接使用CSS修改SVG的样式（如颜色、边框等），可以使用JavaScript操作SVG内部的DOM元素，无额外的HTTP网络请求。
缺点： 会使HTML文件变得非常冗长，不利于代码维护；同一个SVG如果在多个页面使用，无法被浏览器缓存，降低了复用性。
<body> <h1>我的第一个内联SVG</h1> <svg width="100" height="100" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body>
二、 使用 <img> 标签引入
将SVG作为一个独立的外部文件保存（例如 logo.svg），然后像引入普通图片一样使用 <img> 标签将其嵌入网页。
优点： 语法简单，易于理解；SVG文件可以被浏览器缓存，提高页面加载速度；保持了HTML文件的整洁。
缺点： 无法使用外部CSS控制SVG内部样式，无法使用JavaScript与SVG内部元素进行交互；部分浏览器可能不支持SVG内部的字体渲染。
<img src="https://www.ipipp.com/images/logo.svg" alt="网站Logo" width="150" height="150">
三、 使用 <object> 标签嵌入
<object> 标签是嵌入外部资源的标准方式，非常适合用来嵌入SVG文件。
优点： 支持在标签内部提供回退内容（Fallback Content），当浏览器不支持SVG时，会显示回退内容；允许通过JavaScript进行一定程度的交互。
缺点： 无法使用外部CSS直接控制SVG内部样式（需在SVG文件内部引入样式）。
<object type="image/svg+xml" data="https://www.ipipp.com/images/icon.svg" width="100" height="100"> <!-- 如果浏览器不支持SVG，则显示下面的回退图片 --> <img src="icon-fallback.png" alt="图标"> </object>
四、 使用 <embed> 标签嵌入
<embed> 标签也可以用来嵌入SVG，虽然它不是HTML4标准的一部分，但在HTML5中得到了广泛支持。
优点： 兼容性较好，支持JavaScript交互。
缺点： 属于非标准标签，在严格的HTML4验证器中可能报错；不支持回退内容的机制。
<embed type="image/svg+xml" src="https://www.ipipp.com/images/graphic.svg" width="200" height="200">
五、 使用 <iframe> 标签嵌入
将SVG文件放在一个独立的iframe中加载，这是一种将SVG完全隔离的方法。
优点： 完全隔离了SVG的样式和脚本，避免与父页面的CSS或JS冲突。
缺点： 增加了页面结构的复杂度；iframe具有性能开销；父页面与SVG之间的跨域通信非常困难；不推荐用于小型图标。
<iframe src="https://www.ipipp.com/images/chart.svg" width="500" height="300" frameborder="0"> 您的浏览器不支持iframe标签 </iframe>
六、 使用 CSS 背景图片
可以将SVG文件作为CSS的背景图引入，这通常用于装饰性的图标或背景纹理。
优点： 可以很方便地利用CSS的 background-size、background-position 等属性控制SVG的位置和大小；可以利用CSS伪元素进行展示。
缺点： 无法使用JavaScript交互；无法控制SVG内部结构；如果需要修改颜色，通常只能通过CSS滤镜（Filter）实现，不够直观。
.svg-icon {
width: 50px;
height: 50px;
display: inline-block;
background-image: url('https://www.ipipp.com/images/icon-bg.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}总结：如何选择合适的嵌入方式？
不同的需求应该选择不同的方法：
需要CSS/JS深度控制样式和交互： 选择 内联SVG（Inline SVG）。
仅作为静态图片展示，且需要复用缓存： 选择 <img> 标签。
需要兼容老浏览器并提供回退方案： 选择 <object> 标签。
仅作为纯装饰性背景： 选择 CSS背景图片。
在绝大多数现代网页开发中，最常用的是 内联SVG 和 <img> 标签 两种方式，根据是否需要交互来决定使用哪一种即可。