ロゴをSVG化して、今後レティナ以上の超解像度ディスプレイが来ても大丈夫にした(まあ、来ないとは思いますから実験です) 。
目次
SVGって何?
Scalable Vector Graphicsの略で、グラフィックをドットではなくて、どの座標からどの座標に線を引っ張るみたいな情報を元に描画する仕組みですね。
何がよいのか?
PNGなどのドットでグラフィック情報をあらわしている画像形式だと拡大すると、線がギザギザの表示になりますが、SVGだと拡大しても線がギザギザになりません。拡大しても座標の情報を元に再描画するから綺麗なんですね。
拡大して綺麗だと何がいいのか?
レティナディスプレイなどの通常よりも解像度が高いディスプレイで表示したときに綺麗になります。画像の場合、レティナ用に4倍解像度のロゴを作り直す必要がありますが、その必要がなくなります。
ロゴ画像からパスをトレースする
今回、元々ShadeというCG作成ソフトで作ったPNG画像を元にSVGファイルを作ることにしました。絵心ないので、どうやって描けばリアルになるかわからないので、そこはCG任せにしてしまおうという作戦です。
Inkscapeで画像を読み込む
SVG形式のデータを作るにはIllustratorなどのソフトが必要ですが、フリーでInkscapeという良いソフトがあります。
Macの場合は、XQuartzというソフトも必要です(X11の後継らしいです)
インストールしたらInkscapeを起動して元になる画像を読み込みます。
File – Open で元になる画像を読み込みます。何かダイアログが出ますがとりあえずembdedを選んで先に進みます。
こんな感じで画像が表示されます。
パスをトレースする
このドットの塊である画像を線の情報に置き換える必要があります。Inkscapeには画像を解析して、線の情報にしてくれる機能があります。
Path – Trace Bitmat を選びます。
線の情報を抜き取る方法を指定します。いくつか試してうまく行く方法でやるしかありません。設定を変更してUpdateを押すと、どんな感じで解析できたか表示されます。
一度、さきほど読み込んだ画像をクリックして選択した状態にしてからUpdateを押さないと反映されません。
私はColorsを選び、元のロゴが影などを含めると4色ぐらいなので、Scansを4にしました。Scansを増やすともっと細かく色分けしたイラストになってくれるのですが、SVGのデータも大きくなるので、あえてシンプルな色使いにしました。
Remove backgroudをチェックしておくと背景も切り抜いてくれますが、私が今回使った画像の場合、aもtも背景と同じ色だったのでここも切り抜かれてしまいました。あとでペンキツールで白色を塗って修正しました。
OKを押すと画像から線の情報を抜き取ってイラストにしてくれます。わかりづらいですが、既にイラスト化された画像がキャンバスにあるので、×でTrace Bitmapの画面を閉じます。
もしできあがりが気にくわなければ、さっきの設定をいろいろ変えながら試してみてください。
無駄な物を削除
トレースしてイラストになったロゴは、元の画像に重なってるので、ドラッグして一旦どけて、下に隠れてしまっていた元の画像は選択してdeleteキーで消します。
これで画像がイラスト化されました。あとは、Save Asで右下のリストからInkscape SVGを選んで保存するとSVGのデータができあがります。
SVGデータの中身
ただのテキストファイルです。HTMLとかと同じ。中にはsvgというタグがあって、その中にひたすら座標が描いてあります。これを元にブラウザは線を描いて色を塗って画像として表示するわけです。
こんな感じ↓
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="svg4020">
<metadata
id="metadata4026">
〜略〜
<path
d="M 46.596345,73.553922 C 43.086411,72.055603 36.573117,68.847539 36.170141,68.418591 35.883984,68.11399 35.847715,67.912694 35.723539,65.939892 c -0.127714,-2.029004 -0.150463,-2.149364 -0.413356,-2.18691 -0.153013,-0.02185 -0.988557,0.179138
style="fill:#ffffff;fill-opacity:1;stroke:none" />
〜略〜
</svg>
サイトにSVGのロゴを表示する
これをブラウザにロゴとして表示するにはどうすればよいかというと、svgタグ丸ごとHTMLのソースに入れてしまえば良いです。そうすると、そこにSVGでロゴが表示されます。
ロゴのサイズなどはsvgタグに以下のような指定を行います。
width=“400"
height=“200"
viewBox="0 0 400 200"
上二つは幅、高さですね。viewBoxはちょい難しいのですが、svgで描画した画像の、どの部分を切り抜いて表示するかという指定です。座標のx=0からx=400とy=0からy=200の範囲の画像をwidth400、height200の大きさで描画するという感じになります。つまりはwidthとheightを変更するとロゴのサイズも変更できます。
結果こんな感じに今なってます。
ブラウザで拡大して表示しても、ギザギザになりません。逆にiPhoneで表示すると縮小されてこれまたいい感じに表示されます。
元はこれですね↓
元々のリアル系もいいのですが、なにぶんレティナに合わせて解像度4倍にしていてデータ量も多いですし、iPhoneで表示したときにうまく縮小できなくて汚かったので、見栄えが良くなりました。CSSでさきほどのsvgタグのwidthをパーセント指定にすることでシームレスにロゴが縮小するようになっています。
