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

*2014-12-10*

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

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

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

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

<!--more-->

## SVG 最適化

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

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



## フォントファイル比較

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

### 最適化前



### 最適化後



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

## gulp タスクで自動化

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

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



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



[svgo]: https://github.com/svg/svgo
[gulp-iconfont]: https://github.com/nfroidure/gulp-iconfont
[gulp-imagemin]: https://github.com/sindresorhus/gulp-imagemin
[README]: https://github.com/nfroidure/gulp-iconfont#make-your-css