始めよう
このチュートリアルは、あなたが SVG を使い始める際に役立つでしょう。
このチュートリアルは、あなたが SVG を使い始める際に役立つでしょう。
Scalable Vector Graphics (SVG) は、2 次元ベクタ形式 のためのXML に基づくマークアップ言語です。おおまかには、テキストに対する HTML のような位置づけで、グラフィックに対して SVG が存在します。
SVG は、Adobe が所有するプロプライエタリな Flash 技術と似ていますが、テキストベースのオープンなWeb標準であり、閉鎖的なバイナリフォーマットではありません。CSS、DOM および SMIL のような他のWeb標準と共に使うことをはっきりと意図して設計されています。
ドキュメント
- SVG 要素リファレンス
- 各 SVG 要素についての詳細情報です。
- SVG 属性リファレンス
- 各 SVG 属性の詳細情報です。
- SVG DOM API リファレンス
- JavaScript との連携に必要な SVG DOM API の詳細情報です。
- HTML の内容への SVG 効果の適用
- SVG は HTML、CSS と JavaScript と連携して動作します。SVG の使用によって、通常の HTML ページ 、 Web アプリケーションが拡張されます。
コミュニティ
- Mozilla のフォーラムを見る...
ツール
- SVG テストスイート
- SVG Validator (廃止)
- その他のツール...
- その他のリソース: XML, CSS, DOM, Canvas
例
- Google マップ (経路のオーバーレイ) と Docs (spreadsheet のグラフ)
- SVG bubble menus
- SVG 作成のガイドライン
- Mozilla SVG プロジェクトの概要
- SVG と Mozilla についてのよくある質問
- SVG Open 2009 での SVG and Mozilla についてのスライドとデモ
- 画像としての SVG
- SMIL を用いて SVG のアニメーションを行う方法
- SVG art gallery
- その他のサンプル (carto.net)
アニメーションとインタラクション
HTML のように、SVG はドキュメントモデル (DOM) およびイベントを持ち、JavaScript からそれらへのアクセスが可能です。これにより、開発者はリッチアニメーションやインタラクティブな画像の制作が可能です。
- svg-wow.org に掲載されている、見て楽しむ SVG
- Firefox の拡張である (Grafox) は、SMIL アニメーションサポートのサブセットを追加します
- インタラクティブな写真の操作
- SVG の
foreignObjectの利用による HTML transformations
地図、グラフ、ゲームおよび 3D の実験
SVG をほんの少しだけ使用しても、Web コンテンツを格段に向上させることができます。一方、ここにあるものは本格的に SVG を使用した例です。
