目次に戻る

svg要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
属性
WAI-ARIA
  • デフォルトroleは、なし。
  • デフォルトrole以外では、applicationdocumentimgを指定可。
HTML extension

Polyglot Markup仕様では、xmlns属性は必須。

意味・用法

SVG形式による画像を表す。

関連事項

当該要素を含むSVG関連要素は、Foreign elementである。

SVG仕様foreignObject要素HTML名前空間要素として含むときは、当該要素Flow contentでなければならない。

SVG仕様title要素HTML名前空間要素として含むときは、当該要素Phrasing contentでなければならない。

アクセシビリティ関連

私見・補足

これ自体は静止画。スクリプトsvg要素内の諸要素を操作することで、動画的表現も可能。

詳細はSVG仕様に従う。

SVG仕様のどのバージョンに従うべきかだが、xmlns属性値で示される名前空間であるhttp://www.w3.org/2000/svgに属するものなら、廃止されてない限りはどれでも準拠ではあるだろう。

表示確認

ソース

  <div>svgで、青い円を描き、画像化された赤いテキストを重ねる。</div>
  <svg width="200" height="200" style="border:1px solid #000000">
    <title>青い線の円と赤いテキスト</title>
    <desc>青い線で描かれた円に「画像化テキスト」という赤いテキストが重ねられている</desc>
    <circle cx="100" cy="100" r="50" stroke="blue" fill="white" stroke-width="2"></circle>
    <text x="5" y="90" font-family="sans-serif" font-size="30px" fill="red">画像化テキスト</text>
    <switch>
      <foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" display="none" width="200" height="200">
        svg要素の代替コンテンツ
      </foreignObject>
    </switch>
  </svg>
  
表示結果
svgで、青い円を描き、画像化された赤いテキストを重ねる。
青い線の円と赤いテキスト 青い線で描かれた円に「画像化テキスト」という赤いテキストが重ねられている 画像化テキスト svg要素の代替コンテンツ

未対応ブラウザでは、代替コンテンツのほか、内容テキストが表示される(ただし、title要素は表示されない場合が多いようだ)。

IE6表示のスクリーンショット
IE6表示:foreignObject要素による代替コンテンツが表示されている。title要素の内容テキストは表示されてない。desc要素及びtext要素の内容テキストは表示されている。

IE7からIE8も同様。