株式会社エムアップホールディングス

デザイナーのヨコスカです。

最近web制作の依頼の中で、レスポンシブデザインやRetina（高解像度）ディスプレイに
対応して欲しいとの要望が増えてきましたが、
画像を綺麗に見せるためにはPCとSP用で画像を出し分けたり、表示サイズより大きい画像を用意したりする必要があるなど、
最適な画像の選択は制作者にとってなかなか悩み深いポイントになります。

そこで今回はそんな悩みを解消するべく、拡大・縮小をしても画質を保持するSVGの作成から
webページへの導入までを紹介したいと思います。

【ところでSVGって何？】
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）を略してSVGと呼ばれています。
XMLをベースにしたベクターデータを表示する技術です。

ベクターデータとは、Illustratorなどで扱う画像を数値データをもとにして演算によって再現する方式で、
描画の度に再計算しているので拡大・縮小しても画質が劣化せず綺麗に表示できる性質があります。

簡単に言うと、JPEGやPNGのような画像（ビットマップデータ）は元画像を拡大して表示すると”もやっ”っとなってしまいますが　、
ベクターデータはどんなサイズで表示しても”もやっ”と感なく滑らかくっきり綺麗なまま表示できるのです。



SVG自体は結構前からある技術ですが、対応するブラウザが限られていたことや、
CPUなどの性能が劣るデバイスではレンダリング速度が遅くなる可能性があるなどデメリットもあり
普及がいまいちでした。
しかし、最近ではブラウザのサポート範囲も広がり、
表示パフォーマンスについてもPCやスマホの端末の性能が上がってきているので、
かなり実用性が高くなり一般的になってきました。

【対応ブラウザ】
・Internet Explorer 9以上
・Firefox 3.0以上
・Chrome 4.0以上
・Mac OS X Safari 3.2以上
・Opera 9.0以上
・iOS Safari 3.2以上
・Android 3.0以上
※このように最近のモダンブラウザにはほとんど対応しています。

◇◇◇◇　作成方法　◇◇◇◇

意外と簡単です。
①まずはIllustratorでSVGにしたい画像を用意します。
※webフォントと違い複数の色を使えます。

②余計な余白も書き出されてしまうのでアートボードをオブジェクトサイズに合わせます。
[オブジェクト] → [アートボード] → [オブジェクト全体に合わせる]
これで、自動的にぴったりのアートボードが作成されます。
最初にサイズを決めてオブジェクトのサイズをあわせてもいいです。



③ファイル形式をSVGで保存します。



※細かい設定は省略します。
※svgzとは圧縮SVGのことです。よりファイルが軽量になります。

これで作成は終了です。簡単でした。

注意点としては、
・写真のような複雑なオブジェクトには向いていません。
・データはアウトラインをかけましょう
・レイヤー名がID名になりますので後で操作する場合はわかりやすいものを付けておくといいです。


◇◇◇◇　設置方法　◇◇◇◇

実装方法はいくつかありますが簡単なのは画像のようにimgタグを使用する形式です。

・img要素で配置
・objectタグで設置
・CSSの背景画像で指定
・HTML中にインラインで使用
インラインで使用する場合、Illustratorで保存する際に【SVGコード】ボタンを押すと
下記のようなソースが生成されます。
これをhtmlに記述することで画像を表示します。



こんな感じでhtmlとCSSで調整することで一つのデータでいろいろな表現が可能になります。


・縮小
・拡大
・アニメーション
・グラデーション
・ドロップシャドウ
・ぼかし
などなど、、、

これで自由自在に拡大・縮小できる画像ができました。高解像度ディスプレイも怖くないですね。
SVGはCSS3(animationCSS)やJavaScriptを使ってアニメーションや
色々なフィルター効果やエフェクトもかけられるので、
使い方によってデザインの表現が広がるとてもナイスな技術です。
今回は基本の導入部分だけですが、機会があればを応用編を紹介したいと思います。

ちいさなところからですが、より良いサイト制作ができるよう色々な技術を取り入れていければと思っています。