SVG活用で見た目をもっと美しく

2014年07月16日 公開

SVGとは「Scalable Vector Graphics」の略で、「拡縮可能なベクター画像」のことです。ここのところ、Apple の Retina ディスプレイに代表されるように、高解像度(正確に言うと [高ピクセル密度]?)のディスプレイが普及してきています。

その Retina 等のディスプレイに従来通り72ppiで作られた画像を表示すると、従来のディスプレイに表示した時と比較して、よりモッサリした輪郭が見えてしまいます。「見えすぎちゃって、困る」なのです。

というわけで、写真等を JPEG で表示するのは仕方ないとして、PNG 等で事足りるイラストやアイコン等は SVG にしておくと、高ピクセル密度のディスプレイに表示されたとしても、タブレット等でピンチアウト拡大されちゃったとしても、輪郭の美しいままのグラフィックを提供できるわけです。

SVGを用意する

以前から、フリー画像素材がSVGで提供されたりしてきましたが、フタを開けるとただのXML(マークアップされたテキスト)です。ですから、ゴリゴリと XML を書いてもいいですし、そんなの面倒くさすぎですからベクターグラフィックソフトで描いて SVG で出力すればオッケーです。

アドビならイラストレーター、無料で使えるオープンソースなら InkScape なんかが対応しています。

なお、ただなんとなく SVG を書き出すと、ただのテキストファイル(.xml)なのにわりと大きなファイルになることがあります。綺麗な表示を目指してファイルが無駄に肥大化してしまっては困ります。そんなときに、ちょっとでもSVGを小さくコンパクトにしようと研究を重ねた方がたくさんおられるので、参考にすると良いと思います。

サーバー設定でSVGを表示させる

SVG をテキストファイルではなく画像として認識するかどうかはブラウザ設定でコントロールできるようなのですが、閲覧者にとっては、わからないとか面倒だとかで設定変更してもらうのは容易ではありません。

というわけで、クライアントサイドの設定を促すよりも、.htaccess でサーバーサイドの対応しておくのが良策です。

AddType image/svg+xml svg svgz

AddEncoding gzip svgz

この魔法の2行を、.htaccess に追加しておけば、.svg と .svgz が画像として認識されます。

svgz とは、svg を gzip(.gz)に圧縮したファイル形式です。SVG はただのテキストファイルですから、結構な圧縮率で小さくなってくれて便利ですよ。

SVGを表示できないボロいレガシーブラウザ対策

フォトPがわかっている範囲では、今現在、多く使われているブラウザのうち、IEのバージョン8以前はSVGに対応していません。また、Android もバージョン2.3以前の「ブラウザ」では SVG に対応していないっぽいです。iOS も確認すればあると思いますが、どうしても気になる方はグーグル先生にお導きを施されてください。

SVG は、IE が最近まで非対応だったということで注目されることがなかったと思われますが、IE9 以降は問題なく表示できているようですので、IE8 以前の対策をとれば現実問題として解決できると考えてよいでしょう。

これは Javascript や PHP などで解決することができなくもないのですが、フォトPでは .htaccess で解決する方法をとっています。

まず、画像を入れておくディレクトリが例えば「images」決まっているならば、SVG ファイルもその同じディレクトリに格納することとします。そしてそのディレクトリには、こんな .htaccess を追加しておきます。

RewriteEngine On

RewriteBase /

RewriteCond %{HTTP_USER_AGENT} "MSIE [4-8]" [OR]

RewriteCond %{HTTP_USER_AGENT} "Android [1-2]"

RewriteRule ^(.*)\.svg?z$ /images/$1.png

そして、SVG 非対応ブラウザ用に、SVG と同名の PNG ファイルを同じ「images」ディレクトリに入れておきます。

HOME
 ├ images
   ├ abc_gdgd.svg
   ├ abc_gdgd.png

