svg是H5新增的一个标签，但是里面包含大量的属性，如果要我们自己用代码编写svg图标，复杂的难度很大，换个角度，我们可以自己画图然后在成svg代码；
1.首先在百度搜索svg在线编辑器，在编辑器中可以画出自己想要的图标，然后再把图标导出为svg图片，把该图片拖入text编辑器就自动展示了svg代码，然后我们只需将这些代码放入dom标签中就OK了：
<template>
<div>
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">-->
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<path id="svg_1" d="m302.532736,159.999293c44.527877,-122.855286 218.989559,0 0,157.956797c-218.989559,-157.956797 -44.527877,-280.812083 0,-157.956797z" stroke-width="1.5" stroke="#000" fill="#ff0f23"/>
<text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_3" y="186.5" x="236.5" stroke-width="0" stroke="#000" fill="#56ff56">I Love You</text>
<path id="svg_4" d="m184.5,257.5l0,0zl231,-124" stroke-linecap="undefined" stroke-linejoin="undefined" stroke-width="1.5" stroke="#000" fill="#56ff56"/>
</g>
</svg>
</div>
</template>