第16章: リンク

16.1. 参照

16.1.1. 概要

インターネット上では、リソースはURL (国際化リソース識別子)を使って識別されます。例えば、http://example.com にある someDrawing.svg というSVGファイルは以下のURLを持ちます:

http://example.com/someDrawing.svg

URLは、URLフラグメント識別子を組み合わせることで、XML文書内の特定要素を指定することもできます。URLにフラグメント識別子が含まれる場合は、オプションのベースURLの後に「#」文字、その後にURLフラグメント識別子が続きます。例えば、次のURLで someDrawing.svg 内のIDが "Lamppost" の要素を指定できます:

http://example.com/someDrawing.svg#Lamppost

16.1.2. 定義

URL参照
URL参照は、国際化リソース識別子 [rfc3987]として定義されます。詳細は 参照参照と‘defs’要素を参照してください。
フラグメント識別子付きURL参照
国際化リソース識別子 [rfc3987] で、<absoluteURL>または <relativeURL>、およびそのリソース内のフラグメント識別子を含むことができます。詳細は参照と‘defs’要素参照。フラグメント識別子付きURL参照は、ペイントサーバーへの参照によく使われます。
外部ファイル参照
現在の文書の一部ではないリソースを参照するURL参照またはフラグメント識別子付きURL参照です。
同一文書URL参照
非フラグメント部分が現在の文書を指すフラグメント識別子付きURL参照です。
data URL
"data" URLスキーム [rfc2397]を使って埋め込まれた文書へのURL参照です。 Data URL参照は外部ファイル参照でも同一文書URL参照でもありません。
循環参照
URL参照が直接または間接的に自分自身を参照している場合は、無効な循環参照として扱われます。 何が循環参照に該当するかは、参照しているリソースの使い方によって異なり、現在の要素の祖先への参照も含まれる場合があります。
未解決参照
まだ処理中であり、エラーにもリソース特定にも至っていない参照です。
無効な参照

