### 如何在前端项目中使用
和处理
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...);
}
```
---
本文介绍了CSSSprite和SVGSprite这两种网页图片应用处理方式的工作原理和技术优势，包括如何利用它们来减少HTTP请求并提高页面性能，同时对比了Iconfont及Base64编码的优势。
扫一扫
2109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
