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

2025-10-27

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

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

SVGはHTML上に直接書ける

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

（便宜上、下のアイコン画像は普通の画像です）

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:1.5;">
  <g transform="matrix(1.02017,0,0,1.02017,-258.512,-642.225)">
    <g transform="matrix(1,0,0,1,312.246,691.972)">
      <path d="M0,-7.267L-47.817,-31.108L-0.033,-54.999L47.785,-31.092L0,-7.267ZM-51.578,21.947L-51.578,-24.862L-1.643,0.035L-1.6,-0.05L-1.6,46.936L-51.578,21.947ZM0.736,-62.252L-0.035,-62.638L-58.846,-33.233L-58.846,25.964L-0.031,55.371L58.781,25.965L58.781,-33.23L0.736,-62.252Z" style="fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(-0.898751,-0.43846,-0.43846,0.898751,267.067,692.323)">
      <path d="M-2.117,-13.831L3.792,-13.831L-3.194,0.49L-9.103,0.489L-2.117,-13.831Z" style="fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.898884,0.438187,0.438187,-0.898884,293.624,705.279)">
      <path d="M3.192,-0.489L9.101,-0.489L2.119,13.833L-3.79,13.834L3.192,-0.489Z" style="fill-rule:nonzero;"/>
    </g>
    <g transform="matrix(0.898809,0.438341,0.438341,-0.898809,277.216,708.287)">
      <path d="M-0.032,-4.912L23.605,-4.912L21.278,-0.139L-2.36,-0.137L-0.032,-4.912Z" style="fill-rule:nonzero;"/>
    </g>
  </g>
</svg>

このようなアイコン画像は、svgだとこのようなテキストファイルになっています。

ちなみにこのsvgファイルの中身をそのままHTMLに貼ると、svg画像はHTML内にそのまま表示されます。簡単なものはそのまま貼っても良さそうですね。

とはいえ、何度も使うようなアイコンだとこのsvgを何度もHTML内に貼り付けるのも一苦労じゃない？と思うでしょう。
同じsvgを使いまわして使う方法は無いの？と思ってる方も大丈夫。シンボルとして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="icon-about" viewBox="0 0 120 120">
        <g transform="matrix(1.02017,0,0,1.02017,-258.512,-642.225)">
          <g transform="matrix(1,0,0,1,312.246,691.972)">
            <path d="M0,-7.267L-47.817,-31.108L-0.033,-54.999L47.785,-31.092L0,-7.267ZM-51.578,21.947L-51.578,-24.862L-1.643,0.035L-1.6,-0.05L-1.6,46.936L-51.578,21.947ZM0.736,-62.252L-0.035,-62.638L-58.846,-33.233L-58.846,25.964L-0.031,55.371L58.781,25.965L58.781,-33.23L0.736,-62.252Z" style="fill-rule:nonzero;"/>
          </g>
          <g transform="matrix(-0.898751,-0.43846,-0.43846,0.898751,267.067,692.323)">
            <path d="M-2.117,-13.831L3.792,-13.831L-3.194,0.49L-9.103,0.489L-2.117,-13.831Z" style="fill-rule:nonzero;"/>
          </g>
          <g transform="matrix(0.898884,0.438187,0.438187,-0.898884,293.624,705.279)">
            <path d="M3.192,-0.489L9.101,-0.489L2.119,13.833L-3.79,13.834L3.192,-0.489Z" style="fill-rule:nonzero;"/>
          </g>
          <g transform="matrix(0.898809,0.438341,0.438341,-0.898809,277.216,708.287)">
            <path d="M-0.032,-4.912L23.605,-4.912L21.278,-0.139L-2.36,-0.137L-0.032,-4.912Z" style="fill-rule:nonzero;"/>
          </g>
        </g>
      </symbol>
  </defs>
</svg>

こんな感じでsvgを書き換えます。これでsvgファイルの中にicon-aboutと言うシンボルを作成することが出来ました。

この<symbol id="icon-about">として登録されたシンボルは

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

として使用します。

<svg>タグで呼び出す際、<use>を使うことで登録されたシンボルを表示させることが出来るため、よく使うsvgアイコンなどはこの様に登録して使うことで簡単に使えるようになりました。

<svg>内には複数の<symbol>を入れることが出来るため、HTMLの下の方に1つ<svg>を登録しておけばシンボル置き場として機能します。ちょっとしたアイコンはHTMLの中にまとめておいておけば、無駄なロスが減ることになります。

【おまけ】WordPress（PHP）でsvgをまとめたい場合

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

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

上記のようにinclude_onceを使用してtheme-icons.svgを読み込ませるようにします。
（この場合、theme-icons.svgはテーマフォルダの中に置きます）

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

最後に

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

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