Retina、４Kなど高精細ディスプレイが世に現れています。
しかしこの現象を手放しで喜べないのが、そう、Web制作者達なのです。通常のディスプレイ、各種ブラウザ対応のほかに、高精細ディスプレイの対応にまで追われることになるのは必然。
特に画像を使用した表現には神経を使いますね。高精細ディスプレイでは通常のディスプレイよりも高解像度の画像の使用が必要となります。
デバイスピクセルレイシオが1：1ではないスマートフォンのコーディングをしたことがある方は経験があるかと思いますが、画像が荒くならないように、通常「ディスプレイ用の画像サイズ×デバイスピクセルレイシオ」で算出したサイズの画像を使用します。
この原理を利用して、高精細ディスプレイも対応をすればよいのですが、それぞれのデバイスピクセルレイシオに合わせた画像を用意、表示させるのはなかなか骨の折れる作業です。
※デバイスピクセルレイシオ：デバイスの表示ピクセルとCSSの表示ピクセルの比のこと
そんな高精細ディスプレイの時代にぴったりの画像種がありました！
画像の拡縮でも見た目が崩れないSVGです。
SVGをご存知の方もそうでない方も、早速SVGの基礎を確認していきましょう。
SVGとは？
SVGはの正式名称はスケーラブルベクターグラフィックスといいます。Adobe Illustratorをご存知の方は多いと思います。そのIllustratorで作成されたベクトル画像をブラウザで表示できる技術です。
JPEGやPNGなどのビットマップ形式の画像とは異なり、拡大、縮小による画像の劣化がありません。
SVGは画像なの？
画像といっても間違いではないのですが、データの種類の一つ、といったほうが語弊がないでしょう。
SVGは「画像」としてだけではなく、XML形式で記述されるコードとして書き出すことができます。つまり、Illustratorでベクター画像を制作する以外に、SVGのソースを記述することでも描画できるということです。（とはいえ、複雑なイラストになるとIllustratorで描いたほうが圧倒的に早いですが……。）
SVGはベクター画像を描画するので、先にも述べたように拡縮で画像の劣化が見られません。この性質から、高精細ディスプレイやスマートフォンに適した画像と言われています。
SVGを使用すれば、これまで行っていた「通常ディスプレイ用の画像サイズ×デバイスピクセルレイシオで算出したサイズの画像」を用意する必要がなくなります。SVGの画像一つを用意すれば、どのデバイスにも対応できるのです。
なんとも便利ですね。
SVGの構成要素とは？
SVGは、距離と方向を表したベクトル画像です。
ベクトル画像は、点と線からなります。その点と線の位置を計算することによって図が表現されます。
ラスター画像はピクセルという点の集まりで画像を表示しますが、ベクトル画像は拡縮するたびに点と線の位置を算出し描画しているため、常に画像が劣化することなく表示されます。
こんなフレキシブルな画像がなぜ今日に至っても普及しきっていないのか？
SVGはW3Cによって2001年に生まれました。にもかかわらず、Web制作にSVGを使用し始めたのは割と最近になります。
なぜ人々はSVGの使用を避けて、ラスター画像を使用してきたのでしょうか？
それは、多くのブラウザ（特にInternet Explorer）がSVGの表示に対応していなかったからです。
現在ではほとんどのブラウザでSVGが使用できます。 Can I useでSVGに対するブラウザ対応を確認してみると分かります（http://caniuse.com/#search=svg） 。
今やInternet Explorer9から対応しています！
SVGは今まさに脚光を浴びつつあります。ただ画像を表示するだけではなく、形を継時的に変化させるモーフィングという面白い効果に使用することも可能です。
誕生から15年越しで注目を集めているSVG。
では実際にHTML、CSS上ではどのようにして使うのでしょうか？
SVGをサイトに使用する
①imgタグで入れる。
通常の画像と同様、拡張子がsvgの画像ファイルをimgタグで表示します。
②CSSのバックグラウンドイメージとして使用する。
こちらも拡張子がsvgの画像ファイルを使用します。Background-imageプロパティで表示してみましょう。
③HTMLにインラインで埋め込む。
この方法はsvgの画像ファイルを使用しません。SVGのコードを書き出して、そのコードをHTML内に埋め込みます。
SVGのコード書き出しはIllustratorでできます。作画が終わったら「書き出し」機能を立ち上げてください。ポップアップする保存ダイアログに「スタイル」の設定箇所があります。このスタイルで「インライン」を設定して保存するとコードが書き出されます。
さて、WordpressでSVGを使用するにはどうしたらよいでしょうか。WordpressではSVGがサポートされていないようです。でも使ってみたいですよね。
①SVG画像をアップロードしたい
そんな時は.htaccessに以下記述を追記しましょう。
AddType image/svg+xml svg
AddType image/svg+xml svgz
画像のアップロードができるようになります。
svgzとは圧縮SVGのことです。svgよりもファイルサイズが小さくて済みます。ファイルサイズが大きいときはsvgzを選択するといいかもしれません。
②インラインSVGを使いたい
この要望の前にはWYSIWYGエディタが立ちはだかります。こちらはインラインSVGを受け付けていません。何とか管理画面からインラインSVGを埋め込みたい……、そんなときが（そんなに多くはないけれど）あるかもしれません。
そんな時はカスタムフィールドのtextareaを使用しましょう！ カスタムフィールドはSVGのコードを受け入れてくれました。
こんな画像はうまく表示されない
経験的に以下のような画像、コードは意図したとおりに表示されないことが多かったです。
参考になれば幸いです。
・ファイルサイズが大きなSVGデータ。
・Illustratorのメッシュグラデーション機能を多用した画像。
・Illustratorの画像合成モード（乗算、スクリーンなど）を使用した画像。
過度に複雑で重いデータはまだきれいに表示できない場合もあるようです。
SVGの歴史的背景から、使用方法の最初歩までを駆け足で見てきました。SVGは便利かつ面白い表現ができる素晴らしいデータ形式です。デバイスの垣根を超えて幅広く使用していきたいものです。
これからSVGの需要は増えると考えられます。SVGを使用したユニークなサイトがたくさん見られる日も、そう遠くないでしょう。
あなたの制作にもSVG、取り入れてみませんか？
- 3648 views
- キム
