プログラミング 2021年5月4日 Dr. Martin

Font AwesomeなどのwebアイコンフォントをすべてSVGに切替え

はじめに
SVGアイコンのリソース
SVGアイコンを改変するには？
実際の使用について

はじめに

このブログはWordpressで作成していますが、テーマは自作で好きにカスタマイズしています。ご多分に漏れず、各記事の投稿日時や各種SNSのアイコン等にあるように、主に見栄え（デザイン）を目的として、Font Awesomeなどのwebフォントを使用したアイコンを表示させています。Font Awesomeを利用すると、アイコンが実に豊富に揃っていて欲しいものは一通り入手できますが、バージョンアップ毎にスタイルシートで読み込むファイルサイズが肥大化する傾向ですし、膨大なwebアイコンの中から当該ブログで使用するのはほんの一握りなんですよね。使用するアイコンだけをパッケージ化出来るIcoMoonのようなサービスや、Font Awesomeが提供するAPI（必要なアイコンだけをimportして使用することが出来る）を利用するのもありですが、個人でデザインをちょこちょこいじっている内は、ライセンスの問題もあり、ややこしそうですし最適解ではないなと。で、当サイトで使用しているアイコン系はいっそのこと全部SVG化して、インラインにべた書きしたいなと。外部ファイルを参照するのではなくインライン化することで、サーバーへのリクエスト数を減らすことが出来、webページの表示速度の改善につながりますね。

SVGアイコンのリソース

SVGアイコンは、十分にファイルサイズが小さいものが殆どですが、表示に不要な情報は削ったりしてサイズをもっと小さくしたい場面が出てきます（改変ですね）。多くのWebアイコンは、その辺り、必要に応じてそれなりの対処をすれば問題なさそうです。以下、当サイトで使用しているSVGアイコンの元ネタを挙げておきます。

Font Awesome: いわずと知れたWebアイコンサイト。ライセンスは、Free版であれば、”Font Awesome Free is free, open source, and GPL friendly.”との記載があり、SVGアイコンに関しては、Creative Commons Attribution 4.0 International licenseとなっています。
Google Material Icons: Googleが提供しているwebアイコン（マテリアルアイコン Material icons）は、マテリアルデザインに則ったものですが、ライセンスがApache license 2.0ですので、Font AwesomeのSVGアイコンよりちょっとだけ縛りが緩く、個人で改変して使用する分にはこれといった制限がないかなと思います。
SVG Repo: 個人的には、かなり一押しのサイトです。個々のSVGアイコン毎に、種々のライセンスが明記されているようですが、当サイトで使うようなシンプルなものは、多くがCC0であり、いわば製作者自らpublic domainに放置したような感じですので、やりたい放題（笑）です。上記２つよりも更に縛りがないので、CC0ならどういじっても良いです（という理解でいます）。

SVGアイコンを改変するには？

SVGファイルの中身は、単なるXMLベースのテキストファイルですので、お使いのテキストエディタで開いて中身を確認することが出来ます。中には、不要な属性やCSSクラス名が指定してあったりするので、これらは削ることも出来ます。また、path内容の単純化をすれば、アイコンの見栄えをほぼ変えることなくファイルサイズをぐっと小さくすることが出来ます。とは言え、これを自分でちまちまやるような時間もスキルもないので、よく知られたツールを使用します。おススメは、ブラウザ上で操作が完結するSVGOMGです。これはほんとにおススメで、当サイトで使用しているSVGアイコンはすべて、このツールを経てスリム化しています。詳しい使い方は、WWW WATCHさんのなどのサイトをご参照下さい。Tipsを一つだけ挙げるならば、操作メニューに「Precision」（正確度）というのがあり、このスライダーを小さくすればするほど、ファイルサイズを抑えることが出来ます。多くの場合は、1か2辺りまで下げても見栄えはほぼ変わりませんので、活用しましょう。

実際の使用について

さて、SVGアイコンの利点は、そのスケーラビリティもそうですが、SVGスプライトを利用して使い回しが出来ることです。Wordpressでは、web表示のパーツを個別のPHPファイルで管理しており、ページコンテンツのHTML前半の出力は、header.phpが担っています。このheader.phpは、web表示には必須のファイルなので、ここにSVGスプライトの定義を記載しておけば、他のどんなパーツでも短い記述で呼び出すことが可能です。そういう点では、SVGスプライトの利活用は、Wordpressと非常に相性が良いと思います。具体的には、当サイトでは以下のようにSVGスプライトを定義しています（pathの中身は省略）。

<svg aria-hidden="true" style="display: none;">
 <defs>
  <symbol id="svg-home" viewBox="0 0 26.4 26.4"><title>Home</title><path .../></symbol>
  <symbol id="svg-clock" viewBox="0 0 24 24"><title>Entry date</title><path .../></symbol>
  <symbol id="svg-editby" viewBox="0 0 24 24"><title>Edit by</title><path .../></symbol>
  <symbol id="svg-direction" viewBox="0 0 24 24"><title>Direction</title><path .../></symbol>
  <symbol id="svg-arrow" viewBox="0 0 129 129"><title>Arrow Navigation</title><path .../></symbol>
  <symbol id="svg-archive" viewBox="0 0 24 24"><title>Archives</title><path .../></symbol>
  <symbol id="svg-search" viewBox="0 0 124.5 124.5"><path .../></symbol>
  <symbol id="svg-twitter" viewBox="0 0 24 24"><path .../></symbol>
  <symbol id="svg-facebook" viewBox="0 0 408.8 408.8"><path .../></symbol>
  <symbol id="svg-LINE" viewBox="0 0 300 300"><path .../></symbol>
  <symbol id="svg-Linkedin" viewBox="0 0 382 382"><path .../></symbol>
 </defs>
</svg>

上記のように、個別にidを付与して、そのidを使いたい箇所で以下のようにして呼び出します。

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

このように短い記述で呼び出すことが出来ます。なお、idでの呼び出しですが、シンプルにhrefで良いです。従来のxlink:href属性は、SVG2からは非推奨になりましたし、モダンなブラウザではhrefのみで問題ないですね。

なお、矢印系のアイコンは、どのサイトでも多用すると思いますが、ちょっとしたTipsとしては、上下左右のSVGアイコンを個別に準備する必要はなく、どれか一つで十分です。それをCSSのrotateを利用して、使いまわせばよいです。例えば、当サイトでは、右向きの矢印アイコンのみを用意して、CSSで以下のような指定をして左向きのアイコンを実現しています。そうすることで、サイト全体のデザインの統一性を保つことも出来ますね。

.svg-icon-direction-left, .svg-icon-arrow-prev {
  transform: rotate(180deg); /* 右向きを左向きに */
}

当サイトは、自作テーマだけに、まだまだいじり甲斐があります。最近思うのは、jQueryフリーにしたいなぁと。jQueryもどんどんサイズが肥大化していますが（古めのバージョンは、サイズはそうでもないけれど、セキュリティー上の問題があるかもしれません）、実際に使っているのは、そのほんの一部なんですよね。しかも最近は、CSSのみで実現できることも増えて来ましたし。このネタもそのうちに…。

■ 了