SVG から Web フォントを作成する際の元データ最適化
gulp-iconfont を使って SVG から Web フォントを作成する際、元データを svgo で最適化する意味があるか確認しました。
100個のアイコンデータの、最適化前後のフォントを作成し、比較しました。
結果、各フォーマット、大差はなかったですが、若干サイズダウンできたので、gulp
タスクに組み込みました。
SVG 最適化
元データは Adobe Illustrator の保存機能で書き出しただけの SVG ファイルです。
SVG ファイルは 40 から 70% の圧縮率、まちまちでした。複雑なシェイプだと、圧縮率が高かったです。
uE001-0001.svg:
Done in 15 ms!
0.653 KiB - 68.5% = 0.206 KiB
フォントファイル比較
README に書いてあるのと、ほぼそのままの設定で、書き出し、サイズを比較しました。
最適化前
14288 KaizenIcons.eot
89694 KaizenIcons.svg
14108 KaizenIcons.ttf
2200 KaizenIcons.woff
最適化後
14160 KaizenIcons.eot
86206 KaizenIcons.svg
13980 KaizenIcons.ttf
2192 KaizenIcons.woff
かなり微々たる差ですが、一応サイズダウンしている様です。
gulp タスクで自動化
敢えてやらない理由もないので、gulp
タスクで自動的に最適化する様に設定しました。
関係する資材のレイアウトは以下の様になっています。gulpfile.coffee
から gulp.d/tasks/*.coffee
をロードしています。
.
├── assets
| ├── iconfonts
| │ ├── uE001-0001.svg ...
| │ └── paths.coffee
├── configs
│ └── paths.coffee
├── gulpfile.coffee
└── gulp.d
│ └── tasks
│ └── iconfonts.coffee
└── iconfonts.coffee
最適化には gulp-imagemin を使います。
iconfont = require 'gulp-iconfont'
imagemin = require "gulp-imagemin"
consolidate = require 'gulp-consolidate'
paths = require '../configs/paths'
fontName = 'KaizenIcons'
module.exports = (gulp) ->
gulp.task 'iconfonts', ->
gulp
.src "#{paths.iconfonts}/*.svg"
.pipe imagemin()
.pipe gulp.dest paths.iconfonts
.pipe iconfont
fontName: fontName
appendCodepoints: yes
normalize: yes
fontHeight: 500
.on 'codepoints', (codepoints, options) ->
gulp
.src "#{paths.iconfonts}/templates/_icons.scss"
.pipe consolidate 'lodash',
glyphs: codepoints
fontName: fontName
fontPath: '../fonts/'
className: 'kzicon'
.pipe gulp.dest "#{paths.assets}/styles/object/component"
.pipe gulp.dest "#{paths.assets}/fonts"