Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

svg

svg 要素は、ルート要素でない場合、スタンドアローンな SVG の断片を現在のドキュメント(例えば HTML ドキュメント)の中にネストするために使われます。このスタンドアローンな断片は独自のビューポートと座標系を持ちます。

使用可能な場所

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

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

<?xml version="1.0"?>
<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 インタフェースを提供します。

ブラウザ実装状況

機能 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に基づく。

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

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