某案件で903個の画像をカテゴリ毎にSVGとPNGで作る作業があり、丸々1日(24時間)強かかり絶望したのでメモです。。
やりたかった事
デザイナーから頂いたイラレファイルにある903個の”オブジェクト”から…
- グラデなどのかかった画像→PNG、シンプルなベタ塗り画像→SVG に書き出し (png=362個, svg=541個)
- SVGは8色(塗りやストローク色を変更したものを)作成
- IEのフォールバック用に全てのSVGをPNG化
- 作成したファイルを最適化
SVGは所詮テキストなのと、適当なツールを使えばPNG化も簡単だと考え、わりとぱぱっと終わる予定でした。。
イラレからSVGに書き出し
書き出す内容がアートボードに分割されていれば、アートボード毎に書き出すだけで一括で書き出す事ができます。 が、このアートボードは1ファイルにつき100個までと制限があり、そのためか今回はアートボードに分かれていませんでした。 最近のリリースで追加された アセット書き出し を使うことで、ある程度簡単に書き出せますが、手動でドラッグ＆ドロップを延々と繰り返す必要があります。 ※スクリプトを書けばレイヤー毎に書き出しできるようですが、903レイヤーを処理しようとするとイラレがフリーズしました。
イラレのSVG書き出しはfillが省略される
イラレからSVG書き出しすると、塗りの色が黒(000)の場合 fill="#000" が省略されます。 SVGのデフォルト塗り色が #000 のため気を利かせているのでしょうが、今回は #000 を置換する事で8色分作成する予定だったので、余計な機能でした… これでは8色分のSVGファイルを作れないので、fillを指定する方法をさぐったところ…
Sketchを使う
Sketchは、イラレとは異なり fill=#000 を省略しません。 これを利用して、
- イラレから書き出してしまった塗り指定のないSVGを Sketch にインポート
- レイヤー毎にSVGとして書き出す
これだけでfill=”#000″が追加されました！ ※複雑なパスは表示が崩れる事があります (特にマスクなど) ※PNGとSVGを同時に書き出す事も可能です(すごく便利!) ※イラレに比べ、動作がめちゃくちゃ軽いです ※Sketchは有料です
SVGをPNGにする
JEPG⇔PNGなどとは違い、ImageMagickなどではSVGを正しくレンダリングできません。。 色々試した結果、Cairosvgだけはキレイにレンダリングしてくれました。 ※Inkscapeは、一部パスが欠損し、あまり信頼できません ※ImageMagickは論外です (オプション指定が間違っていたのかも…?) (一括でやる例)
|
1 2 3 |
for f in $(find . -type f -name \*svg -not -name original.svg); do cairosvg $f -o $(echo $f|tr "svg" "png") done |
※Python moduleなので、Pythonから使えばもっと効率的に使えそうです
Macで使う時の注意
Pyhton が “Unknown locale UTF-8” とか叫び出すので、
|
1 2 |
export LC_ALL=en_US.UTF-8 export LANG=en_US.UTF-8 |
などとbashprofileかなにかに書いておく必要があります。
SVGの最適化
pngならpngquantなどありますが、SVGはsvgoを使うのが良いみたいです。 デフォルトでは<title>を除去しないので、画像として利用するだけであれば削除するようオプションを指定します。
|
1 2 |
yarn global add svgo svgo --enable=removeTitle -f ./path/to/folder |
さらにsvgz化すればより軽量化できます。
まとめ
- 色変更前提なら、塗りは #000 以外で統一頂くようデザイナーに伝えておく
- イラレから大量の画像を書き出すときは アートボード利用 or “アセット書き出し”
- ベクターデータはSketchにインポートするとその後扱いやすい
- SVG -> PNG は Cairosvg を使う
- svgo大事
イラレの便利な書き出し方法ご存じの方、教えて下さい！