解像度によって画質の劣化しないSVGを利用する機会が増えてきました。
利用する箇所によって複数の箇所で同じSVGを表示することがよくあるので、方法をまとめておきます。
インラインのSVGをsymbolタグで定義すればuseタグで何度でも使用できる
プレビュー
コードサンプル
<!--↓SVG定義エリア-->
<svg aria-hidden="true" focusable="false" data-prefix="fas" class="svg-defs" role="img" xmlns="http://www.w3.org/2000/svg">
<symbol id="cannabis" viewbox="0 0 512 512">
<path fill="currentColor" d="M503.47 360.25c-1.56-.82-32.39-16.89-76.78-25.81 64.25-75.12 84.05-161.67 84.93-165.64 1.18-5.33-.44-10.9-4.3-14.77-3.03-3.04-7.12-4.7-11.32-4.7-1.14 0-2.29.12-3.44.38-3.88.85-86.54 19.59-160.58 79.76.01-1.46.01-2.93.01-4.4 0-118.79-59.98-213.72-62.53-217.7A15.973 15.973 0 0 0 256 0c-5.45 0-10.53 2.78-13.47 7.37-2.55 3.98-62.53 98.91-62.53 217.7 0 1.47.01 2.94.01 4.4-74.03-60.16-156.69-78.9-160.58-79.76-1.14-.25-2.29-.38-3.44-.38-4.2 0-8.29 1.66-11.32 4.7A15.986 15.986 0 0 0 .38 168.8c.88 3.97 20.68 90.52 84.93 165.64-44.39 8.92-75.21 24.99-76.78 25.81a16.003 16.003 0 0 0-.02 28.29c2.45 1.29 60.76 31.72 133.49 31.72 6.14 0 11.96-.1 17.5-.31-11.37 22.23-16.52 38.31-16.81 39.22-1.8 5.68-.29 11.89 3.91 16.11a16.019 16.019 0 0 0 16.1 3.99c1.83-.57 37.72-11.99 77.3-39.29V504c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-64.01c39.58 27.3 75.47 38.71 77.3 39.29a16.019 16.019 0 0 0 16.1-3.99c4.2-4.22 5.71-10.43 3.91-16.11-.29-.91-5.45-16.99-16.81-39.22 5.54.21 11.37.31 17.5.31 72.72 0 131.04-30.43 133.49-31.72 5.24-2.78 8.52-8.22 8.51-14.15-.01-5.94-3.29-11.39-8.53-14.15z"></path>
</symbol>
</svg>
<!--↑SVG定義エリア-->
<!--↓SVG利用エリア-->
<svg class="svg-view svg-gre">
<use xlink:href="#cannabis"></use>
</svg>
<svg class="svg-view svg-red">
<use xlink:href="#cannabis"></use>
</svg>
<svg class="svg-view svg-yel">
<use xlink:href="#cannabis"></use>
</svg>
<!--↑SVG利用エリア-->
.svg-defs{display: none;}
.svg-view{display: inline-block; width: 100px; height: auto;}
.svg-gre{color: #61bf80;}
解説
定義エリアではdisplay: none;にして表示を隠しています。
利用エリアでdisplay: inline-block;にして表示しています。
定義エリアでsymbolタグにid属性を与えて命名し、利用エリアのuseタグのxlink:href属性でidのsymbolを呼び出しています。
外部ファイルのSVGをsymbolタグで定義すればuseタグで何度でも使用できる
SVGファイルを下記のような外部ファイルにすれば、インラインにSVGを埋め込まなくてもuseタグでSVGを使用できます。
プレビュー
コードサンプル
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="cannabis2" viewbox="0 0 512 512"><path fill="currentColor" d="M503.47 360.25c-1.56-.82-32.39-16.89-76.78-25.81 64.25-75.12 84.05-161.67 84.93-165.64 1.18-5.33-.44-10.9-4.3-14.77-3.03-3.04-7.12-4.7-11.32-4.7-1.14 0-2.29.12-3.44.38-3.88.85-86.54 19.59-160.58 79.76.01-1.46.01-2.93.01-4.4 0-118.79-59.98-213.72-62.53-217.7A15.973 15.973 0 0 0 256 0c-5.45 0-10.53 2.78-13.47 7.37-2.55 3.98-62.53 98.91-62.53 217.7 0 1.47.01 2.94.01 4.4-74.03-60.16-156.69-78.9-160.58-79.76-1.14-.25-2.29-.38-3.44-.38-4.2 0-8.29 1.66-11.32 4.7A15.986 15.986 0 0 0 .38 168.8c.88 3.97 20.68 90.52 84.93 165.64-44.39 8.92-75.21 24.99-76.78 25.81a16.003 16.003 0 0 0-.02 28.29c2.45 1.29 60.76 31.72 133.49 31.72 6.14 0 11.96-.1 17.5-.31-11.37 22.23-16.52 38.31-16.81 39.22-1.8 5.68-.29 11.89 3.91 16.11a16.019 16.019 0 0 0 16.1 3.99c1.83-.57 37.72-11.99 77.3-39.29V504c0 4.42 3.58 8 8 8h16c4.42 0 8-3.58 8-8v-64.01c39.58 27.3 75.47 38.71 77.3 39.29a16.019 16.019 0 0 0 16.1-3.99c4.2-4.22 5.71-10.43 3.91-16.11-.29-.91-5.45-16.99-16.81-39.22 5.54.21 11.37.31 17.5.31 72.72 0 131.04-30.43 133.49-31.72 5.24-2.78 8.52-8.22 8.51-14.15-.01-5.94-3.29-11.39-8.53-14.15z"></path></symbol></svg>
<svg class="svg-view svg-gre" viewbox="0 0 512 512">
<use xlink:href="cannabis.svg#cannabis2"></use>
</svg>
<svg class="svg-view svg-red" viewbox="0 0 512 512">
<use xlink:href="cannabis.svg#cannabis2"></use>
</svg>
<svg class="svg-view svg-yel" viewbox="0 0 512 512">
<use xlink:href="cannabis.svg#cannabis2"></use>
</svg>
.svg-view{display: inline-block; width: 100px; height: auto;}
.svg-gre{color: #61bf80;}
解説
外部SVGファイルのsymbolタグにidを指定しています。
呼び出す側のHTMLのsvgタグにもviewbox属性を記述しています。useタグのxlink:href属性でSVGファイルのパスとidを指定します。
まとめ
SVGを利用する機会が増えてきたので使い方をまとめておきました。
どなたかの参考になれば嬉しいです。
