要約

  • W3Cが2001年9月4日に勧告としたSVG 1.0は、ベクターの経路や形、文字、画像からなる二次元グラフィックをXMLで表す言語だった。
  • 座標系と表示領域の規則により、同じ図形の幾何情報を大きさの異なる枠へ配置できる。地図の拡大は、古い画素を引き伸ばす作業だけで済ませる必要がなくなった。

小さな街の地図に「この細い道を見せて」と頼む。画像が持っているのが色の点だけなら、大きな色の点を差し出される。道が四角い餅の列になっても、画像にはそれ以上の答えがない。SVG 1.0の勧告は、道を経路として、街区を形として、名前を文字としてウェブに渡す方法を整えた。見た目を一枚に固める前の設計図を、作品と一緒に届けられる。

仕様の導入部には、直線や曲線でできた経路、画像、文字が並ぶ。図形はまとめて、装飾し、変形し、重ね合わせることができる。地図なら、川の線と駅名は別の仕事をする部品だ。街区を一組として動かし、交差点の形だけ直すこともできる。紙に印刷した完成図を毎回切り貼りするような作業から、一歩離れられる。

描いたものをどの範囲に見せるかは、座標の章が扱う。SVGには図形を置く空間と、読者が実際に見る有限の枠、つまりビューポートがある。作者の図形に使うユーザー座標と、枠側の座標も区別される。viewBoxはユーザー空間から長方形を選び、その領域をビューポートへ写す。preserveAspectRatioは枠への収まり方に関わる。道の位置を毎回書き直す代わりに、どの範囲をどんな枠で見せるかを指定する。

移動、拡大縮小、回転、傾斜の変形も使える。まとめた図形を一緒に動かせるうえ、入れ子のSVG要素は新しいビューポートを作れる。地図作者は都市のつながりを先に描き、掲載場所に応じて見せる区域を決められる。画面に出る最後の一枚は画素でできていても、元の文書には再び描くための経路が残る。

SVG 1.0の道具箱には、文字や埋め込み画像に加え、マスク、フィルター、アニメーションやスクリプトもあった。ここで目を引くのは派手な動きより、図形と表示枠を分けたことだ。図形の位置関係を伝えておけば、次の画面が違う大きさでも同じ設計図を使える。

W3Cは2001年9月5日の発表でSVG 1.0を二次元ベクター画像のためのXML言語として紹介した。勧告本文の日付は前日の4日だ。ウェブに届いたのは、一つの大きさで切り取った絵だけではなく、絵を組み立てる共通の記述法だった。地図をのぞき込んだ読者に、道は道のまま近づいてきた。