日記
SVG の昔と今
先日行われた Sugamo.css で発表した内容を少し手直しして、SVG の成り立ちと現在について、The Secret Origin of SVG などを参考にしながらまとめてみました。
SVG の昔
Web ができてまもない頃、HTML の拡張や類似形式が流行しましたが、その中でもベクターグラフィクス言語は Web で役に立つことはわかっていました。そこで、1996年、W3C は「オープンで、リンクやメタデータ付けができて、クロスプラットフォームで開発できる」ベクターグラフィックス描画言語を募集しました。1998 年までには以下の 5 つの規格に落ち着きました。
- PGML
- VML
- HGML
- DrawML
- WebCGM
PGML (Precision Graphics Markup Language)
Adobe の PostScript や PDF を元に開発された 2D スケーラブルグラフィックスマークアップ言語で、IBM, Netscape や Sun Microsystems も賛同していました。PGML には次のような特徴があります。
- モーションパスなどのシンプルなアニメーションが可能
- CSS が有効
- PDF に変換が容易
- Adobe Illustrator との連携する予定もあったらしい
参考 : PGML Q & A
PGML は次のような書式でマークアップします。
<?xml version="1.0"?>
<!DOCTYPE pgml SYSTEM "pgml.dtd">
<pgml>
<group>
<rectangle x="100" y="100" width="100" height="100" />
<rectangle x="300" y="100" width="100" height="100" />
</group>
</pgml>上記のコード中にもある x, y, width, height 属性などの座標系や、変形、色空間は、後に登場する SVG の仕様に影響を与えます。
VML (Vector Markup Language)
Microsoft, Macromedia, Hewlett-Packard などから提案された 2D スケーラブルグラフィックスマークアップ言語でもともとは PowerPoint のシェイプなどで利用されていいました。VML は ActiveX を経由して IE5 以降で利用可能です。
- TIME と組み合わせることでアニメーションが可能
- CSS が有効 (座標や大きさは CSS で指定する)
VML は次のような書式でマークアップします。
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>VML</title>
<style>
v\:rect{ behavior: url(#default#VML); position:absolute; /zoom:1;}
v\:group{position:absolute;}
</style>
</head>
<body>
<v:group>
<v:rect style="top:100px; left:100px; width:100px; height:100px;" />
<v:rect style="top:300px; left:100px; width:100px; height:100px;" />
</v:group>
</body>
</html>VML は上記のコード中にもあるグルーピングのための group や矩形描画のための rect の他にも、楕円、円弧、パス(ベジェ曲線) などの要素型があり、この要素型の種類は後に登場する SVG の仕様に影響を与えます。
HGML (Hyper Graphics Markup Language)
(回線が細い) モバイルのデバイスで帯域節約をしながら画像を表示するための規格です (OBML みたいな ?)。Drawing Primitives (楕円や矩形) 描画、image manipulation (画像操作と変形)、Themes (CSS のような仕組み) の 3つの機能で成り立っています。
e.g.
<hgml>
<rectangle coords="100,100,200,200", style="dotted">
<rectangle coords="300,100,400,200", style="dotted">
</hgml>DrawML
技術的な図版を作成するための 2D スケーラブルグラフィックスマークアップ言語です。作成とメンテナンス性を重視して単純な設計になっており、要素型は 5種類のみ (type 属性で楕円や矩形の描画を分ける) で、グラフィカルな表現には不向きです。
e.g.
<drawml>
<shape type="rectangle" x="100" y="100" width="100" height="100"></shape>
<shape type="rectangle" x="300" y="100" width="100" height="100"></shape>
</drawml>WebCGM (Web Computer Graphics Metafile)
CGM の Web 版で、その名前の通り、リンクを重視したグラフィックス表現の形式です。ここまでに挙げた他の規格とは違い、WebCGM1.0 はマークアップ言語ではありません。
SVG のすこし昔
SVG1.0 は VML と PGML を統合し、CSS や XLink を追加した 2D スケーラブルグラフィックスマークアップ言語として、2001 年に勧告されました。
SVG は特別なプラグインや独自フォーマットが不必要な画像形式で、次のような特徴を持っています。
- 画像形式である。GIF や JPEG のように画像を表示可能
- スケーラブルである。ベクトルデータなので拡大/縮小しても画像が劣化することはない
- XML である。バイナリーデータではないのでテキストエディタでもある程度編集すことが可能
- 単純な原始図形 (矩形や楕円など) や 2次、3次ベジェ曲線によるパスデータで図形を描画する
- 非破壊のフィルター、マスク、クリッピング表現が可能
- アニメーション (SMIL) による表現が可能
- JavaScript が有効です。(ただしHTML への埋め込み方法によっては JS は無効)
SVG は VML の要素型、 PGML の座標系指定を組み合わせたようなコードを書きます。
<?xml version="1.0"?>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<g>
<rect x="100" y="100" width="100" height="100" />
<rect x="300" y="100" width="100" height="100" />
</g>
</svg>- 上記の demo
しかし、残念なことに Web ブラウザーによる実装がなかったため、勧告されてから最近 (2010年くらい) までは、Web 上であまり使われませんでした。SVG はモバイルの分野では利用されていたようです。
SVG の今
最近になって SVG を利用する準備が整いつつあり、再注目されています (…たぶん)。
モバイルデバイスでのブラウジングにも力を入れる Opera は早くから SVG を実装していましたが、最近では、Firefox や Webkit 系でも SVG 実装はかなり進んできた。また IE9 でも SVG1.1 のほとんどのスペックを実装予定です (ただし、IE9 は Filter, Fonts, Animation の実装予定はありません)。
また、モバイル Safari では SWF を再生できませんが、アニメーションを含む SVG を表示可能です。
さらに、HTML5 では svg 要素型が登場する予定で、text/html に SVG の語彙を混在させることもできるようになります。
SVG の利用シーン
SVG は HTML と親和性の高く、図形を描画する画像としてだけでなく、DOM 操作、アクセシビリティの確保、メタ情報付け、リンクをも利用できる言語でもあります。そのため、将来の Web ページや、Web アプリケーション SVG の利用が期待できます。
例えば…
- ロゴ
- グラフ
- アイコンなどの装飾用パーツ
- 拡大しても劣化しない背景画像
- ボタン、スライダーなどの UI
- フローチャート
などが挙げられます。また、資産が SVG で管理されている場合もあり、その資産を利用することもできるかもしれません。
例えば…
- 地図
- 図面や設計図
などが挙げられます。
既存の IE を考えると SVG を利用しづらい
SVG を利用するうえで問題になるのが IE6 ～ 8 の存在です。IE が SVG を実装するといっても、次期バージョンの 9 であり、まだ正式版ではありません。IE はベクターグラフィックスマークアップ言語の規格として、これまで頑なに VML のみを実装していました。以前は IE 用の SVG 表示プラグインがAdobe から適用されていましたが。そのため今すぐには SVG を利用できないと考える人も多いのです。
しかし、ここまでの流れで SVG は VML の血を受け継いでいることを説明しました。つまり SVG ∋ VML に近い状態ということになるわけです。例えば SVG と VML のコードを抜粋して比べると以下のようになります。
SVG のコード断片
<g>
<rect x="100" y="100" width="100" height="100" />
<rect x="300" y="100" width="100" height="100" />
</g>VML のコード断片
<v:group>
<v:rect style="top:100px; left:100px; width:100px; height:100px;" />
<v:rect style="top:300px; left:100px; width:100px; height:100px;" />
</v:group>かなり似ていることがわかります。
フォールバックとラッパーで IE 6 でも SVG を
2010年 7月現在までの段階で、IE6 でも SVG を擬似的に表示することができ、そのための方法は大きく分けて 2つあります。ひとつは SVG のコードを VML や SWF に変換するフォールバックの手法、もうひとつはベクター画像を出力するための特別なコードを書き、結果 SVG または VML で出力するラッパーを使った方法です。
フォールバック用ライブラリー
- svgweb
- SVG を SWF 上に表示する。ただし、HTML のコードの書き方がやや微妙。個人的にはあまり…(独自のスクリプトタイプを利用してパースさせない仕組み)
- AMPLE SDK
- SVG を VML に変換して表示する。SVG Web と似たような HTML を書くことになる。(独自のスクリプトタイプを利用してパースさせない仕組み)
- SIE
- SVG を VML に変換して表示する。日本の方が作っている。パスのエッジが少し気になるので今後もうすこしきれいになると…
ラッパー用ライブラリー
- Raphael
- Raphael 用のコードを書くと SVG と VML に出し分ける。
これらのライブラリーを活用することで、IE 6 を含めた様々な Web ブラウザー上で今すぐにベクターグラフィックスを扱うことができます。スクリプトやアニメーションを複雑に利用している場合には表現しきれ無いかもしれませんが、グラフやロゴ程度の描画程度なら問題ないでしょう。
ここで挙げたライブラリーを試してみたこと、ひとまず Raphael が一番安定していて使いやすく感じました。(SVG のコード (リソース) をフォールバックして表示できるライブラリーもさらに安定して使いやすいものが出てくるといいなぁと思っています。)
マークアップ言語で図画やロゴを描く
最近、HTML と CSS を使い、Opera のロゴや、ドラえもん、アンパンマンを描画するといったネタをしばしば目にします。例えば HTML と CSS の表現力を利用すれば SVG のロゴを描画することもできます。
border-radius による角丸や transform による変形などを使えばいろいろな表現ができるようになりますが、一般的な CSS はあくまでも文書の装飾であり、図画の描画をするための技術ではありません。CSS のベンチマーク的にネタとして試す分には別にいいのですが…。
次に用意したのは前記のロゴを SVG を用いて描画した demo です。
- SVG を用いた SVG のロゴ (IE9、Opera, Firefox, Webkit 系で動作)
SVG とはベクターグラフィクスを描画するためのマークアップ言語 (XML) です。例えば円や矩形、ベジェ曲線の描画、グラデーションなどを利用することができます。Adobe Illustrator のデータに似ています。アニメーションもできるので Flash 4 くらいのことができます。現在は XHTML 内や、img 要素などの埋め込み対象として利用できます。また、HTML5 では <svg> 要素が登場し、より扱いやすくなる予定です。
e.g.
<head>
<title></title>
</head>
<body>
<h1>circle !</h1>
<svg>
<circle cx="50" cy="50" r="30" fill="#00f"/>
</svg>
</body>CSS ばかりではなく、SVG に注目してみるのも面白いと思います。ここでは簡単な図画を例にしましたが、オーサリングツールを使えば虎とか Firefox のロゴを SVG で描画することもできます。
Raphaël を使う
SVG は IE6 の存在もあり、今すぐに実務で使うのは難しいです。いまベクターグラフィックスを描画したいなら Raphaël を利用するとよさそうです。
Raphael は JavaScript でコードを書くと自動でベクターグラフィックスとして出力してくれるライブラリです。コードの書き方は SVG と canvas の中間のような。SVG または canvas のどちらかを書いた経験があればすぐに書くことが出来るんじゃないでしょうか。
試しに Raphael を使用してみました。SVG から Raphaël に置き換える感覚は XML から JSON を書くみたいな。例えば、円を描くには
var paper = Raphael("testDiv", 600, 600);
paper.circle().attr({cx:100, cy:100, r:50, stroke: "none", fill:"#f00"})
とします。
- Raphaël を用いた SVG のロゴ (IE を含むほとんどの Web ブラウザーで動作)
しっかり IE6 でも描画されます (IE には VML として出力されます)。ただし、VML の仕様にあわせて text に transform が使えないなどの縛りがあります。
CSS Nite LP 9.2 (reprise) フォローアップ
6 月 5 日に行われた CSS Nite LP 9.2 で HTML5 についてのセッションで益子さんと共に登壇をいたしました。
4 月に行われた CSS Nite LP 9 の内容に加え、文書構造とその関連要素型の解説、canvas や svg、math などの埋込み要素型についても触れました。
アンケートのコメントとしていくつか質問をいただきましたので以下にまとめました。補足として参考にしていただけば幸いです。
a 要素などに音をつけたりすることは可能でしょうか ?
可能です。audio 要素は JavaScript と連携することができるので、例えば a 要素のマウスオーバー時に特定の音声を再生するといったことができます。もちろん、 a 要素以外に再生イベントを割り当てることも可能です。簡単な demo を作成しましたのでご参考にどうぞ。
マウスオーバー時に音声を再生する demo (Fx, Opera, Webkit (Desktop, iPad))
ただ、現在の iPhone では video や audio の再生が Safari 内で実行されないので iPhone, iPod touch への応用はいまのところ難有りです。iPad は問題ありません。
video 要素は IE で再生できるのでしょうか ? また、それぞれの Web ブラウザーでサポートされているファイル形式は ?
video 要素は現状、Fx, Opera, Webkit 系で対応しています。また IE 9 から対応予定です。残念ながら IE 6, 7, 8 では video 要素で動画を再生することはできませんが、JavaScript と SWF を組み合わせた フォールバック (代替手段) は既にいくつか知られています。例えば flowplayer を利用した html5media や Video JS、JW Player を利用した Video For Everybody などが存在します。
また、現時点で各 Web ブラウザーが対応している動画の形式は以下のとおりです。
| Firefox | Opera | Safari | Chrome | IE9 | IE6~8 | |
|---|---|---|---|---|---|---|
| H.264 (mp4,mov) | × | × | ○ | ○ | ○ | × |
| Ogg Theora | ○ | ○ | × | ○ | ×? | × |
| WebM | ○ | ○ | × | ○ | △? | × |
video 要素、audio 要素のコントロール部分をデザインすることは可能でしょうか ?
はい。可能です。JavaScript で video や audio に命令することができるので JavaScript と CSS を組み合わせて実現できます。video 要素を例にとって demo を作成してみましたのでご参考にどうぞ。
Dreamweaver に機能拡張などを追加していますか ?
はい。Adobe Dreamweaver CS5 HTML5 Pack をインストールしています。この機能拡張を使うことで、HTML5 の要素型と属性や CSS3 入力補完が追加されたり、Multiscreen Preview panel の機能を利用できます。
また、セッションとは直接関係ないのですが「ゲーム好きですか ?」という質問もいただきました。反応していただいてありがとうございます。一応…Fantasy Earth Zero というゲームをやっています !
「佐藤可士和 × 優クリエイト特別講演会」に参加してきました
先日、「佐藤可士和 × 優クリエイト特別講演会」に参加してきました。講演でお話をお聞きし、やっぱりすごい人だなと。
講演の前半はユニクロでの仕事に関するお話がありました。
「ほとんどユニクロの人です」
- 佐藤可士和氏はユニクロがニューヨーク時にはパッケージや商品名から UT、+J などの事業、ロゴ、フォント、地図、ショッピングバッグ、セロテープ、店員が使用するペンにいたるまで、ほとんどすべての物をデザイン。
- この成功の後、「これからは作るのをやめましょう」といわれた。全世界のユニクロを作るのは無理。今はプロデュースをしてる。
「僕が見なくても僕がやったように見える」グラフィックデザインのシステム
全部を作らないけど全部同じトーンに見えるシステム。どうやったらビジュアルのコントロールのシステムをつくれるかに興味がある人のこと。
- ユニクロではロゴ、フォント、完璧なマニュアルを用意し、これにより上記のシステムを作ることができた。
- フォントはモリサワと協力しレギュラー、ボールドなどのファミリーやロシア語なども用意
- マニュアルとしてものすごくきっちり作った余白の取り方などのデザインルール
- 一つづつを作っていってもなかなか解決しない。これから大切なのは考え方をデザインすること。
- 今やってるのはユニクロの財産になっていく一部のアイコンなど。これを押さえておけば展開していける。
後半はふじようちえんでのお仕事に関するお話がありました。
思ったこと
大きな仕事であればあるほどトンマナはすごく大切だと思いました。あと、デザインはただ作ることなのではなくて、コンセプトの考え方と情報の整理を具現化することなんだろうなー。すごく勉強になりました。
Google I/O で気になった部分
気になった部分の簡単なまとめ。後で見直す用です。
WebM
<video> でも使われることになる新しいファイル形式。動画部分に VP8、音声部分に Ogg Vorbis をつかった Matroska ベースのコンテナ。H.264 と違い、ロイヤリティーフリーのオープンソース。Ogg Theora と違い、高圧縮で高画質。拡張子は .webm
Chrome, Firefox, Opera でサポートする予定。IE9 は VP8 コーデックをインストールすることで利用することができる予定。Safari は…どうなるか。ブラウザーのほかにも Skype, Adobe Flash, Android, YouTube などでもサポートしていく。
- Chrome : WebM and VP8 land in Chromium
- Opera : Welcome, WebM <video>!
- Firefox : Firefox, YouTube and WebM
- IE : Another Follow-up on HTML5 Video in IE9
- Flash : Flash Player Will Support VP8
Adobe Dreamweaver CS5 HTML5 Pack
Dreamweaver CS5 では直接 HTML5, CSS3 はサポートしないけど、エクステンションとしてサポートする。
Google App Engine for Business
SSL (HTTPS) と SQL が使えるようになる
Google Storage for Developers
Amazon S3 みたなオンラインストレージの Web サービス。領域 100GB、転送量 300GB / 月までを無料で利用可能。
Google Font API
Google が WebFonts をホストする。Google Font API をつかっていれば様々な Web サイトから同一のリソースを参照することになるので閲覧者はローカルのキャッシュを使うことができ、ダウンロードの負荷を軽減することができる…はず。以下のように CSS を読み込めば利用可能。
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine';
}
</style>