UA で判断し、IE8 以前と、Android2 以前である場合には、「images」ディレクトリにある同名の PNG ファイルを参照するという具合です。まあ、「IE4から8」 という書き方になっていますが、現実的にはこれでオッケーかと思います。細かいことを言うならば、IE6 なんか PNG さえ理解しませんけど、どうしても IE6 にも対応させたいみなさんは、IE6 の PNG 対策なんか施策済みですよね!

または、無理に PNG を用意せずとも、GIF や JPEG で代替画像を作ってもいいと思います。そのかわり、透過等あれやこれや対応が必要です。

.htaccess の「RewriteRule ^(.*)\.svg?z$ /images/$1.png」の行を、適当に書き換えるのもお忘れなく。

RewriteRule ^(.*)\.svg?z$ /images/$1.gif

RewriteRule ^(.*)\.svg?z$ /images/$1.jpe?g

また、「代替画像なんか将来削除する!」という予定ならば、代替画像専用ディレクトリを作って、そこには SVG 非対応ブラウザ用の代替画像を入れてもよいでしょう。.htaccess の RewriteRule にも、格納されるディレクトリ名に変えておいてくださいね。

RewriteRule ^(.*)\.svg?z$ /[代替画像ディレクトリ名]/$1.png

フラットデザインにもGOOD

世の中のウェブデザイナーのみなさんが、理由も考えずにどうしてもフラットデザインにしたがる傾向はまだもうしばらく続きそうですが、フラットデザインこそ SVG に適していると言えます。形を単純化して色調も抑えたそのデザインは、ベクターグラフィック表現にピッタリなのです!

ただし、SVG で描くと高ピクセル密度(Retina ディスプレイ等)ではやや細く硬く見える傾向がある気がしますので、色調のコントラスト等に気を配る必要があろうかと思われます。ロゴマーク等は小さくてもクッキリ描けるので重宝しそうです。

その差はどれくらいあるのでしょう?

取り敢えず、同じ .ai から書き出した SVG と PNG を並べてブラウザ表示してみました。

07161.png

小さいディスプレイ等では、わかりづらいかもしれませんが、上段が SVG、下段が PNG です。

PNG 等のドロー画像の場合、細い線は薄い色を使うことで表現するので、薄い色や細い色がモヤモヤしてしまいます。また、輪郭も背景位なじませるために少しだけモヤっとします。

SVG はベクター画像の場合です。それぞれが座標等で示されているために、あとはどう描画するのかということはブラウザ等のクライアントサイドに委ねられています。表示例は Firefox 30.0。かなりクッキリハッキリしています。

なお、上記表示例は、ブラウザに表示させた画像をキャプチャして PNG で書き出していますので、実際の SVG は次のようになります。

PhotoPierre logo

ただし、当ブログにおいても前述のように、SVG 非対応の場合は自動的に PNG に振り向けているので、もしかすると PNG が表示されている場合もありますのでご了承ください。IE8 以前と Android 2.3 以前の「ブラウザ」では PNG の代替画像が表示されています。

※ 初めの表示例の下段に近いモヤっとした画像になった場合は、PNG が表示されています。

同じ画像ファイルを、[サイズ指定だけ] 変えて大きく表示してみます。

PhotoPierre logo

この通り、荒れてくることがありません。(代替 PNG は結構荒れてるかも?)

ただし、大きく表示すると、ベクターそのものを単純化してアンカーポイントを減らした歪みや、SVG ファイルサイズを縮小するための小細工によるズレが目立ってくることがあります。それらは、表示サイズや用途によって、その都度調整が必要かと思われます。

この画像も、左側のイラスト部はかなり省略できていますが、タイポ部は省略しようとするとすぐにカドが無くなったりしておかしなことになるのでポイント多めファイル大きめのまま進行しました。

[塗り] で表現しているところを [線] で表現すると、アンカーポイント数も減らせて歪みも小さくなってくるとは思いますが、作業性や再現性なんかともセットになってくる問題ですから、その時、その案件に合った方法を考えてください。

.