両者は共にスケーラブルなもの(にできるもの)なのでその点では互角だけど、様々なプロパティーを持ち多彩な表現が可能なSVGの方がフォーマット的には優位にあると言って良い。が、なかなか利用が広まらないSVGに対して、アイコン・フォントの利用は急速に拡大している。単に流行りとみなす向きもあるけど、やっぱりそれなりに理由があるのではないかと思う。
特に以下の3つのCSSプロパティーは効果的に使える。
font-sizecolortext-shadowPNGで作られたアイコンの色を変更するには編集が必要だけど、アイコン・フォントはCSSファイルで自由に色を調整することができる。独自実装も含めるなら-webkit-maskプロパティーもとても(想像以上に)効果的に使うことができる。他にもちょっとした位置の調整やなんかも慣れ親しんだCSSで普通に可能。更にこれらをHTMLファイルから参照するCSSファイルで扱えるということが大きい。
SVGには様々なプロパティーが用意されており、CSSと同じような形かそれ以上の詳細さでデザインを変更することができるが、SVGファイルに直接書くかCSSファイル(やXSLファイル)に書きそれを参照するかになる。直接書く場合はキャッシングの面で、別のファイルを使う場合はHTTPリクエストの面でアイコン・フォントに劣る。またHTMLファイルから参照しているCSSファイルでそのデザインの変更を行うことはほぼ出来ない(難しい)ので、デザイン定義を1ファイルで完結させることが可能なアイコン・フォントにはメンテナンス性という点でも大きく水をあけられている。
様々なグリフに画像をそれぞれ割り当てられるので、いわゆるスプライトのようなものを作ることなく複数の画像をまとめることができる。CSSでスプライトのPNG画像を扱う時のようにbackground-positionプロパティーでゴニョゴニョする必要もなく、グリフと画像の対応さえ把握していれば良い。
SVGでも複数の画像をまとめるまでは簡単に実現できる。ただ画像の切り替えはちょっとわかりにくい。今は:target擬似クラスを使った切り替えしか発明されていないのでこれを使うことになるわけだけど、これに慣れるのは少し時間がかかると思う。そもそも動かないブラウザーも多い。
Webフォントで主に使われるWOFFには圧縮についても仕様で決められているので、まとめたあとのサイズという点でもアイコン・フォントに分がありそう。
(Web)フォントの扱いの実装はブラウザーによって大きく違う。通常はそういった実装のバラつきはマイナスに働くことが多いが、アイコン・フォントにおいてはプラスに働いていると思う。何もしないでもそれぞれのOSやブラウザーのレンダリングに即した形で表示されるようにブラウザー側がよきに計らってくれる。
SVGも実装はブラウザーによって大きく違う。小さなSVG画像を大きくして表示しようとするとボヤけるブラウザーがあることなどがその最たるもので、こちらの場合はバラつきがバラつきのままマイナスに働く。最近はそこそこそういう実装のバラつきにたいするノウハウが蓄積されつつあるので時が解決してくれそうな気もするけど、現状ではまだまだ。
このようにアイコン・フォントは実装面での都合の良さで優位にある。機能性ではSVGに一歩どころか十歩以上離されているけど、そのシンプルさもまた今のトレンド(必要なものを必要なだけというようなもの)に合っており支持が広がっているのではないか。