第12章: 埋め込みコンテンツ

SVG 2 Requirement: - Allow HTML5 elements in SVG: audio, canvas, iframe and video.
Resolution: - Allow audio, canvas, iframe and video elements from HTML5, don't introduce almost the same but slightly different SVG NS elements.
Purpose: To allow various HTML embedded content elements to be used directly in SVG and support dynamic loading of content.
Owner: Nobody

12.1. 概要

埋め込みコンテンツとは、他のリソースを文書にインポートするコンテンツ、または他の語彙から文書に挿入されるコンテンツです。 この定義はHTML埋め込みコンテンツと同じものです。

SVGは、image要素とforeignObject要素を使って埋め込みコンテンツをサポートします。

さらにSVGは、HTMLの'video''audio''iframe''canvas'要素を使った埋め込みコンテンツも許可しています。

canvasおよびforeignObjectを除き、埋め込みコンテンツは外部リソースのダウンロード優先順位付けのためのResource Hintsと互換性があります。

12.2. 埋め込みコンテンツの配置

xywidth、およびheightのジオメトリプロパティは、埋め込みコンテンツが配置される矩形領域(配置矩形)を指定します。 配置矩形は要素のバウンディングボックスとして使われますが、グラフィックスは値によって配置矩形をはみ出す場合があります(overflowプロパティによる)。

HTML名前空間の要素は、ジオメトリプロパティ用のSVGプレゼンテーション属性を持ちません。 ただし、ほとんどのこれらの要素はHTMLのwidthおよびheight寸法属性を受け入れます。 これらは対応するサイズプロパティのデフォルト値を設定するための表示上のヒントとして使われます。

HTML寸法属性は、HTML仕様[HTML]で定義されているように解析・解釈されなければなりません。 特に、CSS単位付きの長さではなく、整数値のみを受け入れます。 canvas要素では、属性は少し異なり、レイアウトだけでなく描画されるビットマップにも影響します。

xおよびyのジオメトリプロパティは、HTML名前空間の要素にはCSSを通じてしか設定できません。

埋め込みコンテンツが1つの参照リソース(例:imagevideocanvas)からなる場合、現在の座標系(すべての変換適用後)での配置矩形の寸法が埋め込みオブジェクトの指定サイズを定義します。 具体的なオブジェクトサイズと最終位置は、CSSレイアウトで置換要素に定義されたデフォルトサイズアルゴリズム[css-images-3]を使用して決定されます。 object-fitおよびobject-positionは、オブジェクトの最終位置とサイズに影響し、場合によっては配置矩形を超えて拡張される場合もあります。 その場合、overflowプロパティが、レンダリングされたオブジェクトが配置矩形にクリップされるかどうかを決定します。

埋め込みコンテンツが文書フラグメント(例:foreignObjectaudiovideoのユーザーエージェント生成コントロール付き、またはHTMLのフォールバックコンテンツを表示するvideoaudiocanvas)からなる場合、配置矩形はCSSによる子コンテンツのレイアウト用の包含ブロックの境界を定義します。 包含ブロックのスケールは、現在の座標系(明示的・暗黙的(例:viewBox)変換を含む)で定義されます。 foreignObjectやSVGレイアウト属性で配置された他の要素は、CSSレイアウト上は暗黙的に絶対位置として扱われます。 その結果、絶対位置指定された子要素はこの包含ブロックを基準に配置されます。 ここでもoverflowプロパティが、配置矩形外のコンテンツが非表示となるかどうかを決定します。

widthまたはheightが0の場合、要素およびその埋め込みコンテンツのレンダリングは無効化されます。

widthまたはheight'auto'値を指定すると、参照リソースの本来の寸法または本来のアスペクト比に基づいて自動的に要素サイズが決定されます。 この自動サイズ値の計算は、CSSレイアウトの置換要素用に定義されたデフォルトサイズアルゴリズム[css-images-3]に従います。 特に、参照リソースに本来のサイズがない場合(例:iframeや寸法が定義されていない画像タイプ)は、幅300px・高さ150pxとみなされます。

CSSの配置プロパティ(例:topmargin)は、SVG座標系で埋め込みコンテンツ要素を配置する際には効果がありません。 ただし、foreignObjectやHTML埋め込み要素の子要素の配置には使用できます。

12.3. ‘image’ 要素

image
カテゴリ:
グラフィックス要素, グラフィックス参照要素, レンダリング可能要素, 構造的外部要素
コンテンツモデル:
以下の要素が任意の順序、任意の数だけ含まれることができます:clipPath, mask, script, style
属性:
ジオメトリプロパティ:
DOMインターフェイス:

