SVGアイコンを使ってみた
Webフォントをセルフホスティングした流れでWeb絵文字(アイコンフォント)の読み込みも早くしたい！と思いました。
アイコンフォントは「Google Material Icons」や「Font Awesome」をCDNを使って設置していたのですが、サイト内では数カ所しか使ってないのにアイコンデータ全体を読み込んでる形になっていたので、サイトの表示速度を測る「PageSpeed Insights」で注意されていました。
絵文字を画像として表示させれば軽くなるのは分かっていたのですが、今回はより軽くする為・新しいことに挑戦するために「SVGアイコン」をDLして使ってみることに。
初めてのことだったので扱い方が分からず悩んだ部分もあったので、メモとして残しておこうと思います。
SVGアイコンはJPEGやPNGとは違う形式の画像です。 「ベクター形式」といってIllustratorなどで作成する画像形式らしいのですが… Illustratorを使ったことが無いからピンときていません😅 『拡大縮小しても画像が劣化しない』 ということで、アイコンに使用するのにピッタリな形式みたいです。 今回は2通りの方法で設置してみることにしました。 本当は一つにまとめた方が分かりやすいのですが、「この方法もあったな」と覚えておきやすいかなと思いまして。 ちなみに、SVGアイコンを探す時は↓で紹介されているサイトを使うと便利です。 1つ目はこちらのブログ記事を参考に設置してみました。 当サイトだとてがろぐページの各記事編集アイコンに使用しています。 まずSVGアイコンを用意してHTMLでタグ打ちします。 ※説明に必要な要素だけ記載しています。 SVGアイコンを囲っているspanのclass「te-edit」に次のように設定します。 これで完了です。 2つ目はこちらのブログ記事を参考に設置してみました。 ちなみに、私のサイトではこちらの方法をメインに使用しています。 まずアイコンを設置したい場所にclassを設置します。 次にCSSでこのように設定します。 これで完了です。 アイコンフォント(CDN使用)からSVGアイコンに変更してみて、表示速度は早くなった…気がします！ 一度読み込んでしまうとキャッシュされて表示速度が早くなるので検証は難しいのですが、タグの記述がスッキリしたので満足です！ 今まではメインで「Google Material Icons」を使用し、マイコンビニのFAQページでは「Font Awesome」を使っていたのですが、今回の方法によりサイト内で統一ができたので良かったです。 ※今のところ2つの方法で設置したままにしていますが、この記事を書いたので、後日2つ目のやり方でまとめようかなと思います。SVGアイコンとは
設定の仕方
1つ目「IMGタグとCSSと使った方法」
(記事編集アイコンは管理人でログインした時のみ表示されます)
<span class="te-edit">
<img src="edit_note.svg">
</span>.te-edit {
filter: invert(79%) sepia(9%) saturate(465%) hue-rotate(2deg) brightness(93%) contrast(89%);
}
この方法だとコードが少なくて済みますが、CSSの方を見た時にどのような値が設定されているかすぐに分からないのが難点ですね。2つ目「CSS疑似要素にSVGを指定する方法」
今回はてがろぐページのRSSアイコンで説明したいと思います。
<span class="te-rss"></span>.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と同じ記述方式なので何が書かれているのか把握しやすいのがメリットですね。色や大きさを変えたい時もこちらの方が修正しやすいと思います。完了
最後に
