在HTML中复用SVG

一、背景和意义

在前端开发中，经常会使用svg来实现一些小图标，有时候这些svg实现的小图标可能在不同的位置使用，为了便于维护最好对svg代码进行复用。文本给出html中复用svg的简单示例。

二、svg代码示例

关闭图标是前端开发中很常用的一个图标，这里就以关闭图标作为示例。以上HTML代码将创建一个关闭小图标：

<svg viewBox="0 0 100 100" style="width: 2rem">
    <style>
        .line {
            stroke: #000;
            stroke-width: 10;
        }
    </style>

    <line x1="25" y1="25" x2="75" y2="75" class="line" />  <!-- 画左上到右下的线 -->
    <line x1="25" y1="75" x2="75" y2="25" class="line" />  <!-- 画左下到右上的线 -->
    <ellipse cx="50" cy="50" rx="45" ry="45" class="line" style="fill: none;"/>  <!-- 画一个圆 -->
</svg>

其运行效果如下：

三、使用defs复用svg代码

<defs>标签可以对svg代码进行复用，它需要放在<svg>标签下，另外需要用<g>标签把被复用的svg代码包裹起来。下面示例将复用关闭图标的svg代码，创建大小与颜色不同的两个关闭图标：

<svg style="display: none">  <!-- 这个svg作为复用模板，不需要展示，display设置为none -->
    <defs>
        <style>
            :root {
                --close-icon-color: #000;
            }
            .line {
                stroke: var(--close-icon-color);
                stroke-width:10;
            }
        </style>
    
        <g id="closeIcon">
            <line x1="25" y1="25" x2="75" y2="75" class="line" />  <!-- 画左上到右下的线 -->
            <line x1="25" y1="75" x2="75" y2="25" class="line" />  <!-- 画左下到右上的线 -->
            <ellipse cx="50" cy="50" rx="45" ry="45" class="line" style="fill: none;"/>  <!-- 画一个圆 -->
        </g>
    </defs>
</svg>
<svg viewBox="0 0 100 100" style="width: 2rem">
    <use href="#closeIcon"></use>
</svg>
<svg viewBox="0 0 100 100" style="--close-icon-color: #f00; width: 4rem;">
    <use href="#closeIcon"></use>
</svg>

运行效果如下：

defs标签有一个使用不便的地方是每个svg都需要viewBox属性，而viewBox属性应该取什么值又是不好记住的，需要翻看前面的代码。

四、使用symbol复用svg代码

symbol的用法与defs类似，也是在<svg>标签下，但是defs需要配合使用<defs>和<g>两个标签，而symbol只需要使用<symbol>一个标签。另外symbol还有一个优点是不需要使用额外的viewBox属性。相关代码如下：

<svg style="display: none">  <!-- 这个svg作为复用模板，不需要展示，display设置为none -->
    <symbol id="closeIcon" viewBox="0 0 100 100">
        <style>
            :root {
                --close-icon-color: #000;
            }
            .line {
                stroke: var(--close-icon-color);
                stroke-width:10;
            }
        </style>
    
        <line x1="25" y1="25" x2="75" y2="75" class="line" />  <!-- 画左上到右下的线 -->
        <line x1="25" y1="75" x2="75" y2="25" class="line" />  <!-- 画左下到右上的线 -->
        <ellipse cx="50" cy="50" rx="45" ry="45" class="line" style="fill: none;"/>  <!-- 画一个圆 -->
    </symbol>
</svg>
<svg style="width: 2rem; height: 2rem;">
    <use href="#closeIcon"></use>
</svg>
<svg class="close2" style="width: 4rem; height: 4rem; --close-icon-color: #f00;">
    <use href="#closeIcon"></use>
</svg>

运行效果为：

总体而言，symbol使用起来比defs更方便一些。