HTML避免使用重复的SVG
这篇文章发布于
由 DeathGhost 编辑， 归类于 html » 当前评论 0 条。
Web页面中基本都会应用到图标这个元素，它不仅仅是页面的装饰元素，同时在视觉上可以简洁明了的引导用户进入相应的页面。起到一个潜意识交互作用。而在前端开发中最常见的方法就是使用 Font Icon 或 SVG Icon。
字体图标想必大家并不陌生，将图标生成字体文件，通过CSS @font-face 将其引入到样式表中使用；记得很早以前接触它的时候我还使用创建字体的一个工具叫fontcreat的软件通过字母数字映射生成字体文件，简直是痛苦😅，后来看到类似iconfont第三方站点通过创建或收藏最终打包下载。
字体图标一般我们会创建具有代表性公共素材以待复用。但有时候会有一些个性类图标，这时不妨使用SVG源码嵌入到HTML更为方便，也不会存在页面缓存的问题。
但是，SVG图标有个问题就是其路径标签码相对HTML元素而言比较多，一定程度影响HTML文件大小与编写。
这里引入下我个人网站上一个例子，手机SIM卡图标。
<svg
viewBox="0 0 80 80"
class="mr-5"
style="width: 20px; height: 20px; vertical-align: -5px"
>
<g>
<linearGradient
id="SVGID_1_"
gradientUnits="userSpaceOnUse"
x1="8.0222"
y1="71.8486"
x2="71.9121"
y2="7.9587"
>
<stop offset="0" style="stop-color: #f6f39c"></stop>
<stop offset="1" style="stop-color: #9e945f"></stop>
</linearGradient>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fill="url(#SVGID_1_)"
d="M79.53,61.33c0,3.87-3.14,7.01-7.01,7.01H7.41
c-3.87,0-7.01-3.14-7.01-7.01V18.48c0-3.87,3.14-7.01,7.01-7.01h65.1c3.87,0,7.01,3.14,7.01,7.01V61.33z"
></path>
<polygon
fill="#040000"
points="0.4,20.87 38.7,20.87 38.7,20.41 0.4,20.41 0.4,20.87 "
></polygon>
<polygon
fill="#040000"
points="38.93,20.64 38.93,11.52 38.47,11.52 38.47,20.64 38.93,20.64 "
></polygon>
<polygon
fill="#040000"
points="79.53,20.36 42.29,20.36 42.29,20.82 79.53,20.82 79.53,20.36 "
></polygon>
<polygon
fill="#040000"
points="42.51,20.59 42.51,11.47 42.06,11.47 42.06,20.59 42.51,20.59 "
></polygon>
<polygon
fill="#040000"
points="0.41,59.24 38.86,59.24 38.86,58.79 0.41,58.79 0.41,59.24 "
></polygon>
<polygon
fill="#040000"
points="38.63,59.02 38.63,68.29 39.09,68.29 39.09,59.02 38.63,59.02 "
></polygon>
<polygon
fill="#040000"
points="79.53,58.84 43.05,58.84 43.05,59.29 79.53,59.29 79.53,58.84 "
></polygon>
<polygon
fill="#040000"
points="42.82,59.07 42.82,68.34 43.28,68.34 43.28,59.07 42.82,59.07 "
></polygon>
<path
fill="#040000"
d="M39.41,31.22c-0.68,0-1.34,0.09-1.97,0.23l0.1,0.44c0.6-0.14,1.22-0.22,1.86-0.22V31.22L39.41,31.22z
M37.5,31.44H0.43v0.45H37.5V31.44L37.5,31.44z M37.5,31.9h0.02l0.03,0l-0.05-0.22V31.9L37.5,31.9z M0.43,48.27H37.5v-0.45H0.43
V48.27L0.43,48.27z M37.44,48.26c0.63,0.15,1.29,0.23,1.97,0.23v-0.45c-0.64,0-1.26-0.08-1.86-0.22L37.44,48.26L37.44,48.26z
M37.55,47.82l-0.03-0.01H37.5v0.23L37.55,47.82L37.55,47.82z M39.41,48.5c4.78,0,8.65-3.87,8.65-8.64H47.6
c0,2.26-0.92,4.31-2.4,5.79c-1.49,1.48-3.53,2.4-5.79,2.4V48.5L39.41,48.5z M39.41,48.04L39.41,48.04v0.23V48.04L39.41,48.04z
M48.06,39.86c0-4.77-3.87-8.64-8.65-8.64v0.46c2.26,0,4.31,0.92,5.79,2.4c1.48,1.48,2.4,3.53,2.4,5.79H48.06L48.06,39.86z
M47.6,39.86L47.6,39.86h0.23H47.6L47.6,39.86z M39.41,31.67L39.41,31.67v-0.23V31.67L39.41,31.67z"
></path>
<polygon
fill="#040000"
points="47.83,39.78 79.29,39.78 79.29,39.33 47.83,39.33 47.83,39.78 "
></polygon>
<path
fill="#040000"
d="M39.25,31.19c-1.45-1.08-2.21-2.81-2.26-4.76c-0.05-1.95,0.62-4.1,2.04-6l-0.36-0.27
c-2.93,3.93-2.84,9.02,0.31,11.39L39.25,31.19L39.25,31.19z"
></path>
<path
fill="#040000"
d="M38.95,58.92c-1.45-1.08-2.21-2.81-2.25-4.76c-0.05-1.95,0.62-4.11,2.03-6l-0.36-0.27
c-2.93,3.93-2.84,9.02,0.31,11.39L38.95,58.92L38.95,58.92z"
></path>
</g>
</svg>这个示例图可能有点复杂，不妨我们用Illustrator画一个简单的五角星，看看其内容信息。
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 640 1024" style="enable-background:new 0 0 640 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFF00;}
</style>
<g>
<polygon class="st0" points="460.73,375.68 396.5,469.45 437.33,575.53 328.3,543.42 240.03,615.03 236.88,501.41 141.5,439.59
248.58,401.49 277.9,291.67 347.23,381.74 "/>
</g>
</svg>或者你再将其精简
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 1024"><path fill="#ff0" d="M460.73 375.68l-64.23 93.77 40.83 106.08-109.03-32.11-88.27 71.61-3.15-113.62-95.38-61.82 107.08-38.1 29.32-109.82 69.33 90.07z"/></svg>SVG图标示例
创建一个HTML菜单，分别为：移动手机卡、联通手机卡与电信手机卡，在文本前添加SVG同样的图标，将会是这样。
<menu>
<li>
<svg
viewBox="0 0 80 80"
class="mr-5"
style="width: 20px; height: 20px; vertical-align: -5px"
>
<linearGradient
id="a"
gradientUnits="userSpaceOnUse"
x1="8.022"
y1="71.849"
x2="71.912"
y2="7.959"
>
<stop offset="0" stop-color="#f6f39c" />
<stop offset="1" stop-color="#9e945f" />
</linearGradient>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fill="url(#a)"
d="M79.53 61.33c0 3.87-3.14 7.01-7.01 7.01H7.41C3.54 68.34.4 65.2.4 61.33V18.48c0-3.87 3.14-7.01 7.01-7.01h65.1c3.87 0 7.01 3.14 7.01 7.01v42.85z"
/>
<path fill="#040000" d="M.4 20.87h38.3v-.46H.4v.46z" />
<path
fill="#040000"
d="M38.93 20.64v-9.12h-.46v9.12h.46zM79.53 20.36H42.29v.46h37.24v-.46z"
/>
<path
fill="#040000"
d="M42.51 20.59v-9.12h-.45v9.12h.45zM.41 59.24h38.45v-.45H.41v.45z"
/>
<path
fill="#040000"
d="M38.63 59.02v9.27h.46v-9.27h-.46zM79.53 58.84H43.05v.45h36.48v-.45z"
/>
<path
fill="#040000"
d="M42.82 59.07v9.27h.46v-9.27h-.46zM39.41 31.22c-.68 0-1.34.09-1.97.23l.1.44c.6-.14 1.22-.22 1.86-.22v-.45h.01zm-1.91.22H.43v.45H37.5v-.45zm0 .46h.05l-.05-.22v.22zM.43 48.27H37.5v-.45H.43v.45zm37.01-.01a8.5 8.5 0 0 0 1.97.23v-.45c-.64 0-1.26-.08-1.86-.22l-.11.44zm.11-.44l-.03-.01h-.02v.23l.05-.22zm1.86.68c4.78 0 8.65-3.87 8.65-8.64h-.46c0 2.26-.92 4.31-2.4 5.79a8.188 8.188 0 0 1-5.79 2.4v.45zm0-.46v.23-.23zm8.65-8.18c0-4.77-3.87-8.64-8.65-8.64v.46c2.26 0 4.31.92 5.79 2.4a8.17 8.17 0 0 1 2.4 5.79h.46v-.01zm-.46 0h.23-.23zm-8.19-8.19v-.23.23z"
/>
<path
fill="#040000"
d="M47.83 39.78h31.46v-.45H47.83v.45zM39.25 31.19c-1.45-1.08-2.21-2.81-2.26-4.76-.05-1.95.62-4.1 2.04-6l-.36-.27c-2.93 3.93-2.84 9.02.31 11.39l.27-.36zM38.95 58.92c-1.45-1.08-2.21-2.81-2.25-4.76-.05-1.95.62-4.11 2.03-6l-.36-.27c-2.93 3.93-2.84 9.02.31 11.39l.27-.36z"
/>
</svg>
移动手机卡
</li>
<li>
<svg
viewBox="0 0 80 80"
class="mr-5"
style="width: 20px; height: 20px; vertical-align: -5px"
>
<linearGradient
id="a"
gradientUnits="userSpaceOnUse"
x1="8.022"
y1="71.849"
x2="71.912"
y2="7.959"
>
<stop offset="0" stop-color="#f6f39c" />
<stop offset="1" stop-color="#9e945f" />
</linearGradient>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fill="url(#a)"
d="M79.53 61.33c0 3.87-3.14 7.01-7.01 7.01H7.41C3.54 68.34.4 65.2.4 61.33V18.48c0-3.87 3.14-7.01 7.01-7.01h65.1c3.87 0 7.01 3.14 7.01 7.01v42.85z"
/>
<path fill="#040000" d="M.4 20.87h38.3v-.46H.4v.46z" />
<path
fill="#040000"
d="M38.93 20.64v-9.12h-.46v9.12h.46zM79.53 20.36H42.29v.46h37.24v-.46z"
/>
<path
fill="#040000"
d="M42.51 20.59v-9.12h-.45v9.12h.45zM.41 59.24h38.45v-.45H.41v.45z"
/>
<path
fill="#040000"
d="M38.63 59.02v9.27h.46v-9.27h-.46zM79.53 58.84H43.05v.45h36.48v-.45z"
/>
<path
fill="#040000"
d="M42.82 59.07v9.27h.46v-9.27h-.46zM39.41 31.22c-.68 0-1.34.09-1.97.23l.1.44c.6-.14 1.22-.22 1.86-.22v-.45h.01zm-1.91.22H.43v.45H37.5v-.45zm0 .46h.05l-.05-.22v.22zM.43 48.27H37.5v-.45H.43v.45zm37.01-.01a8.5 8.5 0 0 0 1.97.23v-.45c-.64 0-1.26-.08-1.86-.22l-.11.44zm.11-.44l-.03-.01h-.02v.23l.05-.22zm1.86.68c4.78 0 8.65-3.87 8.65-8.64h-.46c0 2.26-.92 4.31-2.4 5.79a8.188 8.188 0 0 1-5.79 2.4v.45zm0-.46v.23-.23zm8.65-8.18c0-4.77-3.87-8.64-8.65-8.64v.46c2.26 0 4.31.92 5.79 2.4a8.17 8.17 0 0 1 2.4 5.79h.46v-.01zm-.46 0h.23-.23zm-8.19-8.19v-.23.23z"
/>
<path
fill="#040000"
d="M47.83 39.78h31.46v-.45H47.83v.45zM39.25 31.19c-1.45-1.08-2.21-2.81-2.26-4.76-.05-1.95.62-4.1 2.04-6l-.36-.27c-2.93 3.93-2.84 9.02.31 11.39l.27-.36zM38.95 58.92c-1.45-1.08-2.21-2.81-2.25-4.76-.05-1.95.62-4.11 2.03-6l-.36-.27c-2.93 3.93-2.84 9.02.31 11.39l.27-.36z"
/>
</svg>
联通手机卡
</li>
<li>
<svg
viewBox="0 0 80 80"
class="mr-5"
style="width: 20px; height: 20px; vertical-align: -5px"
>
<linearGradient
id="a"
gradientUnits="userSpaceOnUse"
x1="8.022"
y1="71.849"
x2="71.912"
y2="7.959"
>
<stop offset="0" stop-color="#f6f39c" />
<stop offset="1" stop-color="#9e945f" />
</linearGradient>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fill="url(#a)"
d="M79.53 61.33c0 3.87-3.14 7.01-7.01 7.01H7.41C3.54 68.34.4 65.2.4 61.33V18.48c0-3.87 3.14-7.01 7.01-7.01h65.1c3.87 0 7.01 3.14 7.01 7.01v42.85z"
/>
<path fill="#040000" d="M.4 20.87h38.3v-.46H.4v.46z" />
<path
fill="#040000"
d="M38.93 20.64v-9.12h-.46v9.12h.46zM79.53 20.36H42.29v.46h37.24v-.46z"
/>
<path
fill="#040000"
d="M42.51 20.59v-9.12h-.45v9.12h.45zM.41 59.24h38.45v-.45H.41v.45z"
/>
<path
fill="#040000"
d="M38.63 59.02v9.27h.46v-9.27h-.46zM79.53 58.84H43.05v.45h36.48v-.45z"
/>
<path
fill="#040000"
d="M42.82 59.07v9.27h.46v-9.27h-.46zM39.41 31.22c-.68 0-1.34.09-1.97.23l.1.44c.6-.14 1.22-.22 1.86-.22v-.45h.01zm-1.91.22H.43v.45H37.5v-.45zm0 .46h.05l-.05-.22v.22zM.43 48.27H37.5v-.45H.43v.45zm37.01-.01a8.5 8.5 0 0 0 1.97.23v-.45c-.64 0-1.26-.08-1.86-.22l-.11.44zm.11-.44l-.03-.01h-.02v.23l.05-.22zm1.86.68c4.78 0 8.65-3.87 8.65-8.64h-.46c0 2.26-.92 4.31-2.4 5.79a8.188 8.188 0 0 1-5.79 2.4v.45zm0-.46v.23-.23zm8.65-8.18c0-4.77-3.87-8.64-8.65-8.64v.46c2.26 0 4.31.92 5.79 2.4a8.17 8.17 0 0 1 2.4 5.79h.46v-.01zm-.46 0h.23-.23zm-8.19-8.19v-.23.23z"
/>
<path
fill="#040000"
d="M47.83 39.78h31.46v-.45H47.83v.45zM39.25 31.19c-1.45-1.08-2.21-2.81-2.26-4.76-.05-1.95.62-4.1 2.04-6l-.36-.27c-2.93 3.93-2.84 9.02.31 11.39l.27-.36zM38.95 58.92c-1.45-1.08-2.21-2.81-2.25-4.76-.05-1.95.62-4.11 2.03-6l-.36-.27c-2.93 3.93-2.84 9.02.31 11.39l.27-.36z"
/>
</svg>
电信手机卡
</li>
</menu>相对字体图标或图片路径在HTML里的表现，亦显得复杂，更何况页面多处使用，会显得更为繁杂；同时多次引用将会使得HTML文件更大，不易维护，严重影响网站的性能。
当然了，也可以将其归为文件，元素将其引入即可。但这样又多了一个HTTP请求，同样也会存在缓存问题与维护问题。
那有没有避免其源码的重复堆积呢？
symbol元素用来定义一个图形模板对象，它可以用一个<use>元素实例化。
也就是使用 <symbol> 元素，定义一次SVG，然后在任意位置将其与 <use> 元素一起使用，而无需重复堆积SVG源码内容。
<button>
<svg style="width: 20px; height: 20px">
<use href="#cart"></use>
</svg>
购物车
</button>
<button>
<svg style="width: 20px; height: 20px">
<use href="#like"></use>
</svg>
我喜欢
</button>
<svg style="display: none">
<!-- 购物车 -->
<symbol id="cart" viewBox="0 0 1024 1024">
<path d="M864 176l16-96c61.36 11.408 114.176 65.296 128 128l-112 16" fill="#CBE9EA" p-id="4888"></path>
<path d="M683.856 247.984c66.24-66.224 155.872-84.16 200.016-40 44.16 44.16 26.24 133.792-40 200.032-66.24 66.224-155.856 84.16-200.016 40s-26.24-133.792 40-200.032z" fill="#CBE9EA" p-id="4889"></path>
<path d="M784 176l-80 128h192c-55.232-0.096-114.032-40.464-112-128z" fill="#ADC6C7" p-id="4890"></path>
<path d="M720.368 138.176L442.176 63.632l-74.544 278.192 278.192 74.544 74.544-278.192z" fill="#FFD140" p-id="4891"></path>
<path d="M576 96c32.672 55.232-155.536 235.328-176 112v96h112l128-192-64-16z" fill="#CCA733" p-id="4892"></path>
<path d="M171.728 420.272A142.368 142.368 0 0 1 112 304c0-79.472 64.528-144 144-144a142.368 142.368 0 0 1 116.272 59.728A140.384 140.384 0 0 0 288 192c-79.472 0-144 64.528-144 144 0 31.504 10.144 60.672 27.728 84.272z" fill="#FFFFFF" p-id="4893"></path>
<path d="M171.728 420.272A140.384 140.384 0 0 1 144 336c0-79.472 64.528-144 144-144 31.504 0 60.672 10.144 84.272 27.728A140.384 140.384 0 0 1 400 304c0 79.472-64.528 144-144 144a140.384 140.384 0 0 1-84.272-27.728z" fill="#5AB947" p-id="4894"></path>
<path d="M976 528H48l43.68 436.784A48 48 0 0 0 139.44 1008h745.12a48 48 0 0 0 47.76-43.216L976 528z" fill="#FFD140" p-id="4895"></path>
<path d="M48 528h928v64H48z" fill="#CCA733" p-id="4896"></path>
<path d="M1008 336a32 32 0 0 0-32-32H48a32 32 0 0 0-32 32v160a32 32 0 0 0 32 32h928a32 32 0 0 0 32-32V336z" fill="#FFFFFF" p-id="4897"></path>
<path d="M1008 336v160a32 32 0 0 1-32 32H48v-32h896a32 32 0 0 0 32-32v-128h32z" fill="#CCA733" p-id="4898"></path>
<path d="M976 336v128a32 32 0 0 1-32 32H48v-128a32 32 0 0 1 32-32h896z" fill="#FFD140" p-id="4899"></path>
<path d="M511.68 425.392a75.68 75.68 0 0 1-15.68-29.984 80 80 0 0 1 8-60.704L657.232 69.28a80 80 0 0 1 146.56 19.296l0.336 2.016A75.92 75.92 0 0 0 782.512 72a80 80 0 0 0-109.28 29.28L520 366.704a79.072 79.072 0 0 0-8.32 58.688z" fill="#FFFFFF" p-id="4900"></path>
<path d="M511.68 425.392a79.072 79.072 0 0 1 8.32-58.688L673.232 101.28a80 80 0 0 1 109.28-29.28c8.192 4.72 15.392 10.816 21.616 18.592a79.072 79.072 0 0 1-8.32 58.688L642.56 414.704a80 80 0 0 1-109.28 29.28 76.336 76.336 0 0 1-21.6-18.592z" fill="#F73B2F" p-id="4901"></path>
<path d="M253.344 610.656a40.64 40.64 0 0 1 20.592 11.408c9.008 8.992 14.064 21.2 14.064 33.936v208c0 12.736-5.056 24.944-14.064 33.936a47.936 47.936 0 0 1-67.872 0 40.64 40.64 0 0 1-11.408-20.592L208 880c12.736 0 24.944-5.056 33.936-14.064A47.936 47.936 0 0 0 256 832V624l-2.656-13.344z" fill="#D73636" p-id="4902"></path>
<path d="M253.344 610.656L256 624v208c0 12.736-5.056 24.944-14.064 33.936A47.936 47.936 0 0 1 208 880l-13.344-2.656L192 864V656c0-12.736 5.056-24.944 14.064-33.936A47.936 47.936 0 0 1 240 608l13.344 2.656z" fill="#F73B2F" p-id="4903"></path>
<path d="M429.344 610.656a40.64 40.64 0 0 1 20.592 11.408c9.008 8.992 14.064 21.2 14.064 33.936v208c0 12.736-5.056 24.944-14.064 33.936a47.936 47.936 0 0 1-67.872 0 40.64 40.64 0 0 1-11.408-20.592L384 880c12.736 0 24.944-5.056 33.936-14.064A47.936 47.936 0 0 0 432 832V624l-2.656-13.344z" fill="#D73636" p-id="4904"></path>
<path d="M429.344 610.656L432 624v208c0 12.736-5.056 24.944-14.064 33.936A47.936 47.936 0 0 1 384 880l-13.344-2.656L368 864V656c0-12.736 5.056-24.944 14.064-33.936A47.936 47.936 0 0 1 416 608l13.344 2.656z" fill="#F73B2F" p-id="4905"></path>
<path d="M621.344 610.656a40.64 40.64 0 0 1 20.592 11.408c9.008 8.992 14.064 21.2 14.064 33.936v208c0 12.736-5.056 24.944-14.064 33.936a47.936 47.936 0 0 1-67.872 0 40.64 40.64 0 0 1-11.408-20.592L576 880c12.736 0 24.944-5.056 33.936-14.064A47.936 47.936 0 0 0 624 832V624l-2.656-13.344z" fill="#D73636" p-id="4906"></path>
<path d="M621.344 610.656L624 624v208c0 12.736-5.056 24.944-14.064 33.936A47.936 47.936 0 0 1 576 880l-13.344-2.656L560 864V656c0-12.736 5.056-24.944 14.064-33.936A47.936 47.936 0 0 1 608 608l13.344 2.656z" fill="#F73B2F" p-id="4907"></path>
<path d="M797.344 610.656a40.64 40.64 0 0 1 20.592 11.408c9.008 8.992 14.064 21.2 14.064 33.936v208c0 12.736-5.056 24.944-14.064 33.936a47.936 47.936 0 0 1-67.872 0 40.64 40.64 0 0 1-11.408-20.592L752 880c12.736 0 24.944-5.056 33.936-14.064A47.936 47.936 0 0 0 800 832V624l-2.656-13.344z" fill="#D73636" p-id="4908"></path>
<path d="M797.344 610.656L800 624v208c0 12.736-5.056 24.944-14.064 33.936A47.936 47.936 0 0 1 752 880l-13.344-2.656L736 864V656c0-12.736 5.056-24.944 14.064-33.936A47.936 47.936 0 0 1 784 608l13.344 2.656z" fill="#F73B2F" p-id="4909"></path>
</symbol>
<!-- 我喜欢 -->
<symbol id="like" viewBox="0 0 1024 1024">
<path d="M895.36 243.904a251.52 251.52 0 0 0-355.776 0l-20.096 20.096-20.096-20.096A251.52 251.52 0 0 0 143.616 599.68S466.24 926.72 512 928c14.336 0.384 86.4-59.52 164.224-128.192l-0.512-0.64a22.016 22.016 0 0 0-11.968-40.896 21.76 21.76 0 0 0-14.784 5.888l-0.064-0.064 62.336-56.832a22.08 22.08 0 0 0-7.808 16.704 22.4 22.4 0 0 0 22.4 22.464c5.44 0 10.24-2.176 14.208-5.44l0.256 0.32 50.048-45.76-0.448-0.448a22.08 22.08 0 0 0-16.768-36.992 21.952 21.952 0 0 0-14.656 5.824l80.384-73.472 0.512 0.512a22.08 22.08 0 0 0-5.696 14.592 22.4 22.4 0 0 0 22.4 22.464 22.016 22.016 0 0 0 14.272-5.504l0.32 0.384 24.832-23.168a251.776 251.776 0 0 0-0.128-355.84z" fill="" p-id="2018"></path>
<path d="M510.976 878.656c-51.008-33.344-207.168-180.416-335.488-310.528a206.976 206.976 0 0 1-0.192-292.544c39.04-39.104 91.008-60.608 146.24-60.608s107.136 21.504 146.176 60.544l51.84 51.84 51.84-51.776c39.04-39.04 90.944-60.544 146.176-60.544s107.2 21.504 146.176 60.544c39.04 39.04 60.544 90.944 60.544 146.24s-21.504 107.136-60.544 146.176c-140.096 131.776-301.76 276.032-352.768 310.656z" fill="#FF5F5F" p-id="2019"></path>
<path d="M308.032 641.984a15.872 15.872 0 0 1-10.112-3.648 757.12 757.12 0 0 1-53.504-48.896 875.968 875.968 0 0 0-25.856-24.64C141.376 495.488 145.344 423.616 145.536 420.544 143.808 318.976 237.376 264.64 241.344 262.4a16 16 0 0 1 15.808 27.84c-0.832 0.448-81.088 47.488-79.744 131.2-0.064 3.648-2.368 61.248 62.528 119.552 8.704 7.808 17.536 16.448 26.816 25.536 15.616 15.36 31.808 31.168 51.328 47.104a15.936 15.936 0 1 1-10.048 28.352zM422.656 751.36a15.872 15.872 0 0 1-11.2-4.544l-61.312-60.032a16 16 0 1 1 22.4-22.912l61.312 60.032a16 16 0 0 1-11.2 27.456z" fill="#FFFFFF" p-id="2020"></path>
</symbol>
</svg>即：用ID标记<symbol>，使用 <use> 元素在 href 属性中引用符号定义的ID，在所需位置将其渲染即可。
这样下来，一定程度上就会降低HTML文件大小；工作中一直使用框架，很少接触原生方法，在此记录。当然了，你也可以将其引入JS文件中作为变量插入到HTML中。
上一篇： HTML ... 还有这操作？
