html网页引入svg图片的4种方式

当我们想要在HTML网页中引入SVG图片的时候，有以下4种方式：

1. 使用<img>标签

通过<img>标签来引入SVG图片，与引入普通图片的方式相同，只需指定图片的路径即可。需要注意的是，使用<img>标签引入的SVG图片无法通过CSS对其中的元素进行样式修改。

示例代码：

<img src="example.svg" alt="Example SVG"/>

1. 使用<object>标签

通过<object>标签来引入SVG图片，这种方式可以像使用<img>标签一样来设置图片的各种属性。而且，使用<object>标签引入的SVG图片是可以进行样式修改的。

示例代码：

```

```

1. 使用<embed>标签

通过<embed>标签来引入SVG图片，这种方式与使用<object>标签类似，但是没有给出一个可替代的图像，而是在<embed>标签中直接引入SVG图片。这种方式同样可以进行样式修改。

示例代码：

<embed src="example.svg" type="image/svg+xml" width="300" height="200"/>

1. 直接在HTML中插入SVG代码

复制SVG代码，并将其直接插入到HTML代码中，就可以在网页中看到SVG图片了。需要注意的是，这种方式无法通过CSS对SVG图片进行样式修改，但是如果需要交互和动画效果，可以使用JavaScript或CSS来实现。

示例代码：

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
<circle cx="150" cy="100" r="80" fill="#006633"/>
</svg>

以上就是在HTML网页中引入SVG图片的4种方式的详细讲解。