【SVGスプライト】SVGをsymbolタグを使って画像書き出そう！│関東・名古屋・福岡のホームページ制作会社│アイエムワークス株式会社

070-2017-3870 無料相談・お見積り

BLOG

開発者ブログ

【SVGスプライト】SVGをsymbolタグを使って画像書き出そう！

SVGをsymbolタグを使って表示させる方法を解説！

Web制作で何かと便利なSVGですが、Web制作においていくつかの読み込む方法があります。
今回は、特に便利だと思っているsymbolタグを使った書き出し方法を解説していきます。

SVGとは？
- SVGの特徴と利点
- SVGの使用例
SVGスプライトとは？
- SVGスプライトの基本構造
- スプライトの呼び出し方法
AIでアイコン作成からSVGスプライト化までの流れ
HTMLでSVG画像を呼び出し
もっと便利な使い方例
まとめ

SVGとは？

SVG（Scalable Vector Graphics）とは、画像をXML形式で記述するベクター画像フォーマットです。
要するに、Adobe Illustratorで作った画像のようなものです。

SVGは拡大縮小に強く、解像度に依存しないため、ウェブページやデジタルコンテンツで広く使われています。
以下はSVGの特徴と利点です。

SVGの特徴と利点

ベクター形式： SVGはベクター画像で、点とパスを使って描画します。このため、どれだけ拡大・縮小しても画像がぼやけません。ロゴやアイコン、イラストなどに最適です。

テキストベース： SVGはXMLベースのテキストファイルで構成されており、コードとして編集が可能です。HTMLやCSS、JavaScriptと組み合わせて動的にスタイルを変更したり、アニメーションを加えたりできます。

軽量で読み込みが速い：複雑な画像でもファイルサイズが小さく、ページの読み込み速度を保ちながら高解像度の画像を表示できます。

インタラクティブ性： SVGはJavaScriptを使って操作でき、クリックやホバーなどのユーザーインタラクションに応じて動的な変化を加えられます。

SVGの使用例

ウェブアイコンやロゴ：サイズが自在で、ページのデザインに合わせて調整可能。

グラフや図：データに基づいた可視化がしやすく、見やすいグラフを表示可能。

アニメーション：アニメーションを追加することで、視覚的に魅力的なコンテンツを提供。

SVGスプライトとは？

SVGスプライトとは、複数のSVGアイコンや画像を1つのSVGファイルにまとめたものです。

ウェブページにアイコンや画像を複数使用する場合、SVGスプライトを使うと効率的に画像を管理・表示できます。SVGスプライトを使うことで、HTTPリクエストを削減し、ウェブページのパフォーマンスが向上します。

SVGスプライトの基本構造

SVGスプライトは、各アイコンを<symbol>タグで定義します。
<symbol>タグ内にIDを割り当て、アイコンごとに識別します。

以下はSVGスプライトの記述例です。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
　　<!-- アイコン1つ目 -->
    <symbol id="icon-home" viewBox="0 0 24 24">
        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </symbol>
　　<!-- アイコン2つ目 -->
    <symbol id="icon-user" viewBox="0 0 24 24">
        <path d="M12 12c2.67 0 8 1.34 8 4v2H4v-2c0-2.66 5.33-4 8-4zm0-2a4 4 0 100-8 4 4 0 000 8z"/>
    </symbol>
</svg>

スプライトの呼び出し方法

HTML内でSVGスプライトを呼び出すには、<use>タグを使用します。
xlink:href属性またはhref属性でスプライト内のIDを指定することで呼び出すことができます。

<svg class="icon">
    <use xlink:href="#icon-home"></use>
</svg>

<svg class="icon">
    <use xlink:href="#icon-user"></use>
</svg>

このように、SVGスプライトは効率的で柔軟な画像管理手法で、特にアイコンや小さな画像が多いウェブサイトで有効です。

AIでアイコン作成からSVGスプライト化までの流れ

まずは、Illustratorでアイコンを用意します。
今回は以下のアイコン３種類を用意しました。
※Illustratorからの画像の書き出し方法はいくつかあるので、ご自身のやりやすい方法で構いません。

