可缩放矢量图形(Scalable Vector Graphics,SVG),是一种用于描述二维的矢量图形,基于 XML 的标记语言。作为一个基于文本的开放网络标准,SVG能够优雅而简洁地渲染不同大小的图形,并和CSS,DOM,JavaScript和SMIL等其他网络标准无缝衔接。本质上,SVG 相对于图像,就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中,这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外,这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
SVG的优势:
和传统的点阵图像模式,像JPEG和PNG不同,SVG格式提供的是矢量图,这意味着它的图像能够被无限放大而不失真或降低质量,并且可以方便地修改内容。
VUE项目中使用SVG图标:
一、引入项目中的svg文件(打包到项目中):
1、这里要使用到 svg-sprite-loader 这个插件, 它是一个webpack loader ,可以将多个svg打包成 svg-sprite
。
npm install svg-sprite-loader
2、安装svg-sprite-loader后,vue.config.js中添加以下配置:
//vue.config.js
module.exports = {
chainWebpack: (config) => {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
3、创建SvgIcon组件
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg >
</template>
<script>
export default {
name: 'svg-icon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String
}
},
computed: {
iconName () {
return `#icon-${this.iconClass}`
},
svgClass () {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4、在src目录下创建icons目录,把需要用到的svg资源文件放到icons/svg文件夹中(对应上述svg-sprite-loader配置),创建index.js文件,自动引入svg资源(使用到webpack的一个API:require.context)
//src/icons/index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
import generateIconsView from './generateIconsView.js'
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
const iconMap = requireAll(req)
generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it
5、在src/main.js中引入src/icons/index.jssrc/icons/index.js,就可以正常使用本地svg资源
// src/main.js中引入src/icons/index.js
import './icons' // svg-icon
6、引入后所有用到的svg资源都会以symbol标签的形式内联到body内,使用时只需设置SvgIcon组件的iconClass属性跟svg资源文件名相同即可正常显示
参考:
Svg Icon 图标 | vue-element-admin
二、引入在线的svg文件:
使用 <object> 标签
<object type="image/svg+xml" data="sample.svg"></object>
// 在这种情况下,SVG 在图像搜索中将不可用。要解决此问题,您可以使用 <img> 标记作为后备:
<object type="image/svg+xml" data="sample.svg">
<img src="sample.svg" />
</object>
参考:How to Add Animated SVG to Your Website | SVGator Help
三、将动画 SVG 添加到 Vue.js:
将svg文件内的html代码和动画javascript代码分别复制到vue组件的template和script中,此方法比较麻烦,而使用 <object> 标签引入在线svg,动画也可正常显示,
故通常情况推荐使用<object> 标签引入,如遇特殊情况,可考虑此方案。