フラッシュカエスブイジーカソレガモンダイダ

FLASHかSVGか。それが問題だ。【Webデザイン実験室】

Webで高品位な画像や文字を配信したい時、例えばDTPでデザインしたフライヤーなんぞを出来るだけ綺麗にWebで見せたい時、皆さんは何のフォーマットを採用してますか？

電子文書フォーマットのスタンダードと云われるPDFも有名ですが、ビューアのAdobe Acrobatってまだまだ普及率が低くて誰でも彼でも気軽にって訳には正直いかない。文章量が大量の、本だの書類だのを見せるって場合はダウンロードしてゆっくり読んでもらえるという点で適しているとは思うのだけれど。

要はビジュアル重視の一枚ものをぱっとWebで綺麗に見せたい。そして出来るだけサイズが小さいフォーマットで。

プラグインのビューアの普及率で圧倒的なのはマクロメディアのFLASHでしょう。サイトのトップページでインパクトあるアニメーションで使ったり、広告バナーでの使用が一般的ですが、静止画像データを高品位に見せるという目的でもなかなか使えます。高画質を保ちながらのファイルサイズの小ささも素晴らしいものがあります。

また一方で注目しているのが、SVG(Scalable Vector Graphics)です。
普及率はまだまだですが、今後Webのグラフィックデータの標準となると云われているXMLベースの言語です。詳細やサンプル、SVGの魅力はアドビのサイトの「SVGゾーン」でご覧下さい。
http://www.adobe.co.jp/svg/

現在のWebグラフィックデータの大多数を占めるJPEGやGIFはビットマップグラフィックというデータを点で表現する形式です。ひとつひとつの点が小さければ小さいほど画像品質を向上することが出来ますが、その分どんどんファイルサイズが大きくなってしまいます。

一方でFLASHやSVGはベクターグラフィックというIllustratorユーザーには馴染み深い、絵を輪郭とパス(輪郭の通過点)で表現する形式です。そのためファイルサイズが小さくかつ、どれだけ拡大して表示しても鮮明にグラフィックを表示することが出来るわけです。

そしてFLASHのような特定の企業が開発した独自フォーマットではなく、オープンな標準フォーマットとして登場し、普及しつつあるSVGに私は注目しています。
私はスクリプティングが得意ではないのですが、JavaScriptを埋め込んで、FLASH同様アニメーションやゲームなどインタラクティブなコンテンツも作ることが出来るそうです。

またSVGはXMLベースなので、テキストで記述されているのも特徴です。
高品位な表示をしながらデータ上の文字をコピーして再利用したり、データ自体をテキストエディタで開いて、ちょちょちょいっとスクリプトを加えたりも出来ます。私は出来ませんけど(笑)
(後述する私の実験サイトでも遊んでみて下さい)

プラグインのビューアは
http://www.adobe.com/svg/viewer/...
ここでダウンロードできます。

■さぁ実験だ！
そんなわけで、Illustraorで作成したフライヤーのPDFデータ(1.3MB)を元にSVGとFLASHの比較実験を行ってみました。
ADSL以上の環境の方は是非下記URLで一緒にいぢったり遊んだりしてみて下さい。
http://www16.big.or.jp/...
イラストと枠はビットマップの画像データです。バックの円がベクターで書いたものです。

元ファイル1.3MBに対して、SVGが359KB、FLASHが95.6KBと圧倒的にFLASHに軍配が上がりました。いずれにしてもWeb上でこのクォリティで見せながらこの圧縮率は凄い。

拡大縮小等の機能面は、ほぼ同等。
でも個人的に使いやすさではSVGの方が好きかも。

ファイルサイズの差とも云えるかもしれませんが、拡大表示してみると画像データは圧倒的にSVGが綺麗ですね。

文字データはPDFの時点でアウトライン化してあったのですが、データの一番下に「これはもう１年半位前に作成したフライヤーです」云々という小さなテキストを今回追加いたしました。
SVGはこの文字データを選択してコピーすることができます。
FLASHは書き出しの時点で全ての文字データをアウトライン化してしまいます。

今回の目的に於いて、現時点ではプラグインの普及度、ファイルサイズの比較からFLASHを用いるのが妥当なのでしょうが、SVGも大変魅力的です。Adobe Illustrator9.0ではFLASH、SVGともに書き出しをサポートしていて、とにもかくにもDTPデータとWebデータがどんどんシームレスになっていることにわくわくしている今日この頃であります。