image要素は、完全なファイルの内容を現在のユーザー座標系内の指定された矩形領域に描画することを示します。image要素は、PNGやJPEGなどのラスタ画像ファイルや、MIMEタイプが"image/svg+xml"のファイルを参照できます。適合SVGビューアは、少なくともPNG、JPEG、SVG形式ファイルをサポートする必要があります。 SVGファイルは、現在の文書がアニメーションをサポートしている場合はセキュアアニメーションモードで、静的な場合はセキュア静的モードで処理されなければなりません。

imageの処理結果は常に4チャンネルのRGBAとなります。image要素が3チャンネル(RGB)の画像(多くのPNGやJPEGファイル)を参照する場合、オブジェクトはアルファチャンネルが一様に1に設定された4チャンネルRGBA画像に変換されたかのように扱われます。単一チャンネル(グレースケール)のラスタ画像の場合も、参照オブジェクトの単一チャンネルを使って3つのカラーとアルファチャンネル(一様に1)を計算した4チャンネルRGBA画像として扱われます。

preserveAspectRatio属性は、参照画像が配置矩形およびobject-fitobject-positionプロパティから決定されるコンクリートオブジェクトサイズにどのようにスケーリング・配置されるかを決定します。 この属性の適用結果は、実際の画像描画に用いられる画像レンダリング矩形を定義します。 参照画像がSVGの場合、画像レンダリング矩形がそのSVGの描画に使われるSVGビューポートとなります。

preserveAspectRatioの計算はコンクリートオブジェクトサイズ決定後に適用され、 そのサイズが埋め込み画像の本来のアスペクト比と一致しない場合のみ効果があります。 object-fit値がコンクリートオブジェクトサイズと本来のアスペクト比を一致させる(デフォルトfill以外)場合、preserveAspectRatioは効果がありません。 画像レンダリング矩形はCSSによるオブジェクトのスケーリング・配置時に決定されます。 したがってpreserveAspectRatio属性は多くの場合object-fitobject-positionのフォールバックとして安全に利用できます。 アスペクト比制御をオフにするには、object-fit値にかかわらず明示的にnoneを設定する必要があります。

preserveAspectRatio属性の評価で使われるアスペクト比は参照コンテンツの本来のアスペクト比で定義されます。 SVGファイルの場合は、SVGコンテンツの本来のサイズ特性で定義されます。 通常のラスタコンテンツ(PNG、JPEG)は画像ファイルのピクセル幅・高さで本来のアスペクト比が決まります。 埋め込み画像に本来のアスペクト比がない場合(例:viewBoxも明示的寸法もないSVG)、preserveAspectRatio属性は無視されます。 画像はimage要素のジオメトリプロパティで定義された配置矩形いっぱいに描画されます。

たとえば、画像要素がPNGまたはJPEGを参照し、preserveAspectRatio="xMinYMin meet"の場合、ラスタ画像のアスペクト比が保持されます(画像座標→ユーザー座標のスケールがX・Yとも同じ)。ラスタ画像は可能な限り大きく、かつビューポート全体に収まるようサイズ調整され、ラスタ画像の左上がビューポートの左上(xywidthheight属性で定義)に揃えられます。preserveAspectRatio値が'none'の場合、画像のアスペクト比は保持されません。 画像はラスタの左上が(xy)に、右下が(x+widthy+height)にぴったり合うように配置されます。

SVG画像を埋め込むimage要素では、 参照SVG画像のルート要素上のpreserveAspectRatio属性は無視され、代わりにnoneとして扱われます(詳細はpreserveAspectRatio参照)。 これにより、参照側imagepreserveAspectRatio属性が意図通り反映されます(noneの場合も含む)。

image要素のpreserveAspectRatio値がnoneでない場合、 image要素のプロパティから決定される画像レンダリング矩形は埋め込みSVGの本来のアスペクト比と完全一致します。 埋め込みSVGのpreserveAspectRatio属性を無視しても通常は影響しません。 例外は、画像のアスペクト比がwidthheight属性の絶対値で決まっていて、それがviewBoxアスペクト比と一致しない場合です。 この状況は著者は避けるよう推奨されます。

ユーザーエージェントのスタイルシートでは、image要素上のoverflowプロパティ値をhiddenに設定します。 著者による上書きがなければ、画像はジオメトリプロパティで定義された配置矩形にクリップされます。

SVG画像を埋め込むimage要素の場合、2種類のoverflow値が適用されます。 image要素で指定された値は画像レンダリング矩形配置矩形にクリップされるかどうかを決定します。 参照SVGのルート要素上の値は、グラフィックスが画像レンダリング矩形にクリップされるかどうかを決定します。

SVG 2で新規追加。 以前のSVGでは、埋め込みSVGのoverflow(およびclip)プロパティは無視されていました。 新しいルールでは、sliceレイアウトによるオーバーフロー制御が参照画像側でも安全に使えるようになりました。

