Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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

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

SVG は、Adobe が所有するプロプライエタリな Flash 技術と似ていますが、テキストベースのオープンなWeb標準であり、閉鎖的なバイナリフォーマットではありません。CSSDOM および SMIL のような他のWeb標準と共に使うことをはっきりと意図して設計されています。

ドキュメント

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 を使用した例です。

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

タグ: 
 最終更新者: hamasaki,