KOTET'S PERSONAL BLOG

#log Kotet SVG化計画

Created: , Last modified:
#log #tech

これは1年以上前の記事です

ここに書かれている情報、見解は現在のものとは異なっている場合があります。

前々から自分のアイコンを SVG にしたいと思っていた。 今日、おもむろに Inkscape を起動して絵を書き、生成された SVG を手で非可逆圧縮した。 それが以下の画像だ。

Gist

SVG には様々な利点がある。

軽量

普通の画像を SVG に変換したときはどうなのか知らないが、はじめから SVG で描くととてもファイルサイズが小さくなる。 さらに、JPEG や PNG などと違いプレインテキストのため手で最適化をしやすいという利点もある。 通信インフラが不十分な発展途上国でも Kotet を布教するためには、ファイルサイズが重要である。 今回作った SVG は特に Minify しなくても700バイト以下に収まる。 いつも使っている PNG 形式のロゴが17キロバイトであることを考えるとこれは驚異的である。

スケーラブル

Scalable Vector Graphics の名の通り、SVG はスケーラブルである。 拡大してもジャギらない。 さまざまな画面サイズ、画面解像度のデバイスが使われている現在、拡大縮小に耐えうる画像が必要である。 SVG ならちゃんと作ればいくら拡大しても破綻しない。 画素密度の高いディスプレイに対応したウェブサイトを作るとき、 普通なら複数のサイズの画像を用意するか、 一番高密度なディスプレイに合わせてムダにでかい画像を読み込ませなくてはならない。 SVG なら1枚ですべての画素密度に対応し、しかもファイルサイズも圧倒的に小さい。

色の変更が簡単

画像の一部分、たとえば自分の場合ロゴの背景色などを変えたいとする。 これがなかなか簡単にはできない。 頑張ればキレイにできるのだろうが、バケツツールで一発とはいかないのだ。 対して SVG ならただのテキストなので、エディタを開いてスタイルを書き換えるだけでいい。 例えば上の画像の色違いも簡単に作れる。

今後の課題

というわけでロゴを SVG 化したのだが、完成度に少し不満がある。 たとえば曲線がなめらかにつながっていない。 見ているとこれはこれで元絵の雑さが継承されているっぽくて悪くない気もしてくるが、 やはりできないよりはできるようにしておきたい。 ベジェ曲線を自由に使いこなし、自在に線を引けるようになりたい。

今回は Inkscape でマウスを使って描いてから調整したが、理想的には全部エディタで済ませたい。 たぶんそのほうが最適化も簡単かつアグレッシブにできるだろう。

あとは絵心。 絵心が圧倒的に足りない。 SVG でも書いていれば絵心はつくだろうか。 練習としてこれからもロゴの SVG 化の試みを続けていきたい。