【Html】使用SVG中的Symbol元素制作Icon

SVG优势

随着高清屏幕的普及，相比使用png等位图而言，使用SVG等矢量图形是一种全新的设计方式。更重要的是相比位图而言，SVG有着无可比拟的优势。

• SVG是矢量图形文件，可以随意改变大小，而不影响图标质量
• 可以用CSS样式来自由定义图标颜色尺寸
• 所有的SVG可以全部在一个文件中，节省HTTP请求
• 由于SVG也是一种XML节点的文件，所以可以使用gzip的方式把文件压缩到很小
• .....

使用方法

1. 将多个SVG图标整合到一个文件中

   <svg>
       <symbol id="icon-video" viewBox="0 0 1024 1024">
           <title>icon-video</title>
           <path d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0z m227.093333 605.013333a74.666667 74.666667 0 0 1-74.026666 74.026667H375.786667a74.666667 74.666667 0 0 1-74.026667-74.026667V463.573333a10.666667 10.666667 0 0 1 21.333333 0v141.44a52.693333 52.693333 0 0 0 52.693334 52.693334h289.28a52.693333 52.693333 0 0 0 52.693333-52.693334V463.573333a52.693333 52.693333 0 0 0-52.693333-52.693333H501.333333a10.666667 10.666667 0 0 1-9.6-5.973333l-19.413333-39.786667-106.666667 0.533333a10.666667 10.666667 0 0 1 0-21.333333l113.706667-0.533333a10.666667 10.666667 0 0 1 9.6 5.973333l19.413333 39.786667h156.693334a74.666667 74.666667 0 0 1 74.026666 74.026666z m-274.666666-26.026666V480a12.693333 12.693333 0 0 1 17.493333-11.733333l101.866667 42.026666a12.693333 12.693333 0 0 1 1.493333 23.04l-101.866667 57.066667a12.693333 12.693333 0 0 1-18.986666-11.413333z" fill="#1e8bf6" p-id="6767">
           </path>
       </symbol>
   </svg>

2. 在页面中使用

   <!-- 方式一 -->
   <script src="./assets/js/svg.js"></script>
   <svg class="icon" aria-hidden="true">
       <use xlink:href="#icon-video"></use>
   </svg>
   <!-- 方式二 -->
   <svg class="icon" aria-hidden="true">
       <use xlink:href="./assets/js/svg#icon-video"></use>
   </svg>