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

概要

カテゴリー

• Flow content
• Phrasing content
• Embedded content
• Palpable content

配置できる場所

• 上記カテゴリーの要素が置ける場所。

属性

• SVG仕様による。
• ただし、HTML構文では、xmlns属性は必須ではない。
• XML構文では、xmlns属性は必須。

WAI-ARIA

• デフォルトroleは、graphics-document（＊WAI-ARIA Graphics Moduleのrole）。デフォルトroleをrole属性値に指定することは、推奨されない。
• デフォルトrole以外では、すべてのroleが指定可能。

意味・用法

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

関連事項

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

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

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

アクセシビリティ関連

• 代替テキスト相当：子孫要素たるtitle要素、desc要素、text要素の内容テキスト。
• 未対応ユーザーエージェント向け代替コンテンツ：子孫要素たるtitle要素、desc要素、text要素の内容テキスト（ただし、title要素は表示されないかもしれない）。あるいは、子孫要素たるforeignObject要素の内容（display属性値をnoneに指定すれば、対応ブラウザでは表示されない）。
• アクセシビリティ支援技術向け：子孫要素たるtitle要素、desc要素。

私見・補足

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

詳細はSVG仕様に従う。

SVG仕様のどのバージョンに従うべきかだが、現状では、Scalable Vector Graphics 2の模様。

表示確認

ソース

  <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で、青い円を描き、画像化された赤いテキストを重ねる。