埋め込みSVG画像の特定ビューにリンクするには、SVGコンテンツへのリンクで定義されるメディアフラグメントが使えます。 ラスタ画像の特定部分を切り出すには、基本メディアフラグメント識別子[Media Fragments URI 1.0 (basic)]が使えます。 いずれのフラグメントも画像の本来の寸法本来のアスペクト比に影響する場合があります。

image要素が参照するリソースは独立した文書であり(XMLリソースの場合は独自の構文木・DOMを生成)、プロパティの継承は行われません。

useとは異なり、image要素はSVGファイル内の要素を参照できません。

SVG 2要件: 自動サイズ画像のサポート。
決定: SVG 2で自動サイズ画像を許可します。
目的: ラスタ画像がwidthとheightを設定せずに自身のサイズを使えるようにするため。
担当: Cameron (ACTION-3340)
SVG 2要件: imageの一部選択表示サポート。
決定: ‘image’が画像の一部を表示する方法(たとえば‘viewBox’許可)を持つ。
目的: 著者が画像を手動で分割せずとも一部選択できるようにするため。
担当: 担当者なし
SVG 2要件: css-images-3の‘object-fit’および‘object-position’プロパティサポート。
決定: SVG 2はCSS3 Image Values/CSS4 Image Valuesに依存する。
目的: preserveAspectRatioが提供するCSSの画像フィット指定に合わせるため。
担当: CameronまたはErik(アクションなし)

属性定義:

名前 初期値 アニメーション可能
crossorigin [ anonymous | use-credentials ]? (HTML属性定義参照) はい

crossorigin属性はCORS設定属性であり、特記なき限りHTMLの処理規則に従います[HTML]。

名前 初期値 アニメーション可能
href URL [URL] (なし) はい

描画画像を特定するURL参照URL参照属性非推奨XLink属性の共通処理を参照してください。

URLは処理され、リソースはリンク章で定義された通りに取得されます

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <desc>このグラフィックは外部画像にリンクしています
  </desc>
  <image x="200" y="200" width="100px" height="100px"
         href="myimage.png">
    <title>My image</title>
  </image>
</svg>

画像参照は常に完全な文書を参照するため、ターゲットのみのURLは同じファイルへのリンクとみなされ、独立した埋め込み画像として再度描画されます。 埋め込み画像はセキュアモードで処理されるため、その中の埋め込み参照は処理されず、無限再帰が防止されます。

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="3cm" viewBox="0 0 50 30"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>再帰SVG</title>
  <desc>SVG自身への再帰的画像参照が2つあるSVG。
    一つはファイル名の相対URLを使い、
    もう一つはターゲットフラグメントのみを使う。
    外部ファイル参照をサポートする処理モードで表示すると埋め込み画像が描画されるべきですが、
    埋め込み画像はセキュアモードで処理されるため、
    再帰は一度だけ発生します。
    表示は三重の赤い円による的模様となります。
    最内円はターゲットスタイルにより塗りつぶしになります。
  </desc>
  <style type="text/css">
    #target:target {
      fill: red;
    }
  </style>
  <circle id="target"
          stroke="red" stroke-width="5" fill="none"
          cx="50%" cy="50%" r="12" />
  <image xlink:href="recursive-image.svg"
         x="25%" y="25%" width="50%" height="50%" />
  <image xlink:href="#target"
         x="45%" y="45%" width="10%" height="10%" />
</svg>
例: recursive-image — SVG自身を埋め込み的模様を作る

例: recursive-image

SVGとして表示(SVG対応ブラウザのみ)

12.4. SVGサブツリー内のHTML要素

以下のHTML要素は、コンテナー要素の子としてSVGサブツリー内に含まれ、HTML名前空間を利用する場合に描画されます:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
  <html:video src="file.mp4" controls="controls">
  </html:video>
</svg>

HTML名前空間のHTML要素が、SVG文書フラグメント内の'video''audio''iframe''canvas'要素の子として使用される場合、その挙動はHTML仕様で定義された通りになります。特にフォールバックコンテンツに適用されます。 フォールバックコンテンツが描画される場合、埋め込み要素はHTMLコンテンツを含むSVGのforeignObject要素のように振る舞います。 これは例えば、video要素でユーザーエージェントが指定された動画形式をサポートしない場合や、canvas要素でスクリプトが無効な場合に発生します。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
  <html:video src="http://example.org/dummyvideo" controls="controls">
    <html:p>このブラウザは動画形式をサポートしていません。</html:p>
  </html:video>
</svg>

HTML仕様は、'track''source' 要素にも適用されます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
  <html:video src="file.mp4" controls="controls">
    <html:source src="file.webm" type='video/webm;codecs="vp8, vorbis"'/>
    <html:source src="file.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
  </html:video>
</svg>

現在、SVGサブツリー内ではこれらのタグ名はHTMLパーサによってHTML名前空間要素として認識されていませんが、将来的には変更される可能性があります。 したがって、SVG内でこれらの要素を含めるためには、次のいずれかが必要です:

