SVGで定義されたグラフィックスは様々な用途に利用できます。 そのため、SVGを利用するソフトウェアが全て同じ機能を持つわけではありません。 SVG仕様への適合性は単純な二元論ではなく、 ソフトウェアは限定された機能セット内で適合している場合もあります。
また、SVGは他の種類の文書に統合されることを前提に設計されています。 統合方法によっては、限定的な機能セットのみが適切な場合もあります。 SVG文書フラグメントは、他の文書から参照されたり、組み込まれたりして ユーザーエージェントによって処理される場合があります。SVG文書は 主文書として直接表示されることもできます。 SVG文書フラグメントの利用方法ごとに、その処理方法に関する要求事項が異なります。
この章では、文書内で有効・無効となる機能の組み合わせを包括する 処理モード をいくつか定義します。 さらに、SVG文書が他のSVG文書を参照・埋め込む際に、どの処理モードを使うべきか という規範的な要求事項を定めます。 他の仕様でもSVG文書の処理方法を説明するために、同じ処理モードを参照できるようになっています。
この文書は、HTMLや各種CSS仕様など、SVG文書を参照または包含できる 他仕様に対して規範的な要求事項を課すものではありません。意図としては、 これら他仕様が本書の適切な処理モードを規範的に指示することです。
この章ではまた、 様々な種類のSVGコンテンツや、 SVGを利用または生成する様々なソフトウェアクラス に対する具体的な適合要件も概説します。
この節ではSVG文書用の標準的な処理モードセットを定義します。 各処理モードは、特定の高レベルSVG機能が有効かどうかを指定します。
処理モードにより有効・無効となる可能性のある機能は以下の通りです:
宣言的アニメーションには、SVG内のアニメーション要素 — ‘animate’、 ‘animateMotion’、 ‘animateTransform’ および‘set’、さらにCSS トランジションやアニメーション (詳細はアニメーション付録参照)を含みます。 SVG文書で宣言的アニメーションが無効の場合、アニメーション要素やCSSトランジション/アニメーションは適用・実行されません。
これは、文書のアニメーション状態を0秒で一時停止することとは異なり、 アニメーションが0秒で開始するよう定義されていても、適用されません。
外部リソースへの参照とは、 URL参照やネットワークアクセス要求であり、 文書内で使用されるマークアップ、スタイルプロパティ、スクリプト、その他Webプラットフォーム機能によるものです。ただし以下は除きます:
SVG文書で外部参照が無効の場合、外部参照による文書取得は ネットワークエラーが発生しデータが受信されなかったものとして扱います。
外部参照が有効な場合、 インターネットからの外部ファイル要求をサポートするユーザーエージェントは、 リンク章で説明される クロスオリジンリソース取得の制約を遵守しなければなりません。
スクリプトの実行とは、SVGの‘script’要素、 イベント属性(例:SVG要素上の‘onclick’)、 文書で使用されるその他Webプラットフォーム機能によるスクリプト(HTMLの‘script’要素など)を実行することです。 SVG文書でスクリプト実行が無効の場合、文書内のいかなるスクリプトも実行されません。
インタラクションとは、DOMイベントの配信や テキスト選択・フォーカス変更・リンク遷移・アニメーション/トランジションの トリガーなど、ユーザー入力(マウスやキーボード操作)に反応して ユーザーエージェント特有のUI動作を呼び出すことです。SVG文書で インタラクションが無効の場合、文書やその要素に対するユーザー入力イベントは 何も影響を及ぼしません。
この処理モードではSVG言語のいかなる機能にも制限を課しません。
動的インタラクティブ機能 | |
---|---|
スクリプト実行 | はい |
外部参照 | はい |
宣言的アニメーション | はい |
インタラクション | はい |
この処理モードは、SVG文書が外部参照の解決を許可される アニメーション画像として利用されるが、インタラクティブな文書として利用されない 状況を想定しています。
アニメーション機能 | |
---|---|
スクリプト実行 | いいえ |
外部参照 | はい |
宣言的アニメーション | はい |
インタラクション | いいえ |
この処理モードは、SVG文書が外部参照の解決を許可しない アニメーション画像として利用され、かつインタラクティブな文書として利用されない 状況を想定しています。画像サポートが従来ラスター画像(JPEG, PNG, GIF等)に 限定されていた場面などで利用される場合があります。
セキュアアニメーション機能 | |
---|---|
スクリプト実行 | いいえ |
外部参照 | いいえ |
宣言的アニメーション | はい |
インタラクション | いいえ |
この処理モードは、SVG文書が外部参照の解決を許可される 非アニメーション画像として利用されるが、インタラクティブな文書として利用されない 状況を想定しています。 例えば、SVGビューアが印刷文書に組み込むグラフィックスを処理する場合などは 静的モードを用いるでしょう。
静的機能 | |
---|---|
スクリプト実行 | いいえ |
外部参照 | はい |
宣言的アニメーション | いいえ |
インタラクション | いいえ |
この処理モードは、SVG文書が非アニメーション画像として利用され、外部参照の解決が許可されず、インタラクティブな文書として利用されない状況を想定しています。このモードは、画像サポートが従来非アニメーションラスター画像(JPEGやPNGなど)に限定されていた場合などで利用されることがあります。
セキュア静的機能 | |
---|---|
スクリプト実行 | いいえ |
外部参照 | いいえ |
宣言的アニメーション | いいえ |
インタラクション | いいえ |
SVG文書を直接閲覧する場合、 ユーザーエージェントがサポートする最も包括的な 処理モードで表示されることが期待されます。 しかし、SVGがサブリソースや埋め込み文書として処理される場合は、 以下の制限が適用されます。
SVGが‘image’要素内に埋め込まれる場合、 埋め込み文書が宣言的アニメーションをサポートしていればセキュアアニメーションモードで、 そうでなければセキュア静的モードで処理されなければなりません。
同じ処理モードは、SVGがラスター画像の代わりとして利用される他のケース (HTML‘img’要素や、<image>データ型を取るCSSプロパティ等)でも使われることが期待されます。 これは、画像ソースが 「非インタラクティブかつオプションでアニメーション可能な、ページ分割もスクリプトもされない画像リソース」 でなければならないという HTMLの要件 [HTML] と一貫しています。
SVG文書がSVG文書内のHTML‘iframe’要素によって参照される場合、埋め込み側文書と同じ処理モードを使用しなければなりません。ただし、埋め込み‘iframe’要素のsandbox属性で定められる制限が適用されます。
同じ処理規則は、SVG文書がHTMLの ‘embed’、 ‘iframe’、 ‘object’要素でロードされる場合にも適用されます [HTML]。 インタラクティブなウェブブラウザで トップレベル閲覧コンテキストとなるHTML文書はSVGの 動的インタラクティブ処理モードと同等です。
SVG文書が‘use’要素参照やペイントサーバ要素クロスリファレンス経由でロードされた場合、セキュア静的モードで処理されなければなりません。
サブリソース文書の処理中は、パフォーマンス面と、リソース文書がタイムライン参照するための文脈が定義されていないため、アニメーションは実行されません。 ただし、‘use’要素参照やペイントサーバクロスリファレンスによってサブリソース文書の要素が現在の文書へクローンされる場合は、クローンされた要素インスタンスは現在の文書のタイムラインでアニメーションでき、 use要素シャドウツリーのアニメーションで説明されるように、追加のサブリソースファイルの読み込みもトリガーされる場合があります。
SVG文書が、文書内の特定要素をターゲットとするスタイルプロパティ参照(SVGを画像形式としてではなく)経由でロードされる場合、セキュア静的モードで処理されなければなりません。
サブリソース文書では、パフォーマンス面とタイムライン参照文脈が定義されていないため、アニメーションは実行されません。
一部のスタイルプロパティは、特定要素または画像ファイル全体のいずれかを参照する場合があり、前者の方がより制限された処理モードとなります。 例えば、SVG‘mask’要素への参照はアニメーションされませんが、画像マスクとして使われるSVGファイル全体はアニメーション可能です。
SVGファイルがフォント参照の一部として処理される場合、 アニメーション付きグリフがサポートされていればセキュアアニメーションモードで、 そうでなければセキュア静的モードで処理されなければなりません。
これらの制約は、"SVG"テーブルから文書を処理する際のOpenType仕様にも含まれています。 OpenTypeはさらに、テキストやforeignObjectのレンダリングを防ぐユーザーエージェントスタイルシートの形で追加制約を適用します [OPENTYPE]。
ホスト文書にインラインで含まれるSVG文書フラグメントは、ホスト文書の処理モードと一致する処理モードを使用しなければなりません。 SVG‘foreignObject’要素の子として含まれるSVG文書フラグメントは、周囲のSVG文書の処理モードを使用しなければなりません。非SVGの外部コンテンツも同等の制約で処理される必要があります。
例えば、SVG文書がHTML‘img’やSVG‘image’要素による参照でセキュアアニメーションモードで利用されている場合、 ‘foreignObject’要素内のコンテンツはスクリプト・インタラクション・外部ファイル参照を無効化しなければなりませんが、宣言的アニメーションは有効にするべきです。
以下は、参照によってHTMLページにSVGを埋め込む様々な方法と、それぞれに期待される処理モードと許可される機能です。
"Live Example"行の各セルには黄色いスマイリーフェイスが表示されるはずです。 下記各例では、目をクリックするとリンク遷移のテストになり、 顔をクリックすると宣言的インタラクションとスクリプト実行のテストになります。 リンクは画像を青い四角に置き換え(再クリックで元画像に戻ります)。 宣言的インタラクションは、‘set’要素で顔の色を黄色系から緑系に変化させ、 CSS疑似クラスでインタラクティブ要素にストロークを追加しています。 スクリプトはスマイルを描画します。 時間ベースの宣言的アニメーション(インタラクションベースではなく)は、左目がウィンクしている(‘animate’要素使用)、または目が濃青から定期的に水色に変わる(CSSキーフレームアニメーション使用)場合にサポートされていることを示します。
ここで示される期待される処理モードや機能は、対応するHTMLやCSS仕様の今後の変更によって変わる可能性があります。
埋め込み方法 | object(サンドボックスなし) | iframe(sandbox="" 付き) |
img | CSS背景 |
---|---|---|---|---|
期待される処理モード | 動的インタラクティブ | 動的インタラクティブ(制限あり) | セキュアアニメーション | セキュアアニメーション |
宣言的・時間ベースのアニメーション (左目ウィンク、両目の色変化) |
許可 | 許可 | 許可 | 許可 |
宣言的・インタラクティブなアニメーションとスタイル変化 (クリックで顔色変更、ホバーやフォーカスで顔/目に枠線追加) |
許可 | 許可 | 無効 | 無効 |
同一閲覧コンテキスト内でのリンク遷移(同一ドメイン) (目クリックで画像変化) |
許可 | 許可 | 無効 | 無効 |
スクリプトによるインタラクション (顔クリックでスマイルが広がる) |
許可 | 無効(サンドボックスのため) | 無効 | 無効 |
Live Example |
|
SVGは特定のファイル形式や文書型ではなく、文書オブジェクトモデル(DOM)によって定義されています。 したがってSVGコンテンツの適合性は、その内容が適合するDOMであるか、または適合するDOMを生成できるかどうかによって定義されます。 追加の適合性クラスは、内容が有効かつ整形式なXMLであるかどうかにも依存します([xml])。
指定した要素を根とするDOMノードツリーまたは部分木が 適合SVG DOM部分木であるためには、 それがSVG文書断片を形成し、本書(Scalable Vector Graphics (SVG) Specification)で記載された仕様に従う必要があります。 具体的には次を満たします:
SVG文書断片は、Namespaces in XML([xml-names])で説明されるXML名前空間機能を使って親XML文書内に含めることができます。 ただし、適合SVG DOM部分木は‘svg’要素を根にもつ必要があるため、 SVG名前空間から個々の‘svg’以外の要素を使うことは許可されません。つまり、以下の文書のSVG部分は適合していません:
<?xml version="1.0" standalone="no"?> <!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd"> <ParentXML> <!-- Elements from ParentXML go here --> <!-- The following is not conforming --> <z:rect xmlns:z="http://www.w3.org/2000/svg" x="0" y="0" width="10" height="10" /> <!-- More elements from ParentXML go here --> </ParentXML>
代わりに、SVG部分が適合SVG DOM部分木となるよう修正するには、次のようにします:
<?xml version="1.0" standalone="no"?> <!DOCTYPE SomeParentXMLGrammar PUBLIC "-//SomeParent" "http://SomeParentXMLGrammar.dtd"> <ParentXML> <!-- Elements from ParentXML go here --> <!-- The following is conforming --> <z:svg xmlns:z="http://www.w3.org/2000/svg" width="100px" height="100px"> <z:rect x="0" y="0" width="10" height="10"/> </z:svg> <!-- More elements from ParentXML go here --> </ParentXML>
SVG言語およびこれらの適合基準は、SVGコンテンツのいかなる側面にもサイズ制限を設けません。 要素数、文字データ量、属性値の文字数の最大値などはありません。
文書またはその一部が適合SVGマークアップ断片であるためには、 適切な文書MIME型のパーサによって(ネットワークエラー以外の)エラーなく解析でき、 適合SVG DOM部分木を形成できることに加え、次も満たす必要があります:
適合SVGマークアップ断片は、次を満たす場合 適合XML互換SVGマークアップ断片でもあります:
<?xml-stylesheet?>
処理命令が
XML文書へのスタイルシート関連付け
[xml-stylesheet]に適合していること
指定した要素を根とするDOMノードツリーまたは部分木が 適合XML互換SVG DOM部分木であるためには、XMLにシリアライズした際に 適合XML互換SVGマークアップ断片を形成できることが必要です。
DOM部分木が、変更なしで適合するXMLにシリアライズできない場合 (例えば‘id’値が有効なXML名でない場合、 Commentノードのデータに"--"が含まれる場合など)は、 適合XML互換SVG DOM部分木とはなりません。
文書が適合SVGスタンドアロンファイルであるためには:
SVG文書断片が技術的にエラーとなる様々な状況があります:
動的な文書では、時間経過でエラー状態になったり回復したりすることがあります。 例えば、SVG DOMや アニメーションによる文書変更で エラー状態になり、さらに変更で正しい状態に戻ることがあります。
ユーザーエージェントは、文書がエラー状態の時は 他の仕様でそのエラー種別の扱いについてより詳細な規則が定義されていない限り、 以下のエラー処理規則を適用しなければなりません:
スクリプトによる変更のまとまりによって、SVG文書断片がエラー状態になったり回復したりする場合があるため、 ユーザーエージェントは文書の表示(例:ディスプレイへのレンダリング)が更新されるタイミングのみでエラー処理を適用するべきです。
ソフトウェアの場合、適合性の要件はプログラムのカテゴリによって異なります:
ユーザーエージェントの一般的な定義は、テキスト・グラフィックス・音声・動画・画像その他のWebコンテンツを取得・表示するアプリケーションです。 一部のコンテンツ型を扱うため追加のユーザーエージェントが必要な場合もあります。 例えば、ブラウザが音声や動画をレンダリングするため別プログラムやプラグインを起動する場合などです。 ユーザーエージェントには、グラフィカルデスクトップブラウザ、マルチメディアプレーヤー、テキストブラウザ、音声ブラウザ、スクリーンリーダー・拡大鏡・音声合成・オンスクリーンキーボード・音声入力ソフトなどの支援技術も含まれます。
一般的には、 「ユーザーエージェント」がSVGコンテンツの取得・描画機能を持つとは限りませんが、 文脈が別の解釈を要求しない限り、本仕様内で「ユーザーエージェント」と記載される場合は SVGコンテンツの取得・描画が可能なSVGユーザーエージェントを指すものとします。
多くのプログラムが複数のソフトウェアクラスに該当します。 例えば、SVGファイルのインポート・表示・編集・保存ができるグラフィカルエディタは、 SVGインタープリタ、SVGビューア、SVGオーサリングツール、SVGジェネレータすべてに該当します。
適合SVGジェネレータとは、 SVGジェネレータのうち以下を満たすものです:
SVGジェネレータは、デフォルトでUnicode文字エンコーディングを使い、 Character Model for the World Wide Web [UNICODE] [charmod]の他のガイドラインにも従うことが強く推奨されます。
高精度データを扱うSVGジェネレータは、 高精度幾何生成に関するノートのガイドラインに従うことが推奨されます。
オーサリングツール (Authoring Tool Accessibility Guidelines 2.0で定義)は、 適合SVGジェネレータであり、 かつ同文書の関連するLevel A要件すべてに適合している場合 適合SVGオーサリングツールです [atag20]。 Level AAやLevel AAA要件は推奨されますが、適合には必須ではありません。
適合SVGサーバは、適合SVGジェネレータのすべての要件を満たす必要があります。さらに、HTTPやインターネットメディア型を使う他プロトコルを用いる適合SVGサーバは、SVGスタンドアロンファイルをメディア型"image/svg+xml"
で配信しなければなりません。
また、SVGファイルをgzipやdeflateで圧縮する場合、プロトコルがサポートする適切なヘッダでこれを示す必要があります。具体的には、転送直前にサーバが圧縮したコンテンツには "Transfer-Encoding: gzip" や "Transfer-Encoding: deflate" ヘッダを、サーバ上で圧縮済み(例:拡張子"svgz")のコンテンツには "Content-Encoding: gzip" や "Content-Encoding: deflate" ヘッダを使わなければなりません。
保管されているコンテンツ(HTTP用語でいう「エンティティ」)の圧縮と、 HTTP/1.1 TE/ Transfer Encoding ([rfc2616]、14.39節・14.41節)で定義される メッセージボディの自動圧縮は区別されます。
SVGインタープリタはSVG文書断片を解析・処理できるプログラムです。SVGインタープリタの例としては、サーバサイドのトランスコードツールや最適化ツール(例: SVGコンテンツを修正したSVGコンテンツに変換するツール)、分析ツール(例: SVGコンテンツからテキスト内容を抽出するツール、妥当性検査ツール)などがあります。SVGから別のグラフィック表現へのトランスコーダ(例: SVG→ラスター画像のトランスコーダ)はビューアに該当し、ビューアの適合基準も適用されます。
適合SVGインタープリタは、XML 1.0 [xml] および Namespaces in XML [xml-names]で定義されるすべてのXML構文を解析・処理できなければなりません。
適合SVGインタープリタは、適合XML互換SVGマークアップ断片を解析し、内容のDOM構造(要素、属性、テキスト内容、コメント等)を正しく反映する方法で処理しなければなりません。インタープリタはすべての機能の意味論を正しく解釈する必要はありません。
SVGインタープリタが非XML構文(HTMLなど)をサポートする場合、その構文での適合SVGマークアップ断片も正しく解析できなければなりません。
SVGインタープリタがSVGコンテンツ処理の結果としてスクリプトを実行したり外部リソースファイルを取得したりする場合、ユーザーエージェント向けのSVGサブリソース文書の処理モードおよびリンク章で記載された制約に従わなければなりません。
Action: | パフォーマンスクラス要件を確認し、要件を削除するか一般要件に移すか決定すること。
(heycam)
CTMの計算は倍精度で行うべきと仕様化すること。 (stakagi) |
---|---|
Resolution: | SVG 2からパフォーマンスクラス要件を削除。 ( ConformingHighQualitySVGViewers ) |
Purpose: | 技術製図・地図等の用途での数値精度とユーザーエージェントのパフォーマンスのトレードオフ調整のため。 |
Owner: | heycam, stakagi |
SVGビューアはSVG文書断片を解析・処理し、その内容をディスプレイやプリンタ、彫刻機等のグラフィカル出力媒体に描画できるプログラムです。したがって、SVGビューアはSVGインタープリタ(SVG文書断片を解析・処理できる)でもありますが、正しく描画するという追加要件があります。
適合SVGビューアは適合SVGインタープリタであり、本章で定義されたいずれかの処理モードで描画出力をサポートできなければなりません:
適合SVGビューアは、サポートする処理モードすべてに関して、本仕様でユーザーエージェント向けに示された規範的要件を満たさなければなりません。
すべての適合SVGビューアに適用される具体的基準:
image/svg+xml
の場合、処理されるためには整形式かつ完全なSVG文書でなければなりません。
ビューアがセキュア処理モードしかサポートしない場合でも、data URL参照を処理するためにこれら画像形式のサポートは必須です。
低解像度表示デバイスではアンチエイリアス等による平滑化のサポートが強く推奨されます。 高品質SVGビューアの必須要件です。
$$ (single) {\large \rm CTM} = (single) \left( (double) \left[ \begin{matrix} a_1 & c_1 & e_1 \\ b_1 & d_1 & f_1 \\ 0 & 0 & 1 \end{matrix} \right] \cdot (double) \left[ \begin{matrix} a_2 & c_2 & e_2 \\ b_2 & d_2 & f_2 \\ 0 & 0 & 1 \end{matrix} \right] \right) $$
$$ (single) \left[ \begin{matrix} x_{\rm viewport} \\ y_{\rm viewport} \\ 1 \end{matrix} \right] = {\large \rm CTM} \cdot (single) \left[ \begin{matrix} x_{\rm userspace} \\ y_{\rm userspace} \\ 1 \end{matrix} \right] $$
適合SVGビューアが処理モードで インタラクションを含む場合、以下の追加機能もサポートしなければなりません:
適合SVGビューアが処理モードで スクリプト実行を含む場合、以下の追加機能もサポートしなければなりません:
ユーザーエージェントがHTMLやXHTML閲覧機能を持つ場合、またはXML文書へのCSSスタイリングプロパティ適用ができる場合、適合SVGビューアは、HTMLやXHTMLの‘img’要素やCSSプロパティ(background-image等)でラスター画像外部リソースが使える場所でMIMEタイプ"image/svg+xml"のリソースをサポートしなければなりません。
表示デバイスでのズームと印刷の両方をサポートするユーザーエージェントでは、デフォルトの印刷オプションは、表示デバイスでのSVG文書断片の現在のビュー(メディア固有スタイリングがない場合)を反映した印刷結果となることが推奨されます。ユーザーが行ったズーム・パン、アニメーションの現在状態、DOMやスクリプトによる文書変更も考慮されます。
したがって、ユーザーが表示デバイスで地図の特定領域にズームし、ハードコピーを要求した場合、ハードコピーは表示デバイスで見えている地図ビューと同じ内容を表示するべきです。ユーザーがアニメーションを一時停止して印刷した場合、ハードコピーは現在表示されている静止画像と同じグラフィックを表示するべきです。スクリプトによって文書に要素が追加・削除された場合、ハードコピーも表示同様の変更を反映するべきです。
SVG文書がアニメーションやスクリプト機能のない静的デバイス(プリンタ等)でレンダリングされる場合、ユーザーエージェントは文書内のアニメーションやスクリプト要素を無視し、残りのグラフィック要素を本仕様の規則に従って描画しなければなりません。
適合SVGビューアが高品質SVGビューアと見なされるには、以下の追加機能をサポートしなければなりません:
高品質SVGビューアが処理モードで スクリプト実行、宣言的アニメーション、またはインタラクションを含む場合、以下の追加機能もサポートしなければなりません:
高品質SVGビューアが処理モード でインタラクションを含む場合、以下の追加機能もサポートしなければなりません: