一、SVG簡介

1.  什么是SVG矢量圖

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

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

我們將從以下幾個方面對SVG矢量圖進行詳細分析：

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

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

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

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

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

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

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

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

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

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

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

雖然SVG與PNG相比有相當多的優(yōu)勢，從可擴展到更小的尺寸，但 SVG也有較明顯的缺點：

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

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

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

二、引入和封裝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入口文件導入

import 'virtual:svg-icons-register'

4、使用svg

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

4.2 在src/components目錄下創(chuàng)建一個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

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

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

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

4.5 在頁面使用

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

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

最新評論