SVG の昔と今 | ヨモツネット text ja 2010-07-12 http://www.yomotsu.net/wp/?p=587

SVG の昔と今

先日行われた Sugamo.css で発表した内容を少し手直しして、SVG の成り立ちと現在について、The Secret Origin of SVG などを参考にしながらまとめてみました。

SVG の昔

Web ができてまもない頃、HTML の拡張や類似形式が流行しましたが、その中でもベクターグラフィクス言語は Web で役に立つことはわかっていました。そこで、1996年、W3C は「オープンで、リンクやメタデータ付けができて、クロスプラットフォームで開発できる」ベクターグラフィックス描画言語を募集しました。1998 年までには以下の 5 つの規格に落ち着きました。

PGML (Precision Graphics Markup Language)

Adobe の PostScript や PDF を元に開発された 2D スケーラブルグラフィックスマークアップ言語で、IBM, Netscape や Sun Microsystems も賛同していました。PGML には次のような特徴があります。

参考 : 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 以降で利用可能です。

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 は特別なプラグインや独自フォーマットが不必要な画像形式で、次のような特徴を持っています。

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>

しかし、残念なことに 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 の利用が期待できます。

例えば…

などが挙げられます。また、資産が 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 のコード (リソース) をフォールバックして表示できるライブラリーもさらに安定して使いやすいものが出てくるといいなぁと思っています。)



トラックバックURI

http://www.yomotsu.net/wp/wp-trackback.php?p=587

この記事へのコメントはまだありません

コメントフォーム

コメント

コメントでは一部の XHTML タグを使用できます。 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

カテゴリー一覧

この Weblog の FEED

この Weblog の FEED