始めよう
このチュートリアルは、 SVG を使い始めるのに役立つでしょう。
このチュートリアルは、 SVG を使い始めるのに役立つでしょう。
Scalable Vector Graphics (SVG) は、2 次元ベースのベクター形式のための XML に基づくマークアップ言語です。おおまかには、テキストに対する HTML のような位置づけで、グラフィックに対して SVG が存在します。
SVG はテキストベースのオープンな Web 標準です。 CSS、 DOM、 SMIL のような他のウェブ標準と共に使うことをはっきりと意図して設計されています。
SVG 画像と関連する振る舞いは XML のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。
SVG は1999年から World Wide Web Consortium(W3C) によって開発されているオープンな標準です。
ドキュメント
- SVG 要素リファレンス
- 各 SVG 要素についての詳細情報です。
- SVG 属性リファレンス
- 各 SVG 属性の詳細情報です。
- SVG DOM API リファレンス
- 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 ライブラリ)
