こんにちわ@ampersand_xyzです。ごきげんうるわしゅう。

どこまで行くんだ解像度

最近はディスプレイの進化速度が目覚ましいですね。とても小さい画面でも、物凄い解像度を誇る端末がどんどん出てきており、人間の目の認識可能レベルなんか知るか！技術的にやれるとこまでやったるんや！という気概を感じております。
こういうのは大変ワクワクするのですが、それにともなってWEB制作者としては画像がぼやけるであるとか、想定してたより小さく見えてしまう等、結構悩ましい事態も増えることとなり頭を抱えたことがあるという人も少なくないのではないでしょうか。

ベクター画像を使おう

さて、そんな進化と変化をし続ける解像度に対応することができるのがベクター画像です。
（ベクター画像とは何？という方はこちらをご参考にしていただければと思います→ベクター画像とラスター画像の違いと利点）

ウェブフォントを利用したアイコン表現等のHowTo記事等も多く見かけるようになり、そろそろ耳慣れてきた単語かと思います。

用語として普及してきたことと合わせ、ワンパクな解像度の端末やディスプレイがたくさん増えてきたいまの時勢を考えると、ベクター画像はまさに旬の話題と言えるのではないでしょうか。
前置きが長くなりましたが、ここからが本題です。

ベクター画像を使うなら、ウェブフォント？SVG？

ブラウザ中でベクター画像を扱う上での選択肢は大きく２つあると思います。
ウェブフォントかSVGを利用する方法です。それぞれについて使うべき場面やメリット・デメリットなどを考えてみたいと思います。

ちなみに本記事に煽りっぽいタイトルをつけてしまいましたが、要件に応じて適材適所で使い分けるべきところであるのは、予め前置きさせていただきます。

メンテナンス性が高いのはどっち？

基本、フォントはSVGをさらに加工して作るものなので、手順が多くなるのは自明の理であることや、対応する文字の設定等を行わなくてはいけないこと、なによりフォント作成するソフトを別途導入しないといけなかったり・・・。
正直自分としては、SVGをそのままつかうことと比べると手軽とは言えない・・・。
また、瑣末な変更が発生する都度フォントを作成しなおさなくてはいけないのかなと思うと、ちょっとしんどい気がします。

合わせてカスタムフォントの作り方を紹介している外部ブログの記事を幾つか紹介させていただきます。
* Webフォントの作り方と応用方法(ウェブフォントにまつわるメリットやデメリットも記載してありとても良記事です)
* 無料で出来る！オリジナルアイコンフォントを作ってみよう（オンラインツール等についても紹介があります）
* HTTPリクエストを減らすために【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ（grunt-webfontでウェブフォント生成していてスマート。このような形で開発していればメンテナンス性についてはカバー出来るかもしれません。）

あと本筋からそれる話なのですが、わりと素朴に疑問なのですが、IcoMoonをはじめとするカスタムフォントを作るためのオンラインサービスもありますが、それに頼っている場合は、もしもそのサービスが使えなくなったときどうするんでしょう・・・。

取り敢えず、ここはSVGの勝ちでいいんじゃないかなって思います！

パフォーマンスを気にするならどっち？

前提として、メニューアイコンなどの簡単なものを使う場合についてで複雑なパス情報を持っている画像という想定ではありません。インラインSVGか、ウェブフォントかという比較になります。

これはウェブフォントに軍配を上げたいと思います。
理由は単純で、そこそこの数のアイコン画像を扱うと想定した場合、HTTPリクエスト量が減るためです。
CSSスプライトを使うみたいなもんですね。

