Pocket

2001年には既にW3Cから勧告されていたものの、ブラウザ側の対応が進んでいなかったため実案件では使いどころが難しかったSVGですが、IEのサポートポリシー変更などもあり、去年〜今年にかけて活用しはじめた方も多いのではないでしょうか?
「まだ使ったことがない」「いまいち使いどころがわからない」という方のために、実際に使ってみて便利だと感じたことを紹介します。

1. サイズを変えても画質が荒れない

SVGとは「Scarable Vector Graphics(拡大可能なベクター画像)」の略称です。その名の通り、SVGはベクター画像なので、jpgやpngなどのラスタ画像とは異なり拡大縮小しても画質が荒れません。
見出しやリンクのアイコンなど、今までは必要なサイズごとに書き出さなければなりませんでしたが、SVGで書き出しておけばcssであらゆるサイズを指定できます。
また、スマホなどの解像度が高いディスプレイ用のラスタ画像は2倍のサイズで書き出す必要がありましたが、SVGではその必要もなくなるのでレスポンシブ対応のWebサイトにも最適です。

2. 色をcssで変更できる

SVGは「fill」というCSSのプロパティで色を設定するので、色別に書き出す必要がなくなります。
「ここのアイコンは白抜きにしたい」という場合も、cssで「fill: #fff」と指定することで再現できます。

3. Photoshopのasset機能で書き出せる

Illustratorでの書き出しが主になりますが、Photoshopでもシェイプなどのパスレイヤーであればasset機能で書き出せます。
デザインデータはPhotoshopで作成されることが多いので、効率的に書き出すことができ便利です。

4. 滑らかなアニメーションをつけられる

描いていくアニメーションや、形を変化させていくモーフィングアニメーションをCSSで実装できます。
以前はFLASHで作っていたようなアニメーションが以下のように数行のコードで簡単に再現できるので、ぜひお試しください。

css

デモはこちら

おわりに

SVGは上手に活用すればコーディングの効率化につながりますし、アニメーションをCSSで簡単に実装することができるので表現の幅が広がりとっても便利です。
より効率的に活用するためのツールもどんどん開発されていますので、ぜひ使ってみてください!

 

スタッフ募集のお知らせ

株式会社それからデザインでは現在、エンジニア・プログラマー、デザイナー、ディレクターを募集しています。自社サービスやクライアント企業のブランディングに関わるモノづくりの現場であなたの経験を活かしてみませんか?
ご興味のある方は、下記より募集要項をご覧ください。

生きるように働く人の仕事探しサイト「日本仕事百貨」に、当社のSE・プログラマー募集の記事が掲載されました。是非ご覧ください。