SVG的分析

01.svg怎么来的

可以通过figma进行设计后导出svg
阿里图标
通过svg的语法手写svg(下面链接是入门语法)
- SVG实例入门与动画实战_svg动画_jayliang.的博客-CSDN博客

02.svg能做的效果

svg描边动画(Stroke)
svg路径动画(Path)
svg变形动画(Morping)
svg闪烁动画(Blink)
svg图案动画(Pattern)
通常是用来做一些网页的背景
- 比如波浪的背景Svg Wave - A free & beautiful gradient SVG wave Generator.

不过以上的特效通常是用GSAP 等类似的动画库去完成的

当然也有去手动实现的不太方便

03.svg在vue项目的引入

在vue3的项目中如何去使用svg

方法1:使用插件


// 1.下载
npm install vite-svg-loader --save-dev

// 2.配置vite.config.js
import svgLoader from 'vite-svg-loader'

export default defineConfig({
  plugins: [vue(), svgLoader()]
})

// 3.项目是ts的，要非常注意，需要单独声明模块！！！
// tsconfig.json
    "compilerOptions": {
        "types": [
        // 一定要声明
            "vite-svg-loader"
        ],
}

在setup中引入

在template中引用

方法2:建立一个SVG组件

使用SVG构建你自己的图标库_svg图标库_jayliang.的博客-CSDN博客

思考一个问题 :

为什么需要把svg做成组件的形式

你感受一下,直接用

vue

 1<template>
 2  <div id="goodsDetail">
 3    <van-nav-bar title="商品详情"
 4                 :fixed=true
 5                 left-arrow
 6                 @click-left="onClickLeft">
 7      <svg t="1575254700818"
 8           class="icon"
 9           viewBox="0 0 1024 1024"
10           version="1.1"
11           xmlns="http://www.w3.org/2000/svg"
12           p-id="1907"
13           width="32"
14           height="32"
15           slot="right">
16        <path d="M621.93259435 611.38542038L423.92102316 703.33559492c-9.52523406 4.42304387-20.93769289 0.2488718-25.36137327-9.27636225-4.42304387-9.52523406-0.2488718-20.93769289 9.27636226-25.36137326l198.01157118-91.95017455c9.52523406-4.42304387 20.93769289-0.2488718 25.36137327 9.27636226 4.42368037 9.52587056 0.2488718 20.93832939-9.27636225 25.36137326zM600.48824684 870.32029948l-189.07064485-109.15988242c-9.09495954-5.25113136-12.24054635-16.98884212-6.98941498-26.08443814 5.25113136-9.09495954 16.98884212-12.24054635 26.08443815-6.98941498l189.07064483 109.15988241c9.09495954 5.25113136 12.24054635 16.98884212 6.98941499 26.08443814-5.25113136 9.09559604-16.98884212 12.24054635-26.08443814 6.98941499z"
17              fill="#F9C73D"
18              p-id="1908"></path>
19        <path d="M358.28506354 712.46556199m-92.29261194 0a92.29261195 92.29261195 0 1 0 184.58522388 0 92.29261195 92.29261195 0 1 0-184.58522388 0Z"
20              fill="#FFEABB"
21              p-id="1909"></path>
22        <path d="M358.28506354 823.85319711c-61.419142 0-111.38763511-49.96849311-111.38763512-111.38763512s49.96849311-111.38763511 111.38763512-111.38763511 111.38763511 49.96849311 111.38763512 111.38763511-49.96849311 111.38763511-111.38763512 111.38763512z m1e-8-184.5852239c-40.36115047 0-73.19758879 32.83643833-73.19758879 73.19758877s32.83643833 73.19758879 73.19758879 73.1975888 73.19758879-32.83643833 73.1975888-73.19758879-32.83643833-73.19758879-73.1975888-73.19758878zM683.85520847 640.54097475c-50.89014624 0-92.29261195-41.40246571-92.29261196-92.29261196s41.40246571-92.29261195 92.29261196-92.29261194 92.29261195 41.40246571 92.29261195 92.29261194-41.40246571 92.29261195-92.29261195 92.29261195z m0-146.39517759c-29.83215469 0-54.10256563 24.27041094-54.10256564 54.10256563s24.27041094 54.10256563 54.10256564 54.10256564 54.10256563-24.27041094 54.10256562-54.10256564-24.27041094-54.10256563-54.10256562-54.10256563zM683.85520847 979.15938549c-50.89014624 0-92.29261195-41.40246571-92.29261196-92.29261195s41.40246571-92.29261195 92.29261196-92.29261195 92.29261195 41.40246571 92.29261195 92.29261195-41.40246571 92.29261195-92.29261195 92.29261196z m0-146.39517756c-29.83215469 0-54.10256563 24.27041094-54.10256564 54.10256561s24.27041094 54.10256563 54.10256564 54.10256564 54.10256563-24.27041094 54.10256562-54.10256564-24.27041094-54.10256563-54.10256562-54.10256561z"
23              fill="#F9C73D"
24              p-id="1910"></path>
25      </svg>
26    </van-nav-bar>
27    </div>
28    <template>