SVG

ドキュメント

SVG 要素リファレンス

各 SVG 要素について詳細情報を得ましょう。

SVG 属性リファレンス

各 SVG 属性の詳細情報を得ましょう。

SVG DOM API リファレンス

包括的な SVG DOM API の詳細情報を得ましょう。

HTML コンテンツの向上

SVG は HTML、CSS と JavaScript と連係して動作します。SVG の使用によって、通常の HTML ページ または Web アプリケーションは強化されます。

• XHTML 内での SVG の利用についてのチュートリアル
• Google マップ (経路のオーバーレイ) と Docs (spreadsheet のグラフ)
• SVG bubble menus

Mozilla での SVG 実装

Mozilla での SVG 実装についての情報と注記。

• SVG は現在 Firefox に実装されています。
• SVG ガイドラインの作成
• Mozilla SVG プロジェクトの概要
• SVG と Mozilla についてのよくある質問
• SVG Open 2009 での SVG and Mozilla についてのスライドとデモ
• 画像としての SVG

SVG animation with SMIL

SMIL を用いて SVG のアニメーションを行う方法です。

例

すばらしいイメージ形式

SVG はベクターグラフィック形式です。ベクターグラフィックは、ラスター (ビットマップ) グラフィックでは不可能である、品質を損なうことのない画像の拡大と縮小が可能です。

• Lion, Butterfly & Tiger
• SVG art gallery
• その他のサンプル (SVG Samples croczilla.com, carto.net)

アニメーションとインタラクション

HTML のように、SVG はドキュメントモデル (DOM) およびイベントを持ち、JavaScript からそれらへのアクセスが可能です。これにより、開発者はリッチアニメーションやインタラクティブな画像の制作が可能です。

• svg-wow.org に掲載されている、見て楽しむ SVG
• Firefox の拡張である (Grafox) は、SMIL アニメーションのサブセットを追加します
• インタラクティブな写真の操作
• SVG の foreignObject の利用による HTML transformations
• アニメーションされる アート

地図、グラフ、ゲームおよび 3D の実験

わずかな SVG の使用は、Web コンテンツを向上させます。一方、ここにあるものは本格的に SVG を使用した例です。

• テトリス、さらに別のテトリス およびConnect 4
• 米国の州を発見するゲーム
• 米国の人口地図
• 3D ボックスと複数の3D ボックス

全てを見る...

コミュニティ

Mozilla のフォーラムを見る...

• メーリングリスト
• ニュースグループ
• Google グループ
• フィード

ツール

• SVG テストスイート
• SVG Validator (廃止)
• その他のツール...

その他の情報

• A quick introduction to using SVG in an HTML page

関連トピック

• XML, CSS, DOM, Canvas