SVG から Web フォントを作成する際の元データ最適化

gulp-iconfont を使って SVG から Web フォントを作成する際、元データを svgo で最適化する意味があるか確認しました。

100個のアイコンデータの、最適化前後のフォントを作成し、比較しました。

結果、各フォーマット、大差はなかったですが、若干サイズダウンできたので、gulp タスクに組み込みました。

SVG 最適化

元データは Adobe Illustrator の保存機能で書き出しただけの SVG ファイルです。

SVG ファイルは 40 から 70% の圧縮率、まちまちでした。複雑なシェイプだと、圧縮率が高かったです。

フォントファイル比較

README に書いてあるのと、ほぼそのままの設定で、書き出し、サイズを比較しました。

最適化前

最適化後

かなり微々たる差ですが、一応サイズダウンしている様です。

gulp タスクで自動化

敢えてやらない理由もないので、gulp タスクで自動的に最適化する様に設定しました。

関係する資材のレイアウトは以下の様になっています。gulpfile.coffee から gulp.d/tasks/*.coffee をロードしています。

最適化には gulp-imagemin を使います。