SVGダイエット
ポートフォリオのキービジュアルをsvg化したのはいいものの、ファイルサイズが大きく回線が遅いと読み込みに時間がかかるのが気にかかっていた。
同じ画像をpngで書き出すと185KBだったのに対し、Illustratorからただ書き出しただけのsvgはなんと584KBと3倍以上の大きさ。
それをなんとかアピアランスはそのままで、データサイズだけを削減出来ないか試してみました。
参考にしたのはこちらの記事。
Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！ - 聴く耳を持たない(片方しか)
まずやったのが、私の写真をライブトレースで書き出しただけの画像の整理。
シルエットを理解するのに不必要だと思われる小さなパーツなどを削除し、アンカーポイントも目に付く無駄な部分は削除。この、最初にライブトレースしちゃってから無駄を修正するのは大変無駄なので、出来る限り手書きでトレースしたほうがファイルサイズ削減には良さそう。
とりあえず目立つ部分だけ作業して、ここの部分はおしまい。
次に無駄なレイヤーを消してレイヤーを1つに結合。今回の構図は1つに統合して問題なかったので思い切りました。
また今回はアピアランスを維持することを優先してフォントはアウトライン化しました。
そしてあとはsvg保存時の設定。これは上述の記事の通りにやっただけです。
で、結果！
