SVG画像はとても便利
上質なアイコンのニーズに不可欠の「Font Awesome」は、ページにフォント読込み指定をするコードが必要ですが、最近はそれが不要な「SVG」を提供しています。
「SVG」に慣れていなかったので、これまで使って来ませんでしたが、HTMLタグを書き込むだけで使え、利用できる場所が多い様です。
「SVG」は、HTMLコードが冗長に見えますが、これを気にしてはいけません。 小さなアメーバ絵文字などは、展開すれば実はとてもデータが大きいのですから。
「SVG」とは
私達が日頃使っている「Meiryo」などのフォントは、いくら文字サイズを拡大しても、ぎくしゃくしたドット拡大の表示になりません。 現代的なフォントは、ドット絵ではなくベクトルデータで提供され、それをOS側で展開描画するからです。
「SVG」はこのベクトルデータのフォントを、文字1個の単位で提供したものと言えるでしょう。 最初からHTMLに書き込んでおける「SVG」は通信上で有利です。 文字を拡大しても、綺麗にはっきりした描画になる点も優れています。
ベクトルデータは「素」のままで提供される妙な数字の羅列ですが、OSとブラウザは、このデータを電光石火のスピードでひとつの文字として表します。
SVGのコードを省略して使う
「Font Awesome」の文字サービスの各ページには、右端につつましい「ダウンロードアイコン」があります。(下の赤枠)
これを押すと、ブラウザのダウンロードフォルダーに「SVG」画像がダウンロードされます。
下は、このページからもらって来た矢印アイコンの「SVG」です
掲載上で改行していますが、本当は中間の改行はありません。
タグコードを記事のHTMLに書き込むと下の様になります。(枠線は当方で付加)
これを見ると、サイズ指定が必要の様です。 サイズ指定をした上で、不要なHTMLコードをどんどん外して行くと、下の様にスリム化できました。
下は、表示域を示すために、枠線を当方で「span要素」として付加したものです。
SVGを扱う要点
一般のCSS指定に慣れている方にとって、これは一般の小画像の様に扱えるので、特に難しいものではありません。 色の指定は特別な「fill」プロパティです。
上の修飾(太字)は、
● 高さに「height="16"」を指定して周囲のフォントサイズ「16px」に合わせる
● 高さの並びを「vertical-align: -2px」で調整 (この調整は使用場所による)
● 通常は「width="16"」ですが、横の文字との距離を「width="24"」で調整
● 色を「fill: red」で「赤」に指定
この指定例では、周囲の文字に並べても違和感なく、下の様に溶け込みました。
前後に文字を追加
HTML編集が可能な場所で使用可能
上の様に、ブログ記事の中に書き込むには「HTML」編集が必要です。 HTML編集が出来る場所といえば、「ブログスキン」(CSS編集デザインのスキン)や、「メッセージボード」「フリースペース」「フリープラグイン」等になりますが、これらの場所で「SVG」を表示できます。 もちろん「絵文字」としても、「グラフィック」としても利用できます。
また、ネット上でユーザー自身の手によるグラフィックを「SVG」に変更してくれるフリーのサービスや、ブラウザ拡張機能もあります。 どうしても独自のアイコンが必要な場合などには、これはありがたい事です。
そして重要な点ですが、それらの表示は長期に渡り、安定して表示されるだろうという事です。 文字形(グリフ)のデータは、他の場所にあるのではなく、「SVG」を表示するその場所にあるからです。 また「SVG」を描画できるブラウザなら、他の環境要素には左右されず、「SVG」は通用すると思われます。 ブログを引っ越ししたら、絵文字が表示されなくなるという事も避けられるわけです。
とりあえずSVGを試したいという方は、以下の「Font Awesome」のページから、適当なサンプルを入手して試して見てください。