こんにちは。SVGはsuper visor graphicとかだと思ってたミラノです。

え?PhotoShopでSvg作れるの?

作れないかなーとか思ってたらStocker.jpさんで紹介されてたのでやってみました。

What’s SVG?

svgとはScalable Vector Graphicsの略称でJpeg,Png,Gifなどに代表されるRaster画像とは違い、座標を求めそれに添って線を引いてくれて画像を作るというものです。
代表的なものにAdobe Illustratorのベクター画像がありますね。
web上ではW3Cによって2001年(早い!)にもう勧告されていて使うことも出来ましたがあまり使っていなかったようです。
しかし昨今のiPhoneやiPadに代表されるRetinaディスプレイなどの高解像度ディスプレイの登場で段々と注目されてきました。
mirano1
↑Pngにて作成このくらいならぼやけることはないが高解像度ディスプレイでみると眠く見えるかも?
mirano1
↑Svgにて作成ズームにしてみると全然違うことがわかる。

さっそく作ってみよう。

準備

まず最初にgenerator.jsonをダウンロードするか自分で作ってみる。
先ほどのStocker.jpさんでもjsonファイルはダウンロード出来る。
それをMacならホームフォルダにWindowsならユーザーフォルダにおいてみよう。

PhotoShopでパス化されたレイヤーを作る。

まずはカスタムシェイプツールとか文字を打ってパスを作成するだとかしてパス化されたレイヤーを作ってみよう。
ruby1
今回は以前にパス化させたRubyのマークを使ってみました。
そうしたら次はレイヤーの名前を○○.svgに変更します。
ruby2

ファイルをPsd形式で保存します。
その後ファイル>生成>画像アセットでチェックを入れましょう。
先ほどPhotoShopを保存したフォルダー中に「○○-assets」というフォルダができていると思います。その中にsvgファイルはできています。

さっそく作ったのが下記の画像。
ruby2
よく見たら若干作りが荒い。あとで調整しよう。
ruby2
昔作ったゴマちゃんのシルエット風だってsvgにできる。
ruby2
twitterも表示できる。

なぜ急にsvgをやろうと思ったのか?

画像をpngとかgifでつくろうとするとどう頑張っても拡大するとぼやけた画像になってしまう。
でもsvgを使えば拡大してもぼやけることはない。せっかくなら美しくぼやけない鮮明な画像を見せたいのである。
まぁただ単に新しいことがしてみたかっただけでもある。ベクター画像が気になっていただけでもある。

やってみての感想

imgタグにsvgをそのまま突っ込めばいいので使用方法にはそこまで問題はなかった。
しかし画像の場所や大きさなどはまた別途変更していかなくてはならないようだ。
いきなり使うには少しハードルが高いかもしれない。
でもこれは倍のピクセルにしたら・・・とか考えるよりファイルのサイズも小さくなるし覚えたらいいかもしれない。
問題はIEの対応が9からということになるのでまだまだメインには使いにくいかもしれない。