☆ 什么是 `SVG` ?

SVG(scalable vector graphics) --可缩放矢量图形 , 是一个基于文本的图形语言

☆ `SVG` 的两种用法

1.直接使用`img`标签 , src直接指向svg路径使用

img 复制代码

// img标签的src属性放svg路径
<img src="../src/assets/qq.svg" alt="">

2.直接放svg

svg 复制代码

 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g clip-path="url(#clip0_784_9534)">
            <path
                d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z"
                fill="white" />
            <path
                d="M32.9467 25.1267C38.72 27.0667 40 27.16 40 27.16V6.42C40.0018 5.57698 39.8371 4.74191 39.5155 3.96264C39.1939 3.18337 38.7217 2.47524 38.1259 1.87882C37.5301 1.28241 36.8225 0.809443 36.0435 0.487037C35.2646 0.164631 34.4297 -0.000875577 33.5867 3.4834e-06H6.41335C4.71235 0.00353161 3.08214 0.681268 1.87998 1.88468C0.677817 3.08809 0.00177475 4.71901 1.3883e-05 6.42V33.58C-0.00174104 34.423 0.162898 35.2581 0.484495 36.0374C0.806091 36.8166 1.27832 37.5248 1.87412 38.1212C2.46991 38.7176 3.17756 39.1906 3.95649 39.513C4.73542 39.8354 5.57033 40.0009 6.41335 40H33.5867C35.2877 39.9965 36.9179 39.3187 38.12 38.1153C39.3222 36.9119 39.9982 35.281 40 33.58V33.3333C40 33.3333 29.6133 29 24.36 26.4533C20.8333 30.7733 16.28 33.42 11.5733 33.42C3.57335 33.42 0.90668 26.4533 4.68001 21.84C5.83079 20.5463 7.37411 19.6658 9.07335 19.3333C12.4667 18.4933 17.8867 19.8533 22.9467 21.5267C23.8929 19.7756 24.6462 17.927 25.1933 16.0133H9.58001V14.4533H17.6267V11.6467H7.85335V10.0667H17.6267V6C17.6265 5.90899 17.645 5.8189 17.681 5.73529C17.7169 5.65169 17.7697 5.57633 17.8359 5.51387C17.9021 5.45141 17.9804 5.40317 18.0659 5.37213C18.1515 5.34108 18.2425 5.32787 18.3333 5.33334H22.2733V10.0667H31.92V11.6467H22.2733V14.4867H30.16C29.4626 17.4379 28.3397 20.272 26.8267 22.9C29.2 23.7733 31.3467 24.58 32.9467 25.1267ZM9.74668 21.74C8.3366 21.8696 6.98618 22.3711 5.83335 23.1933C2.75335 25.86 4.58668 30.7733 10.8 30.7733C14.42 30.7733 18.0133 28.4533 20.8667 24.7733C16.8667 22.7733 13.4267 21.3867 9.74668 21.74Z"
                fill="#00A7EF" />
        </g>
        <rect x="-953.5" y="-457.5" width="2535" height="1373" rx="39.5" stroke="#EF5533" />
        <defs>
            <clipPath id="clip0_784_9534">
                <path
                    d="M0 8C0 3.58172 3.58172 0 8 0H32C36.4183 0 40 3.58172 40 8V32C40 36.4183 36.4183 40 32 40H8C3.58172 40 0 36.4183 0 32V8Z"
                    fill="white" />
            </clipPath>
        </defs>
    </svg>

☆ `SVG` 标签修改大小

必须提供svg viewbox属性 , 提供后再设置width和hight才能生效 ;
常见用法：设置width和hight的相对单位1em , 使用标签将svg进行包裹 , 再设置标签的字体大小 ;

修改大小复制代码

// 1.svg 标签上提供 `viewbox`属性
// 2.svg 外层使用标签包裹 , 并设置字体大小
<div style="font-size: 100px;">
     <svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
          <path d="..略" />
     </svg>
</div>

// 3.设置svg标签的宽高
<style>
    svg {
        width: 1em;
        height: 1em;
    }    
</style>

