1. 使用<img>标签插入SVG
一种常见的方法是使用<img>标签来插入SVG图像。这种方式非常简单，只需在<img>标签的src属性中指定SVG图像的路径即可。例如：
<img src="path/to/your/svg" alt="SVG Image">这样就可以将SVG图像插入到HTML页面中。值得注意的是，由于<img>标签默认会将SVG图像作为一个独立的图像处理，因此无法通过JavaScript或CSS对SVG元素进行交互或样式控制。
2. 使用<object>标签插入SVG
另一种常用的方法是使用<object>标签来插入SVG图像。相较于<img>标签，<object>标签可以更好地处理SVG图像的交互和样式控制。使用<object>标签插入SVG的代码如下：
<object data="path/to/your/svg" type="image/svg+xml">
<p>Your browser does not support SVG</p>
</object>
在上述代码中，data属性指定SVG图像的路径，type属性设置为"image/svg+xml"表示该图像为SVG类型。在<object>标签的闭合标签之间，可以添加一段文本，用于在不支持SVG的浏览器上显示替代内容。
3. 使用<embed>标签插入SVG
<embed>标签也可以用于向HTML页面中插入SVG图像。使用该标签的代码如下：
<embed src="path/to/your/svg" type="image/svg+xml">与<object>标签类似，<embed>标签也可以通过type属性将图像类型设置为SVG。
4. 使用<svg>标签直接插入SVG内容
除了通过<img>、<object>和<embed>标签插入SVG图像外，还可以直接在HTML页面中使用<svg>标签插入SVG内容。使用<svg>标签插入SVG的代码如下：
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red" />
</svg>
在上述代码中，通过<svg>标签定义了一个200x200像素大小的画布，然后在其中插入了一个红色填充的圆形。可以通过在<svg>标签内添加不同的SVG元素来创建复杂的图像。
需要注意的是，使用<svg>标签直接插入SVG内容时，需要了解SVG的语法和元素用法。
总结
在HTML页面中插入SVG图像有多种方式可供选择。如果只需要简单地展示SVG图像，可以使用<img>标签；如果需要对SVG进行交互或样式控制，可以使用<object>或<embed>标签；如果熟悉SVG语法，也可以直接使用<svg>标签插入SVG内容。根据实际需求选择合适的方法可以实现更灵活和高效的SVG图像插入。