簡単なSVGのアイコンをHTMLに埋め込んで使ってみよう！

最近は小さいアイコンなどをSVGで作るのが主流になってきました。良いことです、とてもいいことです。レスポンシブするからサイズ違いを3つほど作ったりしなくて済みます。ベクター様バンザイです。

SVGファイルの中身を見たことはありますか？
アレの中身はXMLを基本としたテキストファイルなのです。圧縮されたsvgzと言うファイルもありますが、今回はこのテキストファイルのSVGを使います。

SVGはHTML上に直接書ける

見出しの通り、svgはその中身をHTMLに貼り付けてもそのまま表示されます。そりゃもうテキストファイルですので。
例としてこのNOTEのアイコンのSVGを表示してみます。

<?xml version="1.0" encoding="UTF-8"?>
<svg width="400px" height="400px" viewBox="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
    <title>normal/logo_symbol</title>
    <desc>Created with Sketch.</desc>
    <g id="normal/logo_symbol" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect fill="#FFFFFF" x="0" y="0" width="400" height="400"></rect>
        <path d="M180.388501,169.6969 L180.388501,155.318324 C180.388501,152.698052 180.524171,151.824229 180.927578,150.479979 C182.005733,146.784785 185.646008,144.030448 189.958629,144.030448 C194.27125,144.030448 197.910324,146.851818 198.988479,150.479979 C199.393087,151.824229 199.528757,152.698052 199.528757,155.318324 L199.528757,177.490682 C199.528757,178.834933 199.528757,180.177986 199.258618,181.388171 C198.517837,184.747003 195.485075,187.771866 192.114939,188.510426 C190.902315,188.778558 189.554021,188.778558 188.205726,188.778558 L165.966674,188.778558 C163.33852,188.778558 162.462069,188.644492 161.113775,188.241097 C157.474701,187.166175 154.644843,183.538015 154.644843,179.238327 C154.644843,174.937443 157.474701,171.309283 161.113775,170.234361 C162.462069,169.830966 163.33852,169.6969 165.966674,169.6969 L180.388501,169.6969 Z M259.642514,270.215259 L140.357486,270.215259 L140.357486,165.464245 C140.357486,164.119995 140.829329,162.97804 141.773015,162.037184 L172.705744,131.196024 C173.64943,130.256366 174.79482,129.785938 176.143114,129.785938 L259.642514,129.785938 L259.642514,270.215259 Z M273.18909,106.134066 C272.582778,106.067033 271.773561,106 270.223563,106 L172.974683,106 C171.897728,106 170.819573,106.067033 170.077591,106.134066 C165.6293,106.537461 161.652852,108.620272 158.485621,111.778004 L122.295384,147.859707 C119.129354,151.018637 117.039078,154.981962 116.63567,159.416912 C116.567235,160.155472 116.5,161.230394 116.5,162.305316 L116.5,280.763379 C116.5,282.308729 116.567235,283.115519 116.63567,283.720012 C117.173547,288.759457 121.756307,293.327276 126.81091,293.864737 C127.418423,293.932967 128.226439,294 129.776437,294 L270.223563,294 C271.773561,294 272.582778,293.932967 273.18909,293.864737 C278.243693,293.327276 282.826453,288.759457 283.365531,283.720012 C283.431565,283.115519 283.5,282.308729 283.5,280.763379 L283.5,119.236621 C283.5,117.691271 283.431565,116.884481 283.365531,116.279988 C282.826453,111.240543 278.243693,106.671527 273.18909,106.134066 Z" id="Shape" fill="#41C9B4"></path>
    </g>
</svg>

（上記のXMLデータはこちらで用意されたデータを設置しています）

このように、HTMLに直接張っても大丈夫です。
これでHTMLにまとめたらファイルの読み込み数が減るので速度が上がることになるのですが、同じアイコンを何度も使う場合にとても面倒なことになってしまいます。
同じSVGアイコンを使いまわししたい場合でも大丈夫です。そういう用途に適した書き方はもう用意されております。

SVGを使いまわして使う場合のHTMLへの記入の仕方

使い回すためにはシンボルとして登録しておく必要があります。

<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="iconNote" viewBox="0 0 80 80">
    <path d="M35.497,35.225l-9.436,-0c-1.115,-0 -1.486,-0.058 -2.059,-0.229c-1.542,-0.457 -2.744,-2.001 -2.744,-3.831c-0,-1.83 1.202,-3.374 2.744,-3.831c0.573,-0.172 0.944,-0.228 2.059,-0.228l6.118,-0l0,-6.119c0,-1.116 0.058,-1.487 0.23,-2.059c0.458,-1.573 2.001,-2.746 3.83,-2.746c1.83,0 3.375,1.201 3.833,2.746c0.17,0.572 0.228,0.943 0.228,2.059l0,9.435c0,0.571 0,1.144 -0.114,1.658c-0.315,1.43 -1.602,2.716 -3.031,3.031c-0.514,0.114 -1.087,0.114 -1.658,0.114Zm30.307,34.653l-50.607,0l0,-44.574c0,-0.572 0.2,-1.057 0.6,-1.458l13.124,-13.125c0.4,-0.399 0.886,-0.599 1.458,-0.599l35.425,-0l0,59.756Zm-58.269,-52.064c-1.345,1.343 -2.23,3.031 -2.403,4.917c-0.028,0.315 -0.057,0.772 -0.057,1.229l0,50.407c0,0.658 0.029,1 0.057,1.259c0.23,2.143 2.173,4.088 4.318,4.316c0.258,0.028 0.601,0.058 1.258,0.058l59.585,-0c0.657,-0 1,-0.03 1.259,-0.058c2.143,-0.228 4.087,-2.173 4.316,-4.316c0.03,-0.259 0.057,-0.601 0.057,-1.259l-0,-68.734c-0,-0.658 -0.027,-1 -0.057,-1.259c-0.229,-2.143 -2.173,-4.088 -4.316,-4.316c-0.259,-0.028 -0.602,-0.058 -1.259,-0.058l-41.257,0c-0.458,0 -0.916,0.03 -1.229,0.058c-1.888,0.171 -3.575,1.057 -4.92,2.402l-15.352,15.354Z"/>
  </symbol>
  </defs>
</svg>

上記の様にsvgの中にsymbolを作成し、その中に個別のSVGデータを記載します。このようにすることで、HTML内にsvgのデータが登録されます。

<svg>　　
  <use xlink:href="#iconNote" />
</svg>

登録したsvgを使う場合は、上記のように<use>を使って登録したsvgを呼び出します。

ちょっとしたアイコンはHTMLの中にまとめておいておけば、無駄なロスが減ることになります。

WordPress（PHP）でsvgをまとめたい場合

WordPressでこれをやりたい場合は、直接埋め込むのではなく、まとめたsvgを別のファイルとして保存し、そのファイルを読み込ませます。

<?php include_once("theme-icons.svg"); ?>

上記のようにinclude_onceを使用してtheme-icons.svgを読み込ませるようにします。
include_onceは1回だけ読み込むための関数になります。
キャッシュされていたら読み込まなくて良いように、普通のincludeではなく、include_onceを使うようにすると、読み込みスピードのアップに繋がります。

最後に

ざっくりと説明しましたが、このようにSVGを使いこなすことで、ページの読み込みスピードアップ、レスポンシブ対応の強化、何だかコーディングがおしゃれに感じる効果などがあります。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！