SVG: Scalable Vector Graphics

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

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

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

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 アプリケーションを拡張できます。

すべてを表示する

コミュニティ

ツール

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

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

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

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

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

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

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

タグ: 
このページの貢献者: mdnwebdocs-bot, silverskyvicto, hysryt, mfuji09, Uemmra3, shuuji3, hamasaki, knagato, manzyun, ethertank, yyss, saneyuki, Kohei, Verruckt, Okome, Mgjbot, Takenbot, Taken Bot, Taken, Shimono
最終更新者: mdnwebdocs-bot,