警告: この記事の内容は古くなっている可能性があります。 英語版の最新の内容も合わせてご覧下さい。

始めよう
このチュートリアルは、あなたが SVG を使い始める際に役立つでしょう。

Scalable Vector Graphics (SVG) は、2 次元ベクターグラフィックのための XML マークアップ言語です。基本的に、テキストには XHTML があるように、グラフィックには SVG があります。

SVG の対象は、Adobe が所有するプロプライエタリな Flash 技術と重なりますが、Flash との顕著な違いは、SVG は W3C 勧告 (それは、すべての意図と目的のための標準) であり、閉鎖的なバイナリフォーマットとは対照的な XML ベースであることです。CSSDOM および SMIL のような他の W3C 標準と共に使うことをはっきりと意図して設計されています。

ドキュメント

SVG 要素リファレンス
各 SVG 要素について詳細情報を得ましょう。
SVG 属性リファレンス
各 SVG 属性の詳細情報を得ましょう。
SVG DOM API リファレンス
包括的な SVG DOM API の詳細情報を得ましょう。
HTML コンテンツの向上
SVG は HTML、CSS と JavaScript と連係して動作します。SVG の使用によって、通常の HTML ページ または Web アプリケーションは強化されます。
Mozilla での SVG 実装
Mozilla での SVG 実装についての情報と注記。
SVG animation with SMIL
SMIL を用いて SVG のアニメーションを行う方法です。
すばらしいイメージ形式
SVG はベクターグラフィック形式です。ベクターグラフィックは、ラスター (ビットマップ) グラフィックでは不可能である、品質を損なうことのない画像の拡大と縮小が可能です。
アニメーションとインタラクション
HTML のように、SVG はドキュメントモデル (DOM) およびイベントを持ち、JavaScript からそれらへのアクセスが可能です。これにより、開発者はリッチアニメーションやインタラクティブな画像の制作が可能です。
  • svg-wow.org に掲載されている、見て楽しむ SVG
  • Firefox の拡張である (Grafox) は、SMIL アニメーションのサブセットを追加します
  • インタラクティブな写真の操作
  • SVG の foreignObject の利用による HTML transformations
  • アニメーションされる アート
地図、グラフ、ゲームおよび 3D の実験
わずかな SVG の使用は、Web コンテンツを向上させます。一方、ここにあるものは本格的に SVG を使用した例です。

全てを見る...

コミュニティ

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

ツール

ドキュメントのタグと貢献者

タグ: 
最終更新者: manzyun,