2016年度におけるSVGの利用についての備忘録

久々にWebなお話をしたいと思います。

最近のWebは本当にモバイルサイトがメインになってきていますよね。
噂では若い子はパソコンが苦手になってきているとか…

制作するにあたり、未だにIEに足を引っ張られていますが、ようやくIE8を捨てる流れが来たと感じています。（なんだかんだいっても最低限見れるようにはしておくべきという風潮はまだありますよね）

Appleが出す製品はほぼRetinaディスプレイになったし、Windowsにしてもノートでは増えてきているし。Chromebookとかもかな？

ブラウザサポートをIE9以降と決めてしまえばWeb制作の自由度は増します。CSS3の表現を筆頭に、擬似要素、jQuery2も問題なく使用できるからです。サポートをIE10以降にするのを決断するにはまだ時間がかかりそうです…。

でも一番のメリットはSVGが利用できることですよね！！

というわけで、あまり語られない？SVGについて備忘録も兼ねて取り上げたい思います。

SVGイメージって？

この記事を読みにきた方はほぼご存知かと思われますが、簡単に説明をします。

SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。

つまり、SVGとはブラウザ上でパスで描くことができる技術・フォーマットなのです。

なにかしら図形的なデザインするときにはパス（線、または曲線）で描いてデザインします。

今まではベクターで作ったものでも、画像として書き出して使うことが一般的だったのに対し、SVGの登場でベクターイメージとして書き出すことができるようになりました。

SVGのメリット

SVGの最大のメリットは高解像度のディスプレイでぼやけないというところです。

イメージをフォント並に美しく映し出すことができます。

フォント、すなわちテキストを拡大してもボケない理由はベクター方式だからです。

最近は4Kや5Kのディスプレイも存在していますが、4Kの高解像度なディスプレイでもボケることはないという素晴らしいフォーマットなのです。

このサイトもロゴはSVGを使っています。

元は小さなデータだとしても、大きくしてもボヤけません！

手間はかかるがメリットは大きい

イラストレーターでSVGを書き出すには「新規でアートボードを用意し、貼り付けてアートボードサイズを調節して書き出す」という工程が発生するので、通常の書き出しよりも少し手間がかかります。

しかし、手間もなんのその！と思うほど、使うメリットがSVGにはあります。

SVGを利用しない場合、代替方法としてはHTML5のsrcsetが挙げられます。

srcsetはとても便利で、高解像度の画像を切替えられるだけでなく、自動で半分のサイズでブラウザに表示してくれます。なおかつ、無駄な読み込みが発生しないという素晴らしい方法です。

ちなみに、picture要素も素晴らしいです。今までjsでやっていたスマートフォン用とパソコン用の切り替えをHTMLだけで行ってくれます。（これはリアルに感動しました。）

でもどちらにせよ、少しHTMLソースを複雑にしてしまうのがデメリットですね。
個人的にはブラウザサポートは完全ではないですが、使えなかった場合はどうせsrcの方を読むので気にせず使ってます。

私はSVGと２倍のサイズのPNG画像の容量を比べてみて、大した差がなければSVGを選びます。小さければ考える必要はありません。

SVGの方がimgタグ一行で書けてスマートだと思います。

SVGのデメリット

まずは単純に、IE8がサポートしていないという点。背景画像にして代替画像を用意すればフォールバックすることも可能ですが、そこまでするなら使う必要性はないと思います。意味のある画像にbackgroundを使うのは避けたいところです。

そして、容量の問題。複雑なパスの画像や、グラデーションなどの表現がしてあるものをSVGにすると容量が大きくなってしまうので、利用が難しいという点が一番の問題です。

しかも、サイズは書き出す手前まで進めないと予想がつきません。

また、Windows7などではエクスプローラ上で閲覧することができません。拡張機能をインストールすることで閲覧することができるようになりますが、すべての人が見れるわけではないの制作環境の差があった場合は少しだけ面倒くさいでしょうね。

ちなみにMacは大丈夫です。

圧縮ができる

JEPGではJPEGmini、PNGではTinyPNGなどのツールがあるように、SVGも圧縮するツールが存在します。

個人的にはブラウザ上で圧縮ができるSVGOがお気に入りです。

ときにはPNGと同じぐらいの容量になるときもあるぐらい、優秀な圧縮ツールです。SVGZという圧縮方式もありますが、SVGOはSVGZにしなくても、SVGZと同じぐらいの容量にすることができます。

まとめ

• サポートはIE9+
• Retina対応に効果を発揮
• シンプルなロゴやアイコンなどに向いている
• 容量には注意すること
• SVGはSVGOなどで圧縮することができる

サポートが終了したとはいえIE8では表示することができないので、利用するかを考慮する必要はあります。

IE8を考慮するメリットよりも、スマートフォンなどでより綺麗に表示できた方がコンテンツを伝えられると判断できるサイトであれば、当たり前に使用するべきフォーマットだと思います。

Webサイトのクオリティアップは間違いなしです。