是不是感觉很简单 , 下面来尝试修改一下svg的颜色 ~

☆ `SVG` 标签修改颜色

方法1. 直接使用`fill`属性修改颜色 --给svg标签上加`fill`的css属性

弊端 : 如果ui提前指定了固定的fill颜色 , 那么我们再使用fill修改颜色就不生效了

fill 复制代码

// 通过css的fill属性将svg颜色设置为粉色
  svg {
        width: 1em;
        height: 1em;
        fill: pink 
      }

方法2. 给svg标签上设置 `fill : currentColor` , 这样我们可以直接在包裹svg的标签上设置`color`进行颜色的修改

currentColor 复制代码

// 1. style样式中添加fill : currentColor
<style>
  svg {
        width: 1em;
        height: 1em;
        fill: pink !important
      }
 </style>
 
// 2. 包裹svg的div标签上设置color颜色
 <div style="font-size: 100px;color: pink;">
    <svg>略</svg>
 </div>

介绍完svg简单用法 , 下面总结一下svg雪碧图的应用方法 ~

☆ SVG 精灵图

首先把所有的svg标签都包裹在同一个svg标签里面 ;

把包在'总'svg里面的 svg标签改成symbol标签（元件）, 并提供id属性 ;

根据id找到对应的svg，直接使用图标组件来进行选择显示 :
雪碧图复制代码
<svg aria-hidden="true">
     <use href="#指定的id"></use>
</svg>

只看文字有一点点抽象 , 让我们用代码来演绎一下吧 ~

雪碧图复制代码

// 1. 准备一个svg标签将我们所有的svg标签全部包裹进去
 <svg>
// 2. 将我们包裹进去的所有svg标签替换为symbol标签 , 并加上id属性
    <symbol id="a" fill="pink" width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
        <path
            d="略" />
    </symbol>

    <symbol id="b" width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
        <path
            d="略" />
    </symbol>
    <symbol id="c" width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
        <path
            d="略 />
    </symbol>
</svg>

// 3. 根据id选择器将我们需要的svg进行选择
 <svg aria-hidden="true">
    <use href="#a"></use>
 </svg>

我们项目中的svg都要这样一个一个写入吗 ? 当然打咩！！

我们可以使用插件进行svg地图的打包 : 根据 icons文件夹中的svg图片打包到项目中，通过组件使用图标（演示代码为Vue3 ）

安装依赖

安装依赖复制代码

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

使用插件在vite.config.ts中进行引入

使用插件复制代码

// 1. 引入
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' 
import path from 'path'
// 2. 使用插件  --plugins数组中加入对象
export default defineConfig({ 
    plugins: 
      [   
        createSvgIconsPlugin({ 
        // 指定图标文件夹，绝对路径（NODE代码） 
        iconDirs: [path.resolve(process.cwd(), 'src/icons')] 
      })]
    })

导入到main.ts

导入复制代码

import 'virtual:svg-icons-register'

在页面中使用svg精灵地图

使用svg 复制代码

<svg aria-hidden="true">
    <!-- #icon-文件夹名称-图片名称 -->
    <use :href="`#icon-home-close`" />
</svg>
<svg aria-hidden="true">
    <use :href="`#icon-home-open`" />
</svg>

//可以设置一下svg标签的宽高 ， 这样可以通过设置标签的字体大小来调整svg的大小了
<style scoped>
    svg {
      width: 1em;
      height: 1em;
    }
</style>

我们为了提高复用性可以将svg使用图标组件进行抽离封装 ~

小结：

icons文件打包的产物？
会生成一个 svg 结构（js创建的）包含所有图标，理解为 精灵图

怎么使用svg图标？通过 svg 标签 #icon-文件夹名称-图片名称 指定图片，理解 精灵图定位坐标

使用步骤就是这样啦 , 欢迎指正和补充 ~

如何打包 svg 地图 ? 那还不轻松拿捏 !

☆ 什么是 SVG ?

SVG(scalable vector graphics) --可缩放矢量图形 , 是一个基于文本的图形语言

☆ SVG 的两种用法

1.直接使用img标签 , src直接指向svg路径使用