HTML5＋WordPress勉強会 in 神戸で話題になった SVG

昨日、知り合いのデザイン事務所におじゃましている時、iPad でひとつ前の記事を見たら、CSS3 アニメーションのところのアイコンの背景にスタイルが適用されていないみたいで、『●』ではなく『■』のままだった。
ちなみに手元にある iPod touch で見るとこんな感じ。

ちゃんと『●』になってる。
iPod touch も iPad もブラウザは同じですよね？
もしかして、知人の使っているのは初期の iPad なのですが、買ったままの状態でまったくアップデート等をしていないとか…
う〜ん、わからん。
今度、ヨドバシかアップスストアにでも行った時に確認してみよ 🙂

で、その時にふと思い出したのが、先週の『HTML5＋WordPress勉強会 in 神戸』でちょっと話題にあがった『SVG』ファイルのこと。

その『SVG』とは Scalable Vector Graphics というベクターグラフィックス言語 or 画像フォーマットのことで、詳しくは下記サイトをご覧くださいませ。

スタートアップ SVG：第1回　SVGの基礎知識｜gihyo.jp … 技術評論社

勉強会では、HTML5の話の中で取り上げられたのですが、要するに『ベクターグラフィックスなので、拡大してもジャギーがなくキレイだよ。』、『印刷にも使えるんじゃないの。』という説明だったと思う。
HTML5では、もうひとつ話題になる『Canvas』というのもありますが、ココでは省略 😀
両者の違いなどを知りたい方は、上記サイトに説明がありますので、どうぞ見てくださいな。

というわけで、どれくらい違うのかを簡単に検証したくて、イラストレーターから SVG ファイルで書き出してみました。
それが、この下のアイコンとイラスト。
両方とも SVG で書き出したのと同じものを画像ファイルでも書き出してます。
それぞれ、左が画像ファイルで右が SVG ファイルです。

これも前回同様、:hover を使ってアニメーションさせていますので、イラストにマウスカーソルを重ねてみてください。
左側の『画像ファイル』は拡大されるとギザギザのジャギーが見だちますが、SVG ファイルは見事にパキッとした線になっています。（アニメーション中は、ぼやけているけど…）
う〜ん、SVG おそるべし…

というのは大袈裟ですが、これだけキレイだとちょっとうれしくなりますよね。
勉強会で話されていたように、今後は『PDF ファイルだけではなく、SVG ファイルをダウンロードしてもらって印刷する』ということが現実的になってくるかも知れませんね。
ただ、ファイルサイズがね…
アイコンの方は画像と SVG のファイルサイズはほぼ同じなのですが、イラストの方は画像に比べて SVG のファイルサイズは約10倍です。
圧縮の方法とかがあるのかも知れませんが、これだけ色情報、線情報が多いと仕方ないのかも知れませんね。
そのあたりが今後の課題なのかな〜と思います。

イラストが小さくてゴメンナサイね。
でも、カーソルを重ねると大きくなるので、元が小さい方が画像のジャギーがよくわかるのではないでしょうか。
それと、これも Mac の Safari、Chrome、Firefox でしか確認していませんので、お許しを…