１.IllustratorからSVGで書き出し

まずは、Illustratorで制作した画像をSVG形式で出力します。
アセットの書き出しが画面に無い場合は、「ウィンドウ」→「アセットの書き出し」の順でメニューを選択してもらえれば表示されます。
※グレーの枠は見やすくするために配置しており、実際には書き出しませんのでご注意ください。

②は、まとめてドラッグすることで、一気にアセットの書き出しに入れる事が出来ますが、真ん中の画像のようにレイヤーがわかれているような画像は、予めグループ化するなどの対応が必要です。

この時点での名前はどーでも良いのですが、わかりやすくするためblank.svg、home.svg、right.svgという名前で書き出しました。

以下は、フォルダに書き出したスクショです。

２.エディッタで編集

次のステップは、先ほど書き出したSVGファイルをHTMLエディッタで編集します。

以下は、AIから書き出した直後の「home.svg」のコードです。

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_2" data-name="レイヤー 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.5 12">
  <defs>
    <style>
      .cls-1 {
        fill: #231815;
        stroke-width: 0px;
      }
    </style>
  </defs>
  <g id="_レイヤー_1-2" data-name="レイヤー 1">
    <path class="cls-1" d="m6.39.13c.21-.18.52-.18.73,0l6.19,5.25c.24.2.27.56.07.79s-.56.26-.79.07l-.58-.49v4.37c0,1.04-.84,1.88-1.88,1.88H3.37c-1.04,0-1.88-.84-1.88-1.88v-4.37l-.57.49c-.24.2-.59.17-.79-.07s-.17-.59.07-.79L6.39.13Zm.36,1.17l-4.12,3.5v5.33c0,.42.33.75.75.75h1.12v-3.56c0-.52.42-.94.94-.94h2.62c.52,0,.94.42.94.94v3.56h1.12c.42,0,.75-.33.75-.75v-5.33L6.75,1.3Zm-1.12,9.57h2.25v-3.38h-2.25v3.38Z"/>
  </g>
</svg>

ここで必要なのは、viewBoxとpathの2つです。
不必要な箇所を削除したのが以下の形です。

// home.svg
viewBox="0 0 13.5 12"
<path d="m6.39.13c.21-.18.52-.18.73,0l6.19,5.25c.24.2.27.56.07.79s-.56.26-.79.07l-.58-.49v4.37c0,1.04-.84,1.88-1.88,1.88H3.37c-1.04,0-1.88-.84-1.88-1.88v-4.37l-.57.49c-.24.2-.59.17-.79-.07s-.17-.59.07-.79L6.39.13Zm.36,1.17l-4.12,3.5v5.33c0,.42.33.75.75.75h1.12v-3.56c0-.52.42-.94.94-.94h2.62c.52,0,.94.42.94.94v3.56h1.12c.42,0,.75-.33.75-.75v-5.33L6.75,1.3Zm-1.12,9.57h2.25v-3.38h-2.25v3.38Z"/>

同じように、blank.svg、right.svgも不必要なものを削除してSVGスプライト化の準備をします。

// blank.svg
viewBox="0 0 12 12"
<path d="m4.69.75c.31,0,.56.25.56.56s-.25.56-.56.56H1.69c-.31,0-.56.25-.56.56v7.88c0,.31.25.56.56.56h7.88c.31,0,.56-.25.56-.56v-3c0-.31.25-.56.56-.56s.56.25.56.56v3c0,.93-.75,1.69-1.69,1.69H1.69c-.93,0-1.69-.75-1.69-1.69V2.44C0,1.5.75.75,1.69.75h3Zm3-.75h3.75c.31,0,.56.25.56.56v3.75c0,.31-.25.56-.56.56s-.56-.25-.56-.56V1.92l-5.23,5.23c-.22.22-.57.22-.79,0-.22-.22-.22-.57,0-.79L10.08,1.12h-2.39c-.31,0-.56-.25-.56-.56s.25-.56.56-.56Z"/>

