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

Scalable Vector Graphics (SVG) は、2 次元ベースのベクタ形式のための XML に基づくマークアップ言語です。おおまかには、テキストに対する HTML のような位置づけで、グラフィックに対して SVG が存在します。

SVG はテキストベースのオープンな Web 標準です。 CSSDOMSMIL のような他の Web 標準と共に使うことをはっきりと意図して設計されています。

SVG 画像と関連する振る舞いは XML のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。

SVG は1999年から World Wide Web consortium(W3C) によって開発されているオープンな標準です。

ドキュメント

SVG 要素リファレンス
各 SVG 要素についての詳細情報です。
SVG 属性リファレンス
各 SVG 属性の詳細情報です。
SVG DOM API リファレンス
JavaScript との連携に必要な SVG DOM API の詳細情報です。
HTML コンテンツへ SVG 効果を適用する
SVG は HTMLCSSJavaScript と連携して動作します。SVG を使用することで、通常の HTML ページや Web アプリケーションを拡張できます。

すべてを表示する

コミュニティ

ツール

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

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

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

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

SVG をほんの少し利用するだけでも、Web コンテンツを格段に向上させることができます。以下に挙げるのは、SVG を本格的に使用した例です。

  • Connect 4
  • jVectorMap (データビジュアライゼーション用の双方向マップ)
  • JointJS (JavaScript ダイアグラムライブラリ)

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

最終更新者: mfuji09,