1.请先阅读SVG基础知识：
www.ruanyifeng.com/blog/2018/0…
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。
其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
2.组里的使用：
设计会给你svg图，拷贝代码，将title，无用id，width，heigth删除就可以。
export const back_white = `
<svg viewBox="0 0 72 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(9.000000, 3.000000)" stroke-width="5">
<path d="M6,9 L49,9 C52.3137085,9 55,11.6862915 55,15 L55,59 C55,62.3137085 52.3137085,65 49,65 L6,65 C2.6862915,65 4.05812251e-16,62.3137085 0,59 L0,15 C-4.05812251e-16,11.6862915 2.6862915,9 6,9 Z" id="矩形" stroke="#222222" fill="#FFFFFF"></path>
<path d="M27.4999638,2.37865041 C26.3947984,0.897552992 24.7150626,0 22.9071624,0 C19.649938,0 17,2.87019199 17,6.39854334 C17,8.50347817 17.9490584,9.98003755 18.7121385,11.1664489 C20.9294852,14.6126139 26.5046399,17.557732 26.7407894,17.738561 C26.9683561,17.912774 27.2343287,18 27.4996504,18 C27.7656471,18 28.0311858,17.9127741 28.2583667,17.738561 C28.4948779,17.557732 34.0704907,14.6126139 36.2871864,11.1664489 C37.0504835,9.98003755 38,8.5034782 38,6.39854334 C38,2.87019197 35.3497969,0 32.092693,0 C30.2858294,0 28.605732,0.898030701 27.4999638,2.37865041 Z" id="Shape备份" stroke="#FFAC00" fill="#FFFFFF" fill-rule="nonzero"></path>
<line x1="15.5416667" y1="31.5" x2="40.4583333" y2="31.5" id="直线" stroke="#222222" stroke-linecap="round" stroke-linejoin="round"></line>
<line x1="15" y1="45" x2="26" y2="45" stroke="#222222" stroke-linecap="round" stroke-linejoin="round"></line>
</g>
</g>
</svg>
`
// 组件里
import * as svg from '../assets/svg'
<div class="example-icon" v-html="svg.back_white"></div>
// css
div {
position: absolute;
bottom: 0;
height: .01rem;
width: 100%;
svg {
// 宽度和高度设置为100% ，让父亲去决定高度，自使用。
display: block;
width: 100%;
height: 100%;
}
}
<span class="delay-tip" @click="showDelayTip" v-html="svg.delay_tip">
// css
span.delay-tip {
display: inline-block;
transform: translate(-.15rem, -0.033rem);
svg { // 会重新设置svg高度和宽度，即视窗大小
width: .28rem;
height: .28rem;
}
}
3.基础
解读：使用标签，绘制路径
<svg width="300" height="180">
<path d="
M 18,3
L 46,3
L 46,40
L 61,40
L 32,68
L 3,40
L 18,40
Z
"></path>
</svg>
xmlns 属性可定义 SVG 命名空间。在XML文档中,属性和元素属于命名空间.这是为了防止来自不同技术的元素发生冲突,例如SVG< a>元素和HTML< a>如果一个被称为svg：a和另一个html：a,则可以区分该元素。
svg的类的属性和css属性不通；
fill：填充色
stroke：描边色
stroke-width：边框宽度
