html里引入使用svg的方法

[1. 内联 SVG（行内 SVG）](#1. 内联 SVG（行内 SVG）)

2.使用link标签，作为网站icon

[3. 使用 img 标签](#3. 使用 img 标签)

[4.使用 CSS 背景图像](#4.使用 CSS 背景图像)

5.外部SVG文件

[6.SVG Sprite（雪碧图）](#6.SVG Sprite（雪碧图）)

1. 内联 SVG（行内 SVG）

即将 SVG 代码直接写在 HTML 文件中。

html 复制代码

<div>
    <svg width="100" height="100" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="blue" />
    </svg>
</div>

优点：
- 控制力最强 ：可以直接用 CSS 修改颜色（fill）、描边，或者用 JavaScript 添加动画和交互。
- 无 HTTP 请求：体积小，加载快。
- 响应式好 ：配合 currentColor 可以轻松跟随文字颜色变化（非常适合暗黑模式切换）。
缺点：如果图形很复杂，会增加 HTML 代码量。
适用场景：需要变色、需要动画、需要 JS 交互的小图标或关键图形。

2.使用link标签，作为网站icon

html 复制代码

<link rel="icon" type="image/svg+xml" href="/vite.svg" />

3. 使用 `img` 标签

就像引入 JPG 或 PNG 图片一样引入 SVG 文件。icon.svg放在public目录下。

html 复制代码

<img src="/icon.svg" alt="描述" width="100" height="100">

优点：
- 简单直观：语法和普通图片一样。
- 浏览器缓存：如果是公共图标，可以被浏览器缓存。
- 隔离性：SVG 内部的样式不会污染页面，页面的样式也不会影响它。
缺点：
- 无法用 CSS/JS 控制 ：你不能通过外部 CSS 改变 SVG 内部的某个路径颜色（除非在 SVG 文件内部预先写好 currentColor）。
适用场景：静态图片、LOGO、不需要交互的插图。

4.使用 CSS 背景图像

将 SVG 作为元素的背景图。

写法：

html

html 复制代码

<div class="svg-bg"></div>

css

html 复制代码

.svg-bg {
  width: 100px;
  height: 100px;
  background-image: url('/icon.svg');//icon.svg放public目录下
  background-size: contain;
  background-repeat: no-repeat;
}

优点：
- 装饰性强：非常适合用作按钮、导航项的装饰性图标。
- 灵活缩放 ：利用 background-size 可以轻松控制大小。
缺点：同样无法通过 CSS 控制 SVG 内部细节；不利于 SEO 和无障碍访问（屏幕阅读器可能读不到）。
适用场景：纯装饰性的图标、背景图案

5.外部SVG文件

下面svg文件命名为externalsvg.svg放在public目录下

html 复制代码

<svg id="bigsvg" width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

html中use引入：

html 复制代码

<section style="position: relative; display: flex;justify-content: center;"
               >
      <svg style="width: 1500px;height: 1100px;">
          <use xlink:href="/externalsvg.svg#bigsvg"/> 
      </svg>
 </section>

注意use xlink:href="svg文件路径#id"，否则svg显示不出来，因为找不到svg源文件！

6.SVG Sprite（雪碧图）

适合网站有很多小图标时使用，将多个图标合并到一个 SVG 文件中。

写法：
1.定义 Sprite（通常放在页面底部或单独文件）：

html 复制代码

<svg style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
  </symbol>
</svg>

2.引用

html 复制代码

<svg width="24" height="24">
  <use href="#icon-home"></use>
</svg>

优点：减少 HTTP 请求（图标多时），可改颜色，性能好。
适用场景：大型项目、图标库系统