svg在html的使用

 <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
     <defs>
         <symbol viewBox='0 0 60 60' id='svgEle'>
             <path fill="#fffaaa" fill-rule='evenodd' d='M0 9.375A9.374 9.374 0 0 1 9.375 0h41.25A9.374 9.374 0 0 1 60 9.375v41.25A9.374 9.374 0 0 1 50.625 60H9.375A9.374 9.374 0 0 1 0 50.625V9.375zm35.94 30.204c-5.601 3.147-12.645 1.256-15.834-4.217-3.206-5.501-1.303-12.537 4.25-15.713 4.7-2.689 10.51-1.749 14.127 1.941L27.526 27.89a2.81 2.81 0 0 0-1.037 3.854 2.862 2.862 0 0 0 3.887 1.035l15.988-9.166a17.238 17.238 0 0 0-1.222-2.571c-4.777-8.198-15.358-11.007-23.632-6.275-8.275 4.734-11.11 15.217-6.332 23.415 4.77 8.184 15.322 10.997 23.59 6.297.877-.5 1.654-1.037 2.376-1.623l-1.31-2.248a2.868 2.868 0 0 0-3.893-1.028zm10.824-7.39l-1.418-2.425-4.911 2.798 2.835 4.846 2.454-1.399h.002a2.779     2.779 0 0 0 1.038-3.82z'>
             </path>
         </symbol>
     </defs>
 </svg>
                 

 <svg>
     <use xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href="#svgEle"></use>
 </svg>

上面两个片段是目前在html本人所见到的,相信很多人都见到过。

可能可以感觉到第一段代码是定义一个svg，第二段代码是利用id去引用第一段定义的svg，当然前期是必须使它们在同一个html文档中。例如vue可以直接在app.vue文件里引用svg.vue文件，这样其他的子组件等就可以直接通过id去使用它。

这里是菜鸟教程的介绍

现在就对所看到的做一个说明。

首先

xmlns='http://www.w3.org/2000/svg'xmlns:xlink='http://www.w3.org/1999/xlink'这两句的意思分别代表声明命名空间和声明命名空间前缀。命名空间作用简单理解就是让html识别它是什么，命名空间前缀作用简单理解就是先定义你要使用什么属性。如果你想了解的更加深入，推荐一篇文章。为什么是xml?因为xvg是使用xml格式定义图像。

后面你就可以看到defs、symbol、path、use。当然还有其本身的一些元素标签比如circle等，可以直接画出你要的简单图形。此篇暂缓。