gulp-iconfontでアイコンフォントを生成して運用していく生活が辛くなったので、素のSVGを使っていくのが現実的なのかを調べてみた。
辛くなったのはアイコンフォントのCSS調整するのが億劫になったのと、SVGの種類が増えるたびにアイコンフォントを更新するのが面倒になったことの2つの理由がある。
使用できる参照方法
そもそも、SVGをHTML上で扱うには4つの手段がある。
普通に配置したいだけであればどれを選んでも問題ない。しかし、CSSでSVGを装飾したい場合は話が変わってくる。
CSSで装飾したい場合
結論から言うと「SVG要素をHTML上にインラインで配置」しかない。
img要素やbackground-imageで参照したリソースに対して指定できるのはwidthやheightに限られるので、参照したSVGの色の変更することは出来ない。
一方、object要素はiframe要素と同様に外部リソースを参照するための要素であるため、CSSの参照は出来ない。（冷静に考えると、参照できたらセキュリティの抜け穴になりかねないので出来てはいけない）
SVG要素をインラインで配置する際の課題
インラインで都度記述するのが単純に面倒。アイコンフォントであれば、i要素やspan要素にクラスを設定するだけで使用できることを考えると、一層面倒に感じる。
というわけで、丸一日考えた現時点では以下の結論に至っている。
- 装飾の必要がない場合はimg要素やbackground-imageで参照。
- 装飾の必要がある場合はインラインで配置。
アイコンフォントに強いこだわりが無かったり、そもそも素のHTMLを書いたりしていない場合は素直にFontAwesomeとか使った方が圧倒的に楽です。そちらをオススメします。