以下のいずれかは無効な参照です:

  • 循環参照。
  • 処理中にエラーが発生したURL参照
  • 解決できないURL参照
  • 不適切なターゲット要素へのURL参照は、無効な参照として扱われます (適切なターゲットについては有効なURLターゲット参照)。 例:clip-pathプロパティは clipPath 要素のみ参照できます。clip-path:url(#MyElement)という設定は、参照先がclipPathでない場合は無効な参照です。

無効な参照がエラーになるかどうかは (エラー処理参照)、 参照しているプロパティや属性がフォールバック動作を定義しているかどうかによります。

16.1.3. URLとURI

国際化リソース識別子(URL)は、Uniform Resource Identifiers(URI)をより一般化したものです。URLは ユニバーサルキャラクタセット [UNICODE] の文字列で構成されます。 URIはより限定された文字セットで構成されます。URIはすべて既に適合したURLです。URLからURIへのマッピングは URL仕様で定義されており、URLはXML文書内でURIの代わりにリソース識別に利用できます。URLは、プロトコルが直接対応していない場合はネットワーク解決のためURIに変換できます。

従来のSVG仕様では、XLinkに従い、URL参照型は「URIまたは特定のエスケープ手順後にURLになる文字列」として定義されていました。このエスケープ手順はXLink 1.0仕様 [xlink] と W3C XML Schema Part 2: Datatypes仕様 [xmlschema-2] にも繰り返し記載されていました。 この重複は誤りや分岐の可能性を生みましたが、URL仕様がまだ標準化されていなかったため行われていました。

本仕様では、この「URIまたは文字列+アルゴリズム」には正しい用語URLを用い、URLをURIに変換するエスケープ方法は URL仕様 [rfc3987]に従って定義します(これはIETF現行標準になりました)。他のW3C仕様も、今後この重複したエスケープ記述を廃止し、 URLを直接参照するように改訂される予定です。

16.1.4. 構文形式: URLおよび<url>

SVGでは、2つの要素間の構造的関係のほとんどは、‘href’属性にURL値を指定することで記述されます。 しかし、多くのプレゼンテーション属性は、内容としてURLとテキスト文字列の両方を許可します。 テキスト文字列を相対URLと区別するために、<url> 生成式がプレゼンテーション属性および対応するCSSプロパティ [css-values] で使用されます。 これは単に、機能記法で区切られたURLです。

SVGは、絶対・相対の両方のURL参照を他のオブジェクトに対して広く利用します。 例えば、linearGradient要素は、別のグラデーション要素を元にして、 差分だけを定義することができます。その際、href属性にURLで元のグラデーションを参照します:

<linearGradient id="SourceGradient">...</linearGradient>
<linearGradient id="MyGradient"
                href="#SourceGradient">...</linearGradient>

このグラデーションで長方形を塗りつぶすには、長方形のfillプロパティ値に、 該当するlinearGradient要素へのURL参照を含めます。例:

<rect fill="url(#MyGradient)"/>

16.1.5. URL参照属性

URL参照は通常、 ‘href’属性で指定します。 この属性値が目的のリソース(フラグメント識別子がある場合は副次リソース)への参照となります。 ‘href’属性の値はURLでなければなりません。

任意のアプリケーションが値のURL参照性を検証するのは現実的でないため、本仕様はURL仕様に従い、SVGオーサリングツールに対してそのような適合性検査要件は課しません。 無効なURLがあってもSVG文書は非適合にはなりません。 SVGユーザーエージェントは、必要な場合のみURLを処理すればよく、 URL参照の処理に記載の通りです。

16.1.6. 非推奨XLink URL参照属性

従来のSVGでは、‘href’ 属性はXLink名前空間 [xlink] で指定されていました。 この用法は現在非推奨となり、URL参照は 名前空間なしの‘href’属性で指定すべきです。

後方互換性のため、非推奨のxlink:href属性、 ならびに同じく非推奨のxlink:title属性が定義されています。

属性定義:

名前 初期値 アニメーション可能
xlink:href URL [URL] (なし) (下記参照)

後方互換性のため、‘href’属性を持つ要素は、XLink名前空間 [xlink] の‘href’属性も認識します。

名前空間なしの‘href’属性とXLink名前空間の‘href’属性が 両方存在する場合は、名前空間なしの属性値を使用し、XLink名前空間の属性は無視します。

適合SVG生成器は、名前空間なしの‘href’属性を生成しなければなりません。 ただし、後方互換性のためにXLink名前空間付きの‘href’属性も生成することは可能です。

この属性は、対応する‘href’属性が アニメーション可能と定義されている場合のみアニメーション可能です。

名前 初期値 アニメーション可能
xlink:title <anything> (なし) 不可

リンクやリソースの意味を人間が読める形で記述するための非推奨属性です。 新しいコンテンツでは‘xlink:title’属性ではなく、‘title’子要素を使ってください。

この情報の利用は処理形態に大きく依存します。例えば、視覚障害者向けアプリケーションでタイトルを利用したり、リンクの一覧表を作成したり、マウスポインターをリソース上に置いたときヘルプテキストを表示するなどの用途があります。

‘title’属性を使う場合はXLink名前空間でなければなりません。 詳細はXMLリンク言語(XLink) [xlink] を参照。

非推奨XLink属性xlink:hrefxlink:titleを使う場合は、 明示的なXLink名前空間宣言が必要です [xml-names]。 XLink名前空間宣言を与える最も簡単な方法は、XLink属性を使うコンテンツのsvg要素に ‘xmlns’属性でXLink名前空間を宣言することです。例:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" ...>
  <image xlink:href="foo.png" .../>
</svg>

16.1.7. URL参照の処理

URLは必要となった時点でリソース特定のために以下のように処理されます:

レガシーxlink:href属性は、対応するhref属性が存在しない場合のみ、同じタイミングで処理されます。

URLの処理は三つのステップで行われます: 絶対URLの生成、 文書の取得(必要な場合)、 ターゲット要素の特定(必要な場合)。

URL参照は、処理によって無効な参照になるか、ターゲットリソースが特定されるまで未解決状態です。 構造的外部要素の非プレゼンテーション属性に未解決参照があると、loadイベントの発火を妨げます。ユーザーエージェントは、同一文書URL参照でない参照の解決に時間制限を設けてもよく、制限後はネットワークエラーとして扱い(結果として無効な参照扱い)、処理を終了します。

動的文書内の同一文書URL参照については、属性やプロパティの変更・アニメーション、DOMからの要素削除などによってURL参照が未解決状態に戻ることがあります。 ユーザーエージェントは再度URI解決を試み、参照リソースの特定を行わなければなりません。

16.1.7.1. 絶対URLの生成

URL参照が相対URLの場合は、使用前に絶対化しなければなりません。 絶対URLは次のいずれかの方法で生成します:

‘xml:base’属性はXML文書でのみ効果があります(SVG文書やXHTML文書には有効ですが、XMLでないHTML文書には無効)。 一方、base 要素はSVG・HTML文書のいずれでも相対URLに影響し、文書ベースURLを変更します。

HTTPなどのプロトコルがURLを直接サポートしない場合は、ユーザーエージェントがURLをURIに変換する必要があり、これはURL仕様 [rfc3987] 3.1節の通りです。

絶対URL生成後:

CSS値と単位で定義されているように、スタイルプロパティにおけるフラグメントのみのURLは、宣言されたファイル種別に関わらず同一文書URL参照として扱われなければなりません。

16.1.7.2. 文書の取得

SVGプロパティや属性は他の文書を参照できます。 このようなURLを処理する際、ユーザーエージェントは本節で述べる方法で参照文書を取得すべきですが、以下の条件では例外となります:

インターネットから外部リソースを取得する際、ユーザーエージェントはHTMLで定義されたCORS有効化リクエストを使わなければならず [HTML]、corsAttributeStateは以下の通りです:

base

リクエストのoriginはHTMLと同じルールで計算されます (現行標準HTML)。 SVGのscript要素はHTMLのscript要素と同様に扱い、 SVGのimage要素はHTMLのimg要素と同様に扱います。 default origin behaviourtaintに設定しなければなりません。

将来のSVG仕様では、他のSVG要素のhref属性にもCORS参照が可能となる場合があります。

取得アルゴリズムがエラーまたは空のレスポンスボディとなった場合、参照URLは無効な参照として扱います。

正常なレスポンスが返され、参照の有効なURLターゲットに特定の要素型が含まれる場合、ユーザーエージェントはサブリソース文書の処理に進みます。 (URL参照が文書全体のみ有効な場合は、取得した文書が参照リソースとなります。)

16.1.7.3. サブリソース文書の処理

それ以外の場合、サブリソースはターゲット要素を特定するためにパースされなければなりません。 取得された文書がユーザーエージェントによってパースされ、ドキュメントオブジェクトモデルを生成できる型であれば、 セキュア静的モードで処理します (追加の外部リソースを取得せず、スクリプトの実行やアニメーション・動画の再生もしない)。 外部サブリソース参照用に生成された文書モデルは不変(読み取り専用)で、変更できません。

取得ファイルからドキュメントオブジェクトモデルが生成できる場合、 URLの処理はターゲット要素の特定で示した通り、 パース済みサブリソース文書を参照文書として続行します。 ユーザーエージェントは文書の完全パース前にターゲット特定処理を開始してもかまいません。

ユーザーエージェントは外部リソースURLとそれに対応するパース済み文書のリストを保持し、 処理モード・キャッシュ・CORS要件に反しない限り、後続の参照時に文書を再利用しても構いません。

16.1.7.4. ターゲット要素の特定

特定要素へのURL参照の場合、 その参照が有効かどうかは、参照先文書内で要素を見つけられるか、かつ許可された型であるかによって決まります。

先の処理ステップで特定された参照文書(外部サブリソース文書または現在の文書)を使って、 ターゲット要素は次の方法で特定されます:

ターゲット要素が参照に対して有効なURLターゲットである場合のみ、参照リソースを提供します。

16.1.7.5. 有効なURLターゲット

href(またはxlink:href)属性の有効なターゲット要素型は、 属性を持つ要素によって以下のように決まります:

本仕様で定義されるスタイルプロパティの有効なターゲット要素型は以下の通りです:

ターゲット要素または画像ファイルの参照を許可する場合(shape-insideshape-subtractmaskプロパティなど)、 ユーザーエージェントはターゲット要素を特定し、それが有効なターゲットか判定しなければなりません。 解決されたターゲット要素が許可された型でない場合、参照リソースは文書ファイル全体となり、 ターゲットフラグメントは他の画像同様、そのファイルの処理時に利用されます。

それ以外の場合、解決されたターゲット要素型(または文書型)がURL参照に許可されていなければ、無効な参照です。

SVGはリンク(ハイパーリンクまたはWebリンクとも呼ばれる)を示すa要素を提供します。 a要素は、href またはxlink:href属性を持つ場合にリンクとなります。これらの属性がない場合、a要素はリンクの非アクティブなプレースホルダーです。

SVG 1.1ではXLink仕様([XLink])によって定義され、XLink名前空間の属性を使用していました。 SVG 2ではHTMLリンクと整合するデフォルト名前空間の属性セットを使い、XLink属性を非推奨としています。

a要素は、親要素が含められる全ての要素を含むことができますが、他のa要素は除きます。 グラフィカル・テキスト両方のリンク付きコンテンツで同じ要素を使います。 リンクは入れ子にできません。 a要素が他のハイパーリンク要素(SVG名前空間でも他の名前空間でも)の子孫の場合、ユーザーエージェントはそのhref属性を無視し、非アクティブとして扱う必要があります。 無効なa要素も通常のコンテナ要素として描画されます。

無効な入れ子リンクの描画は未定であり、unknown要素の描画に関する決定と同期される可能性があります。

ポインターイベントの処理では、 a要素内に含まれる各描画要素ごとにリンクの当たり判定領域が定義されます (各要素のpointer-eventsプロパティ値による)、 a要素自身のバウンディングボックスではありません。 ユーザーエージェントはすべてのリンクがフォーカス可能であり、キーボード操作でアクティブ化できるようにもする必要があります。

リンク先のリモートリソース(リンクの目的地)は、 a要素のhref属性で指定されたURLによって定義されます。 リモートリソースはあらゆるWebリソース(画像、動画クリップ、音声、プログラム、他のSVG文書、HTML文書、現在の文書内の要素、別文書内の要素など)になり得ます。 ユーザーによるリンクのアクティブ化(マウスクリック、キーボード入力、音声コマンド等)に応じて、ユーザーエージェントは指定されたリソース文書の取得を試み、表示またはダウンロード用ファイルとして利用可能にします。

例 link01は楕円にリンクを割り当てています。

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>Example link01 - a link on an ellipse
  </desc>
  <rect x=".01" y=".01" width="4.98" height="2.98" 
        fill="none" stroke="blue"  stroke-width=".03"/>
  <a href="http://www.w3.org">
    <ellipse cx="2.5" cy="1.5" rx="2" ry="1"
             fill="red" />
  </a>
</svg>
例 link01 — 楕円上のリンク

例 link01

この例をSVGで表示 (SVG対応ブラウザのみ)

上記SVGファイルをSVG・HTML両対応のユーザーエージェントで表示した場合、楕円をクリックすると現在のウィンドウまたはフレームがW3Cホームページに置き換わります。

a
カテゴリ:
コンテナ要素, 描画可能要素
内容モデル:
記述的コンテンツ、および親の内容モデルで許可される全ての要素やテキスト。ただし他のa要素は除く。親がswitch要素の場合は、最も近い非switch祖先の内容モデルを用いる。
属性:
DOMインターフェイス:

属性定義:

名前 初期値 アニメーション可能
href URL [URL] (なし) はい
参照オブジェクトの位置をURL参照として指定します。 URL参照属性の共通処理も参照。
名前 初期値 アニメーション可能
target _self | _parent | _top | _blank | <XML-Name> _self はい

親文書がHTMLやXHTML文書に埋め込まれている場合やタブブラウザで表示されている場合など、終了リソースのターゲットが複数候補ある場合に使用します。この属性はリンクアクティブ時にドキュメントを開くブラウジングコンテキスト(ブラウザタブ、SVG/HTML/XHTML iframeやobject要素等)の名前を指定します:

_self
現在のSVG画像と同じブラウジングコンテキスト内で、リンク先コンテンツに置き換えます。
_parent
SVG画像の直近の親ブラウジングコンテキストが存在し、かつ本ドキュメントから安全にアクセス可能な場合、そのコンテキストをリンク先で置き換えます。
_top
アクティブなウィンドウやタブの内容全体をリンク先で置き換えます(存在し安全にアクセス可能な場合)。
_blank
リンク先表示用に新しい無名ウィンドウやタブを要求します(本ドキュメントが安全に実行できる場合)。 複数ウィンドウ・タブ非対応のユーザーエージェントでは、_topと同じ結果です。
<XML-Name>
リンク先表示用のブラウジングコンテキスト(タブ、インラインフレーム、object等)の名前を指定します。指定名のコンテキストが既存かつ本ドキュメントから安全にアクセス可能なら再利用され、内容は置き換えられます。なければ新規作成('_blank'と同じだが名前付き)。名前は有効なXML Name [XML11] で、HTMLの有効なブラウジングコンテキスト名要件に合わせてアンダースコア(U+005F LOW LINE)で始めないことが推奨されます。

ブラウジングコンテキストとコンテキスト間のナビゲーションアクションに関するセキュリティ制約の規範定義はHTML [HTML](Webページの読み込み章)です。

従来のSVGは特殊なターゲット値'_replace'を定義していました。これは十分に実装されず、'_replace''_self'の違いはHTMLのブラウジングコンテキスト定義の変更で不要となりました。現在のSVG文書を置き換えるには'_self'を使ってください。

'_new'はターゲットとして不正です。新しいタブ/ウィンドウでドキュメントを開くには'_blank'を使ってください。

名前 初期値 アニメーション可能
download 任意値(空でなければ値は推奨ファイル名を表す) (なし) 不可
ping スペース区切りの有効な非空URLトークン[HTML] (なし) 不可
rel スペース区切りのキーワードトークン[HTML] (なし) 不可
hreflang BCP 47言語タグ文字列[HTML] (なし) 不可
type MIMEタイプ文字列[HTML] (なし) 不可
referrerPolicy リファラーポリシー文字列[REFERRERPOLICY] (なし) 不可
これらの属性はターゲットリソースと現在の文書との関係をさらに記述します。 許可値と意味はHTMLのa要素の定義と同じです。

16.3. SVGコンテンツへのリンク:URLフラグメントとSVGビュー

SVGコンテンツはしばしば何かの画像や図を表すため、特定の ビューへのリンクが必要になることがよくあります。ビューは、ドキュメントの特定のセクションをクローズアップ表示するために、初期変換を指示します。

16.3.1. SVGフラグメント識別子

SVG 2 要件: SVG 1.1 SEテキストとSVG Tiny 1.2テキストのフラグメント識別子リンクトラバーサルを統合し、メディアフラグメントを追加する。
決議: SVG 2 はメディアフラグメント識別子を持つ。
目的: Media Fragments URIと整合させるため。
担当者: Cyril (ACTION-3442)

SVGドキュメントの特定のビューへリンクするためには、フラグメント識別子付きURL参照が正しく構成されたSVGフラグメント識別子である必要があります。SVGフラグメント識別子は、MIMEメディアタイプ "image/svg+xml" のリソースを特定するURLの「セレクタ」や「フラグメント識別子」部分の意味を定義します。

SVGフラグメント識別子は以下の形式で記述できます:

16.3.2. SVGフラグメント識別子定義

SVGフラグメント識別子は以下のように定義されます:

SVGFragmentIdentifier ::= BareName *( "&" timesegment ) |
                          SVGViewSpec *( "&" timesegment ) |
                          spacesegment *( "&" timesegment ) |
                          timesegment *( "&" spacesegment )

BareName ::= XML_Name
SVGViewSpec ::= 'svgView(' SVGViewAttributes ')'
SVGViewAttributes ::= SVGViewAttribute |
                      SVGViewAttribute ';' SVGViewAttributes

SVGViewAttribute ::= viewBoxSpec |
                     preserveAspectRatioSpec |
                     transformSpec |
                     zoomAndPanSpec
viewBoxSpec ::= 'viewBox(' ViewBoxParams ')'
preserveAspectRatioSpec = 'preserveAspectRatio(' AspectParams ')'
transformSpec ::= 'transform(' TransformParams ')'
zoomAndPanSpec ::= 'zoomAndPan(' ZoomAndPanParams ')'

ここで:

SVGビュー・ボックスのパラメータは、CSS変換仕様に従って順番に適用されます(例:SVGビューはまずViewBoxParamsで変換され、次にTransformParamsで変換されます)。

フラグメント仕様内ではスペースが許可されています。SVGビュー仕様内の数値はカンマで区切り(例:#svgView(viewBox(0,0,200,200)))、属性はセミコロンで区切ります(例:#svgView(viewBox(0,0,200,200);preserveAspectRatio(none)))。

フラグメント識別子は、CSS Object Model (CSSOM)仕様で定義されたルールに従い、urlエスケープできます。 例えば、セミコロンは %3B としてエスケープでき、(セミコロン区切りの)URLリストをアニメーションする際に、セミコロンがリストの区切りと解釈されるのを避けられます。

SVGViewAttributeの4つの型は任意の順序で現れますが、正しく構成されたSVGViewSpecでは各型は最大1回のみ出現できます。

ソースドキュメントがSVGドキュメントへのリンクを実行する場合、例えばHTMLアンカー要素 ([HTML]、すなわち <a href=...>要素)や XLink仕様 [xlink]などを介して、 SVGフラグメント識別子はSVGドキュメントの初期ビューを以下のように指定します:

16.3.3. 定義済みビュー:‘view’要素

‘view’要素は以下のように定義されています:

view
カテゴリ:
なし
内容モデル:
以下の要素を任意の順序で任意の数含むことができます:script, style
属性:
DOMインターフェース:

viewTarget属性を削除することが決定されました。

決定:2015年パリ F2F 3日目。

担当者:BogdanBrinza。

16.4. DOMインターフェース

16.4.1. SVGAElement インターフェース

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

[Exposed=Window]
interface SVGAElement : SVGGraphicsElement {
  [SameObject] readonly attribute SVGAnimatedString target;
  attribute DOMString download;
  attribute USVString ping;
  attribute DOMString rel;
  [SameObject, PutsForward=value] readonly attribute DOMTokenList relList;
  attribute DOMString hreflang;
  attribute DOMString type;

  attribute DOMString text;

  attribute DOMString referrerPolicy;
};

SVGAElement includes SVGURIReference;
SVGAElement includes HTMLHyperlinkElementUtils;

targetdownloadpingrelhreflangtype のIDL属性は、 同じ名前のコンテンツ属性を 反映 します。

relList IDL属性は 反映 された rel コンテンツ属性を表します。

referrerPolicy IDL属性は 反映 された referrerpolicy コンテンツ属性を表し、 既知の値のみ制限されます

text IDL属性は、 取得時は要素の textContent IDL属性と同じ値を返し、設定時は要素の textContent IDL属性が新しい値に設定されたかのように動作します。

16.4.2. SVGViewElement インターフェース

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

[Exposed=Window]
interface SVGViewElement : SVGElement {};

SVGViewElement includes SVGFitToViewBox;
SVGViewElement includes SVGZoomAndPan;