// blank.svg
viewBox="0 0 4.88 8.62"
<path d="m4.71,3.91c.22.22.22.58,0,.79l-3.75,3.75c-.22.22-.58.22-.79,0-.22-.22-.22-.58,0-.79l3.35-3.35L.17.96C-.06.74-.06.38.17.16.39-.05.74-.06.96.16l3.75,3.75Z"/>

３.SVGスプライトのフォーマットにコピー

SVGスプライトのフォーマットは予め決められています。
決められたフォーマットは、先にも解説しましたが、改めて以下の通りです。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
ここに書いていきます。
</svg>

このフォーマットに、先ほど必要な箇所だけ書き出したSVGを当てはめていきましょう。
以下は手順です。

1.symbolタグを書きIDを振ります。このID名でHTML側で呼び出すのでわかりやすい名前にしましょう。

2.symbolタグにviewBoxを追加します。

3.symbolタグの中にSVGのpathを追加します。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <!-- home.svg -->
    <symbol id="icon-home" viewBox="0 0 13.5 12">
        <path d="m6.39.13c.21-.18.52-.18.73,0l6.19,5.25c.24.2.27.56.07.79s-.56.26-.79.07l-.58-.49v4.37c0,1.04-.84,1.88-1.88,1.88H3.37c-1.04,0-1.88-.84-1.88-1.88v-4.37l-.57.49c-.24.2-.59.17-.79-.07s-.17-.59.07-.79L6.39.13Zm.36,1.17l-4.12,3.5v5.33c0,.42.33.75.75.75h1.12v-3.56c0-.52.42-.94.94-.94h2.62c.52,0,.94.42.94.94v3.56h1.12c.42,0,.75-.33.75-.75v-5.33L6.75,1.3Zm-1.12,9.57h2.25v-3.38h-2.25v3.38Z"/>
    </symbol>
</svg>

続けて、blank.svg、right.svgも書いていきます。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <!-- home.svg -->
    <symbol id="icon-home" viewBox="0 0 13.5 12">
        <path d="m6.39.13c.21-.18.52-.18.73,0l6.19,5.25c.24.2.27.56.07.79s-.56.26-.79.07l-.58-.49v4.37c0,1.04-.84,1.88-1.88,1.88H3.37c-1.04,0-1.88-.84-1.88-1.88v-4.37l-.57.49c-.24.2-.59.17-.79-.07s-.17-.59.07-.79L6.39.13Zm.36,1.17l-4.12,3.5v5.33c0,.42.33.75.75.75h1.12v-3.56c0-.52.42-.94.94-.94h2.62c.52,0,.94.42.94.94v3.56h1.12c.42,0,.75-.33.75-.75v-5.33L6.75,1.3Zm-1.12,9.57h2.25v-3.38h-2.25v3.38Z"/>
    </symbol>
    <!-- blank.svg -->
    <symbol id="icon-blank" viewBox="0 0 12 12">
        <path d="m4.69.75c.31,0,.56.25.56.56s-.25.56-.56.56H1.69c-.31,0-.56.25-.56.56v7.88c0,.31.25.56.56.56h7.88c.31,0,.56-.25.56-.56v-3c0-.31.25-.56.56-.56s.56.25.56.56v3c0,.93-.75,1.69-1.69,1.69H1.69c-.93,0-1.69-.75-1.69-1.69V2.44C0,1.5.75.75,1.69.75h3Zm3-.75h3.75c.31,0,.56.25.56.56v3.75c0,.31-.25.56-.56.56s-.56-.25-.56-.56V1.92l-5.23,5.23c-.22.22-.57.22-.79,0-.22-.22-.22-.57,0-.79L10.08,1.12h-2.39c-.31,0-.56-.25-.56-.56s.25-.56.56-.56Z"/>
    </symbol>
    <!-- rigth.svg -->
    <symbol id="icon-rigth" viewBox="0 0 4.88 8.62">
        <path d="m4.71,3.91c.22.22.22.58,0,.79l-3.75,3.75c-.22.22-.58.22-.79,0-.22-.22-.22-.58,0-.79l3.35-3.35L.17.96C-.06.74-.06.38.17.16.39-.05.74-.06.96.16l3.75,3.75Z"/>
    </symbol>
</svg>