たとえばですが、1000個のアイコンを扱う場合、1000個のSVG(同様にpngやgifなどの画像）をダウンロードするのと、1つのフォント（フォントの中に100文字文の情報をいれておく）をダウンロードするのでは、容量が一緒だとしてもファイルすべてをダウンロードしきるまでの速さが異なってきます。
これは、一度に同時にダウンロードを行うことの出来るファイルの数が決まっているからです。

この辺りについては以下に引用させて頂いているスライドを合わせてご覧いただくのがいいと思います。
html5jパフォーマンス部の第一回勉強会で発表されたもので、ベクター画像等とかの話題ではないのですが、超ナイスな資料です。

ただ、1個のファイルが重くなるとそれはそれでダウンロードに時間がかかります。
ガッツリ何千個もアイコンを扱うような場合、ウェブフォントがダウンロードされきらないとアイコンが表示されないという事態になりますので考えなしに何でも一緒くたのウェブフォントにすればいいや、というのは違うところになるところだと思います。
そういったケースについては、ウェブフォントのファイルを分割するようにするなどの工夫がいるかもしれません。

とはいえ、例としてあげた話は極端です。使うアイコンをちゃんと選んでファイルそのものの容量を太らせすぎない事が肝要ですね。
ただ、せいぜい十数個程度の場合、バラバラの画像を使う形でもほとんどパフォーマンスは変わらないかもしれません。ここはメンテナンス性と相談で判断したいところです。

また、先日コリスさんで紹介されていた記事で、SVGをガッツリ軽量化するツールが紹介されています。
見た目のクオリティはそのままで、SVGファイルを大幅に軽量化する便利ツール -SVGO GUI

より多くのブラウザに対応できるのはどっち？

調査用サービスとしてCan I use…を利用させていただいています。
スマホで御覧頂いている方にはちょっと見づらいかもしれません、すみません・・・。

SVG

ウェブフォント

・CSS font-face

・EOT

・WOFF

・TTF/OTF

より多くのブラウザに対応できるのは ウェブフォントの勝ち！　だけど・・・
対応可能なブラウザの幅ではウェブフォントに軍配があがりますね。
組み合わせにより、幅広い範囲のブラウザをサポートすることが可能です。IEもバージョン6以降からカバーできます。
とはいえ、あまり古いブラウザをサポートすることを考えたくはないですね。
モダンブラウザしか対象にしないのであればぶっちゃけどっちでもOKだとおもいます。

複雑な表現をするならどっち？

SVG一択です。
単なるメニューアイコン等として利用するのであればともかく、ロゴなどはSVGを使いましょう。
また、SVG内の要素に対するスタイル付けやアニメーションなどぶっ飛んだ複雑な表現もできますが今回は割愛します。
もろんウェブフォントにもCSS等によるエフェクトもかけることはできますが、あまりに複雑なものだったりすると処理落ちしてして見えてしまったり、何よりもウェブフォントでは単色の取り扱いしか出来ません。
というか、ここは比べる事自体がナンセンスな部分ですね。

セマンティック的に適切なのはどっち？

SVGです。ただ、あんまり神経質になんなくてもなぁ・・・感はあります。

2014/06/06訂正

ごめんなさい嘘つきました。
SVGでもウェブフォントでも適切書構造を組み立てることが可能です。よってどっちでも変わりません。

ウェブフォントをアイコンのみ抽出しようとした場合、よくやるやらせなのが、擬似要素beforeに対してスタイルを当てるようなやり方ですが、空のタグが生まれてしまいます。
以下はFontAwesomeを使用している例です。FontAwesomeに限らず、よくある形のウェブフォントによるアイコンの実装方法です。

このspanには何の意味も内容もない状態となっており、文書ではなく見た目としての体裁を整える要素に過ぎないものとなります。

リガチャを利用する文書を重視したウェブフォントの使い方

ウェブフォントを利用する上で、この文書として意味のない要素を発生させない方法がリガチャ（合字）です。

リガチャとは、複数の文字を合わせることにより表される一つの文字です。（詳しくはWikipediaの合字の項目からどうぞ）

これをウェブフォントでセマンティックを維持するため方法として、単語をアイコンのリガチャとして扱うフォントを使用するというアプローチが取れます。

具体的にどういうことなのかというのは、こちらのサイト　Ligature kudakurage Symbols　をごらんください。
あわせ、フリーで使用させていただける種類豊富なリガチャフォントが配布されていますので、すぐに導入できそうですね。

上記のサイトのタグを一部引用させていただきますが

このようなマークアップがあるときに、見た目上の表示は下図のようになります

左側のテーブルを示すアイコンが「table」という文字のリガチャとなっています。
単語に対してアイコンとなる文字が表示されているため、見た目がアイコンに見えつつ、文書として適切であるマークアップをすることができますね。

気をつけるべき点としては、閲覧者が文章をコピーしたときにリガチャ元（という表現が適切なのでしょうか・・・）となる文字がそのままコピーされることと、
当然なのですが、リガチャフォントを使うセレクタを適切に絞っていないと、リガチャ元となる文字列が全部アイコンの見た目になってしまうので注意が必要だと思います。

Windowsのフォントプレビューですが、「Windows」のinにリガチャフォントがあたっていることがわかります。
とはいえ、基本Ligature kudakurage Symbolsのサンプルに沿って作っていればこんな事故は起こることはなさそうです。

SVGについては、imgタグを利用するため画像に対する意味付けをしてあげればOKですね。（今回はObject要素として使う場合とかは置いといて下さい）

レイアウトを簡単に調整できるのはどっち？

正直言ってやり方次第ではあると思うんですが、SVGに軍配を上げたいと思います。
ウェブフォントは「文字」です。文字のスタイルとして、font-sizeをはじめ、line-height, vertical-align, letter-spacing, word-spacingを上手いこと使ってやらないといけなかったりします。
参考までに、ちょっと凝ったかんじのスタイルはicomoonのデモページで使われてるウェブフォントに当てられているスタイル参考になるかと思います。

対してSVGは単にimg要素へのスタイルを当てるのみとなるので、素直に使えますね。

まとめ

ベクター画像を使うときはSVGの方が何かと困ることはないと言えるのではないかなと思います。
とはいえ要件に応じて、適材適所つかっていきたいですね。

また、記事中に見解の誤りや、入れるべき事項などありましたら、ご指摘いただければ幸甚です。
ここまでお読みいただいてありがとうございました。

加筆・修正等

修正1 – Canvasに対する記載について、ベクタの描画とベジェの描画について混同した内容だったため削除しました。

追記1 – セマンティックに関する記載について、リガチャを利用したウェブフォントの利用方法を記述し、内容を修正しました。マツダナオキ(@readymadegogo)さん、ご指摘ありがとうございます！