如何在HTML中插入SVG图标?

在HTML中插入SVG图标通常有三种常见方法：

1. 内联SVG：
将SVG代码直接放入HTML文档内，作为`<svg>`标签内的内容。这适合图标较小且不需要频繁更新的情况。

   <svg width="24" height="24" viewBox="0 0 24 24">
     <path d="M12 2C6.477 2 2 6.481 2 12s4.477 10 10 10 10-4.481 10-10S17.523 2 12 2zm0 18c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"/>
   </svg>

2. 外部引用SVG文件：
将SVG保存为`.svg`文件，然后在HTML中使用`<img>`标签引用这个文件。SVG被视为图片，所以可以像处理其他图片一样调整其大小等属性。

   <img src="my-icon.svg" alt="我的SVG图标">

3. 使用数据URI引用：
如果SVG文件较小，可以直接将其转换为数据URI并放置在`<img>`标签的`src`属性中。这种方法在资源有限或需要跨域访问时可用。

   <img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%20...%3C/svg%3E" alt="SVG图标">

以上就是如何在HTML中插入SVG图标的简单说明。