アイコン画像の救世主「SVG」の勧め

 SVG画像はとても便利

上質なアイコンのニーズに不可欠の「Font Awesome」は、ページにフォント読込み指定をするコードが必要ですが、最近はそれが不要な「SVG」を提供しています。

Font Awesome

「SVG」に慣れていなかったので、これまで使って来ませんでしたが、HTMLタグを書き込むだけで使え、利用できる場所が多い様です。

「SVG」は、HTMLコードが冗長に見えますが、これを気にしてはいけません。 小さなアメーバ絵文字などは、展開すれば実はとてもデータが大きいのですから。

「SVG」とは 

私達が日頃使っている「Meiryo」などのフォントは、いくら文字サイズを拡大しても、ぎくしゃくしたドット拡大の表示になりません。 現代的なフォントは、ドット絵ではなくベクトルデータで提供され、それをOS側で展開描画するからです。

「SVG」はこのベクトルデータのフォントを、文字1個の単位で提供したものと言えるでしょう。 最初からHTMLに書き込んでおける「SVG」は通信上で有利です。 文字を拡大しても、綺麗にはっきりした描画になる点も優れています。

ベクトルデータは「素」のままで提供される妙な数字の羅列ですが、OSとブラウザは、このデータを電光石火のスピードでひとつの文字として表します。

SVGのコードを省略して使う 

「Font Awesome」の文字サービスの各ページには、右端につつましい「ダウンロードアイコン」があります。（下の赤枠）

これを押すと、ブラウザのダウンロードフォルダーに「SVG」画像がダウンロードされます。

下は、このページからもらって来た矢印アイコンの「SVG」です

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-alt-circle-down" class="svg-inline--fa fa-arrow-alt-circle-down fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6.6-5.4-12-12-12h-64c-6.6 0-12 5.4-12 12z">
</path></svg>

掲載上で改行していますが、本当は中間の改行はありません。

タグコードを記事のHTMLに書き込むと下の様になります。（枠線は当方で付加）

これを見ると、サイズ指定が必要の様です。 サイズ指定をした上で、不要なHTMLコードをどんどん外して行くと、下の様にスリム化できました。

<svg height="24" width="24" viewBox="0 0 512 512">
<path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6.6-5.4-12-12-12h-64c-6.6 0-12 5.4-12 12z">
</path></svg>

下は、表示域を示すために、枠線を当方で「span要素」として付加したものです。

SVGを扱う要点 

一般のCSS指定に慣れている方にとって、これは一般の小画像の様に扱えるので、特に難しいものではありません。 色の指定は特別な「fill」プロパティです。

<svg height="16" width="24" style="fill: red; vertical-align: -2px;" viewBox="0 0 512 512">
<path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6.6-5.4-12-12-12h-64c-6.6 0-12 5.4-12 12z">
</path></svg>

上の修飾（太字）は、

● 高さに「height="16"」を指定して周囲のフォントサイズ「16px」に合わせる

● 高さの並びを「vertical-align: -2px」で調整 （この調整は使用場所による）

● 通常は「width="16"」ですが、横の文字との距離を「width="24"」で調整

● 色を「fill: red」で「赤」に指定

この指定例では、周囲の文字に並べても違和感なく、下の様に溶け込みました。

前後に文字を追加

HTML編集が可能な場所で使用可能 

上の様に、ブログ記事の中に書き込むには「HTML」編集が必要です。 HTML編集が出来る場所といえば、「ブログスキン」（CSS編集デザインのスキン）や、「メッセージボード」「フリースペース」「フリープラグイン」等になりますが、これらの場所で「SVG」を表示できます。 もちろん「絵文字」としても、「グラフィック」としても利用できます。

また、ネット上でユーザー自身の手によるグラフィックを「SVG」に変更してくれるフリーのサービスや、ブラウザ拡張機能もあります。 どうしても独自のアイコンが必要な場合などには、これはありがたい事です。

そして重要な点ですが、それらの表示は長期に渡り、安定して表示されるだろうという事です。 文字形（グリフ）のデータは、他の場所にあるのではなく、「SVG」を表示するその場所にあるからです。 また「SVG」を描画できるブラウザなら、他の環境要素には左右されず、「SVG」は通用すると思われます。 ブログを引っ越ししたら、絵文字が表示されなくなるという事も避けられるわけです。

とりあえずSVGを試したいという方は、以下の「Font Awesome」のページから、適当なサンプルを入手して試して見てください。

Font Awesome  /  Free Fonts