svg

ジャンプ先:
  1. 使用可能な場所
  2. 例
  3. 属性
  4. DOM インターフェイス
  5. 仕様
  6. ブラウザ実装状況

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> の定義		 勧告 初期の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,