SVGサブツリー内のその他のHTML要素(foreignObject要素内部以外)は、描画の観点では未知の要素として扱われなければなりません。

多くのHTML要素はHTMLパーサによって構文エラーとして扱われ、SVGフラグメントが終了する原因となります。

12.5. ‘foreignObject’ 要素

foreignObject
カテゴリ:
グラフィックス要素, レンダリング可能要素, 構造的外部要素
コンテンツモデル:
任意の要素または文字データ。
属性:
ジオメトリプロパティ:
DOMインターフェイス:

SVGは、他の種類のコンテンツを記述・描画するための他のXML言語との互換性を持つよう設計されています。 foreignObject 要素は、非SVG名前空間の要素をSVGグラフィックの領域内で他のユーザーエージェント処理により描画することを可能にします。含まれる外部グラフィックコンテンツはSVGの変換、フィルタ、クリッピング、マスキング、合成の対象となります。 例として、 SVG描画内にMathML式を挿入する([MathML3])、 または複雑なCSS整形HTMLテキストやフォーム入力ブロックを追加するなどがあります。

HTMLパーサはforeignObject内部の要素を、HTML文書フラグメント内部の要素と同様に扱います。 svgmath要素およびその子孫は、それぞれSVGやMathML名前空間としてパースされます。 他のタグはすべてHTML名前空間としてパースされます。

foreignObject内部のSVG名前空間要素は、 適切に定義されたSVGフラグメント(ルートsvg要素を含む)が子孫として定義されている場合を除き、描画されません。

foreignObject は、switch要素やrequiredExtensions属性と組み合わせて使用することで、ユーザーエージェントのサポートを適切にチェックし、サポートがない場合に代替描画を提供できます。

この仕様では、requiredExtensions値を異なるXML言語サポートへどうマッピングするかは定義していません。 将来の仕様で定義される可能性があります。

SVGユーザーエージェントが埋め込み外部オブジェクト型を処理するために他の任意のユーザーエージェントを呼び出すことは必須ではありませんが、 すべての適合SVGユーザーエージェントはswitch要素をサポートし、 switch要素内の代替案として現れる有効なSVG要素を描画できなければなりません。

商用Webブラウザは、SVGがCSS整形HTMLやMathMLコンテンツを埋め込む機能をサポートし、 描画コンテンツがSVGフラグメントで定義された変換や合成の対象となることが期待されています。 現時点ではこの機能は必須ではありません。

<?xml version="1.0" standalone="yes"?>
<svg width="4in" height="3in"
 xmlns = 'http://www.w3.org/2000/svg'>
  <desc>この例は 'switch' 要素を使い、XMHTMLがサポートされない場合に段落の代替グラフィック表現を提供します。</desc>
  <!-- 'switch' 要素は、テスト属性がtrueとなる最初の子要素を処理します。-->
  <switch>
    <!-- requiredExtensions属性がtrueの場合(ユーザーエージェントがSVG内埋め込みXHTMLをサポート)、埋め込みXHTMLを処理 -->
    <foreignObject width="100" height="50"
                   requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
      <!-- XHTMLコンテンツをここに記述 -->
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>ここに折り返しが必要な段落があります</p>
      </body>
    </foreignObject>
    <!-- それ以外の場合、以下の代替SVGを処理
         'text' 要素にはテスト属性がありません。
         テスト属性が指定されない場合、テスト属性がありtrue評価されたものとして扱われます。-->
    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">ここに段落があります</tspan>
      <tspan x="10" y="20">折り返しが必要です。</tspan>
    </text>
  </switch>
</svg>

12.6. DOMインターフェイス

12.6.1. SVGImageElementインターフェイス

SVGImageElementオブジェクトは、DOM内のimage要素を表します。

[Exposed=Window]
interface SVGImageElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
  [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
  attribute DOMString? crossOrigin;
};

SVGImageElement includes SVGURIReference;

x, y, width, height のIDL属性は、それぞれ算出値を反映したxywidthheightプロパティおよび対応するプレゼンテーション属性です。

preserveAspectRatio IDL属性は、preserveAspectRatio内容属性を反映します。

crossOrigin IDL属性は、crossorigin内容属性を反映します。

12.6.2. SVGForeignObjectElementインターフェイス

SVGForeignObjectElement オブジェクトは、DOM内のforeignObject要素を表します。

[Exposed=Window]
interface SVGForeignObjectElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedLength x;
  [SameObject] readonly attribute SVGAnimatedLength y;
  [SameObject] readonly attribute SVGAnimatedLength width;
  [SameObject] readonly attribute SVGAnimatedLength height;
};

x, y, width, height のIDL属性は、それぞれ算出値を反映したxywidthheightプロパティおよび対応するプレゼンテーション属性です。