AwesomeなどのwebアイコンフォントをすべてSVGに切替え目次はじめにSVGアイコンのリソースSVGアイコンを改変するには?実際の使用についてはじめにこのブログはWordpressで作成していますが、テーマは自作で好きにカスタマイズしています。Awesomeなどのwebフォントを使用したアイコンを表示させています。Awesomeを利用すると、アイコンが実に豊富に揃っていて欲しいものは一通り入手できますが、バージョンアップ毎にスタイルシートで読み込むファイルサイズが肥大化する傾向ですし、膨大なwebアイコンの中から当該ブログで使用するのはほんの一握りなんですよね。Awesomeが提供するAPI(必要なアイコンだけをimportして使用することが出来る)を利用するのもありですが、個人でデザインをちょこちょこいじっている内は、ライセンスの問題もあり、ややこしそうですし最適解ではないなと。当サイトで使用しているアイコン系はいっそのこと全部SVG化して、インラインにべた書きしたいなと。外部ファイルを参照するのではなくインライン化することで、サーバーへのリクエスト数を減らすことが出来、webページの表示速度の改善につながりますね。SVGアイコンのリソースSVGアイコンは、十分にファイルサイズが小さいものが殆どですが、表示に不要な情報は削ったりしてサイズをもっと小さくしたい場面が出てきます(改変ですね)。多くのWebアイコンは、その辺り、必要に応じてそれなりの対処をすれば問題なさそうです。以下、当サイトで使用しているSVGアイコンの元ネタを挙げておきます。Awesomeいわずと知れたWebアイコンサイト。licenseとなっています。AwesomeのSVGアイコンよりちょっとだけ縛りが緩く、個人で改変して使用する分にはこれといった制限がないかなと思います。Repo個人的には、かなり一押しのサイトです。domainに放置したような感じですので、やりたい放題(笑)です。上記2つよりも更に縛りがないので、CC0ならどういじっても良いです(という理解でいます)。SVGアイコンを改変するには?SVGファイルの中身は、単なるXMLベースのテキストファイルですので、お使いのテキストエディタで開いて中身を確認することが出来ます。中には、不要な属性やCSSクラス名が指定してあったりするので、これらは削ることも出来ます。path内容の単純化をすれば、アイコンの見栄えをほぼ変えることなくファイルサイズをぐっと小さくすることが出来ます。言え、これを自分でちまちまやるような時間もスキルもないので、よく知られたツールを使用します。おススメは、ブラウザ上で操作が完結するSVGOMGです。これはほんとにおススメで、当サイトで使用しているSVGアイコンはすべて、このツールを経てスリム化しています。WATCHさんのなどのサイトをご参照下さい。Tipsを一つだけ挙げるならば、操作メニューに「Precision」(正確度)というのがあり、このスライダーを小さくすればするほど、ファイルサイズを抑えることが出来ます。多くの場合は、1か2辺りまで下げても見栄えはほぼ変わりませんので、活用しましょう。実際の使用についてさて、SVGアイコンの利点は、そのスケーラビリティもそうですが、SVGスプライトを利用して使い回しが出来ることです。Wordpressでは、web表示のパーツを個別のPHPファイルで管理しており、ページコンテンツのHTML前半の出力は、header.phpが担っています。このheader.phpは、web表示には必須のファイルなので、ここにSVGスプライトの定義を記載しておけば、他のどんなパーツでも短い記述で呼び出すことが可能です。いう点では、SVGスプライトの利活用は、Wordpressと非常に相性が良いと思います。具体的には、当サイトでは以下のようにSVGスプライトを定義しています(pathの中身は省略)。</defs></svg>上記のように、個別にidを付与して、そのidを使いたい箇所で以下のようにして呼び出します。href="#svg-home"/></svg>このように短い記述で呼び出すことが出来ます。idでの呼び出しですが、シンプルにhrefで良いです。従来のxlink:href属性は、SVG2からは非推奨になりましたし、モダンなブラウザではhrefのみで問題ないですね。矢印系のアイコンは、どのサイトでも多用すると思いますが、ちょっとしたTipsとしては、上下左右のSVGアイコンを個別に準備する必要はなく、どれか一つで十分です。それをCSSのrotateを利用して、使いまわせばよいです。当サイトでは、右向きの矢印アイコンのみを用意して、CSSで以下のような指定をして左向きのアイコンを実現しています。することで、サイト全体のデザインの統一性を保つことも出来ますね。*/}当サイトは、自作テーマだけに、まだまだいじり甲斐があります。最近思うのは、jQueryフリーにしたいなぁと。jQueryもどんどんサイズが肥大化していますが(古めのバージョンは、サイズはそうでもないけれど、セキュリティー上の問題があるかもしれません)、実際に使っているのは、そのほんの一部なんですよね。最近は、CSSのみで実現できることも増えて来ましたし。このネタもそのうちに...。このブログはWordPressを利用していますが、テーマは自作のものを活用しています。濃厚接触者である同居家族等の待機期間についてオミクロン株での濃厚接触者の待機期間についてこのブログの著者について埼玉県ふじみ野市にある竹下内科というクリニックの院長です。当院の公式ホームページは別にありますので、ここでは気になるトピックなど私の個人的な見解や趣味などを中心につらつらと書いていこうかと思います。