[Web 製作] SVG アイコンでサイトを高速化する

アイコンは `SVG` で

私は Web サイト制作で、 高速に動作する ことを意識しています。

当サイトを開発するにあたり、高速化のひとつとして アイコンの SVG 化 を行い、脱アイコンフォント に成功しました。

SVG は、具体的にこのような画像です。

SVG をかんたんに説明すると「線を組み合わせて作った画像」です。

という特徴があります。

先ほどの画像

ですが、この画像を表示するためのデータを次に示します。

1<svg viewBox="0 0 32 32">
2  <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
3</svg>

ある程度 IT に明るい方ならば「これだけー !」と驚くはず。

データ量が少ないことは、つまりスッと表示できるわけです。
大きなメリットですよね。

しかしながら写真のようなものは SVG での表現が難しく、比較的シンプルな図形に適しているといえます。

ざっくり、次のような手順です。

たとえば ICONSVG など、SVG を提供しているサイトはいくつかあり、当サイトでも活用しました。

ICONSVG

サービスによって取り扱いや操作には違いがありますが、おおむね「アイコンを選択してコードをダウンロード」ができるようです。

サイトでよく使うアイコンから、ブランドロゴなども揃っており、幅広い表現ができそうです。
純粋にすごいです。

それ以上にこだわりたい方は、プロに製作を依頼すると良さそうです。

を SVG から削除し、 CSS での指定に変更すると良い感じになりました。

また、カラーが fill か stroke かは、SVG 画像の形状によって違いがあるようでした。

アイコンは、サイト全体から見たらごく小さなものですが、私はアイコンフォントから SVG 画像に切り替えたことで、表示速度が早くなったと感じています。

ムダなく、シンプルで、かつ高速である というのは当サイトが大切にしたい価値観です。