一、SVG簡(jiǎn)介

1.  什么是SVG矢量圖

SVG全稱Scalable Vector Graphics，它是網(wǎng)絡(luò)上使用最廣泛的矢量圖格式。

在項(xiàng)目開發(fā)過程中，我們經(jīng)常會(huì)用到svg矢量圖,而且我們使用svg以后，頁(yè)面上加載的不再是圖片資源，這對(duì)頁(yè)面性能來說是個(gè)很大的提升，而且我們svg文件比img要小的很多，放在項(xiàng)目中幾乎不占用資源。

我們將從以下幾個(gè)方面對(duì)SVG矢量圖進(jìn)行詳細(xì)分析：

• 可擴(kuò)展： SVG矢量圖文件格式可以在不損害圖像質(zhì)量的情況下放大或縮小。

• 矢量：SVG矢量圖的本質(zhì)上是實(shí)時(shí)渲染圖像的代碼片段，將其轉(zhuǎn)換為你在屏幕上看到的像素。

• 圖形： SVG 是一種圖像文件類型，其它的圖像文件類型還包括：PNG、JPEG 或 GIF。

• 當(dāng)進(jìn)行頁(yè)面加載操作時(shí)，此SVG矢量圖代碼將轉(zhuǎn)換為圖形。它最大的特點(diǎn)就是可以將圖片縮放到任何分辨率無論大小都不會(huì)損失質(zhì)量。

• 動(dòng)畫與透明度：SVG 支持動(dòng)畫和透明度，使其成為一種通用的文件格式。

2.  SVG矢量圖的優(yōu)缺點(diǎn)

雖然SVG矢量圖沒有PNG等光柵文件類型應(yīng)用的廣泛，但SVG矢量圖的流行程度正在迅速增長(zhǎng)。SVG矢量圖能完成一些光柵圖像無法完成的基本任務(wù)。這也是人們喜歡SVG矢量圖 的原因。下面我們來看看SVG矢量圖的優(yōu)缺點(diǎn)吧：

• SVG矢量圖是可縮放的。你可以在任何分辨率的情況下進(jìn)行設(shè)計(jì)，它可以放大或縮小尺寸而不會(huì)損壞質(zhì)量。

• 由于從未經(jīng)歷過質(zhì)量損失，SVG矢量圖總是看起來清晰漂亮。

• 由于 SVG 只是代碼，因此它們的文件大小并不大且經(jīng)過了很好的優(yōu)化。

• SVG 優(yōu)化器的存在使它們更易于管理。如果你改用SVG，你的網(wǎng)站可能會(huì)加載得更快一些，并且SVG 支持動(dòng)畫。

雖然SVG與PNG相比有相當(dāng)多的優(yōu)勢(shì)，從可擴(kuò)展到更小的尺寸，但 SVG也有較明顯的缺點(diǎn)：

• SVG在工作中可能會(huì)遇到在舊瀏覽器和設(shè)備上不兼容。

• SVG 需要特殊的程序來創(chuàng)建和編輯。雖然你可以只使用 XML 來設(shè)計(jì)SVG格式，但這并不總是有效的。

• SVG矢量圖必須在頁(yè)面加載時(shí)由瀏覽器呈現(xiàn)，因此使用過多的 SVG 或包含許多矢量的大文件會(huì)對(duì)設(shè)備造成一定負(fù)擔(dān)。

二、引入和封裝svg矢量圖

1、安裝SVG依賴插件

npm install vite-plugin-svg-icons -D
或
yarn add vite-plugin-svg-icons -D
或
pnpm install vite-plugin-svg-icons -D

2、在vite.config.ts 中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

3、main.ts入口文件導(dǎo)入

import 'virtual:svg-icons-register'

4、使用svg

4.1 在src/assets/icons文件夾下引入svg矢量圖

4.2 在src/components目錄下創(chuàng)建一個(gè)SvgIcon組件

<template>
  <svg :style="{ width, height }">
    <use :xlink:href="prefix + name" rel="external nofollow"    :fill="color"></use>
  </svg>
</template>
 
<script setup>
defineProps({
  // 是否顯示
  prefix: {
    type: String,
    default: '#icon-',
  },
  name: String,
  color: {
    type: String,
    default: '#000',
  },
  width: {
    type: String,
    default: '16px',
  },
  height: {
    type: String,
    default: '16px',
  },
 
})
</script>
 
<style lang='scss' scoped></style>

4.3 封裝成全局組件，在src文件夾下創(chuàng)建plugin/index.ts

//引入項(xiàng)目中的全局組件
import SvgIcon from '@/components/svgIcon.vue'
 
//全局對(duì)象
const allGlobalComponents = { SvgIcon }
 
//對(duì)外暴露插件對(duì)象
export default {
  install(app) {
    //注冊(cè)項(xiàng)目的全部組件
    Object.keys(allGlobalComponents).forEach((key) => {
      //注冊(cè)為全局組件
      app.component(key, allGlobalComponents[key])
    })
  },
}

4.4 在main.ts中引入plugin/index.ts文件

import GlobalComponents from '@/plugin'
app.use(GlobalComponents)

4.5 在頁(yè)面使用

<svg-icon name="ticl" width="20px" height="20px"></svg-icon>

到此這篇關(guān)于Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vue3 svg矢量圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論