前端项目SVG展示方案总结，以Vue3+TS为例

在 前端项目（Vue 3 + TypeScript） 项目中展示 SVG 图片主要有以下几种方式：

1. 直接使用 <img> 标签

这是最简单的方式，适用于不需要对 SVG 进行样式修改或交互的场景。

示例如下：

<template>
  <img src="@/assets/image.svg" alt="SVG Image" />
</template>

<script lang="ts" setup>
// 无需额外代码
</script>  

在上述代码里，@ 通常是 Vite 或 Vue CLI 配置的 src 目录别名。

2. 将 SVG 作为内联代码插入

如果需要对 SVG 进行样式修改或交互，可以将 SVG 代码直接插入到 Vue 模板中。

示例 如下：

<template>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40" fill="blue" />
    </svg>
  </div>
</template>

<script lang="ts" setup>
// 无需额外代码
</script>  

3. 使用 vite-svg-loader 将 SVG 作为组件使用（适用于 Vite 项目）

vite-svg-loader 可以让你把 SVG 文件当作 Vue 组件来使用。

安装依赖

bash

npm install vite-svg-loader --save-dev

配置 Vite

在 vite.config.ts 中添加如下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';

export default defineConfig({
  plugins: [vue(), svgLoader()],
});

使用 SVG 组件

示例如下：

<template>
  <div>
    <MySvg />
  </div>
</template>

<script lang="ts" setup>
import MySvg from '@/assets/image.svg';
</script>    

4. 使用 @svgr/webpack（适用于 Webpack 项目）

如果你使用的是 Webpack 构建项目，可以使用 @svgr/webpack 把 SVG 文件转换为 Vue 组件。

安装依赖

bash

npm install @svgr/webpack --save-dev

配置 Webpack

在 webpack.config.js 中添加如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

使用 SVG 组件

使用方式与 vite-svg-loader 类似，在 Vue 组件中导入并使用 SVG 文件。

这几种使用方式有何优劣，以及适用场景

1. 直接使用 <img> 标签

优点

• 简单便捷 ：只需在 src 属性里指定 SVG 文件的路径，无需额外配置和复杂的操作。
• 兼容性好 ：所有现代浏览器都支持使用 <img> 标签展示 SVG 图片，无需担心兼容性问题。
• 缓存机制：浏览器会自动对图片进行缓存，再次加载相同的 SVG 时速度更快。

缺点

• 无法直接样式修改和交互：不能直接在 CSS 中修改 SVG 的内部样式，也难以对 SVG 元素添加交互事件。
• 不支持动态内容 ：如果 SVG 内容需要根据数据动态变化，这种方式无法满足需求，如currentColor。

适用场景

• 当你只需要展示静态的 SVG 图片，不需要对其进行样式修改和交互时，使用 <img> 标签是最简单高效的选择。例如，展示公司 logo、装饰性图标等。

2. 将 SVG 作为内联代码插入

优点

• 可灵活样式修改和交互：可以直接在 CSS 中修改 SVG 的内部样式，也能为 SVG 元素添加交互事件，实现动态效果。
• 支持动态内容：可以结合 Vue 的响应式数据，动态生成 SVG 内容。

缺点

• 代码冗余：如果多个地方使用相同的 SVG，需要重复编写代码，增加了代码量。
• 维护成本高：当 SVG 代码发生变化时，需要在多个地方进行修改。

适用场景

• 当你需要对 SVG 进行复杂的样式修改和交互，或者 SVG 内容需要根据数据动态变化时，适合使用内联 SVG。例如，制作交互式图表、动画效果等。

3. 使用 vite-svg-loader 将 SVG 作为组件使用（适用于 Vite 项目）

优点

• 组件化管理：将 SVG 封装成组件，提高了代码的可复用性和可维护性。
• 方便样式修改和交互：可以像使用普通 Vue 组件一样，对 SVG 组件进行样式修改和交互处理。
• 与 Vite 集成良好：专门为 Vite 设计，配置简单，性能优化。

缺点

• 额外配置 ：需要安装和配置 vite-svg-loader，增加了一定的学习成本。
• 不适合简单场景：对于只需要展示静态 SVG 的简单场景，使用组件化方式会显得过于复杂。

适用场景

• 当你在 Vite 项目中，且需要在多个地方复用相同的 SVG，同时需要对其进行样式修改和交互时，使用 vite-svg-loader 将 SVG 作为组件使用是最佳选择。例如，项目中多个页面都使用相同的图标，并且需要对图标进行悬停效果、点击事件等处理。

4. 使用 @svgr/webpack（适用于 Webpack 项目）

优点

• 组件化管理 ：与 vite-svg-loader 类似，将 SVG 封装成组件，提高代码的可复用性和可维护性。
• 方便样式修改和交互：可以像使用普通 Vue 组件一样，对 SVG 组件进行样式修改和交互处理。
• 与 Webpack 集成良好：专门为 Webpack 设计，能充分利用 Webpack 的功能。

缺点

• 额外配置 ：需要安装和配置 @svgr/webpack，增加了一定的学习成本。
• 不适合简单场景：对于只需要展示静态 SVG 的简单场景，使用组件化方式会显得过于复杂。

适用场景

• 当你在 Webpack 项目中，且需要在多个地方复用相同的 SVG，同时需要对其进行样式修改和交互时，使用 @svgr/webpack 将 SVG 作为组件使用是比较合适的。例如，项目中使用 Webpack 构建，并且有多个模块需要使用相同的 SVG 图标，同时需要对图标进行样式定制和交互处理。

综上所述，可以根据项目的构建工具、需求复杂度和代码复用性等因素来选择合适的展示方式。如果只是简单展示静态 SVG，使用 <img> 标签即可；如果需要复杂的样式修改和交互，可选择内联 SVG 或使用组件化方式；如果项目使用 Vite 构建，推荐使用 vite-svg-loader；如果使用 Webpack 构建，推荐使用 @svgr/webpack。