1 .和传统的图像比起来，尺寸更小，且可压缩性更强
2 .可伸缩
3 .任何分辨率之下都可以被完美的打印
4 .svg中图像中的文本是可选的，同时也是可搜索的，很适合做地图。
5 .
svg路径动画
1 .路径上物体的运动朝向，物体垂直于切线方向移动，物体垂直于切线并且反向+180度移动
2 .以固定的旋转角度运动
3 .
js代码
// let path=anime.path(this.$refs.path)
// this.anime=anime({
// targets:this.$refs.s1,
// translateX: path('x'),
// translateY: path('y'),
// rotate: path('angle'),
// easing: 'linear',
// duration: 20000,
// loop: true
// })
html代码
<svg width="256" height="112" viewBox="0 0 256 112">
<path ref='path' fill="none" stroke="currentColor" stroke-width="1" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z" ></path>
</svg>
svg图标之间进行转化
1 .复杂的图标之间过渡转化还是需要专业的绘画软件AE
2 .简单的也必须每一个都要控制，比如菜单图标和返回图标的转化
3 .先找阿里妈妈上面的图标，然后进行
svg图形渐变
1 .果然svg变化过渡之间会有图象残留
2 .还是需要path变化来实践
3 .不能使用原来自带的api来看。
4 .
svg线条动画
1 .demo：https://www.villainhr.com/page/2017/05/01/SVG%20%E5%8A%A8%E7%94%BB%E7%B2%BE%E9%AB%93
2 .需要了解的属性
1.stroke:定义秒变的颜色
2.stroke-dasharry:定义dash和gap的长度，主要通过,来分隔实线和间隔的值，stroke-dasharry=“5，5”,按照实线为5,间隔为5的排布重复下去
3.stroke-dashoffset:设置dasharray定义其实现dash线条开始的位置
4.stroke-linecap:线条的端点样式。
5.stroke-linejoin:线条连接的样式
6.stroke-opacity:线段的透明度
7.stroke-width:线的粗细
8.原理
8.1:通过dasharray将实线部分隐藏，空余为全线断段长，然后将实线部分增加至全长
8.2:通过dashoffset来移动新增的实线部分，造成线段移动的效果。
9 .animation-name:动画的名字
10 .animation-duration:动画持续的时间
11 .animation-timing-function:动画的运动函数
12 .animation-delay:动画的延迟时间
13 .animation-iteration-count:动画的播放次数
14 .animation-direction:动画是否反向播放
1.normal:每个动画结束，动画重置到起点重新开始。
2.alternate:动画交替反向运行，反向运行时，动画按步后退
3.reverse:反向运行动画，每个周期都是结束动画由尾向头运行
4.alternate-reverse:反向交替，反向开始交替
15.animation-fill-mode:动画执行之前和之后如何给动画的目标应用格式
1.none:动画执行前后不改变任何样式
2.forwards:保持动画最后一帧的样式，由animation-direction,animation-iteration-count决定
3.backwards:动画采用第一帧的样式
4.both:执行forwards和backwards执行的动作。
16 .将多个文字进行重叠，取不同的offset,array即可。
17 .css实现
.text{
fill: none;
stroke-width: 5;
stroke-dasharray: 0 300;
//第一个值表示虚线的长度
//第二个只表示实线和虚线的距离
stroke-dashoffset: 0;
font-size: 200px;
transition:fill .4s ease;
}
.s1{
stroke: #F60A0A;
animation:s11 6s ease-in-out forwards;
}
@keyframes s11 {
100%{
stroke-dashoffset: 1000;
stroke-dasharray: 80 160;
}
}
svg种使用transiton
1 .path { transition: fill .4s ease; }
svg文字
1 .text-anchor:定义参考点和实际字符之间的定位关系。start,middle,end,inherit
2 .tspan:可以嵌套的text标签
3 .
svg实现签名
1 .需要签名的字
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M51.494,355.859c-0.361,6.059-0.928,154.471,0.112,139.244"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M78.591,407.725c1.312,22.307-22.823,30.685-40.917,38.995v0.438c28.433,6.559,63.44,14.872,83.997,37.178"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M107.581,428.161c-10.663-3.553-25.783,30.933-12.163,31.759c9.906,0.412,10.873-18.834,13.134-26.911 c-5.65,11.058,3.828,48.292,20.075,6.995c-11.509,10.832,17.602,55.514,27.12-39.959c-2.612,27.794-5.091,45.328,6.053,56.885 c9.493,9.906,24.097,5.309,26.899-6.503c9.349-39.39,2.886-89.151-4.863-88.502c-7.76,0.648-12.929,44.588-4.217,79.835 c2.759,11.161,9.906,22.289,23.114,24.354c14.859,2.475,13.208-12.385,17.335-21.466c1.238,5.367,1.238,11.971,7.842,12.795 c7.429,1.238,9.492-9.906,14.446-9.906c2.063,0,4.127,4.129,6.192,4.541c3.302,1.238,3.715-0.412,7.017-1.651 c19.812-6.19,17.879-0.059,38.517-0.059"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M137.931,434.742c14.447-2.475,28.894-3.714,43.753-4.128"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M323.739,390.271c7.861-15.198-23.06-13.102-28.826-1.571c-13.101,26.204,37.734,46.643,44.023,68.653 c9.435,33.017-49.264,34.063-67.605,21.487c-11.53-8.386-2.096-13.626,8.385-16.771"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M355.25,448.722c-5.261,16.234,3.377,51.195,12.721,59.741c0,0,0.649-26.498-10.497-40.877"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M366.466,462.687c6.728,0.814,33.816,1.509,39.618-16.217c5.733-17.524-34.122-12.104-46.724-6.919 c-4.088,1.683-12.966,5.606-12.708,12.208c0.535,13.62,37.153,12.974,56.324,8.02s23.665-9.646,25.908-14.53 c-4.859,0.813-5.232,10.987-1.495,14.243c4.86,4.069,6.729-2.442,9.718-6.104c0.747,3.256,1.494,6.104,2.989,8.952 c3.738-2.848,5.608-10.173,10.841-9.766c4.485,0,3.991,5.186,8.477,5.594c4.111,0.408,8.078-11.094,22.939-10.447 c-8.399-1.615-24.232,8.725-13.569,12.278c11.309,2.907,13.178-9.46,14.674-14.343c1.494-5.29,6.729-39.826,0.748-43.896 c-4.485-2.849-5.232,5.696-5.607,9.359c-1.12,11.395,2.617,32.093,10.093,40.64c7.476,8.952,26.537,12.207,32.892-1.628 c4.861-10.986-8.597-17.498-10.091-5.289c-2.99,23.195,22.56,15.073,30.566,7.922c13.571-12.116,11.147-86.235,2.259-86.761 c-8.071-0.478-24.718,94.514,36.346,102.269"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M432.622,431.008c0.373-0.407,0.373-1.222,0.373-2.035"/>
<path fill="none" stroke="#020202" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" d="M130.66,421.731c0.373-0.407,0.373-1.221,0.373-2.035"/>
2 .js代码
let paths=this.$refs.g.querySelectorAll('path');
let len=[]
let delay=0
for(let i=0;i<paths.length;i++){
let l=paths[i].getTotalLength()
delay+=l+100
len.push(delay)
}
//根据路径的长度，计算每次延迟的时间
一般流程
1 .使用ps打开想要加工的图片，建立工作路径
2 .设置图层透明度为0，就可以看到路径的样子
3 .导出到illustrator,生成svg文件
