<svg> * - SVG によるグラフィックス（新）

■ 概要

項　　目説　　明
記述形式 <svg>～</svg>
対応ブラウザー H5+ / e？+ / N？+ / Fx？+ / Op？+ / Ch？+ / Sa？+
種　　類
（カテゴリー）		 フロー・コンテンツ, フレージング・コンテンツ,
エンベッディッド・コンテンツ，パルパブル・コンテンツ
置ける場所 フレージング・コンテンツ が記入できる場所
内包要素
（コンテンツ・モデル）		 SVG に従ったマークアップ，および，フロー・コンテンツ
（コンテンツ・モデル: 直接指定）

■ 解説

<SVG> ～ </SVG> の範囲に XML ベースのグラフィックスである SVG（Scalable Vector Graphics）をそのまま書き込みレンダリングします。

HTML5 で初めて導入された仕様のため，対応していないブラウザーも多いので，注意が必要です。

■ 属性

種　　類名　　称
【固有属性】 なし
【グローバル属性】 accesskey，class，contenteditable *， dir，
hidden *，id， lang，spellcheck *，style，
tabindex，title，translate *
【ARIA role属性】 で
指定可能な値 （役割）
【ARIA aria-* 属性】 で
指定可能なもの

■ CSSプロパティ

種　　類名　　称
【よく使うもの】

■ 使用例　（ HTML5 における SVG 記述 ）

HTMLソース
SVG による
記述部分
<body> ～ </body>		 
   <p>赤色，緑色，青色の円：
      <svg>
         <circle r="50" cx="100" cy="50" fill="red"/>
         <circle r="50" cx="70" cy="80" fill="green"/>
         <circle r="50" cx="130" cy="80" fill="blue"/>
      </svg>
   </p>

ブラウザー 表示例

赤色，緑色，青色の円：

■ 備考

SVG に関しては，

などを参考にしてください。