SVG: Scalable Vector Graphics
ドキュメント
このチュートリアルは、 SVG を使い始めるのに役立つでしょう。
Scalable Vector Graphics (SVG) は、二次元ベースのベクター形式のための XML に基づくマークアップ言語です。そのため、どんな大きさでもきれいにレンダリングできる画像を記述するためのテキストベースのオープンなウェブ標準であり、特に他のウェブ標準、例えば CSS, DOM, JavaScript, SMIL などとうまく機能するように設計されています。 SVG は本質的に、グラフィックに対するもので、テキストに対する HTML のような位置づけです。
SVG 画像と関連する振る舞いは XML のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。
旧来の JPEG や PNG のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。
SVG は1999年から World Wide Web Consortium (W3C) によって開発されています。
- SVG 要素リファレンス
- 各 SVG 要素についての詳細情報です。
- SVG 属性リファレンス
- 各 SVG 属性の詳細情報です。
- SVG DOM インターフェイスリファレンス
- JavaScript と連携するための SVG DOM API の詳細情報です。
- HTML コンテンツへ SVG 効果を適用する
- SVG は HTML、CSS と JavaScript と連携して動作します。SVG を使用することで、通常の HTML ページや Web アプリケーションを拡張できます。
コミュニティ
- Mozilla のフォーラムを見る...
ツール
- SVG テストスイート
- Markup Validator
- その他のツール...
- その他のリソース: XML, CSS, DOM, Canvas
例
- Google マップ (経路のオーバーレイ) と Docs (spreadsheet のグラフ)
- SVG bubble menus
- SVG 作成のガイドライン
- Mozilla SVG プロジェクトの概要
- SVG と Mozilla についてのよくある質問
- 画像としての SVG
- SMIL を用いた SVG のアニメーション
- SVG art gallery
アニメーションとインタラクション
HTML のように、SVG はドキュメントモデル (DOM) およびイベントを持ち、JavaScript からアクセスが可能です。これを利用することで、開発者はリッチなアニメーションやインタラクティブな画像を制作できます。
- svg-wow.org に掲載されている、見て楽しむ SVG
- Firefox の拡張機能 (Grafox) は、SMIL アニメーションサポートのサブセットを追加します
- インタラクティブな写真の操作
- SVG の
foreignObjectの利用による HTML transformations
地図、グラフ、ゲームおよび 3D の実験
SVG をほんの少し利用するだけでも、ウェブコンテンツを格段に向上させることができます。以下に挙げるのは、SVG を本格的に使用した例です。
- Connect 4
- jVectorMap (データ視覚化用の双方向マップ)
- JointJS (JavaScript ダイアグラムライブラリ)
- D3 (HTML、 SVG、 CSS を視覚化する JavaScript ライブラリ)
