MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

svg

svg 要素は、現在のドキュメント(例えば HTML ドキュメント)の中に SVG の断片を埋め込むために使われます。この SVG 断片は独自のビューポートと座標系を持ちます。

使用可能な場所

カテゴリコンテナ要素 、 ストラクチャ要素
許可された内容任意の数、任意の順で以下の要素を配置可能:
アニメーション要素
説明的要素
図形要素
構造的要素
グラデーション要素
<a><altGlyphDef><clipPath><color-profile><cursor><filter><font><font-face><foreignObject><image><marker><mask><pattern><script><style><switch><text><view>

次の SVG 画像を考えてみましょう(イタリアの国旗を表しています):

<svg xmlns="http://www.w3.org/2000/svg" 
     width="150" height="100" viewBox="0 0 3 2">

  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

これは次のように HTML5 文書に含めることができます:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HTML/SVG Example</title>
</head>

<body>

  <svg width="150" height="100" viewBox="0 0 3 2">
    <rect width="1" height="2" x="0" fill="#008d46" />
    <rect width="1" height="2" x="1" fill="#ffffff" />
    <rect width="1" height="2" x="2" fill="#d2232c" />
  </svg>

</body>
</html>

属性

グローバル属性

専用属性

DOM インターフェイス

この要素は SVGSVGElement インターフェイスを実装します。

仕様

仕様 状態 コメント
Scalable Vector Graphics (SVG) 2
<svg> の定義
勧告候補
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<svg> の定義
勧告 初期の定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) IE Opera Safari
基本サポート 1.0 1.5 (1.8) 9.0 8.0 3.0.4
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 3.0 1.0 (1.8) 未サポート (有) 3.0.4

Compatibility sourcesに基づく。

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

 このページの貢献者: momdo, Sebastianz, teoli, twe
 最終更新者: momdo,