SVGアイコンを使ってみた

Webフォントをセルフホスティングした流れでWeb絵文字(アイコンフォント)の読み込みも早くしたい！と思いました。

アイコンフォントは「Google Material Icons」や「Font Awesome」をCDNを使って設置していたのですが、サイト内では数カ所しか使ってないのにアイコンデータ全体を読み込んでる形になっていたので、サイトの表示速度を測る「PageSpeed Insights」で注意されていました。

PageSpeed Insights

あらゆるデバイスでウェブページの読み込み時間を短くしましょう

pagespeed.web.devpagespeed.web.dev

絵文字を画像として表示させれば軽くなるのは分かっていたのですが、今回はより軽くする為・新しいことに挑戦するために「SVGアイコン」をDLして使ってみることに。

初めてのことだったので扱い方が分からず悩んだ部分もあったので、メモとして残しておこうと思います。

SVGアイコンとは

SVGアイコンはJPEGやPNGとは違う形式の画像です。

「ベクター形式」といってIllustratorなどで作成する画像形式らしいのですが… Illustratorを使ったことが無いからピンときていません😅

『拡大縮小しても画像が劣化しない』

ということで、アイコンに使用するのにピッタリな形式みたいです。

アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう

アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう

ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入 […]

www.webcreatorbox.comwww.webcreatorbox.com

設定の仕方

今回は2通りの方法で設置してみることにしました。

本当は一つにまとめた方が分かりやすいのですが、「この方法もあったな」と覚えておきやすいかなと思いまして。

ちなみに、SVGアイコンを探す時は↓で紹介されているサイトを使うと便利です。

SVGアイコンを探すときの新定番！ オープンソースのSVGアイコンを横断検索で、好みのデザインを見つけることができる -Iconhunt

SVGアイコンを探すときの新定番！ オープンソースのSVGアイコンを横断検索で、好みのデザインを見つけることができる -Iconhunt

オープンソースのSVGアイコンを探すときに大変なのが、好みのデザインを見つけることだと思います。たとえば、検索用の虫メガネアイコンだとレンズの大きさ、持ち手の長さ、レンズと持ち手のバランス、ストローク

coliss.comcoliss.com

1つ目「IMGタグとCSSと使った方法」

1つ目はこちらのブログ記事を参考に設置してみました。

【CSS filter】svgをJSなし・インライン読み込みなしで自由に色を変更する方法！ | ブルーシュ

【CSS filter】svgをJSなし・インライン読み込みなしで自由に色を変更する方法！ | ブルーシュ

※追記：2022年8月31日 mask-imageでも簡単に色を変えられます。ぜひこちらの新しい記事もご覧ください。 → svg画像をCSSで制御して色を変えたりするためには、インラインで読み込みしなければいけません。 […]

bloosh.jpbloosh.jp

当サイトだとてがろぐページの各記事編集アイコンに使用しています。
(記事編集アイコンは管理人でログインした時のみ表示されます)
てがろぐの記事編集アイコン

まずSVGアイコンを用意してHTMLでタグ打ちします。

<span class="te-edit">
    <img src="edit_note.svg">
</span>

※説明に必要な要素だけ記載しています。

SVGアイコンを囲っているspanのclass「te-edit」に次のように設定します。

.te-edit {
  filter: invert(79%) sepia(9%) saturate(465%) hue-rotate(2deg) brightness(93%) contrast(89%);
}

これで完了です。
この方法だとコードが少なくて済みますが、CSSの方を見た時にどのような値が設定されているかすぐに分からないのが難点ですね。

2つ目「CSS疑似要素にSVGを指定する方法」

2つ目はこちらのブログ記事を参考に設置してみました。

CSS疑似要素にSVGを指定する方法

CSS疑似要素にSVGを指定する方法

ひよこエンジニア / Python / JavaScript / Blockchain

blog.mktia.comblog.mktia.com

ちなみに、私のサイトではこちらの方法をメインに使用しています。
今回はてがろぐページのRSSアイコンで説明したいと思います。
てがろぐのRSSアイコン

まずアイコンを設置したい場所にclassを設置します。

<span class="te-rss"></span>

次にCSSでこのように設定します。

.te-rss::before {
  content: "";
  display: inline-block;
  height: 1.3em;
  width: 1.3em;
  -webkit-mask: url("rss_feed.svg");
  mask: url('rss_feed.svg');
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: #767164;
}

これで完了です。
CSSの設定項目は増えますが、他のclassと同じ記述方式なので何が書かれているのか把握しやすいのがメリットですね。色や大きさを変えたい時もこちらの方が修正しやすいと思います。

完了

アイコンフォント(CDN使用)からSVGアイコンに変更してみて、表示速度は早くなった…気がします！

一度読み込んでしまうとキャッシュされて表示速度が早くなるので検証は難しいのですが、タグの記述がスッキリしたので満足です！

最後に

今まではメインで「Google Material Icons」を使用し、マイコンビニのFAQページでは「Font Awesome」を使っていたのですが、今回の方法によりサイト内で統一ができたので良かったです。

※今のところ2つの方法で設置したままにしていますが、この記事を書いたので、後日2つ目のやり方でまとめようかなと思います。

関連記事
新着記事
ブログ内検索