SVGスプライトは以上です。
次の章では、実際にHTMLで先ほど作ったSVGスプライトを呼び出してみましょう。

HTMLでSVG画像を呼び出し

HTMLでSVGを呼び出しは、以下の方法で行います。
とても簡単ですね！

<!-- home.svg -->
<svg>
    <use xlink:href="#icon-home"></use>
</svg>
<!-- blank.svg -->
<svg>
    <use xlink:href="#icon-blank"></use>
</svg>
<!-- rigth.svg -->
<svg>
    <use xlink:href="#icon-rigth"></use>
</svg>

classを付与することで、サイズや色の変更もできます。

<!-- home.svg -->
<svg class="svg-red">
    <use xlink:href="#icon-home"></use>
</svg>

.svg-red{
 fill : #cc0000;
}

SVGスプライトを使うと、この記述だけで呼び出すことができるので、コードのメンテナンス性も良いですし、サイトのパフォーマンスアップにも貢献できます。

例えば、home.svgの呼び出し方を比較してみましょう。

<!-- SVGスプライト -->
<svg>
    <use xlink:href="#icon-home"></use>
</svg>
<!-- imgタグで呼び出し -->
<img src="https://www.im-works.com/image/icon/home.svg" width="13" height="12" alt="homeアイコン" loading="lazy" role="img">

となります。
この２つを比較するだけでも文字量が全然違いますね！
また、imgタグの場合はHTTPリクエストも発生するので、その分更にパフォーマンス低下につながります。

もっと便利な使い方例

これは、案件によって良し悪しはあると思いますが、WordpressなどのPHP環境が使えるプロジェクトで使える便利なSVGの使い方の一例です。

１.SVGスプライトのカスタマイズ

まずは、SVGスプライトのpathに対してfill=”currentColor”を追加します。

<svg xmlns="http://www.w3.org/2000/svg">
    <!-- home.svg -->
    <symbol id="icon-home" viewBox="0 0 13.5 12">
        <path fill="currentColor" d="m6.39.13c.21-.18.52-.18.73,0l6.19,5.25c.24.2.27.56.07.79s-.56.26-.79.07l-.58-.49v4.37c0,1.04-.84,1.88-1.88,1.88H3.37c-1.04,0-1.88-.84-1.88-1.88v-4.37l-.57.49c-.24.2-.59.17-.79-.07s-.17-.59.07-.79L6.39.13Zm.36,1.17l-4.12,3.5v5.33c0,.42.33.75.75.75h1.12v-3.56c0-.52.42-.94.94-.94h2.62c.52,0,.94.42.94.94v3.56h1.12c.42,0,.75-.33.75-.75v-5.33L6.75,1.3Zm-1.12,9.57h2.25v-3.38h-2.25v3.38Z"/>
    </symbol>
</svg>

fill=”currentColor”を追加したら、symbol.svgなどという名前で保存しましょう。

※currentColorは、colorと同じ値を自動的に割り当ててくれる変数のような動きをする便利な機能です。

２.PHPで関数を作成

icon関数で、SVGスプライト化したSVGを呼び出す関数です。

<!-- header.phpなど -->
<?php echo file_get_contents(get_template_directory_uri() . '/path/to/sprite.svg'); ?>

function icon($id)
{
  $svg = '<svg role="img"><use xlink:href="' . $path . '#' . $id . '"/></svg>';
  return $svg;
}

セキュリティや引数が設定されていないケースへの対応は行っていませんが、基本的には問題ないと思います。

３.PHPで呼び出し

最後に、使いたい箇所で関数を使ってSVGを呼び出します。

<?php echo icon('icon-home');?>

４.サンプル

例えば、リンクボタンなどで使用できますね！

<a href="/">
    <?php echo icon('icon-home');?>
    HOME
</a>

a{
    color: #c00;
    font-size: 1.4rem;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    svg{
        width: 1.4rem;
        height: 1.4rem;
    }
}

サンプル

予め使うアイコン等が決まっている場合は比較的簡単に扱える他、いちいちfillで色を指定する必要もなく、簡単にSVGスプライトを使用できますね！
他にも良い方法はありますが、これでも充分かもしれませんね。