### 如何在
前端项目中
使用和处理
SVG格式图片
####
使用 `<img>` 标签加载
SVG 图片
最简单的方式是通过 HTML 的 `<img>` 标签来引入
SVG 文件。这种方式适用于静态资源的场景，代码如下所示[^1]：
```html
<img src="./img/pg.
svg" alt="
SVG Image">
```
#### Vue 项目中集成
SVG 图标
对于基于 Vue.js 构建的应用程序，可以利用 `
svg-sprite-loader` 插件实现更高效的
SVG 图标管理。以下是具体操作流程][^[^23]：
1. **安装依赖插件**
需要先安装 `
svg-sprite-loader` 工具包。
```bash
npm install
svg-sprite-loader --save-dev
```
2. **配置 Webpack 加载器**
修改项目的 Webpack 配置文件（通常位于 `vue.config.js`），添加以下内容以支持
SVG Sprite 功能。
```javascript
const path = require('path');
function resolve(dir) {
return path.join(__dirname, dir);
}
module.exports = {
chainWebpack: config => {
config.module
.rule('
svg')
.exclude.add(resolve('src/icons'))
.end()
.rule('icons')
.test(/\.
svg$/)
.include.add(resolve('src/icons'))
.end()
.use('
svg-sprite-loader')
.loader('
svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});
}
};
```
3. **创建自定义组件用于显示图标**
定义一个通用的 `
SvgIcon.vue` 组件以便于后续调用。
```vue
<template>
<
svg :class="'
svg-icon'" aria-hidden="true">
<use :xlink:href="`#${props.iconClass}`"></use>
</
svg>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
iconClass: String,
});
</script>
<style scoped>
.
svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</script>
```
4. **实际应用中的写法**
将所需
SVG 文件存放在指定路径下（如 `src/icons/
svg`），并通过上述组件渲染出来。
```html
<
svg-icon icon-class="example-file-name"/>
```
#### 转码方式嵌入 CSS 中作为背景图
另一种常见做法是从在线平台获取现成素材并转换为可直接
使用的编码形式再应用于网页设计当中[^4]。
1. 访问类似阿里巴巴矢量图形库这样的第三方服务挑选合适的图案；
2. 复制其原始数据粘贴至专门工具里完成 Base64 编译过程 https://codepen.io/jakob-e/pen/doMoML ;
3. 把最终产物设置给目标元素的相关属性值上即可生效。
```css
.icon{
display:inline-block;
background-repeat:no-repeat;
background-size:contain;
}
/* Example */
.custom-logo{
width:50px;
height:auto;
background-image:url(data:image/
svg+xml;base64,...base64stringhere...);
}
```
---
扫一扫
2648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
