HTMLで外部SVGを使う方法

Blog / html /

HTMLで外部SVGを使う方法

hero-svg

すっかりSVGが使える世の中になってきましたね。Can I useで調べてみてもオールグリーン（腐りかけのIE 11は除く）。画面サイズも色々、解像度も4Kだ8Kだとにぎやかな時代に、リサイズしても劣化のないSVGはとてもありがたい存在です。ただ、カンタンではあるものの使い方は知る必要があるので、一度整理しておこうと思います。

外部SVGの読み込ませ方

1. SVG画像の作成

なにはともあれまずは作成。フリーで拾うもよし、Illustratorなどで自作するもよし。ただ、今（2021/09/01）のところ一旦FigmaやSketchに配置し、そこからSVG書き出しする方がシンプルなSVGが出来上がります。楽なのでオススメ。

で、そのSVG画像をVS Codeなどで開き、少しコードを編集します。ポイントは以下の3点。

fill属性やstyle属性でfillの指定がある場合は削除しましょう。これがあると色を変えられません。
svgにidを追加しましょう。色数が1色ならこれだけでもOK。このidはHTML挿入時やCSS設定時に必要になります。
パーツごとに色を変えたい場合は、そのパーツを <g>で囲みます。ついでにこれらにもidを設定しておきましょう。理由は上記と同じです。

SVGの例（sample.svg）

<svg id="obj" viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg">
  <g id="obj__base">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M120 20H20V120H120V20ZM70 95C83.8071 95 95 83.8071 95 70C95 56.1929 83.8071 45 70 45C56.1929 45 45 56.1929 45 70C45 83.8071 56.1929 95 70 95Z"/>
  </g>
  <g id="obj__circle">
    <circle cx="70" cy="70" r="20"/>
  </g>
</svg>

2. HTMLでSVGを使用する

svgタグとuseタグを使って読み込ませます。imgタグやcontentなどでも表示はできますが、色を変えたりしたい場合はuseタグが必要になります。

色数が1色だけの場合と、パーツごとに色を変える場合で書き方が少し変わるので注意しましょう。以下は上のsample.svgを読み込ませる場合の記述例です。

1色の場合

<svg class="svgtag">
    <use href="sample.svg#obj" />
</svg>

パーツごとに色を変える場合

<svg class="svgtag">
    <use class="svgtag__base" href="sample.svg#obj__base" />
    <use class="svgtag__circle" href="sample.svg#obj__circle" />
</svg>

デモはこちら

注意点は以下の通り。

HTML内でのsvgタグにはxmlns属性は不要
useのURL指定はhrefでOK。xlink:hrefは非推奨になっていますので、iOS 11など古い環境のサポートが必要でなければ消しちゃいましょう。
ローカル環境だと、普通にHTMLを開くだけだと表示されません。ローカルサーバーなどを通して確認しましょう。

最後に整理するとこんな感じ。

useタグで各パーツを読み込み、
それにクラス名を指定してCSSで色やなんやを設定する。

やってみると単なるHTMLの延長ですね。かんたんー　これでもうアイコンサイズの悩みとはオサラバです。

おわりに

Font Awesomeなどのアイコンフォントも良いんですが、何かの拍子に豆腐化したり、探して指定するのが微妙に手間だったりと面倒な点もあったりしたので、SVGの方が便利なシーンが多いように思います。データも軽いですしね。

IE 11が駆逐されるまでは手を出しにくかったSVGですが、最近はブラウザの駆逐速度が上がっていてありがたい限りです。MSさんもIE 11を2022年6月15日までサポートとか言わず、さっさと腐った牛乳認定してくださっていいんですよ？

2021-09-01

Blog / html / HTMLで外部SVGを使う方法