Implementation examples of introducing, encapsulating and using svg vector diagrams in Vue3

1. Introduction to SVG

1. What is SVG vector diagram

SVG is the full name Scalable Vector Graphics, which is the most widely used vector graphics format on the Internet.

During the project development process, we often use svg vector images. After we use svg, the page is no longer loaded with image resources, which is a great improvement to the page performance. Moreover, our svg file is much smaller than img, and it almost does not occupy resources in the project.

We will conduct a detailed analysis of SVG vector diagram from the following aspects:

• Scalable: The SVG vector image file format can be enlarged or reduced without damaging image quality.

• Vector: The SVG vector image is essentially a snippet of a code that renders an image in real time, converting it into pixels you see on the screen.

• Graphics: SVG is an image file type, and other image file types include: PNG, JPEG, or GIF.

• When a page loading operation is performed, this SVG vector diagram code is converted to a graph. Its biggest feature is that it can scale the image to any resolution, no matter how big or small, without losing quality.

• Animation and Transparency: SVG supports animation and transparency, making it a universal file format.

2. Pros and cons of SVG vector graphics

Although SVG vector graphics are not as widely used as raster file types such as PNG, the popularity of SVG vector graphics is growing rapidly. SVG vector graphics can complete some basic tasks that raster images cannot complete. This is also the reason why people like SVG vector graphics. Let’s take a look at the advantages and disadvantages of SVG vector graphics:

• SVG vectors are scalable. You can design at any resolution, it can be enlarged or downsized without damaging the quality.

• Since the mass loss has never been experienced, the SVG vectors always look clear and beautiful.

• Since SVGs are just code, their file size is not large and well optimized.

• The presence of SVG optimizers makes them easier to manage. If you use SVG instead, your website may load faster and SVG supports animation.

Although SVG has quite a few advantages over PNG, from scalable to smaller sizes, SVG also has obvious disadvantages:

• SVG may experience incompatibility on old browsers and devices at work.

• SVG requires special programs to create and edit. While you can design the SVG format using only XML, this doesn't always work.

• SVG vector graphics must be rendered by the browser when the page is loaded, so using too many SVGs or large files containing many vectors can put some burden on the device.

2. Introduce and encapsulate svg vector diagrams

1. Install the SVG dependency plug-in

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

2. Configure plug-ins in

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

3. Import the entry file

import 'virtual:svg-icons-register'

4. Use svg

4.1 Introduce svg vector diagram in src/assets/icons folder

4.2 Create a SvgIcon component in the src/components directory

<template>
  <svg :style="{ width, height }">
    <use :xlink:href="prefix + name" rel="external nofollow"    :fill="color"></use>
  </svg>
</template>
 
<script setup>
defineProps({
  // Whether to display  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 Encapsulate it into a global component and create plugin/ in the src folder

//Introduce global components in the projectimport SvgIcon from '@/components/'
 
//Global Objectconst allGlobalComponents = { SvgIcon }
 
//Expose plug-in objects to the outsideexport default {
  install(app) {
    //All components of the registration project    (allGlobalComponents).forEach((key) => {
      //Register as a global component      (key, allGlobalComponents[key])
    })
  },
}

4.4 Introduce plugin/files in

import GlobalComponents from '@/plugin'
(GlobalComponents)

4.5 Use on the page

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

This is the article about the implementation examples of Vue3 introducing, encapsulating and using svg vector graphics. For more related content of Vue3 svg vector graphics, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!