サイトトップへこのカテゴリの一覧へ

X 4197:2012  

(1) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

目 次 

ページ 

序文 ··································································································································· 1 

0A 適用範囲 ······················································································································ 1 

1 導入······························································································································· 1 

1.1 SVGについて ··············································································································· 1 

1.2 SVG Tiny 1.2 ················································································································· 2 

1.3 SVG Tiny 1.2文書の定義·································································································· 3 

1.4 SVG MIMEタイプ,ファイル名拡張子及びMacintoshファイル型 ·········································· 4 

1.5 その他の標準化作業との整合性 ························································································ 4 

1.6 用語及び定義 ················································································································ 5 

1.7 この規格の基になった,Scalable Vector Graphics (SVG) Tiny 1.2 Specificationを参照する方法 ······ 12 

1.8 この規格の使い方 ········································································································· 12 

2 概念······························································································································ 13 

2.1 SVGという名前の説明··································································································· 13 

2.2 重要なSVGの概念 ········································································································ 14 

2.3 ウェブページでSVGを使用するための選択肢 ···································································· 15 

3 描画モデル ····················································································································· 16 

3.1 概説 ··························································································································· 16 

3.2 塗り重ねモデル ············································································································ 16 

3.3 描画の順序 ·················································································································· 16 

3.4 図形要素の型 ··············································································································· 16 

3.5 オブジェクトの不透明化 ································································································ 17 

3.6 親の合成 ····················································································································· 17 

4 基本データ型 ·················································································································· 18 

5 文書構造························································································································ 22 

5.1 SVG文書片を定義する:'svg'要素 ···················································································· 22 

5.2 グループ化:'g'要素 ······································································································ 30 

5.3 'defs'要素 ···················································································································· 32 

5.4 'discard'要素 ················································································································ 33 

5.5 'title'要素及び'desc'要素 ·································································································· 36 

5.6 'use'要素 ····················································································································· 40 

5.7 'image'要素 ·················································································································· 48 

5.8 条件付き処理 ··············································································································· 51 

5.9 外部リソース ··············································································································· 57 

5.10 共通属性 ···················································································································· 69 

6 スタイル付け ·················································································································· 73 

X 4197:2012 目次 

(2) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ページ 

6.1 SVGスタイル付けプロパティ ·························································································· 73 

6.2 スタイル付けの利用シナリオ ·························································································· 75 

6.3 プレゼンテーション属性を用いたプロパティの指定 ····························································· 76 

6.4 XSLを用いたスタイル付け ····························································································· 77 

6.5 プロパティ名及び値における大文字と小文字との区別 ·························································· 78 

6.6 SVGが利用するCSS及びXSLの機能 ·············································································· 78 

6.7 プロパティの継承及び算出 ····························································································· 78 

7 座標系,変換,及び単位 ··································································································· 79 

7.1 概説 ··························································································································· 79 

7.2 初期ビューポート ········································································································· 79 

7.3 初期座標系 ·················································································································· 80 

7.4 座標系変換 ·················································································································· 81 

7.5 入れ子にされる変換 ······································································································ 86 

7.6 'transform'属性 ············································································································· 89 

7.7 制約される変換 ············································································································ 92 

7.8 'viewBox'属性 ··············································································································· 98 

7.9 'preserveAspectRatio'属性 ······························································································ 102 

7.10 新しいビューポートの確立 ··························································································· 104 

7.11 単位 ························································································································· 105 

7.12 包含ボックス ············································································································· 105 

7.13 オブジェクト包含ボックス単位 ····················································································· 109 

7.14 SVG内容のビューポートに固有のサイジングプロパティ ··················································· 109 

7.15 地理座標系 ················································································································ 111 

7.16 'svg:transform'属性 ····································································································· 111 

8 パス····························································································································· 117 

8.1 概説 ·························································································································· 117 

8.2 'path'要素 ··················································································································· 117 

8.3 パスデータ ················································································································· 118 

8.4 パスに沿った距離 ········································································································ 127 

9 基本図形······················································································································· 128 

9.1 概説 ·························································································································· 128 

9.2 'rect'要素 ···················································································································· 128 

9.3 'circle'要素 ·················································································································· 131 

9.4 'ellipse'要素 ················································································································· 132 

9.5 'line'要素 ···················································································································· 134 

9.6 'polyline'要素··············································································································· 136 

9.7 'polygon'要素··············································································································· 137 

10 テキスト ····················································································································· 140 

10.1 概説 ························································································································· 140 

X 4197:2012 目次 

(3) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ページ 

10.2 文字及びそれらに対応する字形 ····················································································· 141 

10.3 フォント,フォントテーブル,及びベースライン ····························································· 142 

10.4 'text'要素 ·················································································································· 144 

10.5 'tspan'要素 ················································································································ 147 

10.6 テキストレイアウト ···································································································· 148 

10.7 テキストの描画順序 ···································································································· 152 

10.8 整列プロパティ ·········································································································· 153 

10.9 フォント選択プロパティ ······························································································ 154 

10.10 空白処理 ················································································································· 156 

10.11 領域内のテキスト ······································································································ 157 

10.12 編集可能なテキストフィールド···················································································· 163 

10.13 テキスト選択及びクリップボード操作··········································································· 166 

10.14 テキスト検索 ··········································································································· 167 

11 塗り:フィル,ストローク,色,及びペイントサーバ·························································· 169 

11.1 概説 ························································································································· 169 

11.2 塗りの指定 ················································································································ 169 

11.3 フィルプロパティ ······································································································· 170 

11.4 ストロークプロパティ ································································································· 172 

11.5 ノンスケーリングストローク ························································································ 176 

11.6 単純アルファ合成 ······································································································· 178 

11.7 'viewport-fill'プロパティ ······························································································· 178 

11.8 'viewport-fill-opacity'プロパティ ···················································································· 180 

11.9 可視性及び描画の制御 ································································································· 180 

11.10 描画ヒント··············································································································· 182 

11.11 塗りプロパティの継承 ································································································ 186 

11.12 オブジェクト及びグループの不透明化:'opacity'プロパティ ·············································· 187 

11.13 色 ·························································································································· 192 

11.14 ペイントサーバ········································································································· 193 

11.15 グラデーション········································································································· 197 

12 マルチメディア ············································································································ 205 

12.1 メディア要素 ············································································································· 205 

12.2 'audio'要素 ················································································································ 207 

12.3 'video'要素 ················································································································ 209 

12.4 'animation'要素 ·········································································································· 218 

12.5 'audio-level'プロパティ ································································································ 221 

12.6 実行時同期のための属性 ······························································································ 222 

12.7 'initialVisibility'属性 ···································································································· 224 

13 対話性 ························································································································ 224 

13.1 概説 ························································································································· 224 

X 4197:2012 目次 

(4) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ページ 

13.2 サポートされるイベント一覧 ························································································ 224 

13.3 利用者インタフェースイベント ····················································································· 228 

13.4 ポインタイベント ······································································································· 229 

13.5 テキストイベント ······································································································· 229 

13.6 キーイベント ············································································································· 229 

13.7 イベントフロー ·········································································································· 229 

13.8 イベントディスパッチ ································································································· 230 

13.9 利用者インタフェースイベントの処理順序 ······································································ 231 

13.10 'pointer-events'プロパティ ··························································································· 231 

13.11 拡大及びパン············································································································ 234 

13.12 要素のフォーカス(focus) ························································································· 234 

13.13 ナビゲーション ········································································································ 235 

14 リンク ························································································································ 245 

14.1 参照 ························································································································· 245 

14.2 SVG内容の外へのリンク:'a'要素 ················································································· 258 

14.3 SVG内容へのリンク:IRI断片及びSVGビュー ······························································ 262 

15 スクリプト ·················································································································· 264 

15.1 スクリプト言語の指定 ································································································· 264 

15.2 'script'要素 ················································································································ 264 

15.3 XMLイベント ··········································································································· 269 

15.4 'listener'要素 ·············································································································· 272 

15.5 'handler'要素 ············································································································· 274 

15.6 イベントハンドリング ································································································· 278 

15.7 行内実行可能内容の処理 ······························································································ 278 

16 アニメーション ············································································································ 278 

16.1 概説 ························································································································· 278 

16.2 アニメーション要素 ···································································································· 279 

16.3 SVG DOMを用いたアニメーション ··············································································· 310 

16.4 アニメーション及び包含ボックス ·················································································· 313 

17 フォント ····················································································································· 313 

17.1 概説 ························································································································· 313 

17.2 SVGフォントの概説 ··································································································· 314 

17.3 'font'要素 ·················································································································· 315 

17.4 'glyph'要素 ················································································································ 316 

17.5 'missing-glyph'要素 ····································································································· 323 

17.6 字形選択規則 ············································································································· 323 

17.7 'hkern'要素················································································································ 324 

17.8 フォントの記述 ·········································································································· 326 

18 メタデータ ·················································································································· 336 

X 4197:2012 目次 

(5) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ページ 

18.1 概説 ························································································································· 336 

18.2 'metadata'要素 ··········································································································· 337 

18.3 拡張可能なメタデータ属性 ··························································································· 338 

19 拡張性 ························································································································ 339 

19.1 外部の名前空間及びプライベートデータ ········································································· 339 

19.2 外部オブジェクト型の埋込み ························································································ 340 

附属書A(規定)SVG Micro DOM(uDOM) ·········································································· 349 

附属書B(規定)IDL定義 ··································································································· 432 

附属書C(規定)実装における必要条件 ················································································· 444 

附属書D(規定)適合性基準 ································································································ 449 

附属書E(参考)QA Framework: Specification Guidelinesへの適合 ·············································· 457 

附属書F(参考)アクセシビリティの対応 ··············································································· 459 

附属書G(参考)国際化の対応 ····························································································· 462 

附属書H(規定)JPEGの対応 ······························································································ 464 

附属書I(参考)ファイルサイズの最小化 ··············································································· 465 

附属書J(規定)機能文字列 ································································································· 467 

附属書K(参考)要素一覧 ··································································································· 471 

附属書L(参考)属性及びプロパティ一覧··············································································· 479 

附属書M(規定)Image/svg+xmlのためのメディア型登録·························································· 490 

附属書N(規定)この規格のためのRelaxNGスキーマ ······························································ 492 

附属書O(規定)ECMAScript言語結合 ················································································· 493 

附属書P(規定)Java言語結合 ····························································································· 507 

附属書Q(規定)Perl言語結合 ····························································································· 521 

附属書R(規定)Python言語結合 ························································································· 535 

附属書S(規定)引用規格及び参考文献 ·················································································· 548 

附属書T(参考)変更履歴 ··································································································· 558 

X 4197:2012 目次 

(6) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

まえがき 

この規格は,工業標準化法第12条第1項の規定に基づき,一般財団法人日本情報経済社会推進協会

(JIPDEC)及び一般財団法人日本規格協会(JSA)から,工業標準原案を具して日本工業規格を制定すべ

きとの申出があり,日本工業標準調査会の審議を経て,経済産業大臣が制定した日本工業規格である。 

この規格は,著作権法で保護対象となっている著作物である。 

この規格の一部が,特許権,出願公開後の特許出願又は実用新案権に抵触する可能性があることに注意

を喚起する。経済産業大臣及び日本工業標準調査会は,このような特許権,出願公開後の特許出願及び実

用新案権に関わる確認について,責任はもたない。 

原勧告の標題及びまえがきの翻訳 

変倍ベクタグラフィックス(SVG)Tiny 1.2仕様 

W3C勧告 2008年12月22日 

この版の掲載場所 

http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/ 

最新版の掲載場所 

http://www.w3.org/TR/SVGTiny12/ 

以前の版の掲載場所 

http://www.w3.org/TR/2008/PR-SVGTiny12-20081117/ 

編者 

Ola Andersson (Ikivo) <ola.andersson@ikivo.com> 

Robin Berjon (Expway) <robin.berjon@expway.fr> 

Erik Dahlström (Opera Software) <ed@opera.com> 

Andrew Emmons (BitFlash) <andrew.emmons@bitflash.com> 

Jon Ferraiolo[Adobe Systems(2006年5月まで)]<jon.ferraiolo@adobe.com> 

Anthony Grasso (Canon, Inc.) <anthony.grasso@cisra.canon.com.au> 

Vincent Hardy (Sun Microsystems, Inc.) <vincent.hardy@sun.com> 

Scott Hayman (Research In Motion Limited) 

Dean Jackson (W3C) <dean@w3.org> 

Chris Lilley (W3C) <chris@w3.org> 

Cameron McCormack[招へい(聘)専門家]<cam@mcc.id.au> 

Andreas Neumann (ETH Zurich) 

Craig Northway (Canon, Inc.) <craign@cisra.canon.com.au> 

Antoine Quint[招へい(聘)専門家]<aq@fuchsia-design.com> 

Nandini Ramani (Sun Microsystems) 

Doug Schepers (W3C) <schepers@w3.org> 

X 4197:2012 目次 

(7) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Andrew Shellshear (Canon, Inc.) 

著者 

SVG Tiny 1.2仕様書の著者は,SVGワーキンググループにそのメンバー又は代理人として参加

した人々である。 

Doug Schepers (W3C) schepers@w3.org 

Ola Andersson, Ikivo 

Phil Armstrong, Corel Corporation 

Henric Axelsson, Ericsson AB 

Selim Balcısoy, Nokia 

Robin Berjon, Expway 

Benoît Bézaire, Itedo(前職:Corel Corporation) 

John Bowler, Microsoft Corporation 

Gordon Bowman, Corel Corporation 

Craig Brown, Canon Information Systems Research Australia 

Mike Bultrowicz, Savage Software 

Tolga Çapin, Nokia 

Milt Capsimalis, Autodesk Inc. 

Mathias Larsson Carlander, Ericsson AB 

Jakob Cederquist, Ikivo 

Suresh Chitturi, Nokia 

Charilaos Christopoulos, Ericsson AB 

Richard Cohn, Adobe Systems Inc. 

Lee Cole, Quark 

Cyril Concolato, Groupe des Ecoles des Télécommunications (GET) 

Don Cone, America Online Inc. 

Erik Dahlström, Opera Software(ワーキンググループ議長) 

Alex Danilo, Canon Information Systems Research Australia 

Thomas DeWeese, Eastman Kodak 

David Dodds, Lexica 

Andrew Donoho, IBM 

David Duce, Oxford Brookes University 

Jean-Claude Dufourd, Streamezzo(前職:GET) 

Andrew Emmons, BitFlash(ワーキンググループ議長) 

Jerry Evans, Sun Microsystems 

Jon Ferraiolo, Adobe Systems Inc. 

藤沢 淳 (FUJISAWA Jun), Canon 

Darryl Fuller, Schema Software 

Scott Furman, Netscape Communications Corporation 

Brent Getlin, Macromedia 

Diego Gibellino, Telecom Italia 

X 4197:2012

X 4197:2012 目次 

(8) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Christophe Gillette, Motorola(前職:BitFlash) 

Peter Graffagnino, Apple 

Rick Graham, BitFlash 

Anthony Grasso, Canon Information Systems Research Australia 

Niklas Hagelroth, Ikivo 

Vincent Hardy, Sun Microsystems Inc. 

端山 貴也 (HAYAMA Takanari), KDDI Research Labs 

Scott Hayman, Research In Motion Limited 

Stephane Heintz, OpenText(前職:BitFlash) 

Lofton Henderson, OASIS 

Jan Christian Herlitz, Excosoft 

Ivan Herman, W3C 

Alan Hester, Xerox Corporation 

Olaf Hoffmann,招へい(聘)専門家 

Bob Hopgood, RAL (CCLRC) 

Bin Hu, Motorola 

Michael Ingrassia, Nokia 

石川 雅康 (ISHIKAWA Masayasu), W3C 

Dean Jackson, W3C(W3Cチームコンタクト) 

Christophe Jolif, ILOG S.A. 

Lee Klosterman, Hewlett-Packard 

小林 亜令 (KOBAYASHI Arei), KDDI Research Labs 

Thierry Kormann, ILOG S.A. 

Yuri Khramov, Schema Software 

Kelvin Lawrence, IBM 

Håkon Lie, Opera 

Chris Lilley, W3C(ワーキンググループ議長) 

Vincent Mahe, France Telecom 

Philip Mansfield, Schema Software 

Lee Martineau, Quickoffice 

Charles McCathieNevile, Opera Software 

Kevin McCluskey, Netscape Communications Corporation 

Cameron McCormack,招へい(聘)専門家 

水口 充 (MINAKUCHI Mitsuru), Sharp Corporation 

Luc Minnebo, Agfa-Gevaert N.V. 

Jean-Claude Moissinac, Groupe des Ecoles des Télécommunications (GET) 

Tuan Nguyen, Microsoft Corporation 

Craig Northway, Canon Information Systems Research Australia 

小野 修一郎 (ONO Shuichiro), Sharp Corporation 

Lars Piepel, Vodafone 

X 4197:2012 目次 

(9) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Antoine Quint, Fuchsia Design(前職:ILOG) 

Nandini Ramani, Sun Microsystems 

Bruno David Simões Rodrigues, Vodafone 

相良 毅 (SAGARA Takeshi), KDDI Research Labs 

Troy Sandal, Visio Corporation 

Peter Santangeli, Macromedia 

Doug Schepers, W3C(前職:Vectoreal)(W3Cチームコンタクト) 

Sebastian Schnitzenbaumer, SAP AG 

Haroon Sheikh, Corel Corporation 

Andrew Shellshear, Canon Inc. 

Brad Sipes, Ikivo 

Andrew Sledd, Ikivo 

Пётр Соротокин (Peter Sorotokin), Adobe Systems Inc. 

Gavriel State, Corel Corporation 

Robert Stevahn, Hewlett-Packard 

Timothy Thompson, Eastman Kodak 

上田 宏高 (UEDA Hirotaka), Sharp Corporation 

Rick Yardumian, Canon Development Americas 

Charles Ying, Openwave Systems Inc. 

Shenxue Zhou, Quark 

Atanas Zlatinski, Samsung Electronics 

この勧告に関する正誤票には規定の訂正を含む可能性があるので参照することが望ましい。こ

の勧告には,単一ページ版,HTML ZIPアーカイブ版(外部依存なし),PDF版(W3Cで公開し

ている。)の参考様式も用意されている。翻訳版を参照。 

なお,この勧告の(W3Cとしての)正規の版は英語版とする。 

著作権 © 2008 W3C®(MIT, ERCIM及び慶応義塾)が,全ての権利を保有する。免責,商標,

及び文書の使用許諾に関するW3Cの規則を適用する。 

要約 

この規格は,ラスタ図形及びマルチメディアと組み合わせることができる,XMLによる2次

元ベクタ図形を記述するための言語である拡大縮小可能な変倍ベクタグラフィックス[Scalable 

Vector Graphics(以下,SVG)]Tinyバージョン1.2の機能及び構文を定義する。その目的は,静

止画像,アニメーション又は対話的なウェブアプリケーションのようなあらゆる種類の図形内容

を作成できるようにすることである。SVG Tiny 1.2はSVGのプロファイルであり,携帯電話,

PDA,ラップトップ,デスクトップコンピュータのような様々な機器への実装が意図されている。

したがって,SVG 1.1 Fullの機能の部分集合で構成され,加えてSVGの能力を拡張する新しい機

能を含んでいる。SVG Tiny 1.2に適合したモジュールの形式によるさらなる拡張が予定されてお

り,それらをこの仕様と合わせれば,SVG 1.1 Fullの機能と同等又はそれ以上の機能が提供され

るだろう。 

この文書の状態 

X 4197:2012

X 4197:2012 目次 

(10) 

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この箇条では,発行時におけるこの文書の位置付けについて記載している。他の文書がこの文

書よりも優先される可能性もある。現在のW3Cによる刊行物の一覧,及びこの技術報告書の最

新版については,http://www.w3.org/TR/におけるW3C技術報告書索引を参照。 

この文書はSVG Tiny 1.2勧告(2008年12月22日発行)である。 

この文書は,W3Cのメンバー,ソフトウェア開発者,その他のW3Cグループ及び利害関係者

によって審査され,ディレクターによってW3C勧告として承認されている。この文書は安定し

た文書であり,参考資料として利用してもよいし,他の文書から引用してもよい。W3Cの役割

は,この勧告の作成によってその仕様への注目を集め,その広範囲の利用を促進することにある。

これによって,ウェブの機能性及び相互運用性が高められる。 

SVGワーキンググループは,開発者のコミュニティと連携して作業を進め,実装報告書を作成

してこの仕様の実装可能性を証明した。この仕様の草稿には数多くのコメントが寄せられ,それ

らはSVGワーキンググループによって処理された。コメントへの対応(Disposition of Comments)

についてはW3CのSVGサイトにおいて閲覧できる。 

要約にも示したように,この仕様はモジュール拡張の集合に対するコアとなるものであるが,

これまでの経緯における理由によって,モバイル機器のためのプロファイルとしてSVG Tinyと

名付けられた。この仕様の将来版では,技術の継続的な流れに沿って,この言語の旧版に対する

後方互換性が保たれるが,この関係を示すために“SVGコア”と呼ばれるだろう。 

SVG Tiny 1.2仕様書に関する質問及びコメントは,SVGに関する問題の公開メーリングリスト

であるwww-svg@w3.orgに送付する。このメーリングリストはアーカイブされている。最初の投

稿時にアーカイブ方針への承諾が自動的に要求される。このメーリングリストに参加するには,

件名を“subscribe”としてwww-svg-request@w3.orgにメールを送信する。 

この文書は,W3Cプロセスにおける手続を経て,W3C Graphics Activityの一環としてSVGワ

ーキンググループによって製作された。 

この文書は2004年2月5日付けのW3C特許方針(W3C Patent Policy)に適合して活動してい

る団体によって作成された。W3Cは,そのグループの成果物に関して実施された全ての特許情

報開示についての公開リストを保持している。そのページには,特許情報の開示に対する指示も

示されている。Essential Claimを含んでいると考えられる特許について知っている個人は,W3C

特許方針第6節にのっと(則)りその情報を開示しなければならない。 

謝辞 

SVGワーキンググループは,このSVG仕様書を作成する過程において貢献してくれたSVG

ワーキンググループに属さない多くの人々に感謝の意を表したい。それらの人々の数は大変多く

全員の名前を記載することはできないが,感謝の念を示したい。これらの人々には,初期のSVG

言語(ビューア,オーサリングツール,サーバ・サイド・トランスコーダなど)の実装者,SVG

コンテンツ開発者,メーリングリスト(www-svg@w3.org,svg-developers@yahoogroups.com)に

おいて貢献した人々,他のW3Cワーキンググループ及びW3Cのメンバーが含まれる。SVGは,

SVGワーキンググループ,他のW3Cメンバー及び一般の人々による共同作業であることに疑う

余地はない。初期の実装者による先導的作業,コンテンツ開発者及び一般の人々によるフィード

バックから大きな恩恵を受けてSVGは開発された。 

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

日本工業規格          JIS 

X 4197:2012 

変倍ベクタグラフィックス 

SVG Tiny1.2 

序文 

この規格は,2008年12月にWorld Wide Web Consortium(W3C)から公表された勧告 Scalable Vector 

Graphics (SVG) Tiny 1.2 Specificationを基に,技術的内容を変更することなく作成した日本工業規格である。 

なお,この規格で点線の下線を施してある参考事項は,原勧告にはない事項である。 

0A 適用範囲 

この規格は,変倍ベクタグラフィックス(SVG)の機能及び構文を定義し,XMLによって2次元図形を

記述する言語SVGを規定する。混在するベクタ図形,マルチメディア(ラスタ画像,動画,音声など)及

びテキストを記述する言語を規定する。 

導入 

1.1 

SVGについて 

SVGは,XML[XML10及びXML11]によって2次元図形を記述するための言語である。SVGでは,三つ

の型の図形オブジェクトが認められている。ベクタ図形(例 直線及びカーブから構成されるパス),マル

チメディア(ラスタ画像,動画,音声など)及びテキストである。図形オブジェクトはグループ化し,ス

タイル付けし,変換し,過去に描画したオブジェクトに合成させることができる。 

SVG文書は,対話的で,動的な文書にすることができる。アニメーションは,宣言(すなわち,SVG

アニメーション要素をSVG内容に埋め込む。),又はスクリプト記述によって定義し,起動することができ

る。 

全ての要素,属性及びプロパティへの完全なアクセスを提供するSVG Micro Document Object Model

(uDOM)にアクセスする補足的なスクリプト言語を使用することによって,SVGの高度な応用が可能に

なる。どのようなSVGの図形オブジェクトにも,高機能集合のイベントハンドラを割り当てることができ

る。スクリプトのような機能は,他のウェブ標準とも互換性があるので,XHTML要素及びSVG要素に対

して同一のウェブページで同時に実行することもできる。 

SVGは豊かな図形内容のための言語である。アクセシビリティを高めるために,もし高レベルな構造及

び意味を含んでいる原資料文書があれば,その高レベルの情報を利用できるようにするのがよい。このこ

とは,その原資料文書を公開するか,その高レベルの情報を伝える形式による別のバージョンを公開する

か,又はSVGの機能を利用してSVG内容にその高レベルの情報が含まれるようにして行うのがよい。ア

クセシビリティを高めるための技術の提案については,附属書Fを参照。 

この規格は,Architecture of the World Wide Web(AWWW)に示されているウェブアーキテクチャ原則に

適合している。 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

1.2 

SVG Tiny 1.2 

業界における需要,SVGワーキンググループによる大きなサポート,及びSVG開発者のコミュニティ

の要請によって,小型の機器上でベクタ図形を表示するためのSVGの必要性が明確なものとなった。さら

には,SVG 1.0の使命の記述(mission statement)において,ベクタ図形を表示できるようにする対象は小

型機器であることがはっきりと述べられていた。このような需要に応えるために,SVGワーキンググルー

プはモバイル機器及びデスクトップPCにおける使用に適したプロファイル仕様を開発した。そのような

要請に応え,Mobile SVG Profiles仕様書(SVGM11:SVG Mobile 1.1とも呼ぶ。)では,CPU速度,メモリ

容量及びカラーサポートについて異なる特性をもつ様々なモバイル機器に対応するための二つのプロファ

イルが定義された。SVG Mobile 1.1仕様書では,非常に制約のあるモバイル機器向けにSVG Tiny (SVGT) 

1.1が定義された。また,二つ目のプロファイルとして,より高レベルのモバイル機器向けにSVG Basic 

(SVGB) 1.1が定義された。SVG Tiny 1.1とSVG Basic 1.1との大きな違いは,SVG Tiny 1.1にはスクリプト

及びスタイル付けがなく,したがって,Document Object Model(DOM)の保持についても記載されていな

いことである。このことによって,大半の実装においてメモリ容量をかなり低めに抑えることができた。 

既に,SVG Tiny 1.1は業界で広く採用され,標準規格として様々な携帯電話に利用されているが,そこ

で得られた経験から分かったことは,分野によってはそのプロファイルの制約が少し大き過ぎることであ

った。SVG 1.1の機能であるグラデーション,不透明化などは,魅力的な内容を作成するためには大きな

価値をもっているので,携帯電話にも実装できるようにすることになった。SVG Tiny 1.1のSMILサポー

トに構築されている音声及び動画を追加することにも大きな関心が寄せられた。 

名前空間をサポートし,値の正常化を導入していたDOM Level 3などの成果によって,SVG Tinyにおけ

るプログラム言語及びスクリプトの使用が再検討された。Java JSR 226 group(JSR226)との連携によって,

Micro DOM(又はuDOM)と呼ばれる軽量のインタフェースが開発された。これはDOM Level 3上で実装

することができた(必ずしも実装しなくてもよい。)。このような進展によって,SVGの軽量なプログラム

制御(例 ゲーム及び利用者インタフェース向け)及びスクリプト言語の使用が,携帯電話からデスクト

ップPCまで様々なプラットフォームにおいて実現できるようになった。SVG 1.2のモバイルプロファイル

はSVG Tiny 1.2だけである。 

この規格は,SVG 1.2のコア仕様,基礎プロファイルである変倍ベクタグラフィックス(SVG Tiny1.2)

の機能,及び構文を定義している。他のSVG仕様書において,この基礎機能を拡張したスーパー集合が作

成されるだろう(SVG 1.2 Fullなど)。この規格では,SVG作成者,実装者及び利用者によって要求されて

いたSVG Tiny 1.1の機能が追加されている。この規格はSVG Tiny 1.1のスーパー集合である。 

1.2.1 

SVG規格のプロファイリング 

SVG 1.2のTinyプロファイルは,この規格で定義されている全機能から構成される。基礎仕様書として

次のものが考えられる。 

• 

全てのTinyプロファイルを含み,基礎仕様書にその他の機能が追加されているスーパー集合プロフ

ァイル(例 SVG Full 1.2)。 

• 

部分集合プロファイル。 

• 

それぞれの業界における特定の需要に応じた他の機能と,この規格のモジュールとを統合した特殊

な目的のためのプロファイル。 

適合性を考えたとき,“SVG Tiny 1.2”という用語は,この規格で定義されるSVG 1.2のTinyプロファイ

ルのことを指す。このTinyプロファイルを完全に実装しない場合には,ユーザエージェントの適合性に関

する主張において,適合したプロファイル又は実装した特定の機能の集合を示さなければならない。 

background image

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

1.3 

SVG Tiny 1.2文書の定義 

SVG Tiny 1.2は,SVG Tiny 1.1(SVGM11)に対する後方互換性をもったアップグレード版である。後方

互換性をもつことは,正規のSVG Tiny 1.1内容を描画する場合,SVG Tiny 1.1利用者エージェントでもSVG 

Tiny 1.2利用者エージェントでも同じ描画ができることを意味する。注意することが望ましいSVG Tiny 1.1

との主な違いは次のとおりである。 

• 

最上位の'svg'要素の'version'属性の値は'1.2'であることが望ましい。この詳細については,C.4のバー

ジョンの説明を参照。 

• 

SVG 1.2にはDTDがない。したがって,SVG 1.2文書に対してDOCTYPEを指定する必要はない[エ

ンティティの定義などのために内部DTD部分集合(XML10の2.8及びXML11の2.8)を使用する

場合を除く。]。その代わり,SVG名前空間,'version'及び'baseProfile'属性による識別が可能である。

この規格では,RelaxNGスキーマを使用することで妥当性検証を実行することができる。 

この規格の名前空間は,SVG 1.0及び1.1(http://www.w3.org/2000/svg)と同じであり,変更可能(NSState)

である。W3C SVGワーキンググループによって更に名前が追加され,W3C技術報告書が発行される可能

性がある。 

SVG Tiny 1.2文書の例を次に示す。 

例: 01̲01.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     viewBox="0 0 30 30"> 

  <desc>Example SVG file</desc> 

  <rect x="10" y="10" width="10" height="10" fill="red"/> 

</svg> 

XMLでは外部のDTD部分集合を取ってこなくてもよい。外部部分集合への依存は相互運用性を低下さ

せることに注意する。また,SVGワーキンググループはこの規格の規定DTDを提供しないが,その代わ

りに規定のRelaxNGスキーマを提供していることに注意する。 

内部DTD部分集合において,あるエンティティを定義した例を次に示す。 

例: entity.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<!DOCTYPE svg [ 

    <!ENTITY Smile " 

    <rect x='.5' y='.5' width='29' height='39' fill='black' stroke='red'/> 

    <g transform='translate(0, 5)'> 

    <circle cx='15' cy='15' r='10' fill='yellow'/> 

    <circle cx='12' cy='12' r='1.5' fill='black'/> 

    <circle cx='17' cy='12' r='1.5' fill='black'/> 

    <path d='M 10 19 L 15 23 20 19' stroke='black' stroke-width='2'/> 

    </g> 

    "> 

background image

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    ]> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <title>Smiley face</title> 

  <desc> 

    This example shows the use of an entity defined in the 

    internal DTD subset. Note that there is no external DTD subset 

    for SVG Tiny 1.2, and thus no formal public identifier. 

  </desc> 

  &Smile;  

</svg> 

1.4 

SVG MIMEタイプ,ファイル名拡張子及びMacintoshファイル型 

SVGのMIMEタイプは,"image/svg+xml"である(附属書Mを参照)。 

全てのプラットフォームにおいて,SVGファイルは拡張子".svg"(全て小文字)をもつことが望ましい。

全てのプラットフォームにおいて,gzipによって圧縮されたSVGファイルは拡張子".svgz"(全て小文字)

をもつことが望ましい(RFC1952)。 

Macintosh HFSファイルシステムに格納されたSVGファイルは,ファイル型"svg "(全て小文字,4文字

目に空白)をもつことが望ましい。Macintosh HFSファイルシステムに格納されたgzipによって圧縮され

たSVGファイルは,ファイル型"svgz"(全て小文字)をもつことが望ましい(HTTPで転送されるgzipに

よって圧縮されたSVGファイルについて,詳細は附属書Dを参照。)。 

1.5 

その他の標準化作業との整合性 

この規格は,他のW3C仕様書及び標準化の取組みの成果を活用し,それらと統合されている。SVGは,

その他の規格を利用しそれらに適合することによって更に強力になる。また,利用者はより簡単に自分の

ウェブサイトにSVGを組み入れる方法を習得することができるようになる。 

SVGがその他のW3Cによる取組みに適合し,それらを活用し,さらに,それらと統合されている例を

次に示す。 

• 

この規格はXMLのアプリケーションであり,Extensible Markup Language (XML) 1.1 [XML11] と

Extensible Markup Language (XML) 1.0(Fourth Edition) [XML10] との両方の勧告に適合している。 

• 

この規格は,Namespaces in XML 1.0 [XML-NS10] とNamespaces in XML 1.1 [XML-NS] との両方の

勧告に適合している。 

• 

この規格は,IRI参照においてXMLリンク付け言語(XLink)1.0 [JIS X 4176:2005] を利用してお

り,XML Base [XML-BASE] で定義されている基礎IRI仕様のサポートを必要としている。 

• 

この規格は,xml:id Version 1.0 [XMLID] で定義されている'xml:id'属性を使用している。 

• 

この規格の内容は,XSL変換(XSLT)1.0 [JIS X 4169:2007] 又はVersion 2.0 [XSLT2] を用いて生成

することができる(6.4を参照)。 

• 

この規格はCSS(Cascading Style Sheet)及びXSLから選ばれた書式付け特性をサポートしている(6.1

を参照)。 

• 

この規格は,Document Object Model(DOM)に適合した部分集合を含み,Document Object Model

(DOM)Level 3 Core [DOM3] に記載されている機能の多くをサポートしている(名前空間及びイ

ベントハンドラのサポートなど)。 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

• 

この規格は,Synchronized Multimedia Integration Language(SMIL)2.1 Specification [SMIL21] の幾つ

かの機能を統合している。これには,'prefetch'要素,'switch'要素,'systemLanguage'属性,アニメー

ション機能(箇条16を参照),音声,動画メディアの参照機能(箇条12を参照)などがある。SVG

アニメーション機能は,SMIL 2.1に記載された汎用XMLアニメーション機能を組み込み,拡張し

ている。さらに,この規格は,SMIL 2.1がアニメのSVG内容又は静的なSVG内容をメディア構成

要素として使用できるように設計されている。 

• 

SVGは,国際化においてW3Cの取組みに適合している。参考文献(W3Cその他)は次のとおり:

Unicode Standard [UNICODE],Character Model for the World Wide Web 1.0 [CHARMOD](附属書Gを

参照)。 

• 

SVGは,ウェブアクセシビリティ [WAI] においてW3Cの取組みに適合している(附属書Fを参

照)。 

他のXML文法(例 XHTML1.0 [XHTML])のためにDocument Object Model(DOM)Core [DOM3] が

サポートされ,さらに,SVG及びSVG DOMがサポートされている環境では,XML文書及びSVG図形の

両方に対して同じスクリプトを同時に使用することができる。この場合,同じスクリプトの集合を使用す

ることによって,複数のXML名前空間で対話的な動的効果が実現できる。 

1.6 

用語及び定義 

この規格で用いる主な用語及び定義は,次による。 

1.6.1 

後辺(after-edge) 

XSL Area Model([XSL]の4.2.3)で定義されている。 

1.6.2 

アニメーション要素(animation element) 

様々なアニメーション要素を使用して,モーションパス,フェードイン又はフェードアウト効果及び拡

大するオブジェクト,縮小するオブジェクト,回転するオブジェクト又は色が変化するオブジェクトを定

義することができる,次の五つの要素。'animate','animateColor','animateMotion','animateTransform'及び'set'。

アニメーション要素については,16.2で詳しく説明している。 

1.6.3 

基本図形(basic shape) 

共通的な図形操作に便利なように,SVGで事前に定義されている標準的な図形。具体的には,次のよう

な要素の具体値。'circle','ellipse','line','polygon','polyline'及び'rect'。 

1.6.4 

前辺(before-edge) 

XSL Area Model([XSL]の4.2.3)で定義されている。 

1.6.5 

キャンバス(canvas) 

図形要素が描画される面。ディスプレイ又は紙のような実際の物理的媒体でもよいし,コンピュータの

記憶装置に割り当てられた領域のような抽象的な面でもよい。7.1のキャンバスの説明を参照。 

1.6.6 

包含ボックス(bounding box) 

ある要素の利用者座標系軸にきちんとそろ(揃)えられた,それ自体とその子孫とを完全に閉じる長方

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

形。詳細については,7.12の包含ボックスの説明を参照。 

1.6.7 

条件付き処理属性(conditional processing attribute) 

ある要素を処理するのかどうかを管理するSVG要素に存在する五つの属性のうちの一つ。これらの属性

とは,'requiredExtensions','requiredFeatures','requiredFonts','requiredFormats'及び'systemLanguage'である。 

1.6.8 

コンテナ要素(container element) 

その子要素として図形要素及び他のコンテナ要素をもつことができる要素。具体的には,次の要素がコ

ンテナ要素である。'a','defs','g','svg'及び'switch'。 

1.6.9 

現在のSVG文書片(current SVG document fragment) 

次を満たすようなXML文書のサブツリー(sub-tree)。 

• 

そのサブツリーは,妥当なSVG文書片である。 

• 

そのサブツリーには,注目している要素が含まれている。 

• 

そのサブツリーにおける注目している要素の全ての祖先は,SVG言語及び名前空間に存在している

要素である。 

その要素によっては,所属SVG文書片をもたないことがある。 

1.6.10 

ある要素に適用される対応変換行列[current transformation matrix(CTM)] 

利用者座標系からビューポート座標系へのマッピングを定義する変換行列。変換行列は,方程式 [x' y' 1] 

= [x y 1] * 行列 によって3×3の行列を用いて一つの座標系から別の座標系への数学的なマッピングを定

義する。7.4を参照。 

1.6.11 

装飾的包含ボックス(decorated bounding box) 

包含ボックスに対する規定(7.12)のうち,幾何形状だけを考慮するようにした部分を,その要素の計

算に関与していると定義されている全ての幾何形状に基づく描画操作も考慮するように変更したもの。 

1.6.12 

記述要素(descriptive element) 

それが適用されるコンテナ要素又は図形要素(すなわち,記述された要素)に関する補助的な情報を提

供する要素(描画ツリーにおけるその要素自体ではない。)。具体的には,次の要素が記述要素である。'desc',

'metadata'及び'title'。 

1.6.13 

文書の開始(document begin) 

与えられたSVG文書片の時間軸が開始されると考えられる時間。それはʻtimelineBeginʼ属性の値に依

存する。 

• 

ʻtimelineBeginʼがʻonLoadʼの場合,文書の開始はʻsvgʼ要素のloadイベントが起動されたとき

の時間である。 

• 

ʻtimelineBeginʼがʻonStartʼの場合,文書の開始はʻsvgʼ要素の開始タグ([XML10,XML11]の

3.1)が完全に解析され,処理されたときの時間である。 

1.6.14 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

文書の終了(document end) 

あるSVG文書片において,利用者エージェントによってその文書片が解放され,もはや処理されなくな

ったときの時刻。 

1.6.15 

文書時刻(document time) 

与えられた文書片の文書の開始に対する時間軸における位置。文書時刻は,プレゼンテーション時刻と

呼ばれることもある。詳細については,SMIL 2.1におけるdocument timeの定義([SMIL21]の10.7.1)を参

照。 

1.6.16 

フィル(fill) 

図形の内部又はテキスト文字列における文字字形の内部を塗る操作。 

1.6.17 

フォント(font) 

字形の組織付けられた集合であって,様々な字形表現が共通的な外観又はスタイル付けを共有し,一連の

文字を描画した結果が,読みやすく,固有の美的感覚のあるスタイルをもち,文字の間における一貫した

整列及びスペーシングが提供されているもの。 

1.6.18 

字形(glyph) 

あるフォントにおいて描画される内容の単位。しばしば,描画される文字とそれに対応する字形との間

には1対1の対応関係がある(例 しばしば,文字“A”は単一の字形を使用して描画される。)。しかし,

単一の文字を描画するために複数の字形が用いられる場合もある(例 アクセントの使用)。また,複数の

文字を描画するために単一の字形を使用することもできる(例 合字)。通常,字形はパスのような一つ以

上の図形によって定義されるが,フォントエンジンが小さなテキストを読みやすくするための描画のヒン

トのような追加的な情報が含まれる場合もある。 

1.6.19 

図形要素(graphics element) 

対象のキャンバスに図形を描画することができるSVG要素。具体的には,次の要素が図形要素である。す

なわち,'animation','circle','ellipse','image','line','path','polygon','polyline','rect','text','textArea','use'

及び'video'である。 

1.6.20 

図形参照要素(graphics referencing element) 

異なる文書又は要素をその図形内容の出典として参照する図形要素。次の要素は図形参照要素である。

'animation','foreignObject','image','use'及び'video'。 

1.6.21 

ホスト言語(host language) 

包含又は参照によって一つ以上のSVG文書片を統合し,文書片の間における相互作用を定義する構文。

この例としては,XHTML,SVG,MathML,XForms,SMIL及びその他の構文の間における相互作用の方

法を定義するXMLフレームワークであるWICD Core 1.0 [WICD]がある。 

1.6.22 

エラー(in error) 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ある値が“エラーである”とは,この規格において明確に“エラー”であると規定されている状態を表

す。エラー処理に関する詳細については,C.3を参照。 

1.6.23 

非活性化要素(inactive element) 

非活性化状態にある要素。非活性化状態とは,ある要素が活性化している持続時間の範囲外にあるとき,

又はそれが一時停止しているときである。活性化していない要素の聴覚的側面(例 オーディオ,ビデオ

要素のオーディオトラック)は,無音である。SMILでは,タイミング,イベント及びハイパーリンクに

関して活性化していない要素の値である。“Modelling interactive, event-based content in SMIL”,”Paused 

Elements and Active Duration”,及び“Event Sensitivity”([SMIL21]の10.11.2及び10.4.3)を参照。 

1.6.24 

IRI参照(IRI reference) 

あるリソースへの参照として,又は(断片識別子を用いて)2次的リソースへの参照として機能する参

照。IRI参照は,断片識別子を任意で伴う国際化リソース識別子(Internationalized Resource Identifier)であ

り,これはInternationalized Resource Identifiers [RFC3987]で定義されている。 

1.6.25 

不正なIRI参照(Invalid IRI reference) 

その構文上不正である,リソースに解決することができない,又は与えられた属性に対して認められて

いない形式をもつIRI参照。14.1.4で定義されている。 

1.6.26 

省略値(lacuna value) 

属性若しくはプロパティが指定されていないとき,又は属性若しくはプロパティがサポート外の値をも

っているときに用いられる値。この値は描画又はアニメーション値の計算のために使われ,また,

TraitAccessインタフェースを用いた属性又はプロパティへのアクセスにおいて利用される。しかしながら,

XML既定値とは対照的に,その属性又はプロパティ,及びその値はDOMにおいて不可視であり,DOM

メソッド(例 getAttribute)を用いてアクセスすることができない。プロパティの省略値については,そ

のプロパティが継承されていて,継承値がないとき(例 ルート要素上),その省略値はプロパティの定義

において指定されている初期値である([CSS2]の6.1.1)。継承されていないプロパティについては,その

省略値は常に初期値である。 

注記 省略値はXML用語の既定値とは異なる。XML用語の既定値は,DTD探索を用いて,ある属性

が必須かどうか,そしてその値は何かを決定し,必須の属性とその値とをDOMに挿入する

([XML10]の3.3.2)。XMLのパーサレベルでは,この規格は既定値をもっていない。省略はSVG

アプリケーションレイヤの一部であり,それらの値は利用者エージェントから得ることができ

る。 

1.6.27 

ローカルIRI参照(local IRI reference) 

同一のリソースにおける断片を参照するIRI参照。14.1を参照。 

1.6.28 

ナビゲーション属性(navigation attribute) 

特定の方向へのフォーカス(focus)のナビゲーション又はフォーカス(focus)環における前後の要素へ

のフォーカス(focus)の設定を実施するよう,利用者がSVG利用者エージェントに指示を与える場合,

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

フォーカス(focus)の対象となる要素を指定するXML属性。具体的には,次のような属性がナビゲーシ

ョン属性である。'nav-next','nav-prev','nav-up','nav-down','nav-left','nav-right','nav-up-left','nav-up-right',

'nav-down-left'及び'nav-down-right'。13.13.2を参照。 

1.6.29 

非ローカルIRI参照(non-local IRI reference) 

異なる文書,又は異なる文書における要素を参照するIRI参照。 

1.6.30 

メディア要素(media element) 

要素内部において固有の時間軸を定める要素。次の要素はメディア要素である。'animation','audio'及び

'video'。箇条12を参照。 

1.6.31 

塗り(paint) 

キャンバスに色値を置くための方法。塗りは,色値及びキャンバスにおける既存の色値に対する色の混

合を制御する関連アルファ値の両方からなる。この規格では,二つの組込みの塗りがサポートされている。

色及びグラデーション。 

1.6.32 

プレゼンテーション属性(presentation attribute) 

SVG要素における特定のプロパティに値を指定するその要素のXML属性。箇条6を参照。 

1.6.33 

プロパティ(property) 

ある文書をどのように描画することが望ましいのかを指定するパラメタ。SVGプロパティの全リストに

ついては,附属書Lを参照。プロパティは,プレゼンテーション属性によってSVG言語の要素に割り当

てられる。箇条6を参照。 

1.6.34 

描画ツリー(rendering tree) 

あるSVG文書片において,塗り重ねモデル(3.2を参照)を用いて聴覚的又は視覚的に描画される要素

の集合。次のような断片における要素及びそれらの子はSVG文書片の一部ではあるが,描画ツリーの一部

ではない(したがって,描画されない。)。 

• 

'defs'要素,'discard'要素,'font'要素,'handler'要素,'linearGradient'要素,'listener'要素,'metadata'要素,

'mpath'要素,'prefetch'要素,'radialGradient'要素,'script'要素及び'solidColor'要素 

• 

'display'プロパティが'none'に設定されている要素 

• 

偽と評価されている条件付き処理属性を一つ以上もつ要素 

• 

ʻswitchʼ要素直下の子(真と評価されている子を除く。) 

• 

アニメーション要素 

一方,ʻuseʼ要素が参照する要素のコピーは,SVG文書片には存在しないが描画ツリーには存在する。

また,不透明化が0,'fill'なし,'stroke'なし,'audio-level'が0,又は'visibility'プロパティがhiddenに設定さ

れているような要素は,描画ツリーに存在していることに注意する。 

1.6.35 

最上位の'svg'要素(rootmost 'svg' element) 

SVG文脈範囲における最も遠い'svg'祖先要素。 

10 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この定義は,この規格('svg'要素が'foreignObject'にある場合を除けば,最上位の'svg'要素が唯一の'svg'

要素である。)だけではなく,XBL [XBL2]を用いるSVG及びSVG Full 1.2にも適用することができるよう,

慎重に選別されていることに注意する。1.6.40も参照。 

1.6.36 

複製ツリー(shadow tree) 

DOMツリーの一部ではないが,描画及びイベント伝ぱ(播)(bubbling)のために非親子関係にある参

照要素(例 'use'要素)に割り当てられるツリーの断片。複製ツリーは,描画ツリーにおける参照先要素

の深層構造をもった複製のような構造をもつ。複製ツリーは,参照先要素の内容との同期を取り,その要

素において発生する全ての非DOM対話型状態,アニメーション,又はDOM操作が,全ての参照元具体

値に対しても適用されるようにする。この規格では,複製ツリーにアクセスする全てのSVG DOMメソッ

ドの部分集合だけを利用することができる。 

"具体値ツリー"と呼ばれることもある。 

1.6.37 

形状(shape) 

直線及び曲線の定義された組合せによって構成される図形要素。具体的には,次の要素が形状である。

'circle','ellipse','line','path','polygon','polyline'及び'rect'。 

1.6.38 

ストローク(stroke) 

図形の外形又はテキスト文字列における文字字形の外形を塗る操作。 

1.6.39 

SVG文脈(SVG context) 

その文書片における全ての要素がこの規格の規則に従ったSVG利用者エージェントの処理の対象とな

る文書片。 

SVG内容が親のXML(XHTMLなど)の行内に埋め込まれている場合,そのSVG文脈には,最上位の

'svg'要素よりも上の祖先は含まれない。そのSVG内容がSVG以外の内容を含む'foreignObject'要素を包含

している場合,SVG文脈にはその'foreignObject'要素の内容は含まれない。 

この規格では,一つのSVG文脈には一つのSVG文書片が含まれる。 

1.6.40 

SVG文書片(SVG document fragment) 

最上位の要素が'svg'要素(すなわち,最上位の'svg'要素)であるXML文書のサブツリー。 

SVG文書片は,独立のSVG文書からなるか,又は親のXML文書に対する文書片となるもので最上位の

'svg'要素によって閉じられる文書片からなる。この規格では,SVG文書片は入れ子になった'svg'要素を含

んではならない。入れ子になった'svg'要素はサポート外の要素であり,描画をしてはならない。文書の適

合性は,SVG文書片の適合性と独立であることに注意する。 

詳細については,D.3.1を参照。 

1.6.41 

SVG要素(SVG element) 

SVG言語の仕様書によって定義されたSVG名前空間における要素。 

1.6.42 

SVG利用者エージェント(SVG user agent) 

11 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVG内容を取り込んで描画することができる利用者エージェント。 

1.6.43 

同期基点(syncbase) 

ある要素が比較対象とするタイミングをもった要素。同期基点は,あるアニメーション要素におけるタ

イミングを指定する[SMIL 2.1([SMIL21]の10.7.1)の定義による。]。 

1.6.44 

テキスト内容要素(text content element) 

テキスト文字列をキャンバスに描画させるSVG要素。この規格のテキスト内容要素は次のとおり。'text',

'textArea'及び'tspan'。 

1.6.45 

テキスト内容ブロック要素(text content block element) 

テキスト内容ブロック要素は,あるテキスト単位を表す独立の要素として機能するテキスト内要素であ

り,幾つかのテキスト内容要素(例 tspan)を子要素として含むことができる。この規格では,二つのテ

キスト内容ブロック要素が定義されている。'text'及び'textArea'。 

1.6.46 

時間付き要素(timed element) 

SVGタイミング属性をサポートする要素(16.2.8を参照)。次の要素は時間付き要素である。'audio',

'animate','animateColor','animateMotion','animateTransform','animation','set'及び'video'。 

1.6.47 

変換(transformation) 

単純変換の指定(拡大縮小,回転,移動など)の集合及び/又は一つ以上の変換行列の形式における補

足的な変換を提供することによる,ある要素に適用される対応変換行列(CTM)の変更。7.4を参照。 

1.6.48 

変換行列(transformation matrix) 

3×3の行列(matrix)であって,方程式 [x' y' 1] = [x y 1] * matrix によって一つの座標系から別の座標系へ

の数学的なマッピングを定義するもの。1.6.10及び7.4を参照。 

1.6.49 

サポート外の値(unsupported value) 

この規格に適合していないものの,明確にエラーとは示されない値。サポート外の値の処理について,

詳しくはC.2を参照。 

1.6.50 

利用者エージェント(user agent) 

テキスト,図形,音声,動画,画像及びその他の内容型のようなウェブ内容を,取り込み及び描画する

アプリケーション。利用者エージェントは,何らかの型の内容を処理するために追加的な利用者エージェ

ントを必要とすることがある。例えば,ブラウザは音声又は動画を描画するために別のプログラム又はプ

ラグイン(plug-in)を実行することがある。利用者エージェントには,グラフィカルデスクトップブラウ

ザ,マルチメディアプレイヤ,テキストブラウザ,音声読上げブラウザなどが含まれ,それらは単体で使

用されるか,又はスクリーンリーダ,スクリーン拡大ソフトウェア,音声シンセサイザ,オンスクリーン

キーボード,及び音声入力ソフトウェアのような支援技術と合わせて利用される[UAAG]。 

利用者エージェントには,SVG内容を取り込んで描画する機能があってもよいし,なくてもよい。しか

12 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

しながら,SVG利用者エージェントは,SVG内容を取り込み及び描画することができなければならない。 

1.6.51 

利用者座標系(user coordinate system) 

現在活性化している座標系であり,現在のキャンバスにおける座標及び長さが,それぞれどのように特

定及び計算されるのかを定義するために利用される座標系。一般に,座標系は現在のキャンバスにおける

位置及び距離を定義する。7.3及び7.4を参照。 

1.6.52 

利用者空間(user space) 

利用者座標系の同義語。 

1.6.53 

利用者単位(user units) 

現在の利用者座標系における座標値又は長さを表す単位。したがって,10の利用者単位は,現在の利用

者座標系における10単位の長さを表す。 

1.6.54 

ビューポート(viewport) 

図形要素を描画する現在のキャンバスにおける長方形領域。7.2の説明を参照。 

1.6.55 

ビューポート座標系(viewport coordinate system) 

ビューポート座標系とは,'viewBox'属性が処理される前に,'svg'要素の処理を開始するとき活性化する

座標系のことである。一般に,座標系は現在のキャンバスにおける位置及び距離を定義する。CSSを用い

てそのレイアウトを管理する親文書に埋め込まれたSVG文書片の場合,ビューポート座標系はビューポー

トの左上を原点としてそのCSSと同じ向き及び長さをもつ。7.2及び7.10を参照。 

1.6.56 

ビューポート空間(viewport space) 

ビューポート座標系の同義語。 

1.6.57 

ビューポート単位(viewport units) 

ビューポート座標系における座標値又は長さを表す単位。したがって,10のビューポート単位は,ビュ

ーポート座標系における10単位の長さを表す。 

注記 この規格において,'svg'要素,'path'要素,又はこの規格が規定する同様のSVG要素に対する参

照が使用されている場合には,それらの名前空間URIがhttp://www.w3.org/2000/svg であり,そ

れらのローカル名は引用符で囲まれた文字列(例 ''svg","path")である要素のことを指す。

一つの例外は,名前空間URIが http://www.w3.org/2001/xml-events である'listener'要素である。 

1.7 

この規格の基になった,Scalable Vector Graphics (SVG) Tiny 1.2 Specificationを参照する方法 

この規格の基になった,Scalable Vector Graphics (SVG) Tiny 1.2 Specificationの全体,又は箇条若しくは細

分箇条だけを参照する場合には,可能な限り日付抜きのURIであるhttp://www.w3.org/TR/SVGTiny12/ を用

いる。これによって,Scalable Vector Graphics (SVG) Tiny 1.2 Specificationの最新版を常に参照することがで

きる。 

1.8 

この規格の使い方 

この1.8は参考(informative)である。 

13 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この規格は,SVG内容作成者のためのガイドとして利用されるように,又は,ブラウザ,ビューア,制

作者用ツール,内容処理ツール,及びその他の利用者エージェントの実装者が,参考文献として利用し,

SVG文書の閲覧又はしっかりとしたSVGコードの出力のための相互運用的な実装ができるように作られ

ている。この規格は,内容を作成するための包括的なマニュアルとして作成されたわけではない。また,

様々な読者の好みに合うように,この規格に基づく書籍,チュートリアル及びその他の文献が将来製作さ

れることが予想される。利用者がバグについて報告したり,新たな機能の実装に関して要求を出すとき,

最も信頼の置ける情報源としてこの規格を参照できるように作られている。 

構文概念の完全な理解のためにこの規格を利用する読者は,要素,属性及びプロパティに関する個々の

定義を参照し,さらに,定義リスト,要素,属性及びプロパティの一覧表を参照するのがよい。さらに,

高い技術知識をもつ読者は,RelaxNGスキーマを参照するのがよい。SVGスクリプトを理解するためには,

箇条13,箇条15及び附属書Aを参照するのがよい。 

概念 

この箇条2は参考(informative)である。 

2.1 

SVGという名前の説明 

SVGとはScalable Vector Graphicsのことであり,XML名前空間として利用できる2次元ベクタ図形のた

めのXML文法である。 

2.1.1 

スケーラブル(Scalable) 

スケーラブルとは,一様に増加又は減少できることである。図形の世界では,スケーラブルとは,単一

の固定された画素サイズに限定されないことを意味する。ウェブの世界でいうスケーラブルとは,ある特

定の技術が,多数のファイル,多数の利用者及び様々なアプリケーションに対して適用できることである。

SVGは,ウェブのための図形技術として,上記の両方の意味においてスケーラブルである。 

SVG図形は様々なディスプレイ解像度にスケーラブルである。例えば,プリンタのフル解像度を適用し

て出力されたプリントを,異なった解像度の画面の上に同じサイズで表示させることができる。あるSVG

図形を同じウェブページ上に異なるサイズで表示させることもできるし,また,別のページ上に違うサイ

ズで再利用することもできる。SVG図形は拡大して細部を見やすくしたり,視力の低い人々をサポートし

たりすることができる。 

SVG内容は独立の図形にすることができるし,それと同じSVG内容を他のSVG図形から参照又は包含

することもできる。これによって複雑な図版でも部分的に構成したり,複数の人々が共同して作成するこ

とができるので,SVG図形はスケーラブルである。再利用及びフォントのような機能によって,図形構成

要素の再利用が促進され,HTTPキャッシングの利点を最大限利用し,必ずしも承認済み図形記号の集中

保管庫を構築しなくてもよい。 

2.1.2 

ベクタ(Vector) 

ベクタ図形には,直線及び曲線のような幾何オブジェクトが含まれる。このことは,図形における全て

のピクセル情報を保存しなければならないラスタだけの形式(PNG,JPEGなど)と比べて,高い柔軟性

を提供するものである。ベクタ形式では,一般的に,ラスタ画像をベクタ情報と結合して完全な図版を作

成することもできる。これについてはSVGも例外ではない。 

現在,全てのディスプレイはラスタ指向なので,ラスタだけの形式とベクタ形式との違いは,結局のと

ころそれらがどこでラスタ化されたのかに左右される。つまり,あるベクタ図形はクライアント側でラス

タ化されるのか,又はサーバ側で既にラスタ化されているのか,というようなことである。SVGは,ラス

14 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

タ化処理の管理についてヒントを提供している。例えば,低品質のベクタ形式実装においてよくあるひど

いエイリアシングをなくすよう,アンチエイリアシング処理された芸術作品を可能にすることなどである。 

2.1.3 

図形(Graphics) 

既存のXML文法のほとんどは,文字情報の表現又は財務情報のような生データの表現に用いられてい

る。それらの多くは初歩的な図形機能を提供しているだけであり,しばしばHTMLの'img'要素よりも機能

の低いものがある。SVGは,ベクタ形式又はベクタラスタの混合形式を用いた豊かで構造的な記述手段を

提供し,市場における穴を埋める存在である。SVGは独立でも利用することができるし,他の文法による

XML名前空間として利用することもできる。 

2.1.4 

XML 

XML [XML10,XML11] は構造的な情報交換のためのW3C勧告であり,非常に一般的であり,幅広い

信頼を受けて広く実装されている。SVGはXMLによって記述されていて,この強固な基盤の上に開発さ

れている。SVGは,XMLの国際性,強力な構造化機能,及びオブジェクトモデルのような強固な基盤か

ら多くの利益を得ている。XMLに基づく文法は,既存のきちんと実装された仕様を基に構築することによ

って,大掛かりなリバースエンジニアリングの必要がなく,実装が容易である。 

2.1.5 

名前空間 

SVGだけを扱う独立のビューアがあれば便利であろうが,SVGは,複数名前空間のXMLアプリケーシ

ョンにおける一つの構成要素としても使うことができるように設計されている。この機能によって使用さ

れるそれぞれの名前空間の有用性が高まり,革新的な新しい内容が作成できるようになる。例えば,SVG

図形は,テキスト指向のXML名前空間を使用するどのような文書(XHTMLなど)にも取り込んでもよ

い。また,例えば科学的な文書では,数学に関する記述がある場合MathML [MATHML] を使用すること

もできる。SVG及びSMILを組み合わせれば,体裁において,時間の流れをもち,興味深く豊かな図形を

表現することができる。 

SVGは,図形を使用するあらゆる複数名前空間文法にふさわしい汎用的な構成要素である。 

2.1.6 

スクリプト 

スクリプトとHTML DOMとの組合せはしばしばDynamic HTMLと呼ばれ,アニメーション,及び対話

的な表現上の効果を出すために広く利用されている。SVGでは,同じように,XML DOM及びSVG uDOM

の部分集合を利用して,文書ツリーのスクリプトに基づく操作を行うことができる。 

2.2 

重要なSVGの概念 

2.2.1 

図形オブジェクト 

全てのXML文法では,明確なモデル化の対象を考慮する。テキスト形式では,一般的には,個々の名

詞,副詞,又は音素のレベルではなく,段落及び句のレベルにおいてモデル化が行われる。同様に,SVG

では,個々の点のレベルではなく図形オブジェクトのレベルにおいて図形のモデル化が行われる。 

SVGでは,膨大な種類の図形オブジェクトの作成に使用することができる共通的なʻpathʼ要素が提供

されている。また,長方形及びだ(楕)円のような一般的な基本図形が提供されている。これらは,手書

きでプログラム作成する場合において有用であり,より一般的なパス要素と同じように使用してもよい。

SVGを利用すれば,図形オブジェクトを定義する座標系,及び描画の場合に適用される変換に対して細か

い制御を実施することができる。 

2.2.2 

再利用 

SVGの全ての実装で利用できる標準的な図形をあらかじめ定義することは可能であるが,どの図形を定

義するのかが問題となる。人々が必要としたときに“次のバージョン”が出るまで待たなければならない

15 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ようなエレクトロニクス,地図製作,フローチャートなどの追加的なシンボルが常に存在している。SVG

では,利用者は自分の図形資産を作成,再利用,及び共有することができ,そのための集中的なレジスト

リも必要ない。利用者によるコミュニティは,必要な図形を作成・改良することができ,そのために何ら

かの委員会に問い合わせる必要もない。設計者は,使用する図形の見た目をはっきりと把握することがで

き,使用している図形がサポート外であるかどうかについて心配をする必要はない。 

SVG図形は,様々なサイズ及び向きで再利用してもよい。 

2.2.3 

フォント 

豊かな図形をもつ素材は,使用される特定のフォント,及び字形の正確な間隔に大きく依存しているこ

とが多い。多くの場合,設計者は,フォントの置換えに関する問題を回避するためにテキストを輪郭線に

変換している。つまり,元のテキストが存在しないことによって,検索性及びアクセシビリティが損なわ

れてしまっている。SVGでは,設計者からの要望を取り入れ,フォント要素を採用してテキスト及び図形

の見た目の両方が維持できるようにしている。 

2.2.4 

アニメーション 

アニメーションは,その文書のスクリプトに基づく操作によって作成することができるが,スクリプト

の編集は難しく,異なる制作者用ツール間における置換えは更に難しい。ここでも設計者のコミュニティ

から寄せられた要望に基づき,SVGでは,SVG及びSYMMワーキンググループによって共同設計された

アニメーション要素の宣言が採用されている。これによって,既存のウェブ図形で一般的なアニメーショ

ン効果をSVGで表現することができる。 

2.3 

ウェブページでSVGを使用するための選択肢 

様々な方法によって,ウェブページの中にSVG内容を含めることができる。幾つかの選択肢を次に示す。 

独立のSVGウェブページ 

この場合,SVG文書(すなわち,MIMEタイプが"image/svg+xml"であるウェブリソース)は,ウェブブ

ラウザなどの利用者エージェントに直接ロードされる。このSVG文書は,利用者に提示されるウェブペー

ジである。 

参照による埋込み 

この場合,親ウェブページは別に保存されているSVG文書を参照し,そのSVG文書を親ウェブページ

の構成要素として埋め込むよう指定する。HTML又はXHTMLについて,次の三つの選択肢がある。 

• 

HTML及びXHTMLの'img'要素を使うことが,HTMLページにおいて図形を使用するための最も一

般的な方法である。その画像の幅及び高さを属性として与えれば,表示速度を高めることができる。

必須の属性の一つに'alt'がある。これは,画像をオフにして閲覧していたり,画像を閲覧することが

できない人々のために,代わりのテキスト文字列を与えるものである。この文字列には,一切マー

ク付けを含ませることができない。'longdesc'属性を用いることによって,より豊かな書式付け及び

マーク付けをもつことができるより長い記述(HTMLであることが多い。)を指し示すことができ

る。 

• 

HTML及びXHTMLの'object'要素は,その中に入れ子の他の要素を含めることができる('img'は空

であるので,これとは異なる。)。つまり,入れ子になった'object'要素を使用することによって,最

終的なテキストの代替手段(マーク付け,リンクなどを含む。)とともに,幾つかの異なったフォー

マットを提供することができる。表示することができる最上位の要素が使用される。 

• 

HTML及びXHTMLの'applet'要素によって,Javaアプレットを呼び出して与えられたウェブページ

においてSVG内容を表示させることができる。これらのアプレットを用いることによって様々なこ

16 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

とをすることができるが,一般的な利用方法は,画像(特に,珍しいフォーマットをもつ画像,又

は何らかの理由によってプログラムの制御で表示させる必要がある画像)を表示させることである。 

行内埋込み 

この場合,SVG内容は親ウェブページの中に行内に直接埋め込まれる。その例としては,XHTMLの中

にテキストのSVG文書片をもつXHTMLウェブページが考えられる。 

HTMLの'a'要素を用いた外部リンク 

この方法によって,全ての独立のSVGビューアを使用することができる。それはHTMLを表示する別

のプログラムでもよい(別のプログラムでなくてもよい。)。通常この選択肢は珍しい画像形式に適用され

る。 

CSS又はXSLプロパティからの参照 

ある利用者エージェントが正規のSVGビューアであり,Cascading Style Sheets,Level 2 [CSS2] でスタ

イル付けされたXML内容及びExtensible Stylesheet Language [XSL] の書式付けオブジェクトをサポートし

ている場合,CSS又はXSLプロパティによってラスタ画像の参照が可能であれば,必ずSVGリソースを

参照できなければならない。また,その利用者エージェントは,必要に応じてSVG図形をタイル化するこ

とができなければならない。また,背景に透明な部分がある場合にはその背景にSVGを合成できなければ

ならない。例として,CSS及びXSLの両方にある'list-style-image'([CSS2]の12.6.2),'background-image'

([CSS2]の14.2.1)などがある。 

描画モデル 

3.1 

概説 

SVGを実装すると,この箇条3で説明されている描画モデル(又は作画モデル)を実装したような振る

舞いになる。実際の実装においては,このようなモデルの実装をしなくてもよいが,サポートされている

どのような装置への実装の結果も,このモデルによって説明されているような結果にならなければならな

い。 

附属書Dでは,実際の実装においてこの説明から逸脱してもよい範囲について示している。実際の実装

においては,この説明からの逸脱は僅かとはいえ発生するだろう。その理由としては,出力装置に制限が

あったり(例 限定的な色しかサポートされていない場合),正確な数学的モデルの実装において現実的な

制限があったり(例 実際には曲線を直線で近似してもよく,その近似が適合性の必要条件を満たす程度

に正確であればよい。)する場合があるからである。 

3.2 

塗り重ねモデル 

SVGでは,描画の“塗り重ねモデル”を使用している。塗りは出力装置に対する一連の操作において適

用され,各操作においてその出力装置のある領域が塗られる。その領域が以前に塗られた領域と重複して

いるときには,新しい塗りは古い塗りを部分的又は完全に隠す。その塗りが完全に不透明ではない場合,

その出力装置の結果は単純アルファ合成(11.6を参照)で示す合成に関する(数学的)規則によって定義

される。 

3.3 

描画の順序 

SVGは描画ツリー(1.6.34を参照)を定義している。描画ツリーの要素は,暗黙的な描画順序をもつ。

それらの要素の描画の場合には,ツリーを先頭から順に深さ優先でたど(辿)りながらSVG文書片を描画

する。後に続く要素は,以前に塗られた要素の上に塗られる。 

3.4 

図形要素の型 

17 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVGでは,キャンバスに描画できる図形要素として基本的な三つの型を利用できる。 

• 

図形(直線及び曲線の組合せを表す。) 

• 

テキスト(文字字形の組合せを表す。) 

• 

代替内容: 

・ ラスタ画像[長方形グリッドにおける一連の点に対して塗りの色と不透明(しばしば,アルフ

ァと呼ばれる。)とを指定する一連の値を表す。](SVGは,適合性の必要条件において指定さ

れたラスタ画像形式のサポートを必須としている。) 

・ 動画(ラスタ画像の時間の流れをもつシーケンスを表す。) 

・ アニメーション(時間の流れをもつベクタ形式のアニメーションを表す。) 

・ その他のオブジェクト(SVG以外の内容の描画を表す。) 

3.4.1 

図形及びテキストの描画 

図形及びテキストに対して,フィル(その図形の内部への塗りの適用)及びストローク(図形の外形に

沿った塗りの適用)を実施することができる。ストローク操作は対象図形の外形を中心として実施される

ので,塗りの半分は図形の内部に適用され,もう半分は図形の外部に適用される。 

まず最初にフィルが塗られ,次にストロークが塗られる。 

フィル操作及びストローク操作にはそれぞれ不透明化の設定がある。これによって,フィル及びストロ

ーク操作のための異なる不透明値によって,準透過的に描画された一様な色で,図形をフィル及び/又は

ストロークすることができる。 

フィル操作及びストローク操作は,完全に独立した描画操作である。したがって,ある形状に対してフ

ィルとストロークとを両方適用すると,そのストロークの半分はフィルされた部分の上に塗られることに

なる。 

この規格では,フィル及びストローク操作で使用することができる次のような組込み型の塗りをサポー

トしている。 

• 

一様な色 

• 

グラデーション(線形及び放射) 

3.4.2 

ラスタ画像の描画 

ラスタ画像の描画の場合,元の標本は,出力装置で必要とされる位置に標本を生成する標準アルゴリズ

ムを用いて“再標本化”される。再標本化の要求事項については,適合性の要求事項において説明してい

る。 

3.4.3 

動画の描画 

動画は時間の流れをもつラスタ画像のシーケンスであるので,動画の描画はラスタ画像の描画と類似し

ている。しかしながら,ビデオストリーム(stream)のデコード処理を考慮したとき,ビデオ出力のSVG

利用者空間への変換を全ての実装において実行することができない可能性がある。その代わりとして,装

置空間における描画にそれらを制限してもよい。詳細については12.3を参照。 

3.5 

オブジェクトの不透明化 

フィル又はストロークによる塗り操作は,透明な黒に初期化された中間キャンバス(一様な色又はグラ

デーションによる塗りのどちらかが適用されている。)に最初に実施されるように作用しなければならない。

その中間キャンバスのアルファ値は,'fill-opacity'値又は'stroke-opacity'値によって増加する。それによって

得られたキャンバスは,単純アルファ合成を使用することで背景に合成される。 

3.6 

親の合成 

18 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVG文書片は準不透明であることができる。多くの環境(例 ウェブブラウザ)では,SVG文書片は,

その文書全体が背景キャンバスに半透明に融合される最終的な合成手順をもつ。 

基本データ型 

この箇条4では,SVGプロパティ及び属性の定義に使用される多くの一般データ型を規定している。複

数のプロパティ及び属性によって参照されないデータ型については,箇条5以降で規定している。 

<boolean> 

'true'又は'false'として指定される論理値。 

<Char> 

Extensible Markup Language (XML) 1.0([XML10]の2.2)における文字生成によって規定される文字。そ

の文書がXML 1.1の文書である場合には,Extensible Markup Language (XML) 1.1([XML11]の2.2)におけ

る文字生成によって規定される文字。 

<Clock-value> 

時間付き要素の様々な属性によって使われる時間量。<Clock-value>の値を記述する文法については,

16.2.8で説明している。 

<color> 

基本型<color>は,sRGB色空間[SRGB]において色を規定する。<color>型は,'color'プロパティの値とし

て使われる。また,<color>型は,'fill'プロパティ,'stroke'プロパティ,'stop-color'プロパティ,'solid-color'

プロパティ及び'viewport-fill'プロパティの規定の構成要素である。 

11.13.1で規定されている<color>のための五つの構文の全てがサポートされなければならない。全ての

RGBカラーは,sRGB色空間[SRGB]で指定される。sRGBを使用することによって,国際規格

[COLORIMETRY]に関連する,色の明白で客観的な定義をすることができる。 

<content-type> 

多目的インターネットメール拡張(MIME)−第2部:メディア型[JIS X 5810-2:2008]によるインターネ

ットメディア型。 

<coordinate> 

利用者座標系の原点から対応する軸(X座標についてはx軸,Y座標についてはy軸)に沿って求めら

れる距離を表す利用者座標系における長さ。その構文は,<length>と同じである。 

<focus> 

様々なナビゲーション属性('nav-next','nav-prev'など)に使用することができる値の型。これらの属性

に使用することができる値の規定については,13.13.2を参照。 

<font-family-value> 

フォントファミリー名及び一般名のリスト。具体的には,これは'font-family'プロパティのために利用す

ることができる値の型である('inherit'値を除く。)。 

<family-name> 

Extensible Stylesheet Language(XSL)Version 1.1([XSL]の7.9.2)で規定される,<family-name>によって

与えられる単独のフォントファミリー名。 

<font-size-value> 

'font-size'プロパティのために利用することができる値('inherit'値を除く。)。 

<FuncIRI> 

19 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

IRIのための機能的な表記法:"url(" <IRI> ")"。 

<ID> 

ID型のXML属性('id','xml:id'など)に使用することができる値の型。Extensible Markup Language (XML) 

1.0([XML10]の2.3)における名前の生成法に適合する文字列。その文書がXML 1.1の文書である場合に

は,Extensible Markup Language (XML) 1.1([XML11]の2.3)における名前の生成法に適合する文字列。 

<IDREF> 

IDREF型のXML属性('observer'など)に使用することができる値の型。Extensible Markup Language (XML) 

1.0([XML10]の2.3)における名前の生成法に適合する文字列。その文書がXML 1.1の文書である場合に

は,Extensible Markup Language (XML) 1.1([XML11]の2.3)における名前の生成法に適合する文字列。 

<integer> 

整数<integer>とは,省略可能な符号文字("+"又は"-")とそれに続く"0"〜"9"の一つ以上の数字列とで指

定される。符号文字がない値は0又は正とする。SVG Tiny 1.2内容における<integer>値は,-32 768〜32 767

の範囲になければならない。 

<IRI> 

国際化リソース識別子(IRIを参照)。SVGにおけるIRI参照の仕様に関しては,14.1を参照。 

<language-id> 

Extensible Markup Language (XML) 1.0([XML10]の2.12),及びExtensible Markup Language (XML) 1.1

([XML11]の2.12)で規定される'xml:lang'属性によって認められた値の型。具体的には,これはBCP 47

([BCP 47]の箇条2)によって定義される言語タグ又は空の文字列のいずれかである。 

<length> 

長さとは隔たりの計測値である。<length>の形式 は,<number> と後続の省略可能な単位識別子とで指

定される。<length>が単位識別子をもたない値として表現されている場合(例 '48')は,<length>は現在

の利用者座標系における距離を表す。 

この規格では,'svg'要素の'width'属性及び'height'属性だけにおいて単位の指定をサポートしている。これ

らは次のような単位の値を指定することができる。in,cm,mm,pt,pc,px及び%。単位識別子が与えら

れている場合には(例 '12mm'),その<length>は単位の記述に従って処理される。 

'svg'要素の'width'属性及び'height'属性のパーセンテージ値(例 '10%')は,ビューポートサイズのパーセ

ンテージを表す(7.11を参照。)。 

<list-of-content-types> 

'requiredFormats'属性によって使用されるインターネットメディア型の空白で区切られたリスト。 

次は<list-of-content-types>構文を記述したEBNF文法である[EBNF]。 

list-of-content-types ::=  

   content-type 

   | content-type wsp list-of-content-types 

wsp ::=  

   (#x9  

   | #xD  

   | #xA  

   | #x20)* 

20 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

<list-of-family-names> 

<list-of-family-names>は,'font-family'プロパティと同じ構文を用いるフォントファミリー名のリストであ

る(<generic-family>及び'inherit'値を除く。)。 

<list-of-language-ids> 

<list-of-language-ids>は,空ではない<language-id>値のコンマで区切られたリストである。コンマの前後

には空白を使用してもよい。空白は次のような連続した一つ以上の文字として定義される。"space"

(U+0020),"tab"(U+0009),"line feed"(U+000A)及び"carriage return"(U+000D)。 

<list-of-strings> 

<list-of-strings>は,区切られた<string>のシーケンスによって構成される。文字列のリストは空白で区切

られる。空白は次のような連続した一つ以上の文字として定義される。"space"(U+0020),"tab"(U+0009),

"line feed"(U+000A)及び"carriage return"(U+000D)。 

次は<list-of-strings>構文を記述したEBNF文法である[EBNF]。 

list-of-strings ::= 

   string 

   | string wsp list-of-strings 

wsp ::=  

   (#x9  

   | #xD  

   | #xA  

   | #x20)* 

<list-of-Ts>  

(Tが<content-type>,<string>,<language-id>及び<family-name>以外の型である場合,)リストは,区切

られた値の列を表す。個別の方法が明示されていない場合,リスト項目の隣り合った値同士は,(任意で前

後に空白を伴った)コンマ又は空白だけで区切られる。リストにおける空白は次のような連続した一つ以

上の文字として定義される。"space"(U+0020),"tab"(U+0009),"line feed"(U+000A)及び"carriage return"

(U+000D)。 

次は<list-of-Ts>構文を記述したEBNF文法のテンプレートである[EBNF]。 

list-of-Ts ::= 

   T 

   | T comma-wsp list-of-Ts 

comma-wsp ::=  

   (wsp+ comma? wsp*)  

   | (comma wsp*) 

comma ::=  

   "," 

wsp ::=  

21 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

   (#x9  

   | #xD  

   | #xA  

   | #x20) 

Tの代わりに<content-type>,<string>,<language-id>及び<family-name>以外の型を利用する場合,その型

のリストに関する文法が必要となる。 

<long> 

長整数<long>とは,省略可能な符号文字("+"又は"-")とそれに続く"0"〜"9"の一つ以上の数字列とで指

定される。符号文字がない値は0又は正とする。SVG Tiny 1.2内容における<long>値は,-2 147 483 648〜2 

147 483 647の範囲になければならない。 

<NCName> 

Namespaces in XML 1.0([XML-NS10]の箇条3)におけるNCName生成によって定義されるコロン抜きの

XML名,又はその文書がXML 1.1文書である場合には,Namespaces in XML 1.1([XML-NS]の箇条3)に

おけるNCName生成によって定義されるコロン抜きのXML名。 

<number>  

<number>値は,十進法又は(a×10bのような)科学的記数法によって指定される。<number>に十進法表

記を用いる場合,単独の<integer>か,又は省略可能な符号記号,0文字以上の数字,ドット(.)及び1文

字以上の数字が順に並んだもので構成される。 

科学的記数法を用いる場合は,十進法表記の数値,文字"E"又は"e",<integer>順によって構成される。 

次は<number>構文を記述したEBNF文法である[EBNF]。 

number ::=  

   decimal-number  

   | scientific-number 

decimal-number ::=  

   integer 

   | ("+" | "-")? [0-9]* "."  [0-9]+ 

scientific-number ::=  

   decimal-number [Ee] integer 

SVG Tiny 1.2内容における<number>値は,十進数で表現した場合,小数点以下4桁までであり,-32 767.999 

9 〜 +32 767.999 9の範囲になければならない。座標系変換などの操作において,可能な限り精度を高め,

丸め誤差を防ぐためには,高い精度の浮動小数点演算を実行することを推奨する。 

<paint> 

'fill'プロパティ及び'stroke'プロパティの値は,与えられた図形要素をフィル又はストロークするときに用

いる塗りの型の指定である。<paint>の構文及び選択肢については,11.2に示す。 

<path-data> 

<path-data>型はパスデータを表現するために利用され,'path'要素の'd'属性で指定することができる。8.3

及び8.3.1を参照。 

22 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

<points-data> 

<points-data>型は点のリストを表現するために利用され,'polyline'要素又は'polygon'要素の'points'属性で

指定することができる。9.7.1を参照。 

<QName> 

Namespaces in XML 1.0([XML-NS10]の箇条3)におけるQName生成によって規定される修飾名,又は

その文書がXML 1.1文書である場合には,Namespaces in XML 1.1([XML-NS]の箇条3)におけるQName

生成によって規定される修飾名。<QName>に接頭辞がある場合,その接頭辞はIRI参照及びローカル名の

タプルに対して展開される。これはその名前が事実上発生した名前空間宣言を用いて実施される。接頭辞

が付かない属性と同様に,既定の名前空間は接頭辞が付かない名前には利用されないことに注意する。 

<string> 

0以上の<Char>のシーケンス。 

<transform> 

<transform>は,'transform'属性において指定することができる変換の指定である。7.6において示されて

いるように,三つの値が認められている。transform list値,transform reference値及び'none'値。 

次は<transform>構文を記述したEBNF文法である[EBNF]。 

transform ::=  

   transform-list  

   | transform-ref  

   | "none" 

<XML-Name> 

Extensible Markup Language (XML) 1.0([XML10]の2.3)における名前生成によって規定されるXML名,

又はその文書がXML 1.1の文書である場合には,Extensible Markup Language (XML) 1.1([XML11]の2.3)

における名前生成によって規定されるXML名。 

<XML-NMTOKEN> 

Extensible Markup Language (XML) 1.0([XML10]の2.3)におけるNmtoken生成によって定義されるXML

名前トークン,又はその文書がXML 1.1の文書である場合には,Extensible Markup Language (XML) 1.1

([XML11]の2.3)におけるNmtoken生成によって規定されるXML名前トークン。 

<XML-NMTOKENS> 

Extensible Markup Language (XML) 1.0([XML10]の2.3)におけるNmtokens生成によって規定されるXML

名前トークンの空白で区切られたシーケンス,又はその文書がXML 1.1の文書である場合には,Extensible 

Markup Language (XML) 1.1([XML11]の2.3)におけるNmtokens生成によって規定されるXML名前トー

クンの空白で区切られたシーケンス。 

文書構造 

5.1 

SVG文書片を定義する:'svg'要素 

5.1.1 

概説 

SVG文書片は,'svg'要素に含まれる任意の数のSVG要素,又はその'svg'要素から構成される。 

background image

23 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVG文書片は,空の断片(つまり,'svg'要素の中に内容がない状態)から,単一SVG図形要素('rect'

など)を含む単純なSVG文書片,複雑で深い入れ子構造をもつコンテナ要素及び図形要素の集合までのい

ずれであってもよい。 

SVG文書片は,そのSVG文書片が単一のSVG文書となるような自己完結的なファイル又はリソースと

して,それ自身で構成されることができる。また,親のXML文書の中の断片として行内に埋め込まれる

こともできる。 

親のXML文書の断片として行内に埋め込まれた単純なSVG内容の例を次に示す。'svg'要素と'ellipse'要

素とがSVG名前空間に属していることを示すXML名前空間が使われていることに注意する。 

例: 05̲01.xml 

<?xml version="1.0"?> 

<parent xmlns="http://example.org" 

        xmlns:svg="http://www.w3.org/2000/svg"> 

   <!-- parent contents here --> 

   <svg:svg width="4cm" height="8cm" version="1.2" baseProfile="tiny" viewBox="0 0 100 

100"> 

      <svg:ellipse cx="50" cy="50" rx="40" ry="20" /> 

   </svg:svg> 

   <!-- ... --> 

</parent> 

次の例はもう少し複雑な(すなわち,複数の長方形が含まれている。)独立で自己完結的なSVG文書で

ある。 

例: 05̲02.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="5cm" height="4cm" viewBox="0 0 100 100"> 

  <desc>Four separate rectangles</desc> 

  <rect x="20" y="20" width="20" height="20"/> 

  <rect x="50" y="20" width="30" height="15"/> 

  <rect x="20" y="50" width="20" height="20"/> 

  <rect x="50" y="50" width="20" height="40"/> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="98" height="98" 

        fill="none" stroke="blue" stroke-width="2" /> 

</svg> 

SVG文書片は一つの'svg'要素だけを含むことができる。つまり,その'svg'要素はSVG内容の中に現れる

background image

24 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ことができない。 

どんな場合でも,SVG名前空間宣言はその'svg'要素の有効範囲内にあることによって,Namespaces in 

XML 1.0勧告又はNamespaces in XML 1.1勧告 [XML-NS10,XML-NS] のどちらかに適合していなければ

ならない。これによって,全てのSVG要素がそのSVG名前空間に属していることを識別できる。 

例えば,接頭辞のない'xmlns'属性を'svg'要素において指定することができる。これは,'xmlns'属性がある

要素の有効範囲における全ての要素に対する既定の名前空間がSVGであることを意味する。 

例: 05̲03.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Demonstrates use of a default namespace prefix for elements.</desc> 

  <rect width="7" height="3"/> 

</svg> 

'xmlns'属性において名前空間の接頭辞が指定されている場合(例 

xmlns:svg="http://www.w3.org/2000/svg"),対応する名前空間は既定の名前空間ではないので,その要素に対

して明示的な名前空間の接頭辞を割り当てなければならない。 

例: 05̲04.svg 

<?xml version="1.0"?> 

<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <s:desc>Demonstrates use of a namespace prefix for elements. 

    Notice that attributes are not namespaced</s:desc> 

  <s:rect width="7" height="3"/> 

</s:svg> 

また,名前空間宣言は祖先要素においても指定することができる(上記の例05̲01を参照)。詳細につい

ては,Namespaces in XML 1.0勧告及びNamespaces in XML 1.1勧告 [XML-NS10,XML-NS] を参照。 

5.1.2 

'svg'要素 

スキーマ: svg  

    <define name='svg'> 

      <element name='svg'> 

        <ref name='svg.AT'/> 

        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='svg.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.Focus.attr'/> 

background image

25 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <ref name='svg.AnimateSyncDefault.attr'/> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.WH.attr'/> 

      <ref name='svg.PAR.attr'/> 

      <optional> 

        <attribute name='viewBox' svg:animatable='true' svg:inheritable='false'> 

          <text/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='zoomAndPan' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value>disable</value> 

            <value>magnify</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='version' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value type='string'>1.0</value> 

            <value type='string'>1.1</value> 

            <value type='string'>1.2</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='baseProfile' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value type='string'>none</value> 

            <value type='string'>tiny</value> 

            <value type='string'>basic</value> 

            <value type='string'>full</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='contentScriptType'  

                svg:animatable='false' svg:inheritable='false'> 

background image

26 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

          <ref name='ContentType.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='snapshotTime' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value type='string'>none</value> 

            <ref name='Clock-value.datatype'/> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='timelineBegin'  

                svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value type='string'>onLoad</value> 

            <value type='string'>onStart</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='playbackOrder'  

                svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value type='string'>all</value> 

            <value type='string'>forwardOnly</value> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

version = "1.0" | "1.1" | "1.2"  

この文書片が適合するSVG言語のバージョンを示す。 

SVG 1.0及びSVG 1.1では,この属性の値はそれぞれ'1.0'又は'1.1'であった。SVG 1.2において値'1.2'が追

加された。詳細についてはC.4を参照。特にサポート外の値の処理に注意する。 

DOMを使用して'version'属性を変更しても,その振る舞いは全く変わらない。この場合,その属性の元

の値は,文書処理に使用されるものである。 

アニメーション:不可 

baseProfile = "none" | "full" | "basic" | "tiny"  

27 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

作者が内容を正しく描画するために必要だと考える最小のSVG言語プロファイルを示す。詳細について

はC.4を参照。 

この規格では,'none'値と'tiny'値とを定義している。値'full'は,SVG言語の全ての機能に対応している。

SVG 1.1についていえば,これはSVG 1.1 Specification [SVG11] で定義される言語機能に対応している。値

'basic'は,Mobile SVG Profiles: SVG Tiny and SVG Basic [SVGM11] で定義されている。この規格は,

baseProfile="tiny"及びversion="1.2"に対応している。値'none'は,内容を描画するために必要な最小の言語

プロファイルに関する情報を提供しない。 

省略値:'none'  

DOMを使用して'baseProfile'属性を変更しても,その振る舞いは全く変わらない。この場合,その属性の

元の値は,文書処理に使用されるものである。 

アニメーション:不可 

width = "<length>"  

SVG文書片に固有の幅。'height'属性,'viewBox'属性及び'preserveAspectRatio'属性とともに,固有のアス

ペクト比及び('width'及び'height'がパーセンテージでない場合)そのSVG要素に固有のサイズを定義する。

7.2を参照。 

負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'100%'  

アニメーション:可 

height = "<length>"  

SVG文書片に固有の高さ。 

負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'100%'  

アニメーション:可 

viewBox = "<list-of-numbers>" | "none"  

7.8を参照。 

アニメーション:可 

preserveAspectRatio = "[defer] <align> [<meet>]"  

7.9を参照。 

アニメーション:可 

snapshotTime = "<clock-value>" | "none"  

アニメーションSVG内容の静止画像に最も関係している時間の瞬間を表す。この時間は,SVG利用者

エージェントがアニメーションSVG内容の静止画像(プレビューなど)を描画する場合のヒントとして使

用してもよい。値が'none'の場合は,'snapshotTime'が利用できないことを示す。'snapshotTime'属性を用いた

例については,例05̲22を参照。 

省略値:'none'  

アニメーション:不可 

playbackOrder = "forwardOnly" | "all"  

その文書において後方への探索をすることができるかどうかを示す。SVGの以前のバージョンでは探索

の方向について制限を設ける必要はなかったが,長時間にわたり実行される文書のための新しい機能(例 

'discard'要素)が導入されたことによって,場合によってはそれを制限することが必要になった。 

28 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'playbackOrder'が'forwardOnly'のとき,その内容にはリソースを破棄する'discard'要素又はスクリプトがお

そらく含まれているので,その文書の時間軸において後方への探索を実行しても内容が見つからない可能

性がある。'playbackOrder'が'forwardOnly'のときには,その内容において時間軸における後方への探索を実

行できる手段(ハイパーリンク,スクリプトなど)を提供しないほうがよい。同様に,利用者エージェン

トにおいても,後方への探索をするための利用者インタフェースの制御を全て無効にするのがよい。

'playbackOrder'が'forwardOnly'である内容において時間軸における後方への探索を実行できる機構がある場

合,定義されていない振る舞いが発生したり,文書がエラーになったりする可能性がある。 

'forwardOnly' 

このファイルは,順方向にだけ連続してプレーされることが意図されている。したがって,後方への探

索を認めないほうがよい。 

'all' 

その文書は両方向への探索ができるように書かれていることを示す。 

省略値:'all'  

アニメーション:不可 

timelineBegin = "onLoad" | "onStart"  

その文書の時間軸の初期設定。 

'svg'要素は,その時間コンテナの時間軸である,文書時間軸を制御している。アニメーションが徐々に

ロードされる場合,通常作者はこの属性を'onStart'に設定する。その結果,文書全体がロードされるまで待

つのではなく,文書をロードしている時にその時間軸が開始される。 

'onLoad' 

最上位の'svg'要素のloadイベントが起動された時に文書の時間軸が開始される。 

'onStart' 

XML 1.0([XML10]の3.1)に定義される最上位の'svg'要素のstart-tagが完全に解析又は処理された時に

文書の時間軸が開始される。その文書がXML 1.1の文書である場合には,XML 1.1([XML11]の3.1)に定

義される最上位の'svg'要素のstart-tagが完全に解析又は処理された時に文書の時間軸が開始される。 

省略値:'onLoad'  

アニメーション:不可 

contentScriptType = "<content-type>"  

与えられた文書の既定のスクリプト言語を識別する。この属性は,その文書片における全てのスクリプ

ト具体値における既定のスクリプト言語を設定する。それ自身のスクリプト言語を指定していないスクリ

プトについては全てこの言語を使用しなければならない。<content-type>値は,多目的インターネットメー

ル拡張(MIME)−第2部:メディア型[JIS X 5810-2:2008]によるメディア型を指定する。 

省略値:"application/ecmascript"  

アニメーション:不可 

zoomAndPan = "magnify" | "disable"  

13.11を参照。 

アニメーション:不可 

focusable = "true" | "false" | "auto"  

13.12.1を参照。 

アニメーション:可 

background image

29 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ナビゲーション属性 

13.13.2を参照。 

'animateMotion'及び'animateTransform'は,'svg'要素の正規の子になることはできるが,親の'svg'要素には

適用できない(なぜならば,'svg'要素は'transform'属性をもたないからである。)ことに注意する。'xlink:href'

属性を指定することによって,異なる要素をアニメーションの対象にするときに限り,それらは効果をも

つことができる。 

図版作成プログラムを用いて元々印刷物用に作成された内容は,幅及び高さが固定されていることが多

く,この場合異なるディスプレイ解像度への拡大縮小ができない。次の例ではピクセルの幅及び高さが固

定されていて,'viewBox'が使われていない。 

例: width-height.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="300px" height="600px"> 

  <desc>...</desc> 

</svg> 

通常SVG内容は,拡大縮小可能になるように設計されている。SVG内容が利用するビューポートを満

たすよう自動拡大縮小が実施されるためには,その'svg'要素に'viewBox'属性が含まれていなければならな

い。これは,その図形が利用している世界座標系(利用者座標系の初期値)の領域を示す。この属性は,

そのSVG文書を任意のビューポートに合わせて拡大縮小するために有用である。 

次の例は,幅及び高さを固定するのではなく,'viewBox'を使った拡大縮小可能な例である。 

例: viewBox.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2"  

     baseProfile="tiny" viewBox="0 0 300 600"> 

  <desc>...</desc> 

</svg> 

'snapshotTime'の例を次に示す。SVG利用者エージェントでは,各SVGファイルの画像を縮小したサム

ネイル画像を描画してディレクトリにおける多くのSVGファイルを表示することができる。画像の描画の

時間として'snapshotTime'を用いることによってアニメーションを静的に見ることが可能になる。

'snapshotTime'を利用している(また,利用していない。)SVG利用者エージェントのサムネイル画像を例

の下部に示す[左は'snapshotTime'に基づきサムネイル画像を生成する利用者エージェント,右は

'snapshotTime'に基づきサムネイル画像を生成しない利用者エージェント(例 静的ビューア)]。 

例: 05̲22.svg 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     viewBox="0 0 400 300" snapshotTime="3"> 

  <title>Snapshot time example</title> 

  <desc>This example shows the use of snapshotTime on an animation of color.</desc> 

background image

30 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <rect x="60" y="85" width="256" height="65" fill="none" stroke="rgb(60,126,220)" 

stroke-width="4"/> 

     

  <text x="65" y="140" fill="white" font-size="60"> 

    Hello SVG 

    <animateColor 

attributeName="fill" 

begin="0" 

dur="3" 

from="white" 

to="rgb(60,126,220)"/>   

  </text>  

</svg> 

5.2 

グループ化:'g'要素 

5.2.1 

概説 

'g'要素は,関連する図形要素をグループ化するためのコンテナ要素である。 

グループ化構築物は'desc'要素及び'title'要素とともに利用され,文書構造及び意味に関する情報を提供す

る。豊かな構造をもつ文書は,図形として描画したり,音声又は点字として表現したりすることができる

ので,アクセシビリティが促進される。 

要素及び個々のオブジェクトのグループに対して,'id'属性又は'xml:id'属性を用いて名前を与えることが

できる。アニメーション,オブジェクトの再利用などのためには,グループに名前を付けることが必要で

ある。 

次に例を示す。 

例: 05̲05.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="5cm" height="5cm" viewBox="0 0 5 5"> 

  <desc>Two groups, each of two rectangles</desc> 

  <g xml:id="group1" fill="red"> 

    <desc>First group of two red rectangles</desc> 

    <rect x="1" y="1" width="1" height="1"/> 

    <rect x="3" y="1" width="1" height="1"/> 

  </g> 

  <g xml:id="group2" fill="blue"> 

    <desc>Second group of two blue rectangles</desc> 

background image

31 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    <rect x="1" y="3" width="1" height="1"/> 

    <rect x="3" y="3" width="1" height="1"/> 

  </g> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x=".01" y=".01" width="4.98" height="4.98" 

        fill="none" stroke="blue" stroke-width=".02"/> 

</svg> 

'g'要素は,他の'g'要素を任意の深さまで入れ子にすることができる。したがって,次のような例が可能

である。 

例: 05̲06.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="5cm" height="5cm"> 

  <desc>Groups can nest</desc> 

  <g> 

    <g> 

      <g> 

      </g> 

    </g> 

  </g> 

</svg> 

'g'の中に含まれない要素は,(少なくとも概念的には)それら自身のグループに存在しているものとして

扱われる。 

5.2.2 

'g'要素 

スキーマ: g  

    <define name='g'> 

      <element name='g'> 

        <ref name='g.AT'/> 

        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='g.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

background image

32 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.Focus.attr'/> 

      <ref name='svg.Transform.attr'/> 

    </define> 

属性の定義: 

focusable = "true" | "false" | "auto"  

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

5.3 

'defs'要素 

'defs'要素は,参照される要素のためのコンテナ要素である。理解のしやすさ及びアクセシビリティを高

めるために,参照される要素は可能な限り'defs'要素の中に定義するのがよい。性能を高めるために,他の

文書内容の前に'defs'要素を置いて全てのリソースが参照できるようにするのがよい。 

'defs'要素の内容モデルは,'g'要素のそれと同じなので,'g'要素の子になることができる要素は,'defs'要

素の子にもなることができる(その逆も同様である。)。 

'defs'要素の子孫の要素は直接描画されない。あたかも'defs'要素が'g'要素であって'display'プロパティが

noneに設定されているかのように,それらは描画ツリーの一部になることができない。しかしながら,'defs'

要素の子孫は常に源情報ツリーに存在し,他の要素から参照することができることに注意する。'defs'要素

又はその子孫の'display'プロパティの実際の値によってそれらの要素の描画が変更されることはないし,そ

れらの要素への参照が妨げられることもない。 

スキーマ: defs  

    <define name='defs'> 

      <element name='defs'> 

        <ref name='defs.AT'/> 

        <zeroOrMore><ref name='svg.G.group'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='defs.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.Core.attr'/> 

    </define> 

SVG内容の作成者は,ローカルIRI参照の対象である全ての要素(もちろんアニメーションの対象は除

く。)を,参照する要素の祖先の直接の子である'defs'要素の中に置くのがよい。次に例を示す。 

例: 05̲10.svg 

background image

33 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="100%" height="100%" viewBox="0 0 8 3">      

  <desc>Local URI references within ancestor's 'defs' element.</desc> 

  <defs> 

    <linearGradient xml:id="Gradient01"> 

      <stop offset="0.2" stop-color="#39F"/> 

      <stop offset="0.9" stop-color="#F3F"/> 

    </linearGradient> 

  </defs> 

  <rect x="1" y="1" width="6" height="1" fill="url(#Gradient01)"/> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x=".01" y=".01" width="7.98" height="2.98" 

        fill="none" stroke="blue" stroke-width=".02" /> 

</svg> 

上の例では,'svg'要素の直接の子である'defs'要素の中に線形グラデーションが定義されている。この'svg'

要素はその線形グラデーションを参照する'rect'要素の祖先である。したがって,上の文書はガイドライン

に適合している。 

5.4 

'discard'要素 

'discard'要素を用いることによって,特定の要素を廃棄する時間を指定することができる。その結果,SVG

利用者エージェントが必要とするリソースを削減することができる。これは,長時間にわたり実行される

文書を表示する場合,SVGビューアがメモリを節約するために大変有用である。この要素は静的SVGビ

ューアには処理されない。 

'discard'要素は,'animate'要素が存在するところにはどこにでも存在してよい。 

スキーマ: discard  

    <define name='discard'> 

      <element name='discard'> 

        <ref name='discard.AT'/> 

        <ref name='discard.CM'/> 

      </element> 

    </define> 

    <define name='discard.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.XLink.attr'/> 

background image

34 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <ref name='svg.AnimateBegin.attr'/> 

      <ref name='svg.Conditional.attr'/> 

    </define> 

    <define name='discard.CM'> 

      <zeroOrMore> 

        <ref name='svg.Desc.group'/> 

        <ref name='svg.Handler.group'/> 

      </zeroOrMore> 

    </define> 

属性の定義: 

xlink:href = "<IRI>"  

廃棄する対象要素を識別するIRI参照。対象要素の識別の詳細については,アニメーション要素におけ

る'xlink:href'の定義を参照。 

その対象要素が現在のSVG文書片の一部ではない場合,その対象要素が廃棄されるかどうかはホスト言

語によって定義されることに注意する。 

'xlink:href'属性が提供されていない場合,対象要素はそのdiscard要素の直近の親要素となる。 

アニメーション:不可 

begin = "begin-value-list"  

その対象要素がいつ廃棄されるのかを示す。詳細については,アニメーション要素における'begin'の定

義を参照。 

省略値:'0s'。この場合,文書の開始と同時にその対象要素を廃棄することが望ましいことを示す。 

アニメーション:不可 

'discard'要素は,暗黙的な単純持続時間"indefinite"をもつ。その要素の活性持続時間が始まるとすぐに,

SVG利用者エージェントは'xlink:href'属性([SMIL21]の10.4.3)によって特定された要素を廃棄する。

removeChildメソッドが対象要素をパラメタとしてその対象要素の親に呼び出されたかのように,廃棄の操

作が実行される。SVG利用者エージェントは,その対象要素,その属性及び子孫の全てを廃棄しなければ

ならない。 

対象要素を廃棄した後は,'discard'要素は不必要となる。対象要素を廃棄した後,それも廃棄しなければ

ならない。'xlink:href'属性が不正なIRI参照をもっている場合(例 対象要素が存在しない場合)にも,活

性化の後で'discard'要素を廃棄しなければならない。 

時間軸における後方への探索([SMIL21]の10.4.3)では,廃棄された要素を再挿入することはできない。

廃棄された要素は,メモリから完全に削除されていなければならない。したがって,'discard'要素を用いる

ときには,作者は'playbackOrder'属性を"forwardOnly"に設定したほうがよい。 

'discard'要素自体をその活性化の前に廃棄することができる。この場合,'discard'要素によってそれ自体の

対象要素の廃棄が起動されることはない。SVG利用者エージェントは,ある'discard'要素がまた別の'discard'

要素の対象になることができるようにしなければならない。 

'discard'要素の使い方を次の例において説明する。この例の文書の時間軸に関連する振る舞いを次のリス

トにまとめている。 

background image

35 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

時間 = 0: 

文書の時間軸が開始されると,青いだ(楕)円がページを下向きに移動し始める。 

時間 = 1秒: 

赤い長方形がページを上向きに移動し始める。 

時間 = 2秒: 

'ellipse'における'animateTransform'が終了する。'ellipse'はbegin="2"である'discard'要素の対象要素になって

いるので,'ellipse'及びその子は廃棄される。緑の'polygon'がページを移動し始める。 

時間 = 3秒: 

赤い長方形のアニメーションが終了する。その長方形はbegin="3"である'discard'要素の対象になってい

るので,長方形及びその子は廃棄される。 

時間 = 4秒: 

緑の三角形のアニメーションが終了する。この緑の'polygon'はbegin="4"である'discard'要素の対象になっ

ているので,この緑の'polygon'及びその子は廃棄される。 

例: discard01.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"  

     width="352" height="240" playbackOrder="forwardOnly"> 

     

  <ellipse cx="98.5" cy="17.5" rx="20.5" ry="17.5" fill="blue" stroke="black"  

           transform="translate(9 252) translate(3 -296)"> 

    <animateTransform attributeName="transform" begin="0s" dur="2s" fill="remove" 

                      calcMode="linear" type="translate" additive="sum" 

                      from="0 0" to="-18 305"/> 

    <discard begin="2s"/> 

  </ellipse> 

   

  <rect x="182" y="-39" width="39" height="30" fill="red" stroke="black" 

        transform="translate(30 301)"> 

    <animateTransform attributeName="transform" begin="1s" dur="2s" fill="remove" 

                      calcMode="linear" type="translate" additive="sum" 

                      from="0 0" to="-26 -304"/> 

    <discard begin="3s"/> 

  </rect> 

   

  <polygon points="-66,83.5814 -43,123.419 -89,123.419" fill="green" stroke="black"  

           transform="matrix(1 0 0 1.1798 0 -18.6096)"> 

    <animateTransform attributeName="transform" begin="2s" dur="2s" 

                      fill="remove" calcMode="linear" type="translate" additive="sum" 

                      from="0 0" to="460 63.5699"/> 

background image

36 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    <discard begin="4s"/> 

  </polygon> 

</svg> 

5.5 

'title'要素及び'desc'要素 

SVG文書における各コンテナ要素又は図形要素は,記述要素'title'及び'desc'をそれぞれ一つ以上含んでも

よい。これらはその要素の表題及び要約のような役割を果たす。'title'要素は,それを含むコンテナ要素又

は図形要素のタイトルを表す簡潔なプレーンテキストによる一節を含まなければならない。この短いタイ

トルでは,その要素の描画に関する補助的な情報が提供されていなければならないが,通常はそれと取り

替えることができるほど十分な内容はもっていない。'desc'要素は,それを含むコンテナ要素又は図形要素

についてより長く,より詳しいプレーンテキストによる説明を含んでいなければならない。利用者が何ら

かの理由によってSVG要素の描画を見ることができない場合には,'title'要素の内容とこの説明文とをその

代わりとして利用できるようにしなければならない。 

制作者は,SVG文書の'svg'要素の直近の子要素,又は文書内の全ての重要な図形の直近の子要素として,

少なくとも'title'を(できれば'desc'も)常に提供するのがよい。'svg'要素の'title'子要素は,与えられたSVG

文書片の内容を識別する役割を果たす。しばしば利用者はその文脈を知らずに文書を参照するので,制作

者はその文脈が分かりやすいタイトルを付けることが望ましい。したがって,“概説”のような文脈が分か

りにくいタイトルを付けるのではなく,“中世の養蜂に関する概説”のようなタイトルを付けることが望ま

しい。アクセシビリティを高めるために,SVG利用者エージェントは,常にその'svg'要素の'title'子要素の

内容を利用者が利用できるようにすることが望ましい(User Agent Accessibility Guidelines 1.0 [UAAG] を参

照)。そのためのメカニズムは,SVG利用者エージェントに依存する(例 見出し表示,音声)。何らかの

理由によってその文書の図形表現が利用できない場合,最上位の記述要素ではその文書及び目的に関する

説明をテキストで示してもよい。それに従って,制作者は意味のある内容を提供することが望ましい。 

記述要素があれば,'title'要素及び'desc'要素を表示する(しかし,図形要素は表示しない。)文書の(視

覚的又は聴覚的)代替表現が可能である。 

'title'要素及び'desc'要素では,その内容はプレーンテキストでなければならない。他のマーク付け言語に

おける構造化データを提供する場合には,制作者は必要に応じて'metadata'要素又は'foreignObject'要素を代

わりに使うことが望ましい。マーク付けが'title'要素又は'desc'要素の子として含まれる場合には,利用者エ

ージェントはその記述要素のテキストの内容だけを表示することが望ましい。 

'title'要素の使用目的は'a'要素の'xlink:title'属性のそれとは異なることに注意する。'xlink:title'属性の内容は,

現在のリソースを記述するためではなく,リンクされているリソースの性質について記述するためにある。 

スキーマ: title  

    <define name='title'> 

      <element name='title'> 

        <ref name='DTM.AT'/> 

        <ref name='DTM.CM'/> 

      </element> 

    </define> 

スキーマ: desc  

background image

37 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    <define name='desc'> 

      <element name='desc'> 

        <ref name='DTM.AT'/> 

        <ref name='DTM.CM'/> 

      </element> 

    </define> 

    <define name='DTM.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.Media.attr'/> 

    </define> 

    <define name='DTM.CM'> 

      <text/> 

    </define> 

5.5.1 

適用できる'title'要素及び'desc'要素 

通常,コンテナ要素又は図形要素について説明する記述要素は,その要素の直接の子である。しかしな

がら,SVG文書は'title'子要素又は'desc'子要素を潜在的に含む入れ子になった要素のような豊かな構造をも

つことができる。'use'要素自体及び参照される内容の両方において'title'又は'desc'をもつ'use'要素も提供する

ことができる。このような複雑な構造があり,また,与えられたレベルにおいて記述要素が存在するかど

うか分からないので,ある内容に対して適用できる記述要素はその構造によって決定される。これについ

てこの5.5.1で示している。 

それぞれのコンテナ要素又は図形要素について,その文書片の入れ子構造において最も浅い位置にある

ものを適用できる記述要素とする。このとき,'use'要素の複製ツリーにある記述要素は考慮に入れなくて

よい。その文書片には記述要素がなく,かつ,それが'use'要素の場合,その複製ツリーに含まれる要素を

適用できる記述要素とする。その文書片にも複製ツリーにも記述要素がない場合,最も近い祖先の記述要

素を適用できる記述要素とする。このアルゴリズムによって,制作者は必要に応じて参照されるリソース

で定義されている記述要素を再利用したり,それらを上書きしたり,又は要素全体のグループを記述した

りすることができる。'title'要素及び'desc'要素は必ずしも対になっている(すなわち,同じ文書階層レベル

にある。)必要はなく,もし特定の階層レベルでどちらかに遭遇した場合,利用者エージェントは適用でき

る記述要素を探すのを止めることが望ましいことに注意する。 

コンテナ要素における要素に対して適用できる記述要素は,必ずしも問題となっている個々の図形要素

の記述を伴う必要はなく,むしろより包括的なグループの所属を記述する必要があることに注意する(例

えば,ある果物かごの画像に“果物かご”というタイトルのグループがあり記述要素が他にない場合,一

つ一つの果物は果物かごとは言わないけれども,そのタイトルは包含全体を通して適用できる。)。本質的

には,記述要素の適用可能性の決定においては,コンテナ要素と図形要素との間には違いがある。図形要

素の'title'又は'desc'はその要素だけに適用されるのが望ましいが,'g'のための'title'又は'desc'はそのグループ

のそれぞれの子に適用してもよい。制作者は,自身の記述要素の全ての重要な要素を指定することによっ

38 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

て,識別及び含意が誤解されないように注意することが望ましい。 

5.5.2 

複数の'title'要素及び'desc'要素 

制作者は,多くても一つの'title'要素及び一つの'desc'要素だけを全ての要素の直近の子として使用するこ

とが望ましい。また,これらの要素は,他の全ての子要素('metadata'要素は除く。)又は文字データ内容の

前に出現させることが望ましい。 

制作者は,複数の言語のための代替的内容を提供する場合などにおいて,意図的に複数の記述要素を提

供してもよい。この場合,制作者は条件付き処理属性を利用して,利用者エージェントが利用者の好みに

従って最も良いものを選択できるようにするのがよい。例えば,'systemLanguage'属性は,'switch'要素と一

緒に(又は'switch'要素なしで)適用できる記述要素を決定する。 

SVG利用者エージェントが複数の'title'要素又は'desc'要素の中から選択して処理をする必要があり(例 

ツールチップ(tooltip)に使う文字列の決定),さらに,利用できる条件付き処理属性では最良の選択肢を

決められない場合,利用者エージェントは適用できる'title'及び'desc'として一番目の記述要素をそれぞれ選

択しなければならない。 

5.5.3 

利用者インタフェースにおける'title'要素及び'desc'要素の振る舞い 

現在のSVG文書片が視覚媒体にSVGとして描画されるとき,'title'要素及び'desc'要素はキャンバスの一

部として描画されない。しばしば,制作者は記述要素を隠すことを意図する(例 芸術作品における見た

目の美しさという理由)。しかしながら,制作者によってはこの内容が表示されることを望む場合もある。

このような制作者に対して目に見える利点を提供することによって,記述要素の最良の活用法を後押しす

ることができる。このような場合は,'role'属性を用いて値をtooltipにする([ARIA]の4.4.1)ことによって,

制作者の意図どおりの表示ができる。将来のSVG規格では,ツールチップ(tooltip)を表示するのがよい

かどうかを示すために明白なメカニズムが定義されるかもしれない。 

制作者の意図を反映するために,適切な'role'属性値が存在している場合に限り,利用者エージェントは

適切な'title'及び'desc'要素のテキスト内容をはっきり分かるように表示することを強く推奨する。このこと

は,記述された要素の上にポインティング装置を当てたとき,又は記述された要素をフォーカス(focus)

(例 キーボード又はポインティング装置による案内によって)したときに,ツールチップ(tooltip),ス

テータスバー(status bar)などのようなその利用者エージェントがサポートしている方法によって行われ

ることを強く推奨する。ツールチップ(tooltip)を提供する場合は,利用者エージェントは適用できるタ

イトルと説明文とを別々の行に表示するのがよい(最初にタイトル,それら二つを区別できるようなフォ

ントスタイル)。説明文が長い場合には,ツールチップ(tooltip)はテキストを包み込み,長い文章を適当

な長さに詰めてしまってもよい。利用者エージェントは,そのテキストの体裁を構造化するために,テキ

スト内容における空白及び改行を保持してもよい。 

記述要素をもつ要素それ自体が'xlink:title'属性をもつ'a'要素の子である場合には,利用者エージェントは

利用できる情報をできるだけ多く表示することが望ましい。利用者エージェントは,'xlink:title'属性値を別

の行に表示し,それを識別するために"link: "のようなラベルを付けることが望ましい。一般的には,多く

の利用者エージェントはステータスバー(status bar)又は他の表示領域にそのリンクのURI(すなわち,

'xlink:href'属性の値)を表示する。この情報は重要であり,記述要素の内容のほうを優先させるようなこと

はしないほうがよいが,その内容を補足として使ってもよい。 

最上位の'title'要素は文書のタイトルとして使用するのがよい。独立のSVG文書については,そのタイト

ルはツールチップ(tooltip)として表示するのではなく,ブラウザ画面の枠の中に(その利用者エージェ

ントに適切な方法で)表示するのがよい。HTML文書で参照されるSVG画像のような埋め込まれたSVG

background image

39 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

文書については,最上位のタイトル及び説明文をツールチップ(tooltip)として表示したほうがより適切

であり,利用者エージェントはそのようにすることが望ましい。 

利用者エージェントがアクセシビリティツールである場合は,現在フォーカス(focus)されていたり,

マウスポインタを重ねていたりする要素に関する全ての記述を分類して利用者に公開することが望ましい。

これによって,利用者は様々な説明文を選択して,それらにアクセスすることができる。特に'desc'要素に

ついては,図形(既定の役割)のテキストによる同等物に対してARIAオントロジー値description([ARIA]

の4.4.1)のような'role'属性の値を用いることによって,その図形のもつ意味を明らかにしてもよい。 

SVG利用者エージェントが'title'要素及び'desc'要素をツールチップ(tooltip)として提示した例を次に示

す。 

例: title-desc-tooltip.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" 

     width="100%" height="100%" viewBox="0 0 160 170"> 

  <title>Titles and Descriptions</title> 

  <desc>An example of how the contents of the 'title' and 'desc' elements may be presented 

in a user agent.</desc> 

  <defs> 

    <polygon id="beeCell" points="-14,-24.2487 14,-24.2487 28,0 14,24.2487 -14,24.2487 

-28,0" stroke="yellow" stroke-width="3" stroke-linejoin="round"> 

      <title role="tooltip">Beehive cell</title> 

      <desc role="tooltip">A simple hexagon with a yellow outline and no fill.</desc> 

    </polygon> 

  </defs> 

  <g fill="white"> 

    <use xlink:href="#beeCell" x="30" y="60" /> 

    <use xlink:href="#beeCell" x="75" y="34.0192" /> 

    <use xlink:href="#beeCell" x="120" y="60" /> 

    <use xlink:href="#beeCell" x="120" y="111.9615" /> 

    <use xlink:href="#beeCell" x="30" y="111.9615" /> 

    <use xlink:href="#beeCell" x="75" y="137.9423" /> 

    <a xlink:href="http://www.example.com/bees.html" xlink:title="Beekeeper's Hive: an 

apiary resource"> 

      <title role="tooltip">Link to Beekeeper's Hive: an apiary resource</title> 

      <use xlink:href="#beeCell" x="75" y="85.9808" fill="#9900CC"> 

background image

40 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        <title role="tooltip">Queen's Cell</title> 

        <desc role="tooltip"> 

          A hexagonal beehive cell. 

           

          A purple hexagon in the middle of 6 other empty hexagons, symbolizing that it's 

filled with royal jelly. 

        </desc> 

      </use> 

    </a>   

      

  </g> 

</svg> 

5.6 

'use'要素 

全ての'g'要素又は図形要素は,潜在的にはSVG文書において'use'要素によって再利用(つまり,具体値

の生成)をすることができるひな形のオブジェクトである。その結果,具体値ツリーが作成される。'use'

要素は,また,別の要素を参照し,その要素の図形内容は文書で与えられた点において包含及び描画され

ることを示している。 

'animation'とは異なり,'use'要素はファイル全体を参照することができない。 

この5.6の'use'要素の説明に加えて,14.1.4において'use'要素に関する重要な制限について確認すること

ができる。 

'use'要素は,参照される要素及びその内容を現在の座標系に配置するために使用される省略可能な属性

'x'及び'y'をもつ。 

'use'要素は,あたかも参照される要素のSVG要素内容が,(親として'use'要素をもち,また,より以前の

祖先として'use'要素の全ての祖先をもつ。)露出されない別個のDOMツリーに深層構造をもって複製され

たかのような効果をもつ。この複製されたDOMツリーは露出されないので,SVG Document Object Model

(DOM)は'use'要素及びその属性を含むだけである。SVG DOMは参照された要素の内容を'use'要素の子

として示さない。この深く複製されたツリー(複製ツリーとも呼ばれる。)は,参照される要素の内容との

同期をとる。これによって,参照される要素に起こる全ての非DOM対話型状態,アニメーション,又は

DOM操作が'use'要素の深く複製されたツリーに適用される。 

複製ツリーの要素における相対IRIは,その要素自体の全ての'xml:base'に関して解決される。次にその

parentNodeにおける全ての'xml:base'に関して再帰的に解決される。最後にもしparentNodeがなければ

ownerDocumentにおける全ての'xml:base'に関して解決される。 

プロパティの継承は,参照される要素が'use'要素の深く複製された子として,文字どおり包含されてい

たかのように機能する。参照された要素は,'use'要素及び'use'要素の祖先からプロパティを継承する。参照

される要素の具体値は,その参照される要素の元々の親からはプロパティを継承しない。 

'visibility'プロパティは,このプロパティ継承モデルに従った振る舞いをする。したがって,'use'要素に

おけるvisibility="hidden"という指定は,参照される内容が描画されないことを保証するものではない。'use'

要素がvisibility="hidden"という指定をしていて,それが参照する要素がvisibility="hidden"又は

background image

41 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

visibility="inherit"と指定している場合,その要素は隠される。しかしながら,参照される要素が

visibility="visible"と指定している場合には,'use'要素がvisibility="hidden"と指定していたとしても,その要

素は表示される。 

あるイベントリスナが参照される要素で登録されている場合,そのイベントのための実際の対象は,特

定の参照される要素に対応する“具体値ツリー”においてSVGElementInstanceオブジェクトになる。 

露出されないツリーのためのイベントハンドリングは,そのイベントがSVGElementInstanceオブジェク

トに割り付けられることを除き,参照される要素が'use'要素の深く複製された子として,文字どおり包含

されていたかのように機能する。そのイベントのtarget属性及びcurrentTarget属性は,参照されるサブツ

リーにおけるその対象及び現在の対象要素に対応するSVGElementInstanceに設定される。イベントは,通

常の文書ツリーと同じ方法で,ツリーの露出されている部分及び露出されていない部分を伝ぱ(播)

(bubbling)する。まずイベントの対象に行き,次に'use'要素の露出されないツリーを伝ぱ(播)(bubbling)

して戻る。それから伝ぱ(播)(bubbling)位相において最上位の'svg'要素まで通常ツリーを戻ってゆく。 

ある要素と対応する全てのSVGElementInstanceオブジェクトは,イベントリスナリストを共有している。

イベントのcurrentTarget属性を使用することによって,どのオブジェクトを通してイベントリスナが呼び

出されたのかを決定することができる。 

参照される要素におけるアニメーションによって,その具体値も,また,アニメーション化される。 

11.1.4にも示されているように,'use'要素は'svg'要素を参照してはならない。 

相対IRI参照の解決の場合を除き,'use'要素は,参照される要素が変更されるまで,'use'要素が次のよう

に生成された内容によって置き換えられたかのような視覚効果をもつ。 

• 

その生成された内容では,'use'は'g'に置き換えられる。ここでは,'use'要素の全ての要素('x','y',

'xml:base'及び'xlink:href'を除く。)は生成された'g'要素に転換される。追加的な転換である

translate(x,y)が,生成された'g'要素の'transform'属性の終わり(右側)に加えられる。ここにおけるx

及びyは,'use'要素の'x'属性及び'y'属性の値である。その参照されるオブジェクト及び内容は,生成

されたツリーに対して深く複製されたものである。 

使用されている要素において何らかの変更があった場合には,すぐに生成された内容に反映されること

にも注意する。 

'use'がまた別の'use'要素を参照したり,内容に'use'要素を含むまた別の要素を参照したりするときには,

上記の深い複製のアプローチが繰り返される。しかしながら,14.1にも示されているように,直接的又は

間接的に要素を参照して循環依存堂々巡りをするような,循環する依存関係を作るような参照集合はエラ

ーである。 

スキーマ: use  

    <define name='use'> 

      <element name='use'> 

        <ref name='use.AT'/> 

        <ref name='use.CM'/> 

      </element> 

    </define> 

    <define name='use.AT' combine='interleave'> 

background image

42 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.Transform.attr'/> 

      <ref name='svg.XLinkEmbed.attr'/> 

      <ref name='svg.Focus.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.XY.attr'/> 

    </define> 

    <define name='use.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='svg.Animate.group'/> 

          <ref name='svg.Handler.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

x = "<coordinate>"  

参照される要素が置かれる長方形領域の一角のx座標。 

省略値:'0'  

アニメーション:可 

y = "<coordinate>"  

参照される要素が置かれる長方形領域の一角のy座標。 

省略値:'0'  

アニメーション:可 

xlink:href = "<IRI>"  

SVG文書における要素又は断片へのIRI参照。不正なIRI参照はサポート外の値である。属性値が空

(xlink:href="")の場合,その要素の描画はできない。省略値:空の文字列 

アニメーション:可 

focusable = "true" | "false" | "auto"  

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

'use'要素の二つの例を次に示す。他の例については,14.1.4のuse及びanimationの例を参照。 

background image

43 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

例05̲13.svgに'rect'に関する単純な'use'の例を示す。 

例: 05̲13.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" 

     width="10cm" height="3cm" viewBox="0 0 100 30">      

  <desc>Simple case of 'use' on a 'rect'</desc> 

  <defs> 

    <rect xml:id="MyRect" width="60" height="10"/> 

  </defs> 

  <rect x=".1" y=".1" width="99.8" height="29.8" 

        fill="none" stroke="blue" stroke-width=".2"/> 

  <use x="20" y="10" xlink:href="#MyRect" /> 

</svg> 

次の例でも同じ視覚効果が得られる。 

例: 05̲14.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny" 

     width="10cm" height="10cm" viewBox="0 0 100 30"> 

  <desc> 

    The equivalent rendering tree of example 05̲13 once the 

    'use' element's shadow tree has been created. 

  </desc> 

  <!-- 'defs' section left out --> 

  <rect x=".1" y=".1" width="99.8" height="29.8" 

        fill="none" stroke="blue" stroke-width=".2" /> 

background image

44 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <!-- begin shadow tree content that the <use> element in the original 

       file would generate --> 

  <g transform="translate(20,10)"> 

    <rect width="60" height="10"/> 

  </g> 

  <!-- end of shadow tree content --> 

</svg> 

例05̲17.svgに'use'が'transform'属性をもつ場合の例を示す。 

例: 05̲17.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" 

     width="10cm" height="3cm" viewBox="0 0 100 30"> 

  <desc>'use' with a 'transform' attribute</desc> 

  <defs> 

    <rect xml:id="MyRect" x="0" y="0" width="60" height="10"/> 

  </defs> 

  <rect x=".1" y=".1" width="99.8" height="29.8" 

        fill="none" stroke="blue" stroke-width=".2"/> 

  <use xlink:href="#MyRect" transform="translate(20,2.5) rotate(10)"/> 

</svg> 

次の例でも同じ視覚効果が得られる。 

例: 05̲18.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" 

     width="100%" height="100%" viewBox="0 0 100 30"> 

  <desc>'use' with a 'transform' attribute</desc> 

background image

45 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <!-- 'defs' section left out --> 

  <rect x=".1" y=".1" width="99.8" height="29.8" 

        fill="none" stroke="blue" stroke-width=".2"/> 

  <!-- begin shadow tree content that the <use> element in the original 

       file would generate --> 

  <g transform="translate(20,2.5) rotate(10)"> 

    <rect x="0" y="0" width="60" height="10"/> 

  </g> 

  <!-- end of shadow tree content--> 

</svg> 

例use-bubble-example-1.svgにuse要素を用いたイベント伝ぱ(播)(bubbling)の四つの事例を示す。事

例1では,'rect'要素の全ての具体値がマウスポインタを重ねることによって青色にフィルされる。事例2

及び3では,青にフィルされる'rect'要素に加えて,参照する長方形の周りにマウスポインタを重ねること

によって黒いストロークが与えられる。事例4では,全ての長方形がマウスポインタを重ねることによっ

て青色になり,そしてマウスクリックによって黒いストロークが与えられる。 

例: use-bubble-example-1.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     version="1.2" baseProfile="tiny"> 

  <defs> 

    <rect id="rect" width="20" height="20" fill="red"> 

      <set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/> 

    </rect> 

  </defs> 

  <use fill="red" x="5" y="5" xlink:href="#rect"/> 

  <text x="10" y="35">1</text> 

   

  <use id="use2" fill="red" x="30" y="5" xlink:href="#rect"/>   

  <rect pointer-events="none" x="30" y="5" width="20" height="20" 

        fill="none" stroke-width="3" stroke="none"> 

    <set 

attributeName="stroke" 

begin="use2.mouseover" 

end="use2.mouseout" 

to="black"/> 

background image

46 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  </rect> 

  <text x="35" y="35">2</text> 

   

  <g id="g1"> 

    <use fill="red" x="5" y="40" xlink:href="#rect"/>   

    <rect pointer-events="none" x="5" y="40" width="20" height="20" 

          fill="none" stroke-width="3" stroke="none"> 

      <set attributeName="stroke" begin="g1.mouseover" end="g1.mouseout" to="black"/> 

    </rect> 

  </g> 

  <text x="10" y="70">3</text> 

   

  <use id="use3" fill="red" x="30" y="40" xlink:href="#rect"/>   

  <rect pointer-events="none" x="30" y="40" width="20" height="20" 

        fill="none" stroke-width="3" stroke="none"> 

    <set attributeName="stroke" begin="use3.click" dur="500ms" to="black"/> 

  </rect>   

  <text x="35" y="70">4</text> 

</svg> 

例use-bubble-example-2.svgに入れ子になったuse要素を用いたイベント伝ぱ(播)(bubbling)の例を示

す。マウスポインタを重ねることによって'rect'要素は青にフィルされ,緑及び黒の輪を表示する。 

例: use-bubble-example-2.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     version="1.2" baseProfile="tiny"> 

  <defs> 

    <rect id="rect" width="20" height="20" fill="red"> 

      <set attributeName="fill" begin="mouseover" end="mouseout" to="blue"/> 

    </rect>     

    <g id="use"> 

      <use fill="red" xlink:href="#rect"/>   

background image

47 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <rect pointer-events="none" width="20" height="20" 

            fill="none" stroke-width="8" stroke="none"> 

        <set 

attributeName="stroke" 

begin="use.mouseover" 

end="use.mouseout" 

to="green"/> 

      </rect> 

    </g> 

  </defs> 

   

  <use x="5" y="5" id="use2" fill="red" xlink:href="#use"/>   

  <rect pointer-events="none" x="5" y="5" width="20" height="20" fill="none" 

stroke-width="3" stroke="none"> 

    <set 

attributeName="stroke" 

begin="use2.mouseover" 

end="use2.mouseout" 

to="black"/> 

  </rect> 

</svg> 

例image-use-base.svgに相対IRI参照の処理の例を示す。三つのuse要素は全て同じ画像を表示する

(http://a.example.org/aaa/bbb/ddd/foo.jpg)。 

例: image-use-base.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" viewBox="00 100 100"> 

  <g xml:base="http://a.example.org/aaa/"> 

    <g xml:base="/bbb/ccc/"> 

      <g xml:base="../ddd/" xml:id="bar"> 

        <image xml:id="foo" xlink:href="foo.jpg" width="100" height="100"/> 

      </g> 

    </g> 

  </g> 

  <g xml:base="http://z.example.net/zzz/"> 

    <g xml:base="/yyy/xxx/"> 

      <g xml:base="../xxx/"> 

        <use xlink:href="#foo" /> 

        <use xlink:href="#bar" /> 

        <use xlink:href="#bar" xml:base="../ggg/" /> 

      </g> 

    </g> 

background image

48 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  </g> 

</svg> 

5.7 

'image'要素 

'image'要素は,ある画像内容が現在の利用者座標系において与えられた長方形に描画されることを示す。

この規格では,'image'要素はPNG又はJPEG [PNG,JPEG] のようなラスタ画像形式の内容を参照しなけ

ればならない。この規格では,'image'要素を用いてSVG文書を参照することはできない。その代わりに,

制作者は'animation'要素を用いてSVG文書を参照することが望ましい。適合SVGビューアは,PNG及び

JPEG画像ファイル形式をサポートしていなければならない。他の画像ファイル形式もサポートしてもよ

い。 

必要とされるJPEGのサポートの詳細については,附属書Hを参照。PNGもサポートしなければならな

い。これについてはPortable Network Graphics(PNG)Specification(Second Edition) [PNG] で規定されて

いる。 

'image'の処理結果は,常に4チャンネルのRGBA(R:red 赤,G:green緑,B:blue青,A:alpha透明度)で

ある。3チャンネル(RGB)しかないPNG又はJPEGのようなラスタ画像ファイルを'image'要素が参照す

る場合には,そのオブジェクトが,一様に1に設定されたアルファチャンネルをもつ(不透明)4チャン

ネルのRGBA画像にあたかも変換されたかのような効果となる。単一チャンネルのラスタ画像に関しては,

あたかもそのオブジェクトが4チャンネルのRGBA画像に変換されたかのような効果となり,ここでは参

照されるオブジェクトからの単一チャンネルが3カラーチャンネルの演算のために使用され,アルファチ

ャンネルは一様に1に設定される。 

'image'要素は,画像の不透明性を管理するために'opacity'プロパティをサポートしている。'fill-opacity'プ

ロパティは,画像の描画に影響を与えない。 

'image'要素は参照されるファイルのために新しいビューポートを作成する。これについては7.10におい

て示している。新規ビューポートの境界は,'x'属性,'y'属性,'width'属性及び'height'属性によって規定され

る。参照される画像の配置及び拡大縮小は,'image'要素の'preserveAspectRatio'属性によって管理される。 

'preserveAspectRatio'属性の評価に使用する'viewBox'属性の値は,参照される内容によって規定される。

はっきりと'viewBox'を特定している内容については,その値を使うことが望ましい。ほとんどのラスタ形

式の内容(PNG,JPEGなど)では,その画像の境界を使用することが望ましい(すなわち,'image'要素が

"0 0 raster-image-width raster-image-height"という暗黙的な'viewBox'をもつ。)。値が簡単に手に入らない場合

には'preserveAspectRatio'属性は無視され,そのビューポートの'x'属性及び'y'属性による転換だけがその内容

の表示に使用される。 

例えば,その'image'要素があるPNG又はJPEGを参照していてpreserveAspectRatio="xMinYMin meet"で

ある場合,そのラスタのアスペクト比は保持され(つまり,現在の利用者空間座標に対するその画像の座

標のスケール係数がx及びyと同じになる。),そのラスタはできるだけ大きいサイズで表示される。この

とき,ラスタ全体がそのビューポート内に収められ,ラスタの左上がビューポート('image'要素の'x'属性,

'y'属性,'width'属性及び'height'属性によって定義される。)の左上とそろ(揃)えられていなければならな

い。'preserveAspectRatio'の値が"none"の場合,その画像のアスペクト比は保持されない。そのラスタの左上

角が座標 ('x', 'y') とぴったりそろ(揃)い,そのラスタの右下角が座標 ('x'+'width', 'y'+'height') とぴったり

そろ(揃)うように,画像は配置される。 

SVG仕様は,表示しない画像をいつロードするのがよいのかを指定しない。SVG利用者エージェントは,

background image

49 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

表示されない画像(例 初期文書ビューポートの外にある画像)の画像データをロードしなくてもよい(た

だし,'externalResourcesRequired'が"true"に設定されているサブツリーにその画像が含まれている場合を除

く。)。しかしながら,画像を初めて見るとき,これによって遅れが生じる可能性があることに注意するこ

とが望ましい。画像データの表示の前にSVG利用者エージェントがそのデータをロードすることを制作者

が求める場合には,'prefetch'要素を使用するのがよい。 

SVG利用者エージェントは,画像のロード中に徐々に描画をするようにしてもよいが,必ずしもそうし

なくてもよいことに注意する。 

スキーマ: image  

    <define name='image'> 

      <element name='image'> 

        <ref name='image.AT'/> 

        <ref name='image.CM'/> 

      </element> 

    </define> 

    <define name='image.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.Media.attr'/> 

      <ref name='svg.XLinkEmbed.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.Focus.attr'/> 

      <ref name='svg.Transform.attr'/> 

      <ref name='svg.Opacity.attr'/> 

      <ref name='svg.XYWH.attr'/> 

      <ref name='svg.PAR.attr'/> 

      <ref name='svg.ContentTypeAnim.attr'/> 

    </define> 

    <define name='image.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='svg.Animate.group'/> 

          <ref name='svg.Discard.group'/> 

          <ref name='svg.Handler.group'/> 

        </choice> 

      </zeroOrMore> 

background image

50 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    </define> 

属性の定義: 

x = "<coordinate>"  

長方形領域の一角のx座標。 

省略値:'0'  

アニメーション:可 

y = "<coordinate>"  

長方形領域の一角のy座標。 

省略値:'0'  

アニメーション:可 

width = "<length>"  

長方形領域の幅。 

負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'0'  

アニメーション:可 

height = "<length>"  

長方形領域の高さ。 

負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'0'  

アニメーション:可 

preserveAspectRatio = "[defer] <align> [<meet>]"  

7.9を参照。 

アニメーション:可 

xlink:href = "<IRI>"  

画像へのIRI参照。不正なIRI参照はサポート外の値である。属性値が空(xlink:href="")の場合,その

要素の描画はできない。 

省略値:空の文字列 

アニメーション:可 

type = "<content-type>"  

ラスタ画像の予期されるインターネットメディア型。実装する場合,サポートしない形式の画像は取り

込みをやめてもよい。あるインターネットメディア型がサーバによって返された場合,そのサーバのメタ

データの方がtype属性よりも信頼してもよいことに注意する。Authoritative Metadata TAG finding 

[MIME-RESPECT] の箇条5“Metadata hints in specifications”を参照。利用者エージェントが,サポートし

ている形式のメディアだけをダウンロードするようにしてダウンロード時間及び帯域の使用を最適化する

には,制作者は'type'の代わりに'requiredFormats'を使用することが望ましい。 

アニメーション:可 

focusable = "true" | "false" | "auto"  

13.12.1を参照。 

アニメーション:可 

background image

51 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ナビゲーション属性 

13.13.2を参照。 

次に例を示す。 

例: 05̲21.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny"> 

  <desc>This document has a reference to an external image</desc> 

  <image x="200" y="200" width="100" height="100" xlink:href="externalImage.png"> 

    <title>External image</title> 

  </image> 

</svg> 

5.8 

条件付き処理 

5.8.1 

条件付き処理の概説 

SVGでは,'switch'要素及び五つの条件付き処理属性('requiredExtensions','requiredFeatures','requiredFonts',

'requiredFormats'及び'systemLanguage')が提供されている。これらによって,特定のSVG利用者エージェ

ント又は利用者の機能及び言語の能力に応じて,代替内容を指定することができる。 

スキーマ: conditional  

    <define name='svg.Conditional.attr' combine='interleave'> 

      <optional> 

        <attribute 

name='requiredFeatures' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='ListOfIRI.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='requiredExtensions' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='ListOfIRI.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='requiredFormats' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='FormatList.datatype'/> 

        </attribute> 

      </optional> 

background image

52 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <optional> 

        <attribute 

name='requiredFonts' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='FontList.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='systemLanguage' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='LanguageIDs.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

条件付き処理属性は,全ての要素の処理に影響を与えるわけではない。それらは,図形要素,コンテナ

要素,テキスト内容要素,記述要素,時間付き要素,'foreignObject'要素及び'discard'要素においてだけ,指

定することができる。条件付き処理属性は,他の要素では,その要素が処理されるかどうかに対して影響

を与えない。コンテナ要素において条件付き処理属性が指定された場合,それは条件付き処理属性を指定

することができる要素にだけ効果を及ぼす。例えば,'script'要素の'requiredExtensions'属性は,そのスクリ

プトが実行されるかどうかについては制御しない。スクリプトを含むコンテナ要素において条件付き処理

属性が指定された場合,そのスクリプトが実行されるかどうかについて,それは影響を与えないことに注

意する。特に,'switch'要素に含まれる全てのスクリプトは処理される。 

条件付き処理属性は論理値検査として機能し,真又は偽のどちらかの評価を出す。指定がない場合には,

真であると評価されるものとみなされる。この属性は,それらが指定される要素の文脈によって,二つの

方法で使用することができる。その要素の親要素が'switch'要素である場合には,条件付き処理属性が適用

される'switch'要素の子が一つは処理される(詳細については,5.8.2を参照。)。そうでない場合,その要素

の親要素が'switch'要素ではなく,かつ,条件付き処理属性がその要素に適用される場合には,その属性が

その要素を処理するかどうかを決定する。 

条件付き処理属性が指定されているため,又は別の子を選択した'switch'の子であるために,要素を処理

しないことは,要素の型に依存して,意味をもつ。 

• 

その要素が図形要素,コンテナ要素,テキスト内容要素又は'foreignObject'要素である場合にはその

要素は描画されず,描画ツリーの一部にもならない。 

• 

その要素が時間付き要素である場合には,SVGTimedElement及びElementTimeControlインタフェー

スのメソッドのどのような呼出し及びタイミング属性があったとしても,その要素は決して開始さ

れない。文書における他の全ての時間付き要素の同期基点としてその要素が機能する場合には,そ

れらの同期基点は決して具体的な時間を参照しない。したがって,例えばその要素がアニメーショ

ン要素の場合,そのアニメーションは決して効果をもたない。その要素が'audio'要素の場合,それ

はどのような音も生成することはない。 

• 

その要素が'discard'要素である場合,その対象要素の削除を起動することはないし,それ自体を削除

することもない。 

background image

53 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'display'プロパティと同様に,条件付き処理属性は,適用できる要素の直接的な描画及び処理だけに影響

を与え,要素が他の要素によって参照されること('use'を介した場合など)を妨げない。複製ツリーにお

ける条件付き処理属性は,通常どおり処理される。 

例systemLanguage.svgでは,三つのテキスト文字列(ウェールズ語,ギリシア語又はスペイン語)のう

ちの一つが利用者の指定する言語の場合に表示される。指定する言語でない場合,何も表示されない。 

例: systemLanguage.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" viewBox="0 0 170 200"> 

  <title>systemLanguage example</title> 

  <switch> 

    <g systemLanguage="cy"> 

      <text x="20" y="220" xml:lang="cy" font-size="20">Pam dydyn nhw ddim yn 

        siarad Cymraeg?</text> 

    </g> 

    <g systemLanguage="el"> 

      <text x="20" y="220" xml:lang="el-GR" font-size="22">Μα γιατί δεν μπορούν 

        να μιλήσουν Ελληνικά ;</text> 

    </g> 

    <g systemLanguage="es"> 

      <text x="20" y="220" xml:lang="es-ES" font-size="18">¿Por qué no pueden 

        simplemente hablar en castellano?</text> 

    </g> 

  </switch> 

</svg> 

5.8.2 

'switch'要素 

'switch'要素は,子要素のそれぞれの条件付き処理属性に基づいて処理をする目的で子要素の一つを選択

するために使用するコンテナ要素である。条件付き処理属性が全て真と評価されている'switch'の最初の直

接の子要素は,通常どおり処理される。条件付き処理属性をサポートしていない'switch'のその他全ての直

接の子要素は,処理されない。条件付き処理属性をサポートする要素については,上記の5.8.1において

示されている。 

条件付き処理属性は特定の要素においてだけサポートされるが,'switch'の全ての直接の子要素の属性は,

どの子に対する処理を無効にするのかを決定するために使用される。 

'display'プロパティ及び'visibility'プロパティの値は,'switch'要素の処理に一切影響を与えない。特に,

'switch'要素の子において'display'をnoneに設定しても,'switch'要素の処理に関連した検査には一切影響が

ない。 

background image

54 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

処理されるかどうかにかかわらず,'switch'要素の子要素はDOMの一部であり,'id'属性及び'xml:id'属性

の一意性に関する規則は適用されることに注意する。さらに,条件付き処理によって描画されない要素で

も('use'要素の対象又は'fill'プロパティにおける塗りのサーバ参照として)参照することができる。 

'switch'のための内容モデル及び要素定義スキーマはここでは定義されない。それは,それが発生するこ

とができる全ての場所で定義される。 

スキーマ: switch.at  

    <define name='switch.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.Transform.attr'/> 

      <ref name='svg.Focus.attr'/> 

    </define> 

詳しい情報及び例については,19.2.1を参照。 

属性の定義: 

requiredExtensions = "<list-of-strings>"  

5.8.4を参照。 

アニメーション:不可 

requiredFeatures = "<list-of-strings>"  

5.8.3を参照。 

アニメーション:不可 

requiredFonts = "<list-of-strings>"  

5.8.7を参照。 

アニメーション:不可 

requiredFormats = "<list-of-content-types>"  

5.8.6を参照。 

アニメーション:不可 

systemLanguage = "<list-of-language-ids>"  

5.8.5を参照。 

アニメーション:不可 

focusable = "true" | "false" | "auto"  

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

5.8.3 

'requiredFeatures'属性 

'requiredFeatures'属性の定義: 

55 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

requiredFeatures = "<list-of-strings>"  

SVG利用者エージェントによる指定機能のサポートの有無に基づき,条件付き処理を制御する条件付き

処理属性。その値は特性文字列のリストであり,それぞれの値が空白によって区切られる。その文書が作

成された時点のSVG仕様の既存バージョンで定義されている機能の文字列(附属書Jに示されたものな

ど)だけを使用することが望ましい。また,SVG標準規格の一部ではないサードパーティ拡張機能は,

'requiredExtensions'属性を代わりに使用して示すことが望ましい。 

指定された機能が全てサポートされている場合,かつ,その場合に限り,条件付き処理のためにこの属

性は真となる。全ての条件付き処理属性と同じように,'requiredFeatures'が指定されていない場合,それは

暗黙的に真と評価される。しかしながら,その属性が指定されてはいるものの空の文字列値をもっている

場合,それは偽と評価される。条件付き処理属性が文書の処理に与える影響に関する詳細については,5.8.1

を参照。 

アニメーション:不可 

5.8.4 

'requiredExtensions'属性 

'requiredExtensions'属性は,必要とされる言語拡張のリストを指定する。言語拡張はSVG利用者エージ

ェントの機能であり,この規格で規定された機能の集合の範囲を超えるものである。それぞれの拡張はIRI

参照によって識別される。 

言語拡張はベンダに特有であることもあるし,SVG言語それ自体における実験的機能であることもある。

また,別個の言語であることもある(例 XHTML,MathML)。その拡張が,Namespaces in XML 1.0仕様

書 [XML-NS10] 又はNamespaces in XML 1.1仕様書 [XML-NS] をサポートする別個の言語である場合に

は,そのIRI参照はその言語の名前空間URIであることが望ましい(例 ''http://www.w3.org/1999/xhtml",

"http://www.w3.org/1998/Math/MathML")。その言語がどちらのXML仕様書の名前空間もサポートしていな

い場合,IRI参照はその言語に対する他のユニークな識別子であることが望ましい。 

'requiredExtensions'属性の定義: 

requiredExtensions = "<list-of-strings>"  

SVG利用者エージェントによる指定された拡張のサポートの有無に基づき条件付き処理を制御する条

件付き処理属性。その値は必要とされる拡張を識別するIRI参照のリストであり,それぞれの値が空白に

よって区切られる。 

指定された拡張が全てサポートされている場合,かつ,その場合に限り,条件付き処理のためにこの属

性は真となる。全ての条件付き処理属性と同じように,'requiredExtensions'が指定されていない場合,それ

は暗黙的に真と評価される。しかしながら,その属性が指定されてはいるものの空の文字列値をもってい

る場合,それは偽と評価される。条件付き処理属性が文書の処理に与える影響に関する詳細については,

5.8.1を参照。 

アニメーション:不可 

属性における値を区別するために空白が使用されているので,IRI参照における全ての空白文字はエス

ケープしなければならない。 

5.8.5 

'systemLanguage'属性 

'systemLanguage'属性の定義: 

systemLanguage = "<list-of-language-ids>"  

システム言語に基づき条件付き処理を制御する条件付き処理属性。その値は,BCP 47([BCP 47]の箇条

2)によって規定される言語タグのコンマで区切られたリストである。 

56 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

利用者の選択で示された言語の一つがこの属性の値で与えられた言語の一つと等しい場合,又は利用者

選択で示された言語の一つがこの属性の値で与えられた言語の一つの接頭辞[接頭辞の後の最初のタグ文

字がU+002D HYPHEN-MINUS ("-")]と等しい場合には,条件付き処理のためにこの属性は真と評価され

る。全ての条件付き処理属性と同じように,'systemLanguage'が指定されていない場合,それは暗黙的に真

と評価される。しかしながら,その属性が指定されてはいるものの空の文字列値をもっている場合,それ

は偽と評価される。条件付き処理属性が文書の処理に与える影響に関する詳細については,5.8.1を参照。 

アニメーション:不可 

属性が真か偽かを決定するために接頭辞マッチング規則を使う場合,利用者があるタグによってある言

語を理解できるとしても,そのタグが接頭辞であるタグをもつ全ての言語を理解できることを示すために,

言語タグが割り当てられていることではないことに注意する。この接頭辞規則は,接頭辞タグが使われる

場合にその使用を容認するだけのものである。 

実装上の注意:利用者が言語の選択をできるようにする場合,実装者は,上記の言語マッチングの詳細

について利用者は詳しくないという事実を考慮に入れ,適切なガイダンスを提供することが望ましい。例

えば,ある利用者が"en-GB"を選択したとき,イギリス英語が利用できないとしても英語の文書は提供され

るだろうと利用者が仮定する可能性がある。利用者の選択を設定する利用者インタフェースは,利用者が

"en"を追加するように促し,マッチングにおける最善の振る舞いを得ることができるようにするのがよい。 

様々な利用者のために内容に複数の言語を設定してもよい。例えば,原文においてマオリ語及び英語で

同時に提供される内容は,次のようになる。 

<text systemLanguage="mi, en"><!-- content goes here --></text>  

しかしながら,'systemLanguage'条件付き処理属性をもつ要素に複数の言語があるからといって,それが

複数の言語の利用者向けに作られていることを意味するものではない。例えば,“A First Lesson in Latin(ラ

テン語入門)”という初心者向けの言語入門書があったとすると,これは明らかに英語を読むことができる

利用者向けに作成されたものである。この場合,'systemLanguage'条件付き処理属性には"en"だけが与えら

れることが望ましい。 

制作上の注意:'switch'に複数の言語オブジェクトが含まれていて,それらが全てマッチしない場合には,

内容が全く表示されない状況になる可能性があることを制作者は認識することが望ましい。したがって,

'switch'などの最後には,どんな事例でも許容できるように包括的な選択肢を含めることが望ましい。 

5.8.6 

'requiredFormats'属性 

多くのリソース(特にオーディオ及びビデオのような媒体)には,様々な形式がある。しばしば法律又

はプラットフォームの制約によって特定の形式をサポートすることができない場合があるので,内容の代

替的な表現形式を提供し,SVG利用者エージェントがそれがサポートしている形式を選択することができ

るようにする必要がある。その利用者エージェントによる特定形式のサポートの有無に基づく条件付き処

理を制御するために,'requiredFormats'属性を使用することができる。 

'requiredFormats'属性の定義: 

requiredFormats = "<list-of-content-types>"  

SVG利用者エージェントによる指定形式のサポートの有無に基づき条件付き処理を制御する条件付き

処理属性。その値はインターネットメディア型のリストであり,それぞれの値が空白によって区切られる。

登録されたインターネットメディア型(以前はMIME型と呼ばれていた。)のリストについては,IANA 

Media Type registry [MIMETYPES] を参照。インターネットメディア型,オーディオ型及び動画コーデック

の型のリストについては,IANA codec registry及びWAVE and AVI Codec Registries [CODECS,RFC2361] を

57 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

参照。 

全ての条件付き処理属性と同じように,'requiredFormats'が指定されていない場合,それは暗黙的に真と

評価される。しかしながら,その属性が指定されてはいるものの空の文字列値をもっている場合,それは

偽と評価される。条件付き処理属性が文書の処理に与える影響に関する詳細については,5.8.1を参照。 

アニメーション:不可 

適合SVGビューアでは,次の形式は常に真と評価されなければならない。 

• image/png 

• image/jpeg 

• image/svg+xml 

5.8.7 

'requiredFonts'属性 

制作者が文書におけるテキストの外観及び位置を完全に管理しようとする場合,そのテキストの描画の

場合に必ず正しいフォントが使われるようにしなければならない。これはSVGフォントを使用し,そのフ

ォントを文書に埋め込むことによって実現することができる。しかしながら,このことはいつも現実的で

あるわけではない(特に,使用されている字形の数が非常に多い場合,又はフォントのライセンスによっ

てそのような埋込みが禁じられている場合)。 

'requiredFonts'属性の定義: 

requiredFonts = "<list-of-family-names>"  

指定フォントの利用の可否に基づき条件付き処理を制御する条件付き処理属性。その値は,例えば引用

文字列,先頭・後続空白,及び大文字と小文字との区別を処理するとき,'font-family'プロパティと同じ構

文を用いるフォントファミリー名のリストである。しかしながら,一般的なファミリー名は使用してはな

らない。 

指定されたフォントが全て利用できる場合[システムにインストールされているか,又はSVGフォント

が文書に定義されている(埋め込まれている。)場合。],かつ,その場合に限り,条件付き処理のためにこ

の属性は真となる。全ての条件付き処理属性と同じように,'requiredFonts'が指定されていない場合,それ

は暗黙的に真と評価される。しかしながら,その属性が指定されてはいるものの空の文字列値をもってい

る場合,それは偽と評価される。条件付き処理属性が文書の処理に与える影響に関する詳細については,

5.8.1を参照。 

アニメーション:不可 

5.9 

外部リソース 

5.9.1 

'externalResourcesRequired'属性 

文書において,しばしば他の文書及びウェブリソースの内容を描画又は処理の一部として参照したり,

使用したりすることがある。場合によっては,制作者が正しい文書を作成するために特定のリソースが必

須であることを指定しようとすることもある。 

'externalResourcesRequired'属性は,'defs'以外の全てのコンテナ要素において,また,潜在的に外部リソー

スを参照することができる全ての要素において利用することができる。それは,現在の文書の一部ではな

い参照先のリソースが,特定の要素をきちんと描画するために必要であるかどうかを指定する。 

属性の定義: 

externalResourcesRequired = "false" | "true"  

外部リソースがこの要素及び子孫を正しく描画するために必要であるかどうかを指定する属性。 

false 

58 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

(省略値)現在の文書に対して外部環境が省略可能であることを示す。現在の要素及びその子孫におい

て外部リソースが利用できなくても文書の描画を続行することができる。 

true 

現在の文書に対して外部リソースが必須であることを示す。外部リソースが利用できない(例 必要な

リソースへのリクエストのタイムアウト)場合,プログレッシブ(progressive)な表示は中断され,その

要素のためにloadイベントは発生せず,その文書はエラーとなる(C.3を参照)。全ての必要なリソースが

利用できるようになるまで,その文書はエラーのままである。 

アニメーション:不可 

'externalResourcesRequired'属性は継承することはできない(属性値継承の観点から)。しかし,コンテナ

要素に設定された場合にはその値はコンテナの中の全ての要素に適用される。 

あるコンテナ要素においてexternalResourcesRequired="true"と設定することは,そのコンテナの内容のプ

ログレッシブ(progressive)な表示を無効にする効果をもつので,そのコンテナが外部リソースを参照す

る要素を含んでいる場合,通常SVG内容を生成するツールでは'svg'要素においてユニバーサルに

externalResourcesRequired="true"とは設定しないことが望ましい。その代わりに,正しい描画をするために

必ず外部リソースを必要とする特定の要素において,externalResourcesRequired="true"と指定したほうがよ

い。 

5.9.2 

プログレッシブ(progressive)描画 

ある文書をプログレッシブ(progressive)にダウンロードする(progressive download)とき,SVG利用

者エージェントは,概念的に,様々な状態の要素のツリーを築き上げる。これらの要素の状態としては,

未解決(unresolved),解決(resolved)及びエラー(error)がある。 

この説明文では,プログレッシブ(progressive)描画で意図される振る舞いについて説明する場合に,

その説明文を簡素化するために二つの概念的な構文解析イベントを使用する。次の文で参照されているイ

ベントは,要素の開始(start element)及び要素の終了(end element)イベントである。開始タグ(start-tag)

又は空要素タグ(empty-element tag)が読まれているときに,要素の開始イベントが起動されると考えられ

る。空要素タグの場合には要素の開始イベントの直後に,又は終了タグ(end-tag)が読まれたときに要素

の終了イベントが起こる。開始タグ,終了タグ及び空要素タグについては,Extensible Markup Language 

(XML) 1.0([XML10]の3.1)及びExtensible Markup Language (XML) 1.1([XML11]の3.1)で定義されてい

る。 

ある要素における開始イベントに続いて文書をロードするとき,その要素は未解決の状態で文書ツリー

の一部になる。それは,最近開かれてまだ開いている要素の最後の子として加えられる(すなわち,対応

する要素の終了イベントをもたない要素の開始イベントが起こった最新の要素)。その要素の依存関係がき

ちんと解決された場合,要素は解決の状態になり,その要素の依存関係がエラーの場合,要素はエラーの

状態になる。 

'script'要素に対して要素の終了イベントが起こるとき,その要素は15.2.1に従って処理される。'script'

の処理が完了するまで,その文書の構文解析は阻止される。 

要素の依存関係は,子の内容(例 'g'の子要素)及びその要素又は子から参照されるリソース(例 'image'

が参照する画像)の両方を含んでいる。空要素(子をもたない要素)は,その要素において要素の終了イ

ベントが起こったときに解決される。子要素は,その全ての子が解決されその要素において要素の終了イ

ベントが起こったときに解決される。リソースは,SVG利用者エージェントの特定のメカニズムによって

解決される(又はエラーとされる。)。 

background image

59 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVG利用者エージェントは,適合に必要な最小の描画更新頻度が存在しない場合であっても,プログレ

ッシブ(progressive)描画を実装しなければならない。実装の場合には,文書ツリーの変化の処理及びそ

のツリーの描画との間のバランスを取り,長い中断のないスムーズな描画ができるようにすることが望ま

しい。プログレッシブ(progressive)描画には次の規則が適用される。 

• 

SVG利用者エージェントは,それぞれの要素の開始イベント及び/又は要素の終了イベントの後で

(つまり,SVG利用者エージェントが開始タグ,空要素タグ又は終了タグを解析するたびに)描画

を更新する機会をもつ。 

• 

SVG利用者エージェントは,'externalResourcesRequired'を"true"に設定している未解決の状態の最初

の要素まで(それは含まず),文書の順序に従って概念的文書ツリー要素を描画していく。解決の状

態の要素は常に描画される。未解決の状態にあるが'externalResourcesRequired'を"false"に設定してい

る要素は,現在の状態において描画される。要素に描画が存在しない場合(例 リソースが未解決

の'image'),その要素については何も描画されない。 

• 

要素がエラーの状態になったときには,その文書はエラーの状態になり,プログレッシブ

(progressive)描画は中止される。 

SVG利用者エージェントはそれぞれの要素の開始イベント及び要素の終了イベントの後で描画を更新

する機会をもつが,その更新をしないほうがよい状況もあることに注意する。例えば,'font'要素の子

('font-face','hkern','missing-glyph'及び'glyph')では文書の描画の更新をしないほうがよい。他の要素型に

ついては,'font'要素の要素の終了イベントにおいてだけ文書の描画を実施することが望ましい。 

プログレッシブ(progressive)描画を実施しているとき,'discard'要素からの前方参照は避けることが望

ましいことに注意する。要素が発見されず廃棄に失敗した場合,最終的にロードされたときに,後からそ

の要素が廃棄されることはない。 

次の例progRend01では,'g'終了タグが解析・処理されその子が必要とする全てのリソースが解決された

ときに,'g'要素の描画を開始することができる。つまり,そのグループの解析が完了しきちんと

myImage.pngを取り込むことができたときに,そのグループの描画を開始してもよい。 

例: progRend01.svg 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" viewBox="0 0 480 360"> 

  <desc>externalResourcesRequired example.</desc> 

  <g externalResourcesRequired="true"> 

    <rect xml:id="rect̲1" width="5" height="7"/> 

     ... 

    <rect xml:id="rect̲1000" width="5" height="7"/> 

    <image 

xlink:href="myImage.png" 

width="5" 

height="7" 

externalResourcesRequired="true"/> 

    <rect xml:id="rect̲1001" width="5" height="7"/> 

  </g> 

background image

60 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

</svg> 

例progRend02.svgは,前方参照をする'use'要素があるとき,どのようにプログレッシブ(progressive)描

画が実行されるのかを示す。 

例: progRend02.svg 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" viewBox="0 0 480 360"> 

  <desc>Forward reference of use element</desc> 

  <use xlink:href="#myRect" x="200" fill="green"/> 

  <circle cx="450" cy="50" r="50" fill="yellow"/> 

  <g fill="red"> 

    <rect xml:id="myRect" width="100" height="100"/> 

  </g> 

</svg> 

次のリストには,この文書が解析されたときの描画を示している(コロンの後は描画の状態)。 

a) 'use' → 要素の開始:空 

b) 'circle' → 要素の開始:黄色の円 

c) 'g' → 要素の開始:更新なし 

d) 'rect' → 要素の開始(useの参照が解決される。):緑の長方形,黄色の円,赤の長方形 

例progRend03.svgは,前方参照をしてexternalResourcesRequired="true"である'use'要素があるとき,どの

ようにプログレッシブ(progressive)描画が実行されるのかを示す。 

例: progRend03.svg 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" viewBox="0 0 480 360"> 

  <desc>Forward reference on use with eRR=true</desc> 

  <use xlink:href="#myGroup" x="200" fill="green" externalResourcesRequired="true"/> 

  <circle cx="450" cy="50" r="50" fill="yellow"/> 

  <g fill="red"> 

    <g xml:id="myGroup"> 

      <rect xml:id="myRect" width="100" height="100"/> 

      <use xlink:href="#myRect" x="50" fill="purple"/> 

    </g> 

  </g> 

background image

61 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

</svg> 

可能な描画の状態は次のとおりである。 

a) 'use' → 要素の開始:空 

b) 'circle' → 要素の開始:空の'use'は未解決,externalResourcesRequired="true",描画は'use'で中止 

c) 外側の'g' → 要素の開始:更新なし 

d) 内側の'g' → 要素の開始:更新なし(useは解決されるが,externalResourcesRequired="true"である

ので,その参照が解決の状態になるまで描画を続行してはならない。) 

e) 'rect' → 要素の開始:更新なし 

f) 

'use' → 要素の開始:更新なし 

g) 内側の'g' → 要素の終了(#myGroupの参照が解決し,描画を続行することができる。):緑の長方

形,紫の長方形,黄色の円,赤の長方形,紫の長方形 

例progRend04.svgは,externalResourcesRequired="true"であるコンテナに存在する要素への参照をもつ'use'

要素を示す。 

例: progRend04.svg 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" viewBox="0 0 480 360"> 

  <desc>Forward reference to a use under a container with eRR=true</desc> 

  <use xlink:href="#myRect" x="200" fill="green"/> 

  <circle cx="250" cy="50" r="50" fill="pink"/> 

  <g fill="red" externalResourcesRequired="true"> 

    <circle cx="450" cy="50" r="50" fill="yellow"/> 

    <rect xml:id="myRect" width="100" height="100"/> 

  </g> 

</svg> 

文書が解析されているときに可能な描画の状態は次のとおりである。 

a) 'use' → 要素の開始:空 

b) 桃色の'circle' → 要素の開始:桃色の円 

c) 'g' → 要素の開始:更新なし['g'要素においてexternalResourcesRequired="true"であるので(つま

り,'g'の開始タグの解析時に'g'の子が解決されていないので)描画は中断される。]  

d) 黄色の'circle' → 要素の開始:更新なし('g'によって描画は中断) 

e) 'rect' → 要素の開始:更新なし 

f) 

'g' → 要素の終了('use'によって参照されるリソースが解決し描画をすることができるので,描

画を続行することができる。):緑の長方形,桃色の円,黄色の円,赤の長方形 

例progRend05.svgは,SVGフォントへの前方参照をするプログレッシブ(progressive)描画の例を示す。

描画の更新は,'font'要素の解析の途中では行われない。 

background image

62 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

例: progRend05.svg 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" viewBox="0 0 480 360"> 

  <desc>Font Resolution Example</desc> 

  <text x="240" y="230" text-anchor="middle" font-size="120" 

        font-family="fontC, fontB, fontA">A</text> 

  <defs> 

    <font xml:id="fontA" horiz-adv-x="224" > 

      <font-face 

        font-family="fontA" 

        units-per-em="1000" 

        panose-1="0 0 0 0 0 0 0 0 0 0" 

        ascent="917" 

        descent="-250" 

        alphabetic="0"/> 

      <missing-glyph horiz-adv-x="800" d="..." /> 

      <glyph unicode="A" glyph-name="A"  d="..."/> 

    </font> 

    <font xml:id="fontB" horiz-adv-x="224"> 

      <font-face 

        font-family="fontB" 

        units-per-em="1000" 

        panose-1="0 0 0 0 0 0 0 0 0 0" 

        ascent="917" 

        descent="-250" 

        alphabetic="0"/> 

      <missing-glyph horiz-adv-x="800" d="..."/> 

      <glyph unicode="A" glyph-name="B" d="..." /> 

    </font> 

    <font xml:id="fontC" horiz-adv-x="224" > 

      <font-face 

        font-family="fontC" 

        units-per-em="1000" 

        panose-1="0 0 0 0 0 0 0 0 0 0" 

background image

63 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        ascent="917" 

        descent="-250" 

        alphabetic="0"/> 

      <missing-glyph d="..."/> 

      <glyph unicode="A" glyph-name="C" d="..."/> 

    </font> 

  </defs> 

</svg> 

文書が解析されているときに可能な描画の更新は次のとおりである。 

a) 'text' → 要素の開始:既定のフォントによる"A"の描画 

b) 'defs' → 要素の開始:更新なし 

c) #fontA → 要素の開始:更新なし 

d) #fontA / 'font-face' → 要素の開始:更新なし 

e) #fontA / 'missingGlyph' → 要素の開始:更新なし 

f) 

#fontA / 'glyph' → 要素の開始:更新なし 

g) #fontA → 要素の終了:fontA(現在の文書の状態の描画を示す。)による"A"の描画 

h) #fontB → 要素の開始:更新なし 

i) 

#fontB / 'font-face' → 要素の開始:更新なし 

j) 

#fontB / 'missingGlyph' → 要素の開始:更新なし 

k) #fontB / 'glyph' → 要素の開始:更新なし 

l) 

#fontB → 要素の終了:fontB(現在の文書の状態の描画を示す。)による"A"の描画 

m) #fontC → 要素の開始:更新なし 

n) #fontC / 'font-face' → 要素の開始:更新なし 

o) #fontC / 'missingGlyph' → 要素の開始:更新なし 

p) #fontC / 'glyph' → 要素の開始:更新なし 

q) #fontC → 要素の終了:fontC(現在の文書の状態の描画を示す。)による"A"の描画 

5.9.3 

'prefetch'要素 

SVG 1.1では,SVG利用者エージェントが参照先の媒体のダウンロードをいつ開始することが望ましい

のかは指定されなかった。このことは,特にその媒体が初期の文書の状態では使用されていないとき(例 

バッファ外であったり,隠されていたりする場合)には,実装上の差異につな(繋)がってしまう。この

規格では,それらの媒体が'externalResourcesRequired'が"true"に設定されているサブツリーに含まれていな

いのであれば,SVG利用者エージェントが文書のロード時に見えない参照先の媒体をダウンロードしなく

てもよいとしている。このことは,ある媒体を初めて表示する場合にはそのファイルのダウンロードのた

めに中断がある可能性があることを意味する。より高度なSVG利用者エージェントは,特定のメディアス

トリーム(media stream)が必要であることを予測し,前もってそれらをダウンロードしてもよい。 

したがって,この規格では,内容制作者がサーバから必要になる前の内容を先取りすることができる機

能を追加し,文書の描画性能が向上するようにした。SMIL 2.1の'prefetch'要素([SMIL21]の4.4)が次のよ

うな修正が加えられた'prefetch'要素としてSVGに組み入れられた。 

• 

属性には<percent-value>値を与えることができない。 

background image

64 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

• 

'xlink:href'属性が'prefetch'要素の出現する文書を指してもよい。このことによって,再生を開始する

ことができる前にどれ程の文書が必要なのかを示すヒントとしてこの機能を使うことができるよう

にした。 

• 

非ローカルIRIをきちんとサポートできるように,'mediaCharacterEncoding'属性及び

'mediaContentEncodings'属性が追加された。 

'prefetch'要素は,SVG利用者エージェントに,その媒体が将来使用されるので文書のスムーズな再生の

ためにその一部又は全体を前もって取って来たほうがよいというヒントを提供する。これはヒントなので,

利用者エージェントは'prefetch'要素を無視してもよい。しかしながら,そうすることによって,文書の再

生中にリソースが必要になったときに割込みが生じる可能性がある。'prefetch'要素によって,制作者用ツ

ール及び制作者がリソースの取り込みに利用できる回線容量又は時間があると判断したときに,リソース

の取り込みを計画しておくことができるようになる。 

'prefetch'要素が外部媒体を参照するのではなくそれが出現している文書と同じ文書を参照する場合には,

それは最上位の'g'要素だけを参照することができる。最上位の'g'要素とは,最上位の'svg'要素の直接の子で

ある'g'要素のことである。 

このようなシナリオにおいて,プログレッシブにダウンロードする(progressive download)間にスムーズな

再生ができるように,隣接している最上位の各'g'要素は,アニメーションの発生順において隣接している

シーンを含むようにするのがよい。この場合'prefetch'要素は,文書で定義される全ての'g'要素の前にある

'defs'ブロックに出現しなければならない。その場合には,'prefetch'要素を用いて,内容のスムーズで予測

可能な再生をすることができるためにはどの位のバッファリングが必要なのかがSVG利用者エージェン

トに伝えられる。 

スキーマ: prefetch  

    <define name='prefetch'> 

      <element name='prefetch'> 

        <ref name='prefetch.AT'/> 

        <ref name='prefetch.CM'/> 

      </element> 

    </define> 

    <define name='prefetch.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.XLinkRequired.attr'/> 

      <optional> 

        <attribute name='mediaSize' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='mediaTime' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

background image

65 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      </optional> 

      <optional> 

        <attribute 

name='mediaCharacterEncoding' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional> 

        <attribute 

name='mediaContentEncodings' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional> 

        <attribute name='bandwidth' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <ref name='Number.datatype'/> 

            <value>auto</value> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

    <define name='prefetch.CM'> 

      <zeroOrMore> 

        <ref name='svg.Desc.group'/> 

      </zeroOrMore> 

    </define> 

属性の定義: 

mediaSize = "<long>"  

その媒体のファイルのサイズに関してバイトの取込み量を定義する。 

'prefetch'が同一文書のリソース(すなわち,最上位の'g'要素)を参照するとき,'mediaSize'属性は'g'要素

及びその子のバイトサイズを示す。そのサイズは文書の転送時に使用される符号化に対応している。その

文書がGZIP [RFC1952] 形式で圧縮されたUTF-8 [RFC3629] 符号化方式で符号化される場合,GZIPされた

UTF-8断片のサイズが適用される。それと同じ文書が解凍されてUTF-16 [RFC2781] に符号変換された場

合には,ヒントは役に立たない。ストリーミングのヒントは主としてストリーミングのシナリオにおいて

使用されるので,そのようなヒントが役に立たないことが頻出することはないと考えられる。 

アニメーション:不可 

mediaTime = "<clock-value>"  

その媒体の所要時間に関して取込み時間を定義する。不連続な媒体(PNGのような非時間ベースの媒体)

でこの属性を用いると,リソース全体が先取りされる。 

'prefetch'が同一文書のリソース(すなわち,最上位の'g'要素)を参照した場合には,これは参照される要

素が活性化した時間である。あらかじめ,この活性化した所要時間を正確に算出することができない場合

66 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

(例 アニメーションの終わりが利用者の相互動作に依存する場合),内容制作者は,参照される要素につ

いて最小の活性化した所要時間を見積もることが望ましい。この見積りによって(それが0であったとし

ても),ストリーミングのシナリオの再生前に文書全体のうちどのくらいをダウンロードすればよいのかを

SVG利用者エージェントは計算することができる。 

アニメーション:不可 

bandwidth = "<long>"  

SVG利用者エージェントが先取りを実行する場合にどのくらいのネットワーク回線容量(bps)を使用

するのがよいのかを定義する。この属性が指定されていない場合には,利用できる全回線容量が使用され

ることが望ましい。 

アニメーション:不可 

mediaCharacterEncoding = "<string>"  

'mediaSize'属性が適用されるXML文字集合の符号化(UTF-8,ISO-8859-1など)を示す。SVGを生成す

るツールは,'mediaSize'属性を指定する場合にはこの属性も含んでいることが望ましい。この属性の主な

用途は,'mediaSize'を測定する場合に使用されている文字符号化を知ることによって,ヒントが役に立た

ないことを容易に検出できるようにすることである。この属性が指定されていない場合,サイズの算出に

使われる符号化はサーバによって返された符号化である。 

アニメーション:不可 

mediaContentEncodings = "<list-of-strings>"  

'mediaContentEncodings'属性は,'mediaSize'属性が適用されるHTTP/1.1の3.5 [RFC2616] (GZIP,圧縮な

ど)で規定される内容符号化の空白で区切られたリストである。このリストの順番は,その内容符号化が

データの符号化のために適用された順番である。現在複数の内容符号化が適用されるような状況はあまり

ないが,それはHTTP/1.1で認められているので,SVGでもその機能をサポートしていることに注意する。

SVGを生成するツールは,'mediaSize'属性を指定し,かつ,そのContent-Encodingがidentity符号化以外で

ある場合には,この属性を含まなければならない。この属性の主な用途は,'mediaSize'を測定する場合に

使用されているパラメタを知ることによって,ヒントの陳腐化を容易に検出できるようにすることである。

'mediaContentEncodings'属性が指定されていなければ,HTTP/1.1においてidentity符号化値が指定されてい

るのと同じような働きをする。このことは,変換(つまり,符号化)が一切使用されていないことを示す。 

アニメーション:不可 

xlink:href = "<IRI>"  

先取りするリソースへのIRI参照。不正なIRI参照はサポート外の値である。空の属性値(xlink:href="")

は,先取りが一切実施されないことを意味する。 

省略値:空の文字列 

アニメーション:不可 

'prefetch'が外部媒体を参照するとき,'mediaSize'及び'mediaTime'の両方が指定されている場合は

'mediaSize'を使用しなければならず,'mediaTime'は無視される。'mediaSize'及び'mediaTime'が両方指定され

ていない場合は,リソース全体を取ってくる方がよい。 

'prefetch'が同一文書のリソース(すなわち,最上位の'g'要素)を参照する場合,より高度なSVG利用者

エージェントは,'mediaSize'及び'mediaTime'の両属性を使用して,内容のスムーズな再生をすることができ

るためにはどのくらいのバッファリングが必要なのかを決定することができる。 

'externalResourcesRequired'属性はあるリソースが必要であることを指定するために使われるが,'prefetch'

background image

67 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素はリソースの取り込みを最適化するために使われることに注意する。'externalResourcesRequired'属性の

設定は'prefetch'要素の振る舞いに影響を与えず,その逆もまた同様である。'prefetch'要素が内部の'g'要素又

は外部のリソースのどちらを指すのかにかかわらず,常にそのようになる。 

例prefetch01.svgでは,外部媒体を参照する'prefetch'要素の使い方を説明している。 

例: prefetch01.svg 

<svg width="400" height="300" version="1.2" 

        xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" 

        xmlns:xlink="http://www.w3.org/1999/xlink"> 

     <desc> 

        Prefetch the large images before starting the animation 

        if possible. 

     </desc> 

     <defs> 

       <prefetch xlink:href="http://www.example.com/images/huge1.png"/> 

       <prefetch xlink:href="http://www.example.com/images/huge2.png"/> 

       <prefetch xlink:href="http://www.example.com/images/huge3.png"/> 

     </defs> 

     <image x="0" y="0" width="400" height="300" 

        xlink:href="http://www.example.com/images/huge1.png" 

        display="none"> 

        <set attributeName="display" to="inline" begin="10s"/> 

  

        <animate attributeName="xlink:href" values=" 

               http://www.example.com/images/huge1.png; 

               http://www.example.com/images/huge2.png; 

               http://www.example.com/images/huge3.png" 

            begin="15s" dur="30s"/> 

     </image> 

   </svg> 

例prefetch02.svgは,同一文書のリソース(すなわち,最上位の'g'要素)を参照する'prefetch'要素の例で

ある。 

例: prefetch02.svg 

<?xml version="1.0" encoding="utf-16"?> 

<svg width="400" height="300" version="1.2" 

        xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" 

background image

68 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        xmlns:xlink="http://www.w3.org/1999/xlink" 

        timelineBegin="onStart" 

        playbackOrder="forwardOnly"> 

     <desc> 

        Example of using SVGT 1.2 features for smooth playback 

        during progressive downloading. 

     </desc> 

     <defs> 

       <prefetch xlink:href="#scene1" 

                 mediaCharacterEncoding="UTF-16" 

                 mediaTime="5s" mediaSize="94230" /> 

       <prefetch xlink:href="#scene2" 

                 mediaCharacterEncoding="UTF-16" 

                 mediaTime="10s" mediaSize="283474" /> 

       <prefetch xlink:href="#scene3" 

                 mediaCharacterEncoding="UTF-16" 

                 mediaTime="15s" mediaSize="627638" /> 

     </defs> 

     <g xml:id="scene1"> 

       <discard begin="6s"/> 

       <!-- graphics for scene 1 go here --> 

     </g> 

     <g xml:id="scene2"> 

       <discard begin="16s"/> 

       <!-- graphics for scene 2 go here --> 

     </g> 

     <g xml:id="scene3"> 

       <discard begin="21s"/> 

       <!-- graphics for scene 3 go here --> 

     </g> 

background image

69 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

</svg> 

5.10 共通属性 

5.10.1 全ての要素に共通する属性 

'id'属性,'xml:id'属性,'xml:base'属性,'class'属性,'role'属性,'rel'属性,'rev'属性,'about'属性,'content'

属性,'datatype'属性,'property'属性,'resource'属性及び'typeof'属性は,この規格で規定される全ての要素に

おいて利用することができる。'id','xml:id','xml:base'などは,SVGの構造及び描画に直接的な影響を与え

る可能性がある。それ以外は,SVGに間接的な影響を与えるだけであったり,SVG内容の補助的な処理に

利用されるだけであったりする。この詳細については,18.3を参照。 

属性の定義: 

id = "<NCName>"  

この属性は,要素に一意的な識別子を指定する。過去の仕様の内容及び既存の利用者エージェント(制

作者用ツールを含む。)をより広く活用し,それらとの互換性を高めるために,ウェブブラウザ環境向けの

内容については,'xml:id'ではなく'id'を使用することが望ましい(この5.10.1の'id'属性及び'xml:id'属性を参

照)。 

アニメーション:不可 

xml:id = "<NCName>"  

この属性は,要素に一意的な識別子を指定する。xml:id Version 1.0 [XMLID] を参照。一般的なXML処

理ツール向けの内容では(特に'id'属性のデータタイプが未知のシナリオにおいては)'xml:id'を使用するこ

とが望ましい(この5.10.1の'id'属性及び'xml:id'属性を参照)。 

アニメーション:不可 

xml:base = "<IRI>"  

この属性は,外部実体又は文書のベースIRI以外のベースIRIを指定する。XML Base [XML-BASE] を

参照。 

アニメーション:不可 

class = "<XML-NMTOKENS>"  

'class'属性は一つ以上のクラス名を要素に割り当てる。その要素はこれらのクラスに属しているといって

もよい。一つのクラス名を複数の要素具体値が共有してもよい。このクラス属性には幾つかの役割がある。 

• 

スタイルシート選択子(制作者がスタイル情報を要素の集合に割り当てるとき) 

注記 この規格ではスタイルシートのサポートは義務付けられていない。 

• 

利用者エージェントによる汎用処理 

この属性値は,一つ以上の集合における所属を示す。要素は幾つでも同一の集合に割り当ててもよい。

複数の集合名は空白文字で区切らなければならない。 

アニメーション:可 

role = "<list-of-strings>"  

'role'属性は一つ以上の役割値を要素に割り当てる。その要素はこれらの役割をもっているといってもよ

い。一つの役割値を複数の要素具体値が共有してもよい。'role'属性値は,'class'属性とは異なり,その要素

に割り当てられる特定の意味論をもつ値のあらかじめ定義された集合(ARIA ontology [ARIA],XHTML 

Role Attribute Module [ROLE],XHTML Vocabulary collection [XHTMLVOCAB],又は将来のSVG仕様におい

て定義されるものなど)から選択されることが意図されている。 

70 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'role'属性は,XHTML Role Attribute Module [ROLE] と機能的な連携をとることが意図されている。 

この属性値は,一つ以上の集合における所属を示す。要素は幾つでも同一の集合に割り当ててもよい。

複数の集合名は空白文字で区切らなければならない。 

アニメーション:可 

rel = "<list-of-strings>"  

'rel'属性は一つ以上の関係値を要素に割り当てる。'rel'属性の値は二つのリソースの間の関係を表現する。

特に'a'要素についていえば,'rel'属性は,リンクされるリソースがその要素の子又はその要素が含む文書に

対して保持する関係を示す。 

この属性は,同名のHTML [HTML4] 属性と類似している。それは,RDFa [RDFA],Microformats [MF],

又はその他の意味論の目的と同じ方法で使われることが意図されている。 

この属性値は,一つ以上の集合における所属を示す。要素は幾つでも同一の集合に割り当ててもよい。

複数の集合名は空白文字で区切らなければならない。 

アニメーション:可 

rev = "<list-of-strings>"  

'rev'属性は一つ以上の関係値を要素に割り当てる。'rev'属性の値は二つのリソースの間の逆の関係を表現

する。特に'a'要素についていえば,'rev'属性は,その要素の子又はその要素が含む文書がリンクされるリソ

ースに対して保持する関係を示す。 

この属性は,同名のHTML [HTML4] 属性と類似している。それは,RDFa [RDFA],Microformats [MF],

又はその他の意味論の目的と同じ方法で使われることが意図されている。 

この属性値は,一つ以上の集合における所属を示す。要素は幾つでも同一の集合に割り当ててもよい。

複数の集合名は空白文字で区切らなければならない。 

アニメーション:可 

about = "<list-of-strings>"  

'about'属性は一つ以上の関係値を要素に割り当てる。その要素のデータの主題を示すために'about'属性の

値が使用されることが意図されている。 

この属性は,RDFa [RDFA] 仕様書における同名の属性と機能的な連携をとることが意図されているが,

その形式による使用に限定されるというわけではない。 

この属性値は,一つ以上の集合における所属を示す。要素は幾つでも同一の集合に割り当ててもよい。

複数の集合名は空白文字で区切らなければならない。 

アニメーション:可 

content = "<string>"  

'content'属性は,人間に対して適切なプレーンテキスト値,若しくは機械が読むことができるプレーンテ

キスト値のどちらか,又は両方(文脈に依存)を提供する。一般的には,テキストの子の内容を補うため

か,又は通常テキストを子の内容とはしない要素で使用されるためだけに使われることが望ましい。 

この属性は,RDFa [RDFA] 仕様書における同名の属性と機能的な連携をとることが意図されているが,

その形式による使用に限定されるというわけではない。 

アニメーション:可 

datatype = "<string>"  

'datatype'属性は,要素の内容に意味論に関するデータ型を指定する。又は,'content'属性が要素に提供さ

れている場合にはその値を指定する。 

71 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この属性を'type'属性と混同しないことが望ましい。この属性はその要素の描画又は実行に一切直接的な

影響を与えない。 

この属性は,RDFa [RDFA] 仕様書における同名の属性と機能的な連携をとることが意図されているが,

その形式による使用に限定されるというわけではない。 

アニメーション:可 

property = "<list-of-strings>"  

'property'属性は,その要素の主題(例 属性値又は子要素に関するテキスト内容)と既知又は参照され

るプロパティ集合との関係を表現するために使用される。 

この属性は,RDFa [RDFA] 仕様書における同名の属性と機能的な連携をとることが意図されているが,

その形式による使用に限定されるというわけではない。 

この属性値は,一つ以上の集合における所属を示す。要素は幾つでも同一の集合に割り当ててもよい。

複数の集合名は空白文字で区切らなければならない。 

アニメーション:可 

resource = "<string>"  

'resource'属性は,通常IRI参照によって表現されるリソースをその要素と関連付ける。これは,通常IRI

参照を利用しない場合に,実施される。 

この属性は,RDFa [RDFA] 仕様書における同名の属性と機能的な連携をとることが意図されているが,

その形式による使用に限定されるというわけではない。 

アニメーション:可 

typeof = "<list-of-strings>"  

'typeof'属性は,一つ以上のデータ型を要素に関連付ける。この属性を'type'属性と混同しないことが望ま

しい。この属性はその要素の描画又は実行に一切直接的な影響を与えない。 

この属性は,RDFa [RDFA] 仕様書における同名の属性と機能的な連携をとることが意図されているが,

その形式による使用に限定されるというわけではない。 

この属性値は,一つ以上の集合における所属を示す。要素は幾つでも同一の集合に割り当ててもよい。

複数の集合名は空白文字で区切らなければならない。 

アニメーション:可 

'id'属性及び'xml:id'属性 

'id'属性及び'xml:id'属性は,要素に一意的な識別子を指定する。どちらも<NCName>データ型をもつが,

妥当性検証のためには<ID>型である。'xml:id'は,全ての文書型をとおしてユニバーサルに<ID>型を示すよ

うに作られている。このことによって,<ID>型属性の明確な情報を必要とする一般XMLツール群又は任

意のXMLをもつ複合文書のためにそれはより適切なものになる。 

SVGジェネレータは要素に識別を割り当てるためには'id'だけを使用し,既存のビューア,制作者用ツー

ル,及び他の内容との後方互換性を維持することが望ましい。 

(例えばsetAttributeNS(),setTraitNS(),又はsetTrait()メソッドの使用によって)どちらかの属性値を変

更するために使用することができるSVGElementインタフェース上には単一のidフィールドしかない。同

じように,Documentインタフェース上のgetElementByIdメソッドは,'id'属性及び'xml:id'属性の両方に均

等に適用される。 

'id'属性及び'xml:id'属性は異なった環境向けに作られているので,同一文書におけるSVG要素で一緒に

使用してはならない。そのような文書は適合するSVG Tiny 1.2内容ではなく,その振る舞いは規定されな

background image

72 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

い。 

'id'属性及び'xml:id'属性の間の変換 

XSLTスタイルシートを用いて'id'属性を'xml:id'属性に(又はその逆に)変換し,両方の主要なシナリオ

において(すなわち,既存のデスクトップブラウザ及び制作者用ツールにおいて,又はXMLツール群に

おいて)使用することができる内容の作成を容易にすることができる。例えば,ブラウザ環境を念頭にお

いて作成された内容が,一般XMLツールによって使用される場合には,サンプルのスタイルシート

id2xmlid.xslを使用することによってそれを前処理することができる。このことによって,同じ内容を少な

いオーバヘッドで利用することができ,内容の破壊のリスクも低めることができる。変換スタイルシート

の例を次に示す。 

例: id2xmlid.xsl 

<xsl:stylesheet version="1.0" 

                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 

  <xsl:template match="node() | @*"> 

    <xsl:copy> 

      <xsl:apply-templates select="node() | @*"/> 

    </xsl:copy> 

  </xsl:template> 

  <xsl:template match="@id"> 

    <xsl:attribute name="xml:id"> 

      <xsl:value-of select="."/> 

    </xsl:attribute> 

  </xsl:template> 

</xsl:stylesheet> 

例: xmlid2id.xsl 

<xsl:stylesheet version="1.0" 

                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 

  <xsl:template match="node() | @*"> 

    <xsl:copy> 

      <xsl:apply-templates select="node() | @*"/> 

    </xsl:copy> 

  </xsl:template> 

  <xsl:template match="@xml:id"> 

    <xsl:attribute name="id"> 

      <xsl:value-of select="."/> 

background image

73 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    </xsl:attribute> 

  </xsl:template> 

</xsl:stylesheet> 

5.10.2 文字内容要素のための属性 

文字データ内容を含む可能性がある要素は,その内容の自然言語と空白処理とを指定する'xml:lang'属性

及び'xml:space'属性をもつ。 

スキーマ: langspace  

<attribute name='xml:space' svg:animatable='false' svg:inheritable='false'> 

   <choice> 

      <value>default</value> 

      <value>preserve</value> 

   </choice> 

</attribute> 

<attribute name='xml:lang' svg:animatable='false' svg:inheritable='false'> 

  <choice> 

     <ref name='LanguageCode.datatype'/> 

     <empty/> 

  </choice> 

</attribute> 

属性の定義: 

xml:lang = "<language-id>"  

子のテキスト内容及びそれが出現する要素の属性値において使用される言語(例 英語)を指定するた

めに用いられる標準XML属性である。その値は,IETF BCP 47 [BCP 47] によって定義される言語タグ又

は空の文字列("")のいずれかである。この属性の定義については,Extensible Markup Language (XML) 1.0

([XML10]の2.12)及びExtensible Markup Language (XML) 1.1([XML11]の2.12)を参照。 

アニメーション:不可 

xml:space = "default" | "preserve"  

空白が文字データで保持されるかどうかを指定するために使用される標準XML属性である。可能な値

は"default"及び"preserve"だけである。この属性の定義については,Extensible Markup Language (XML) 1.0

([XML10]の2.10)及びExtensible Markup Language (XML) 1.1([XML11]の2.10)を参照。また,10.10の

SVGのテキスト内容要素に対する空白処理に関するディスカッションを参照。 

アニメーション:不可 

スタイル付け 

6.1 

SVGスタイル付けプロパティ 

SVGは,スタイル付けプロパティを用いてその文書パラメタの多くを記述する。スタイル付けプロパテ

ィは,SVG内容の図形要素を描画する方法を定義する。SVGでは,次のようにスタイル付けプロパティが

74 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

利用される。 

• 

明らかに視覚的な性質をもつ,スタイル付けの対象となるパラメタ。例えば,オブジェクトを“塗

る”方法(フィル及びストロークの色,線幅及びダッシュのスタイルなど)を定義する全ての属性。 

• 

'font-family'及び'font-size'のような,テキストのスタイル付けと関係があるパラメタ。 

• 

'pointer-events'及び'audio-level'のような,対話性及びマルチメディアに関するパラメタ。 

SVGは,CSS [CSS2]及びXSL [XSL]と数多くのスタイル付けプロパティを共有している。この規格にお

いて明示的に言及されている全てのSVG特有の規則を除けば,CSS及びXSLと共有しているプロパティ

の規定の定義は,CSS 2仕様書[CSS2]におけるプロパティの定義である。 

注記 CSS 2仕様書はもはや維持管理の対象外になっている。実装者は,その代わりにCSS 2.1 [CSS21]

を参照することによって,より正確な詳細情報を得ることができる。W3C勧告におけるCSS 2

の成熟度を考慮して,この規格はCSS 2を参照している。 

次のようなプロパティがCSS 2とSVGとの間で共有されている。'display'を除けば,これらのプロパテ

ィはXSLでも定義されている。 

• 

フォントプロパティ: 

・ 'font-family' 

・ 'font-size' 

・ 'font-style' 

・ 'font-weight' 

• 

テキストプロパティ: 

・ 'direction' 

・ 'unicode-bidi' 

• 

視覚的媒体のためのその他のプロパティ: 

・ 'color' ['fill','stroke'及び'stop-color'プロパティのための潜在的な間接値(currentColor)を提供

するために利用] 

・ 'display' 

・ 'visibility' 

次のSVGプロパティはCSS 2には定義されていない。これらのプロパティの完全な規定の定義はこの

規格に記載されている。 

• 

グラデーションプロパティ: 

・ 'stop-color' 

・ 'stop-opacity' 

• 

対話性プロパティ: 

・ 'pointer-events' 

• 

マルチメディアプロパティ: 

・ 'audio-level' 

• 

色及び塗りのプロパティ: 

・ 'buffered-rendering' 

・ 'color-rendering' 

・ 'fill' 

・ 'fill-opacity' 

75 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

・ 'fill-rule' 

・ 'image-rendering' 

・ 'shape-rendering' 

・ 'solid-color' 

・ 'solid-opacity' 

・ 'stroke' 

・ 'stroke-dasharray' 

・ 'stroke-dashoffset' 

・ 'stroke-linecap' 

・ 'stroke-linejoin' 

・ 'stroke-miterlimit' 

・ 'stroke-opacity' 

・ 'stroke-width' 

・ 'text-rendering' 

・ 'vector-effect' 

・ 'viewport-fill' 

・ 'viewport-fill-opacity' 

• 

テキストプロパティ: 

・ 'display-align' 

・ 'line-increment' 

・ 'text-anchor' 

スタイル付けプロパティをまとめた表については,L.1を参照。 

6.2 

スタイル付けの利用シナリオ 

SVGの利用においては数多くのシナリオがあり,それぞれ異なったニーズによるものである。一般的な

三つの利用シナリオを次に示す。 

a) 交換用フォーマットとしてのSVG内容の利用(スタイルシート言語から独立) 

利用のシナリオによっては,様々なソフトウェアツールにおけるSVG内容の信頼できる相互運用性

が第一の目的となる場合がある。全ての実装において特定のスタイルシート言語が必ずサポートされ

ているわけではないので,スタイルシート言語を使用せずにSVG内容を完全に指定することができな

ければならない。 

b) XSLT [JIS X 4169:2007]の出力として生成されるSVG内容 

XSLTでは,ストリーム(stream)入力として任意のXML内容を受け取り,潜在的に複雑な変換を

適用して,それから出力としてSVG内容を生成することができる。例えば,XSLTを用いて,データ

ベースから抽出したXMLデータをそのデータのSVG図形表現に変換することができる。完全に指定

されているSVG内容をXSLTから生成することができなければならない。 

c) CSS [CSS2]によってスタイル付けされるSVG内容 

CSSは,SVGのようなXML内容にスタイル付けプロパティを割り当てるために広く実装されてい

る宣言型言語である。それは様々な機能を提供していて,簡潔かつコンパクトであり,数多くのSVG

アプリケーションに大変適している。この規格では,SVG内容に適用するCSSセレクタのサポート

は義務付けられていない。制作者は,SVG Tiny 1.2利用者エージェントにおける使用が意図されてい

background image

76 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

る文書をスタイル付けするために,外部の制作者スタイルシートに依存してはならない。 

6.3 

プレゼンテーション属性を用いたプロパティの指定 

この規格において規定される各スタイル付けプロパティ(L.1を参照)には,それぞれ対応する同名の

XML属性(プレゼンテーション属性)があり,これらは全ての関連するSVG要素において利用すること

ができる。例えば,SVGには図形の内部を塗る方法を定義するための'fill'プロパティがある。それと同じ

名前をもつ対応したプレゼンテーション属性(すなわち,'fill')があり,与えられた要素の'fill'プロパティ

に値を指定するために使用することができる。 

次の例に,'fill'及び'stroke'プレゼンテーション属性を用いて,どのように'fill'及び'stroke'プロパティをあ

る長方形に割り当てることができるのかを示す。その長方形は青い外形をもち,赤でフィルされる。 

例: 06̲01.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     viewBox="0 0 1000 500"> 

  <rect x="200" y="100" width="600" height="300"  

        fill="red" stroke="blue" stroke-width="3"/> 

</svg> 

プレゼンテーション属性には次のような利点がある。 

• 

広範囲のサポート 適合SVGインタプリタ及び適合SVGビューアの全バージョンにおいてプレゼ

ンテーション属性がサポートされていなければならない。 

• 

単純性 適切な要素におけるプレゼンテーション属性に値を提供するだけで,スタイル付けプロパ

ティを要素に割り当てることができる。 

• 

再スタイル付け プレゼンテーション属性を使用するSVG内容は,幾つかのプレゼンテーション属

性を上書きするためにCSSスタイル規則を追加することによる補助的なスタイル付け,又はXSLT 

[JIS X 4169:2007]を用いた下り転送処理と高い互換性がある。 

• 

XSLT [JIS X 4169:2007]を使用した便利な生成 XSLTを用いて,完全にスタイル付けされたSVG

内容を作り出すことができる場合もある。プレゼンテーション属性は,XSLTによる便利なSVG生

成とも互換性がある。 

プレゼンテーション属性を使用しているSVG内容には,CSSのようなスタイルシート言語でスタイル

付けされたSVG内容と比較して,潜在的な限界がある場合がある。XSLTスタイルシートによって豊富な

意味論をもつXMLソースファイルからSVG内容を生成したような状況では,次に示す限界は当てはまら

ない可能性もある。 

• 

内容に附属のスタイル付け プレゼンテーション属性は特定の要素に直接付随するので,その結果,

スタイル付けと内容とを切り離すことによる潜在的な利点(例 異なる用途及び環境のための文書

の再スタイル付け)を減少させる。 

• 

平らなデータモデル プレゼンテーション属性は,スタイル付け体系で得られるようなより高度な

抽象化(例 特定のカテゴリの要素に適用されるプロパティの名前を付けられた集合の定義)をそ

れ自体として提供していない。結果として,多くの場合より高いレベルの重要な意味論情報が失わ

れ,文書の再利用及び再スタイル付けを潜在的に難しくしてしまう。 

• 

潜在的なファイルサイズの増加 多くの種類の図形は,複数の要素において同じようなスタイル付

background image

77 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

けプロパティを使用する。例えば,ある会社の組織図では,非正規社員の名前が書かれた箱に一つ

のスタイル付けプロパティの集合を適用し(例 破線による外形,赤いフィル),正社員の名前には

別のスタイル付けプロパティの集合を適用する(例 実線による外形,青いフィル)ことができる。

CSSのようなスタイル付け体系を用いることによって,プロパティの集合を一つのファイルに一度

で定義することができる。スタイル付け属性を用いると,プレゼンテーション属性をそれぞれの要

素において指定する必要がある場合がある。 

注記1 プレゼンテーション属性の定義における!important宣言([CSS2]の6.4.2)はサポート外であ

り,その属性がサポート外の値をもつ結果となる。 

注記2 短縮形プロパティ(shorthand properties,[CSS2]の1.3.3)のためのプレゼンテーション属性は

存在せず,その短縮形を形作る個々のプロパティのためだけにプレゼンテーション属性は存

在する(XMLでは,属性の順序は重要ではない。)。 

注記3 プレゼンテーション属性のアニメーション及びプロパティのアニメーションとは関連してい

る。詳細については16.2.5を参照。 

6.4 

XSLを用いたスタイル付け 

XSLスタイルシート[JIS X 4169:2007]は,XML内容を他の内容(通常は他のXML)に変換する方法を

定義する。XSLTをSVGと一緒に利用するとき,XSLスタイルシートに対する入出力としてSVG内容が

役に立つ場合がある。また,XSLスタイルシートが入力として非SVG内容を受け取り,出力としてSVG

内容を生成することもある。 

次の例では,外部のXSLスタイルシートを用いてSVG内容を別のSVG内容に変換している。このスタ

イルシートは,全ての長方形における'fill'及び'stroke'プロパティを,それぞれ赤及び青に設定する。 

mystyle.xsl 

例: 06̲02.xsl 

<?xml version="1.0"?> 

<xsl:stylesheet version="1.0" 

  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 

  xmlns:svg="http://www.w3.org/2000/svg"> 

  <xsl:output 

    method="xml" 

    encoding="utf-8"/> 

  <!-- Add version to topmost 'svg' element --> 

  <xsl:template match="/svg:svg"> 

    <xsl:copy> 

      <xsl:copy-of select="@*"/> 

      <xsl:attribute name="version">1.2</xsl:attribute> 

      <xsl:apply-templates/> 

    </xsl:copy> 

  </xsl:template> 

  <!-- Add styling to all 'rect' elements --> 

  <xsl:template match="svg:rect"> 

background image

78 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    <xsl:copy> 

      <xsl:copy-of select="@*"/> 

      <xsl:attribute name="fill">red</xsl:attribute> 

      <xsl:attribute name="stroke">blue</xsl:attribute> 

      <xsl:attribute name="stroke-width">3</xsl:attribute> 

    </xsl:copy> 

  </xsl:template> 

</xsl:stylesheet> 

mystyle.xslによって変換されるSVGファイル 

例: 06̲03.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="10cm" height="5cm" viewBox="0 0 100 50"> 

  <rect x="20" y="10" width="60" height="30"/> 

</svg> 

mystyle.xslを適用した後のSVG内容 

例: 06̲04.svg 

<?xml version="1.0" encoding="utf-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="10cm" height="5cm" viewBox="0 0 100 50"> 

  <rect x="20" y="10" width="60" height="30" fill="red" stroke="blue" stroke-width="3"/> 

</svg> 

6.5 

プロパティ名及び値における大文字と小文字との区別 

プレゼンテーション属性を介したプロパティ宣言はXMLによって表現されるが,XMLでは大文字と小

文字とが区別されるので,正確なプロパティ名にマッチしていなければならない。'fill'プロパティに値を

指定するためにプレゼンテーション属性を使用するときには,そのプレゼンテーション属性は,'FILL'又は

'Fill'ではなく,'fill'と指定されていなければならない。キーワード値(例 font-style="italic"における"italic")

においても大文字と小文字とが区別され,そのキーワードを定義している仕様書で使用される正確な事例

を用いて指定されなければならない。例えばキーワード"sRGB"は,"s"は小文字,"RGB"は大文字にしなけ

ればならない。 

6.6 

SVGが利用するCSS及びXSLの機能 

SVGは,様々な関連プロパティ,アプローチ及び大半の処理規則の意味を,CSS及びXSLと共通的に

利用している。SVGのプロパティの多くは,CSS 2,XSL及びSVGの間において共有される(6.1を参照)。 

6.7 

プロパティの継承及び算出 

SVGは,子要素に対するプロパティの継承をサポートしている。各プロパティの定義において,それが

継承されるのかどうかが示されている。継承されるプロパティは,指定値ではなく,算出値を継承する。

算出値の計算については,それぞれのプロパティの定義を参照。キーワードinheritは,その親のプロパテ

ィ値の使用を強制するために利用される(継承されないプロパティについても同じ。)ことに注意する。 

79 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

座標系,変換,及び単位 

7.1 

概説 

全ての媒体について,そのキャンバスとは“SVG内容が描画される空間”を示す。キャンバスはその空

間の各次元について無限だが,描画はそのキャンバスの有限の長方形領域に対して実施される。この有限

の長方形領域はSVGビューポートと呼ばれる。視覚媒体([CSS2]の7.3.1)では,SVGビューポートは利

用者がSVG内容を見るための表示領域である。 

SVGビューポートのサイズ(すなわち,その幅及び高さ)は,SVG文書片とその親(実在又は暗黙的)

との間におけるやり取りの過程によって決定される(7.2を参照)。そのビューポートが確立されると,SVG

利用者エージェントは初期ビューポート座標系及び初期利用者座標系を確立しなければならない(7.3を参

照)。ビューポート座標系は,ビューポート空間とも呼ばれる。利用者座標系は,利用者空間とも呼ばれる。 

新しい利用者空間(すなわち,新しい現在の座標系)は,変換行列又は単純変換操作(例 回転,わい

(歪)曲,スケーリング,文字変換)の形式で変換を指定することによって,SVG文書片のどこにおいて

も確立することができる(7.4を参照)。座標系変換による新しい利用者空間の確立は,2次元図形に対す

る基本操作であり,図形オブジェクトのサイズ,位置,回転及びわい(歪)曲を制御するための一般的な

方法である。 

新しいビューポートを確立することもできる。新しいビューポートを確立することによって,ある図形

を特定の長方形領域に“合わせる”ための新しい参照長方形を提供することができる[“合わせる”とは,

与えられた図形を変換し,利用者空間におけるその包含ボックスが与えられたビューポートの端にぴった

りそろ(揃)うようにすることを意味する。]。 

7.2 

初期ビューポート 

SVG利用者エージェントは,それが文書を描画することができるビューポートを決定するために,その

親の利用者エージェントとやり取りをする。状況によっては,SVG内容は包含する文書に埋め込まれてい

る(行内又は参照によって)。この包含している文書は,そのSVG内容のためにビューポートの範囲に関

するヒントを指定・提供する属性,プロパティ,及び/又は他のパラメタ(明示的又は暗黙的)を含んで

いることもある。SVG内容それ自体が,'svg'要素におけるXMLの'width'及び'height'属性によって,その内

容のための適切なビューポート領域に関する情報を提供することもできる。そのやり取りの過程では,包

含する文書及びSVG内容それ自体が提供する全ての情報が利用され,ビューポートの位置及びサイズが選

択される。 

親の文書形式において,参照又は埋め込まれる図形内容に関する規則が定義されている場合は,そのや

り取りの過程は親文書の形式の指定に基づいて決定される。その親文書がCSSでスタイル付けされている

場合は,そのやり取りの過程において,交換される要素のためのCSS規則に従わなければならない。参照

する要素上に(又は,行内SVG内容のための最上位'svg'要素上に)ビューポートの幅及び高さを確立する

ために十分なCSSの幅及び高さのプロパティ(又は対応するXSLプロパティ)がある場合には,これら

の位置付けプロパティによってそのビューポートの幅,高さ及びアスペクト比が確立される。 

親文書がない場合には,SVG利用者エージェントは最上位の'svg'要素の'width'及び'height'属性をそのビュ

ーポートの幅及び高さとして使用しなければならない。 

ビューポートのサイズに関するやり取りを成立させる時期は,実装に特有であることに注意する。した

がって,制作者がそのビューポートの範囲をきちんと把握する必要がある場合は,loadイベントハンドラ

又はresizeイベントハンドラを用いてそれを実施することが望ましい。 

background image

80 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

7.3 

初期座標系 

'svg'要素では,SVG利用者エージェントは初期ビューポート座標系及び初期利用者座標系を確立し,二

つの座標系が同じになるようにしなければならない。これら両方の座標系の原点はビューポートの原点に

なければならない。また,初期座標系の1単位は,そのビューポートにおける1"ピクセル"[すなわち,

CSSで定義されるpx単位([CSS2]の4.3.2)]と等しくなければならない。多くの場合,親のレイアウトが

CSS [CSS2]又はXSL [XSL]によって決定されるXML親文書に埋め込まれた(行内又は参照によって)SVG

文書片又は独立のSVG文書では,SVG利用者エージェントが初期ビューポート座標系を確立するとき(し

たがって初期利用者座標系も確立する。),原点はビューポートの左上,x軸の正の方向を右向き,y軸の正

の方向を下向きにして,テキストを“直立した”向きに描画しなければならない。テキストの“直立した”

向きとは,ローマ字及びフルサイズのアジア表意文字において,対応する字形の上端が上向きに,右端が

右向きになるよう,字形の向きが決められるということである。 

あるSVG実装が,CSS 2適合のpx単位を用いたXML文書のスタイル付けをサポートする利用者エージ

ェントの一部である場合,SVG利用者エージェントは,実在の単位におけるpx単位のサイズの初期値が,

他のXMLスタイル付け操作に使用される値にマッチするようにすることが望ましい。そうでない場合,

その利用者エージェントがその環境からpx単位のサイズを決めることができる場合,その値を使用するこ

とが望ましい。そうでない場合,1pxの単位について適切なサイズを選択することが望ましい。どの事例

においても,pxのサイズは,CSSに記述されている規則([CSS2]の4.3.2)に適合していなければならない。 

次の例07̲02.svgには,原点が左上,x軸が右向き,及びy軸が下向きである初期座標系が示されている。

その初期利用者座標系は,親の(暗黙的又は明示的)利用者エージェントの"ピクセル"と等しい利用者単

位をもっている。 

例: 07̲02.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="300px" height="100px"> 

  <desc>Example InitialCoords - SVG's initial coordinate system</desc> 

  <g fill="none" stroke="black" stroke-width="3"> 

    <line x1="0" y1="1.5" x2="300" y2="1.5"/> 

    <line x1="1.5" y1="0" x2="1.5" y2="100"/> 

  </g> 

  <g fill="red" stroke="none"> 

    <rect x="0" y="0" width="3" height="3"/> 

    <rect x="297" y="0" width="3" height="3"/> 

    <rect x="0" y="97" width="3" height="3"/> 

  </g> 

  <g font-size="14" font-family="Verdana"> 

    <text x="10" y="20">(0,0)</text> 

    <text x="240" y="20">(300,0)</text> 

background image

81 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    <text x="10" y="90">(0,100)</text> 

  </g> 

</svg> 

7.4 

座標系変換 

新しい利用者空間(すなわち,新しい現在の座標系)は,'svg'要素上の'viewBox'属性,コンテナ又は図

形要素上の'transform'属性の形式による変換を指定することによって確立することができる。'transform'及び

'viewBox'属性は,与えられた要素における兄弟の属性(sibling attributes)及びその全ての子孫における利

用者空間座標及び長さを変換する(7.6.1及び7.8を参照)。変換は入れ子構造をもつことができ,その場

合はその変換の効果は累積される。 

次の例07̲03.svgは,変換なしの文書である。そのテキスト文字列は初期座標系で指定されている。 

例: 07̲03.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="400px" height="150px"> 

  <desc>Example OrigCoordSys - Simple transformations: original picture</desc> 

  <g fill="none" stroke="black" stroke-width="3"> 

    <!-- Draw the axes of the original coordinate system --> 

    <line x1="0" y1="1.5" x2="400" y2="1.5"/> 

    <line x1="1.5" y1="0" x2="1.5" y2="150"/> 

  </g> 

  <g> 

    <text x="30" y="30" font-size="20" font-family="Verdana"> 

      ABC (orig coord system) 

    </text> 

  </g> 

</svg> 

  

background image

82 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

例07̲04.svgでは,3番目の'g'要素においてtransform="translate(50,50)"と指定することによって,新しい

利用者座標系を確立している。この新しい利用者座標系では,元々の座標系における位置(50,50)がその原

点となる。この変換の結果として,新しい利用者座標系における座標(30,30)は,元々の座標系における座

標(80,80)にマップされる(すなわち,その座標はxにおいて50単位,及びyにおいて50単位だけ移動さ

れる。)。 

例: 07̲04.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="400px" height="150px"> 

  <desc>Example NewCoordSys - New user coordinate system</desc> 

  <g fill="none" stroke="black" stroke-width="3"> 

    <!-- Draw the axes of the original coordinate system --> 

    <line x1="0" y1="1.5" x2="400" y2="1.5"/> 

    <line x1="1.5" y1="0" x2="1.5" y2="150"/> 

  </g> 

  <g> 

    <text x="30" y="30" font-size="20" font-family="Verdana"> 

      ABC (orig coord system) 

    </text> 

  </g> 

  <!-- Establish a new coordinate system, which is 

       shifted (i.e., translated) from the initial coordinate 

       system by 50 user units along each axis. --> 

  <g transform="translate(50,50)"> 

    <g fill="none" stroke="red" stroke-width="3"> 

      <!-- Draw lines of length 50 user units along  

           the axes of the new coordinate system --> 

      <line x1="0" y1="0" x2="50" y2="0" stroke="red"/> 

      <line x1="0" y1="0" x2="0" y2="50"/> 

    </g> 

background image

83 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    <text x="30" y="30" font-size="20" font-family="Verdana"> 

      ABC (translated coord system) 

    </text> 

  </g> 

</svg> 

例07̲05.svgには,単純な回転(rotate)及びスケール(scale)変換を示している。この例では,二つの

新しい座標系が定義されている。 

• 

一つは,x方向に50単位,及びy方向に30単位だけ移動させ,続けて30度の回転を適用した結果

である。 

• 

もう一つは,x方向に200単位,及びy方向に40単位だけ移動させ,続けて1.5のスケール変換を

適用した結果である。 

例: 07̲05.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="400px" height="120px"> 

  <desc>Example RotateScale - Rotate and scale transforms</desc> 

  <g fill="none" stroke="black" stroke-width="3"> 

    <!-- Draw the axes of the original coordinate system --> 

    <line x1="0" y1="1.5" x2="400" y2="1.5"/> 

    <line x1="1.5" y1="0" x2="1.5" y2="120"/> 

  </g> 

  <!-- Establish a new coordinate system whose origin is at (50,30) 

       in the initial coord. system and which is rotated by 30 degrees. --> 

  <g transform="translate(50,30)"> 

    <g transform="rotate(30)"> 

      <g fill="none" stroke="red" stroke-width="3"> 

        <line x1="0" y1="0" x2="50" y2="0"/> 

        <line x1="0" y1="0" x2="0" y2="50"/> 

      </g> 

background image

84 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue"> 

        ABC (rotate) 

      </text> 

    </g> 

  </g> 

  <!-- Establish a new coordinate system whose origin is at (200,40) 

       in the initial coord. system and which is scaled by 1.5. --> 

  <g transform="translate(200,40)"> 

    <g transform="scale(1.5)"> 

      <g fill="none" stroke="red" stroke-width="3"> 

        <line x1="0" y1="0" x2="50" y2="0"/> 

        <line x1="0" y1="0" x2="0" y2="50"/> 

      </g> 

      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue"> 

        ABC (scale) 

      </text> 

    </g> 

  </g> 

</svg> 

例07̲06.svgでは,原点の座標系に対してわい(歪)曲した(skewed)二つの座標系が定義されている。 

例: 07̲06.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="400px" height="120px"> 

  <desc>Example Skew - Show effects of skewX and skewY</desc> 

  <g fill="none" stroke="black" stroke-width="3"> 

    <!-- Draw the axes of the original coordinate system --> 

    <line x1="0" y1="1.5" x2="400" y2="1.5"/> 

    <line x1="1.5" y1="0" x2="1.5" y2="120"/> 

  </g> 

  <!-- Establish a new coordinate system whose origin is at (30,30) 

background image

85 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

       in the initial coord. system and which is skewed in X by 30 degrees. --> 

  <g transform="translate(30,30)"> 

    <g transform="skewX(30)"> 

      <g fill="none" stroke="red" stroke-width="3"> 

        <line x1="0" y1="0" x2="50" y2="0"/> 

        <line x1="0" y1="0" x2="0" y2="50"/> 

      </g> 

      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue"> 

        ABC (skewX) 

      </text> 

    </g> 

  </g> 

  <!-- Establish a new coordinate system whose origin is at (200,30) 

       in the initial coord. system and which is skewed in Y by 30 degrees. --> 

  <g transform="translate(200,30)"> 

    <g transform="skewY(30)"> 

      <g fill="none" stroke="red" stroke-width="3"> 

        <line x1="0" y1="0" x2="50" y2="0"/> 

        <line x1="0" y1="0" x2="0" y2="50"/> 

      </g> 

      <text x="0" y="0" font-size="20" font-family="Verdana" fill="blue"> 

        ABC (skewY) 

      </text> 

    </g> 

  </g> 

</svg> 

数学的には,次の形式による3×3の変換行列として全ての変換を表すことができる。 

上記の3×3行列で使用されているのは六つの値だけなので,変換行列はベクトルとしても表現される。

[a b c d e f] 

background image

86 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

変換によって,座標及び長さが新しい座標系から前の座標系にマップされている。 

単純な変換は次のような行列の形式で表現される。 

• 

移動は次の行列と同等である。 

又は,[1 0 0 1 tx ty]。ここでは,tx及びtyはそれぞれx及びy座標が移動する距離である。 

• 

スケーリングは次の行列と同等である。 

又は,[sx 0 0 sy 0 0]。新しい座標系におけるx及びy方向への1単位は,それぞれ前の座標系に

おけるsx及びsy単位と同等である。 

• 

原点の周りの回転は次の行列と同等である。 

又は,[cos(a) sin(a) -sin(a) cos(a) 0 0]。ここでは,座標系軸を角aだけ回転させる効果が与えられ

る。 

• 

x軸に沿ったわい(歪)曲変換は次の行列と同等である。 

又は,[1 0 tan(a) 1 0 0]。ここでは,x座標を角aだけわい(歪)曲させる効果が与えられる。 

• 

y軸に沿ったわい(歪)曲変換は次の行列と同等である。 

又は,[1 tan(a) 0 1 0 0]。ここでは,y座標を角aだけわい(歪)曲させる効果が与えられる。 

7.5 

入れ子にされる変換 

background image

87 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

変換は,どのようなレベルまででも入れ子にすることができる。入れ子にされた変換では,前に定義さ

れた変換に対して後続の変換行列を右から乗じる(すなわち,連結する)効果が与えられる。 

それぞれの要素において,その要素と,現在のビューポートを確立した要素(通常はその要素の直近の

祖先である'svg'要素)に至るまでの(それ自体を含む。)全ての祖先において定義された全変換の累算は,

ある要素に適用される対応変換行列(又はCTM)と呼ばれる。したがって,CTMは現在の利用者座標か

らビューポート座標へのマッピングを表す。 

例07̲07.svgでは,入れ子にされた変換を示している。 

例: 07̲07.svg 

<?xml version="1.0"?> 

<svg width="400px" height="150px" version="1.2" baseProfile="tiny" 

     xmlns="http://www.w3.org/2000/svg"> 

  <desc>Example Nested - Nested transformations</desc> 

  <g fill="none" stroke="black" stroke-width="3" > 

    <!-- Draw the axes of the original coordinate system --> 

    <line x1="0" y1="1.5" x2="400" y2="1.5" /> 

    <line x1="1.5" y1="0" x2="1.5" y2="150" /> 

  </g> 

  <!-- First, a translate --> 

  <g transform="translate(50,90)"> 

    <g fill="none" stroke="red" stroke-width="3" > 

      <line x1="0" y1="0" x2="50" y2="0" /> 

      <line x1="0" y1="0" x2="0" y2="50" /> 

    </g> 

    <text x="0" y="0" font-size="16" font-family="Verdana" > 

      ....Translate(1) 

    </text> 

    <!-- Second, a rotate --> 

background image

88 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    <g transform="rotate(-45)"> 

      <g fill="none" stroke="green" stroke-width="3" > 

        <line x1="0" y1="0" x2="50" y2="0" /> 

        <line x1="0" y1="0" x2="0" y2="50" /> 

      </g> 

      <text x="0" y="0" font-size="16" font-family="Verdana" > 

        ....Rotate(2) 

      </text> 

      <!-- Third, another translate --> 

      <g transform="translate(130,160)"> 

        <g fill="none" stroke="blue" stroke-width="3" > 

          <line x1="0" y1="0" x2="50" y2="0" /> 

          <line x1="0" y1="0" x2="0" y2="50" /> 

        </g> 

        <text x="0" y="0" font-size="16" font-family="Verdana" > 

          ....Translate(3) 

        </text> 

      </g> 

    </g> 

  </g> 

</svg> 

上記の例では,三番目の入れ子の変換におけるCTM(すなわち,transform="translate(130,160)")は,次

のように三つの変換の連結によって構成されている。 

background image

89 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

7.6 

'transform'属性 

属性の定義: 

transform = "<transform-list>" | "<transform-ref>" | "none"  

この属性は,それが出現する要素に適用するための座標系変換を指定する。この属性の値は,次の三つ

のうちの一つとなる。 

<transform-list> 

アフィン変換のリストを指定する。詳細については,7.6.1を参照。 

<transform-ref> 

制約される変換を指定する。詳細については,7.7.5を参照。 

None 

恒等変換を指定する。この値を使用すると,恒等行列[transform="matrix(1 0 0 1 0 0)"]を使用したとき,又

は'transform'属性を一切指定していないときと同じ効果がその要素のCTMに与えられる。これは省略値で

ある。 

アニメーション:可 

上記の構文によって'transform'属性を解析することができない場合,それはサポート外の値をもつことに

なる。その場合は,(サポート外の値のどのような具体値もそうであるように)SVG利用者エージェント

は,'transform'属性が指定されていないときと同じようにその要素を処理しなければならず,結果としてそ

の要素の変換は恒等変換になる。 

7.6.1 

TransformList値 

<transform-list>は,変換定義のリストである。それは提供された順番によって適用される。個々の変換

定義は空白及び/又はコンマによって区切られる。変換定義において利用できる型は次のとおりである。 

• 

matrix(<a> <b> <c> <d> <e> <f>) これは六つの値をもつ変換行列の形式による変換を指定する。

matrix(a,b,c,d,e,f)は,変換行列[a b c d e f]の適用と同等である。 

• 

translate(<tx> [<ty>]) これは,tx及びtyによる移動を指定する。<ty>が与えられていない場合は,

0とみなされる。 

• 

scale(<sx> [<sy>]) これは,sx及びsyによるスケーリング操作を指定する。<sy>が与えられていな

い場合は,<sx>と同じとみなされる。 

background image

90 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

• 

rotate(<rotate-angle> [<cx> <cy>]) これは,与えられた点の周りにおける<rotate-angle>度による回

転を指定する。 

省略可能なパラメタ<cx>及び<cy>が与えられていない場合,回転は現在の利用者座標系の原点を中心に

する。この操作は,行列[cos(a) sin(a) -sin(a) cos(a) 0 0]に対応している。 

省略可能なパラメタ<cx>及び<cy>が与えられている場合,回転は点(cx, cy)を中心にする。この操作は,

次のような指定と同等である。translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>)。 

• 

skewX(<skew-angle>) これは,x軸に沿ったわい(歪)曲変換を指定する。 

• 

skewY(<skew-angle>) これは,y軸に沿ったわい(歪)曲変換を指定する。 

全ての数値は実数<number>である。 

全ての値が0に設定された行列[すなわち,'matrix(0,0,0,0,0,0)']が変換のリストに含まれている場合,要

素の描画は行われない。そのような値はサポート外の値ではない。 

一つ以上の変換定義が変換のリストに含まれている場合,その最終的な効果は,それぞれの変換が提供

された順番によって個別に指定されたときと同じようになる。次に例を示す。 

例: 07̲08.svg 

<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)"> 

  <!-- graphics elements go here --> 

</g> 

上の例は,次の例と同じ描画結果となる。 

例: 07̲09.svg 

<g transform="translate(-10,-20)"> 

  <g transform="scale(2)"> 

    <g transform="rotate(45)"> 

      <g transform="translate(5,10)"> 

        <!-- graphics elements go here --> 

      </g> 

    </g> 

  </g> 

</g> 

'transform'属性は,ある要素に提供された座標又は長さの値を処理する前に,その要素に適用される。次

に例を示す。 

例: 07̲10.svg 

<rect x="10" y="10" width="20" height="20" transform="scale(2)"/> 

現在の座標系が'transform'属性によって一様に2倍にスケーリングされた後,'x','y','width','height',及

び値が処理される。属性'x','y','width'及び'height'(また,他の全ての属性又はプロパティ)は,前の利用

者座標系ではなく,新しい利用者座標系における値として処理される。したがって,上記の'rect'要素は機

能的には次の例と同等である。 

例: 07̲11.svg 

<g transform="scale(2)"> 

background image

91 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <rect x="10" y="10" width="20" height="20"/> 

</g> 

次は<transform-list>値のためのEBNF文法である[EBNF]。 

transform-list ::= 

   wsp* transforms? wsp* 

transforms ::= 

   transform 

   | transform comma-wsp+ transforms 

transform ::= 

   matrix 

   | translate 

   | scale 

   | rotate 

   | skewX 

   | skewY 

matrix ::= 

   "matrix" wsp* "(" wsp* number comma-wsp number comma-wsp number comma-wsp number comma-wsp 

number comma-wsp number wsp* ")" 

translate ::= 

   "translate" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")" 

scale ::= 

   "scale" wsp* "(" wsp* number ( comma-wsp number )? wsp* ")" 

rotate ::= 

   "rotate" wsp* "(" wsp* number ( comma-wsp number comma-wsp number )? wsp* ")" 

skewX ::= 

   "skewX" wsp* "(" wsp* number wsp* ")" 

skewY ::= 

   "skewY" wsp* "(" wsp* number wsp* ")" 

number ::= 

   sign? integer-constant 

   | sign? floating-point-constant 

comma-wsp ::= 

   (wsp+ comma? wsp*)  

   | (comma wsp*) 

comma ::= 

   "," 

integer-constant ::= 

   digit-sequence 

floating-point-constant ::= 

92 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

   fractional-constant exponent? 

   | digit-sequence exponent 

fractional-constant ::= 

   digit-sequence? "." digit-sequence 

   | digit-sequence "." 

exponent ::= 

   ( "e"  

   | "E" ) sign? digit-sequence 

sign ::= 

   "+"  

   | "-" 

digit-sequence ::= 

   digit 

   | digit digit-sequence 

digit ::= 

   "0"  

   | "1"  

   | "2"  

   | "3"  

   | "4"  

   | "5"  

   | "6"  

   | "7"  

   | "8"  

   | "9" 

wsp ::= 

   (#x20  

   | #x9  

   | #xD  

   | #xA) 

7.7 

制約される変換 

この規格は,コンテナ要素及び図形要素において認められている座標系変換を拡張し,図形オブジェク

トがそのビューポートにおいてスケーリング又は回転を適用されずにそのままの形であることができるよ

うな手法を提供している。例えば,ズームインしても太くならない細い線,一定のサイズの地図記号又は

アイコンなどに使用される。 

描画時に図形オブジェクトに適用される様々な変換を次にまとめる。 

7.7.1 

利用者変換 

利用者変換は,SVG利用者エージェントのポジショニング制御がビューポート座標系に対して適用する

変換である。この変換は,その文書の'svg'要素を囲むグループに適用されると考えることができる。 

SVG利用者エージェントのポジショニング制御は,移動(一般的に"パン"と呼ばれる。),スケール(一

background image

93 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

般的に"ズーム"と呼ばれる。),及び回転から構成される。 

US = Matrix corresponding to the user scale (currentScale on SVGSVGElement) 

UP = Matrix corresponding to the user pan (currentTranslate on SVGSVGElement) 

UR = Matrix corresponding to the user rotate (currentRotate on SVGSVGElement) 

利用者変換は,これらの構成要素の変換の積である。 

U = User transform 

  = UP . US . UR 

7.7.2 

viewBoxからビューポートへの変換 

最上位の'svg'要素のような幾つかのSVG要素は,それら自体のビューポートを作成する。'viewBox'から

ビューポートへの変換は,'viewBox'及び'preserveAspectRatio'属性を考慮した座標系の調整を実施する'svg'

要素に対する変換である。 

'viewBox'からビューポートへの変換のために次の表記法を使用する。 

VB(svgId) 

パラメタsvgIdは,与えられた'svg'要素の'id'属性又は'xml:id'属性の値である。 

7.7.3 

要素の変換スタック 

SVG文書における全ての要素は,変換スタックをもっている。これは,要素とその直近の祖先の'svg'要

素(この規格ではルート要素)との間における座標系を操作する変換のリストである。 

与えられた要素における要素の変換スタック(element transform stack)には次の表記法を使用する。 

TS(id) 

パラメタidは,与えられた要素の'id'属性又は'xml:id'属性の値である。 

同様に,識別子idをもつ与えられた要素の'transform'属性によって定義された変換には,次の表記法を

使用する。 

Txf(id) 

上の定義では,要素の変換TSは,その要素から直近の祖先の'svg'までの全変換Txfの結果と同じである。 

TS(id) = Txf(id.nearestViewportElement) . [...] . Txf(id.parentElement) . Txf(id) 

例:要素の変換スタック  

<svg xml:id="root" version="1.2" baseProfile="tiny"> 

  <g xml:id="g" transform="scale(2)"> 

    <rect xml:id="r" transform="scale(4)"/> 

    <g xml:id="g2"> 

      <rect xml:id="r2" transform="scale(0.5)"/> 

    </g> 

  </g> 

</svg> 

この例では,その変換は次のとおりである。 

TS(g)  = scale(2) 

TS(r)  = TS(g) . scale(4)   = scale(8) 

TS(g2) = TS(g) . I          = scale(2)   (where I is the identity matrix) 

TS(r2) = TS(g) . scale(0.5) = scale(1) 

background image

94 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

7.7.4 

現在の変換行列 

描画ツリーの各要素には,現在の変換行列(CTM)の概念がある。これは要素に適用される全ての座標

系変換の積であり,その要素を座標系に効果的にマッピングし,SVG利用者エージェントはそれを装置単

位に変換する。 

次の例において,"g-0"〜"g-n"のIDを含む祖先の'g'要素の集合をもっている長方形を考えてみる。 

例:現在の変換行列  

<svg xml:id="root" version="1.2" baseProfile="tiny"> 

  ... 

  <g xml:id="g-n"> 

    ... 

    <g xml:id="g-2"> 

      ... 

      <g xml:id="g-1"> 

        ... 

        <g xml:id="g-0"> 

          ... 

          <rect xml:id="elt" .../> 

        </g> 

      </g> 

    </g> 

  </g> 

</svg> 

先述のU,VB及びTSの定義を用いて,xml:id="elt"をもつ長方形のCTMは次のように計算される。 

CTM(elt) = U . VB(root) . TS(elt) 

         = U . VB(root) . Txf(g-n) . [...] . Txf(g-0) . Txf(elt) 

例:現在の変換行列(n=2)  

<svg xml:id="root" version="1.2" baseProfile="tiny"> 

  ... 

  <g xml:id="g-1"> 

    ... 

    <g xml:id="g-0"> 

      ... 

      <rect xml:id="elt" .../> 

    </g> 

  </g> 

</svg> 

これによって次のような変換が行われる。 

CTM(elt) = U . VB(root) . Txf(g-1) . Txf(g-0) . Txf(elt) 

background image

95 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ビューポートを定義しない要素については,要素のCTM及びその親のCTMの間における重要な関係に

注意する。 

CTM(elt) = CTM(elt.parentElement) . Txf(elt) 

7.7.5 

TransformRef値 

'transform'属性の'ref(...)'属性値を使用することによって,制約される変換を簡単に指定することができる。 

'ref(svg, x, y)'変換は,最上位の'svg'要素のCTMによって乗じられたその要素の親のCTMの逆数と評価

される(ただし,その'svg'要素のズーム,パン及び回転の利用者変換は除く。)。 

親要素のCTMの逆数はいつもあるわけではないことに注意する。その場合は,利用者エージェントが

最上位の'svg'要素のCTMを直接調べることによって,制約される変換をもつ要素のCTMを計算すること

ができる。この場合の'ref(...)'値はサポート外の値ではない。 

パラメタx及びyは省略可能である。それらを指定する場合は追加的な移動をその変換に付加し,その

要素の利用者空間における(0, 0)が,'svg'要素の利用者空間における(x, y)にマップされるようにする。パラ

メタx及びyを指定しない場合,追加的な移動は一切適用されない。 

次の例は上記の規定に基づいている。また,最上位の'svg'要素を示すために"svg[0]"を用いている。 

Inverse of the parent's CTM: inv(CTM(elt.parentElement)) 

The svg element's user transform, exclusive of zoom, 

pan and rotate transforms: 

CTM(svg[0].parentElement) . VB(svg[0]) 

CTM(svg[0].parentElement) evaluates to Identity since there 

is no svg[0].parentElement element. 

加えて,T(x, y)の移動は次のとおりである。 

CTM(elt) . (0, 0) = CTM(svg[0]) . (x, y) 

よって,その変換は次のように評価される。 

Txf(elt) = inv(CTM(elt.parentElement)) . CTM(svg[0].parentElement) . VB(svg[0]) . T(x, y) 

したがって,その要素のCTMは次のとおりである。 

CTM(elt) = CTM(elt.parentElement) . Txf(elt) 

         = CTM(svg[0].parentElement) . VB(svg[0]) . T(x,y) 

例:ref()変換 

最初は,小さな長方形が直線の中央をマークしている。SVG利用者エージェントのビューポートは,200

単位の辺をもつ正方形である。 

<svg xml:id="root" version="1.2" baseProfile="tiny" viewBox="0 0 100 100"> 

  <line x1="0" x2="100" y1="0" y2="100"/> 

  <rect xml:id="r" transform="ref(svg)" 

        x="45" y="45" width="10" height="10"/> 

</svg> 

この場合は次のとおりである。 

background image

96 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Txf(r) = inv(CTM(r.parent)) . CTM(root.parentElement) . VB(root) . T(x, y) 

CTM(root.parentElement) evaluates to Identity. 

T(x, y) evaluates to Identity because (x, y) is not specified 

CTM(r) = CTM(r.parent) . Txf(r) 

       = CTM(r.parent) . inv(CTM(r.parent)) . VB(root) 

       = VB(root) 

       = scale(2) 

その結果,利用者変換(currentTranslate,currentScale及びcurrentRotateによる。)にかかわらず,ビュー

ポート空間におけるその長方形の座標は常に次のようになる:(45, 45, 10, 10) * scale(2) = (90, 90, 20, 20)。

初めは,そのビューポート座標系における直線は(0, 0)から(200, 200)までである。利用者エージェントに3

倍のズームを適用(currentScale = 3)すると,その長方形は(90, 90, 20, 20)のままだがその直線は(0, 0, 600, 

600)となり,マーカーはもう直線の中央をマークしない。 

例:ref()変換 

小さな長方形が常に直線の中央をマークする。ここでも,SVG利用者エージェントのビューポートは

200単位の辺をもつ正方形である。 

<svg xml:id="root" version="1.2" baseProfile="tiny" viewBox="0 0 100 100">  

  <line x1="0" x2="100" y1="0" y2="100"/> 

  <g xml:id="g" transform="ref(svg, 50, 50)"> 

    <rect xml:id="r" x="-5" y="-5" width="10" height="10"/> 

  </g> 

</svg> 

この場合は次のとおりである。 

Txf(g) = inv(CTM(g.parent)) . CTM(root.parentElement) . VB(root) . T(x,y) 

CTM(root.parentElement) evaluates to Identity. 

CTM(g) = CTM(g.parent) . Txf(r) 

       = CTM(g.parent) . inv(CTM(g.parent)) . VB(root) . T(x,y) 

       = VB(root) . T(x,y) 

       = scale(2) . T(x,y) 

最初は,'svg'利用者空間の(50, 50)は,ビューポート空間の(100, 100)である。したがって, 

CTM(g) . [0, 0] = CTM(root) . [50, 50] 

                = scale(2) . [50, 50] 

                = [100, 100] 

97 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

and 

scale(2) . T(x,y) = [100, 100] 

T(x,y) = translate(50, 50) 

SVG利用者エージェントのパンが(50, 80)である場合(currentTranslateを変更),'svg'要素の利用者空間に

おける(50, 50)は,ビューポート空間の(150, 180)に位置付けられる。これによって, 

CTM(g) . [0, 0] = CTM(root) . [50, 50] 

                = translate(50, 80) . scale(2) . [50, 50] 

                = [150, 180] 

and 

scale(2) . T(x,y) = [150, 180] 

T(x, y) = translate(75, 90) 

したがって,利用者変換にかかわらず,その長方形は常に直線の中央に重なる。その長方形は直線と一

緒に回転せず(例 currentRotateを設定した場合),スケーリングもしないことに注意する。 

次は<transform-ref>値のためのEBNF文法である[EBNF]。 

transform-ref ::= 

   wsp* ref wsp* 

ref ::= 

   "ref" wsp* "(" wsp* "svg" wsp* ")" 

   | "ref" wsp* "(" wsp* "svg" comma-wsp number comma-wsp number wsp* ")" 

number ::= 

   sign? integer-constant 

   | sign? floating-point-constant 

comma-wsp ::= 

   (wsp+ comma? wsp*)  

   | (comma wsp*) 

comma ::= 

   "," 

integer-constant ::= 

   digit-sequence 

floating-point-constant ::= 

   fractional-constant exponent? 

   | digit-sequence exponent 

fractional-constant ::= 

   digit-sequence? "." digit-sequence 

98 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

   | digit-sequence "." 

exponent ::= 

   ( "e"  

   | "E" ) sign? digit-sequence 

sign ::= 

   "+"  

   | "-" 

digit-sequence ::= 

   digit 

   | digit digit-sequence 

digit ::= 

   "0"  

   | "1"  

   | "2"  

   | "3"  

   | "4"  

   | "5"  

   | "6"  

   | "7"  

   | "8"  

   | "9" 

wsp ::= 

   (#x20  

   | #x9  

   | #xD  

   | #xA) 

7.8 

'viewBox'属性 

与えられた図形集合を引き伸ばして特定のコンテナ要素に合うように指定することが望ましい場合が多

い。'viewBox'属性を用いることによってそれが可能である。新しいビューポートを確立する全ての要素

(7.10を参照)において'viewBox'属性を指定することができる。 

属性の定義: 

viewBox = "<list-of-numbers>" | "none"  

子の図形内容が収まる長方形領域を指定する。この属性の値は,次の二つのうちの一つとなる。 

<list-of-numbers> 

四つの<number>のリスト(<min-x>,<min-y>,<width>及び<height>)。それらは空白及び/又はコンマ

で区切られ,'preserveAspectRatio'属性を考慮に入れてその要素によって確立されたビューポートの境界に

マップされるビューポート空間における長方形を指定する。これを指定すると,追加的な変換はその要素

の全ての子孫に適用されて指定された効果を与える。 

none 

background image

99 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

値"none"が指定された場合は,'viewBox'属性による補足的な変換を使用しないことを示す。この値を使

用すると,子の内容に対する効果は,'viewBox'属性を全く指定していないときと同じである。これは省略

値である。 

アニメーション:可 

<width>又は<height>における負の値はサポート外である。これらの二つのパラメタのうち,どちらかの

値が0の場合,その要素の描画はできない。 

例07̲12.svgでは,'svg'要素において'viewBox'属性を使用し,ビューポートの境界に合うようなSVG内

容の引き伸ばしが指定されている。 

例: 07̲12.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="300px" height="200px" viewBox="0 0 1500 1000" 

     preserveAspectRatio="none"> 

  <desc> 

    Example ViewBox - uses the viewBox attribute to automatically create an 

    initial user coordinate system which causes the graphic to scale to fit 

    into the viewport no matter what size the viewport is. 

  </desc> 

  <!-- This rectangle goes from (0,0) to (1500,1000) in user space. 

       Because of the viewBox attribute above, 

       the rectangle will end up filling the entire area 

       reserved for the SVG content. --> 

  <rect x="0" y="0" width="1500" height="1000"  

        fill="yellow" stroke="blue" stroke-width="12"/> 

  <!-- A large, red triangle --> 

  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/> 

  <!-- A text string that spans most of the viewport --> 

  <text x="100" y="600" font-size="200" font-family="Verdana"> 

    Stretch to fit 

  </text> 

</svg> 

background image

100 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

width=300px,height=200px 

のビューポートに対する描画 

width=150px, 

height=200px 

'viewBox'属性によって,SVG利用者エージェントは適切な変換行列を自動的に供給し,利用者空間で指

定された長方形を指定領域の境界(しばしばビューポート)にマップする。左の例のような効果(ビュー

ポートの面積が300×200ピクセル)を得るためには,SVG利用者エージェントは,x及びyを0.2だけス

ケーリングするような変換を自動的に挿入する必要がある。その効果は,その文書においてサイズ300×

200ピクセルのビューポートをもち,次のような補足的な変換を実施した場合と同じである。 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="300px" height="200px"> 

  <g transform="scale(0.2)"> 

    <!-- Rest of document goes here --> 

  </g> 

</svg> 

例07̲12.svgの右側の図のような効果(ビューポートの面積が150×200ピクセル)を得るためには,SVG

利用者エージェントは,xを0.1だけかつyを0.2だけスケーリングするような変換を自動的に挿入する必

要がある。その効果は,その文書においてサイズ150×200ピクセルのビューポートをもち,次のような補

足的な変換を実施した場合と同じである。 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="150px" height="200px"> 

  <g transform="scale(0.1 0.2)"> 

    <!-- Rest of document goes here --> 

  </g> 

</svg> 

注記 SVG利用者エージェントがスケーリング変換に加えて移動変換も提供する必要がある場合が

ある。例えば,'svg'要素において'viewBox'属性が<min-x>又は<min-y>に0以外の値を指定した

場合,移動変換が必要である。 

'transform'属性とは異なり(7.6.1を参照),'viewBox'によって作成される自動変換は,'viewBox'属性をも

つ要素の属性'x','y','width'及び'height'に影響を与えない。したがって,'svg'要素が属性'width','height'及び

'viewBox'をもつ上記の例では,その'width'及び'height'属性は,'viewBox'変換を適用する前に存在している座

101 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

標系における値を示す。一方では,'transform'属性と同じように,それは他の全ての属性及び子孫要素のた

めに新しい座標系を確立する。 

次は'viewBox'属性の値のためのEBNF文法である[EBNF]。 

viewbox ::= 

   wsp* viewboxSpec wsp* 

viewboxSpec ::= 

   number comma-wsp number comma-wsp number comma-wsp number 

   | "none" 

number ::= 

   sign? integer-constant 

   | sign? floating-point-constant 

comma-wsp ::= 

   (wsp+ comma? wsp*)  

   | (comma wsp*) 

comma ::= 

   "," 

integer-constant ::= 

   digit-sequence 

floating-point-constant ::= 

   fractional-constant exponent? 

   | digit-sequence exponent 

fractional-constant ::= 

   digit-sequence? "." digit-sequence 

   | digit-sequence "." 

exponent ::= 

   ( "e"  

   | "E" ) sign? digit-sequence 

sign ::= 

   "+"  

   | "-" 

digit-sequence ::= 

   digit 

   | digit digit-sequence 

digit ::= 

   "0"  

   | "1"  

   | "2"  

   | "3"  

   | "4"  

   | "5"  

102 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

   | "6"  

   | "7"  

   | "8"  

   | "9" 

wsp ::= 

   (#x20  

   | #x9  

   | #xD  

   | #xA) 

7.9 

'preserveAspectRatio'属性 

特に'viewBox'属性を使用しているとき,図形がビューポート全体に収まるように,それを非均一的に引

き伸ばすことが望ましい場合がある。一方では,均一的なスケーリングを用いて,その図形のアスペクト

比を維持することが望ましい場合もある。 

'preserveAspectRatio'は,新しいビューポートを確立する全ての要素において利用することができ(7.10

を参照),均一的なスケーリングの強制の有無を示す。 

'preserveAspectRatio'は,同じ要素における'viewBox'に値が与えられているときにだけ適用されるか,又

は,暗黙の'viewBox'値をその要素に与えることができる場合にも適用される(この詳細については各要素

の説明を参照)。'viewBox'値を決定することができない場合には,'preserveAspectRatio'は無視される。 

属性の定義: 

preserveAspectRatio = ["defer"] <align> [<meet>]  

defer 

データを参照する要素('image','animation'及び'video')における'preserveAspectRatio'値がdeferで始まる

場合,その参照先の内容(もしあれば)における'preserveAspectRatio'属性の値を使用する。参照先の内容

に'preserveAspectRatio'のための値がない場合,その'preserveAspectRatio'属性は(deferを無視して)通常ど

おり処理される。その他全ての要素における'preserveAspectRatio'については,その属性のdeferの部分は無

視する。 

<align> 

均一的なスケーリングの強制の有無を示し,それを強制するのであれば,'viewBox'のアスペクト比がビ

ューポートのアスペクト比にマッチしない場合の整列の方法を示す。<align>のパラメタは,次の文字列の

うちの一つでなければならない。 

• 

none - 均一的なスケーリングを強制しない。必要であればその要素の図形内容を非均一的にスケー

リングし,その要素の包含ボックスがビューポートの長方形にぴったり合うようにする。 

• 

xMinYMin - 均一的なスケーリングを強制する。 

その要素の'viewBox'の<min-x>を,ビューポートにおける最小のX値に合わせる。 

その要素の'viewBox'の<min-y>を,ビューポートにおける最小のY値に合わせる。 

• 

xMidYMin - 均一的なスケーリングを強制する。 

その要素の'viewBox'におけるXの中間点の値を,ビューポートにおけるXの中間点の値に合わせ

る。 

その要素の'viewBox'の<min-y>を,ビューポートにおける最小のY値に合わせる。 

• 

xMaxYMin - 均一的なスケーリングを強制する。 

103 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

その要素の'viewBox'の<min-x>+<width>を,ビューポートにおける最大のX値に合わせる。 

その要素の'viewBox'の<min-y>を,ビューポートにおける最小のY値に合わせる。 

• 

xMinYMid - 均一的なスケーリングを強制する。 

その要素の'viewBox'の<min-x>を,ビューポートにおける最小のX値に合わせる。 

その要素の'viewBox'におけるYの中間点の値を,ビューポートにおけるYの中間点の値に合わせ

る。 

• 

xMidYMid(省略値)- 均一的なスケーリングを強制する。 

その要素の'viewBox'におけるXの中間点の値を,ビューポートにおけるXの中間点の値に合わせ

る。 

その要素の'viewBox'におけるYの中間点の値を,ビューポートにおけるYの中間点の値に合わせ

る。 

• 

xMaxYMid - 均一的なスケーリングを強制する。 

その要素の'viewBox'の<min-x>+<width>を,ビューポートにおける最大のX値に合わせる。 

その要素の'viewBox'におけるYの中間点の値を,ビューポートにおけるYの中間点の値に合わせ

る。 

• 

xMinYMax - 均一的なスケーリングを強制する。 

その要素の'viewBox'の<min-x>を,ビューポートにおける最小のX値に合わせる。 

その要素の'viewBox'の<min-y>+<height>を,ビューポートにおける最大のY値に合わせる。 

• 

xMidYMax - 均一的なスケーリングを強制する。 

その要素の'viewBox'におけるXの中間点の値を,ビューポートにおけるXの中間点の値に合わせ

る。 

その要素の'viewBox'の<min-y>+<height>を,ビューポートにおける最大のY値に合わせる。 

• 

xMaxYMax - 均一的なスケーリングを強制する。 

その要素の'viewBox'の<min-x>+<width>を,ビューポートにおける最大のX値に合わせる。 

その要素の'viewBox'の<min-y>+<height>を,ビューポートにおける最大のY値に合わせる。 

<meet> 

省略可能であり,歴史的な理由によって利用可能である。<meet>は<align>値と一つ以上の空白によって

区切られ,文字列meetと同じでなければならない。 

meetは次のような図形のスケーリングを示す。 

• 

アスペクト比は維持される。 

• 

ビューポートにおいて'viewBox'全体が可視的である。 

• 

'viewBox'は,他の基準を満たす一方で,可能な限り拡大される。 

このとき,その図形のアスペクト比がビューポートにマッチしていない場合は,ビューポートによって

は'viewBox'の境界を越えて拡張する場合もある(すなわち,'viewBox'が描画する領域がビューポートより

も小さくなる。)。 

アニメーション:可 

例PreserveAspectRatioには,'preserveAspectRatio'における様々な選択肢を示している。この例では,

'animation'要素を含むことによって,幾つかの新しいビューポートが作成されている(7.10を参照)。 

background image

104 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

例 PreserveAspectRatio 

7.10 新しいビューポートの確立 

新しいビューポートを確立することができる要素もある。新しいビューポートを確立すると,暗黙的に

新しいビューポート座標系及び新しい利用者座標系が確立される。さらに,新しいビューポートが確立さ

れたので,パーセンテージ単位が新しい意味をもち,現在のビューポートに相対的に定義されるようにな

る(7.11を参照)。 

'viewport-fill'及び'viewport-fill-opacity'プロパティを新しいビューポートに適用することができる。 

新しいビューポートの境界は,新しいビューポートを確立する要素(例 'animation'要素)における'x'

属性,'y'属性,'width'属性及び'height'属性によって定義される。新しいビューポート座標系及び新しい利用

者座標系の原点は両方とも(x, y)にあり,このx及びyはビューポートを確立する要素における対応した属

性の値を示している。新しいビューポート座標系及び新しい利用者座標系の向きは,ビューポートを確立

する要素の現在の利用者座標系の向きに対応している。新しいビューポート座標系及び新しい利用者座標

系における単一単位は,ビューポートを確立する要素の現在の利用者座標系における単一単位と同じ範囲

である。 

新しいビューポート作成の様々な例については,7.9の例PreserveAspectRatioを参照。 

次の要素は新しいビューポートを確立する。 

• 

'svg'要素は文書のルート(root)ビューポートを確立する。 

• 

'animation'要素 

• 

'image'要素 

• 

'video'要素 

• 

'foreignObject'要素 

次の段落は参考(informative)である。 

注記 オーバーフローのクリッピングは実行されないが,クリッピングをサポートするSVG利用者エ

ージェント(例 SVG 1.1 Full [SVG11]をサポートする利用者エージェント)においてその内容

を閲覧すると,そのようなクリッピングが実行される。なぜならば,'overflow'プロパティの初

期値は,ビューポートを確立する非ルート要素に対してhiddenであるからである([SVG11]の

background image

105 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

14.3.3)。制作者がその内容に完全な前方互換性があるようにしたい場合には,'overflow'プロパ

ティを指定するか,又はクリップしないほうがよい内容は必ず確立したビューポートの中にあ

るようにすることが望ましい。 

7.11 単位 

次に示す例外を除けば,SVGの全ての座標及び長さは利用者単位において指定されなければならず,こ

れは単位識別子は認められていないことを意味する。 

二つの例外がある。 

• 

'svg'要素のXML属性'width'及び'height'における単位識別子は認められている。 

• 

'linearGradient'及び'radialGradient'要素におけるオブジェクト包含ボックス単位は認められている。 

利用者単位とは,現在の利用者座標系における値である。次に例を示す。 

例: 07̲17.svg 

<text font-size="50">Text size is 50 user units</text> 

'svg'要素の'width'及び'height'属性では,座標又は長さの値を,数値とそれに続く単位識別子として表現す

ることができる(例 '25cm','100%')。SVGの単位識別子のリストは,in,cm,mm,pt,pc,px及びパ

ーセンテージ(%)である。'width'及び'height'のこれらの値は,初期ビューポートの計算に使用される。 

'width'及び'height'属性でパーセンテージ値を使用することによって,SVGビューポートは利用可能な初

期ビューポートのうちのどの位のスペースをとるのかが指定される。 

• 

ビューポートのパーセンテージとして表現される全ての幅の値では,包含している最も近いビュー

ポートに関して利用者単位における実際の幅で指定されたパーセンテージをその値として使用する。

この実際の幅とは,そのビューポート要素の利用者座標系におけるビューポート要素の幅である。 

• 

ビューポートのパーセンテージとして表現される全ての高さの値では,包含している最も近いビュ

ーポートに関して利用者単位における実際の高さで指定されたパーセンテージをその値として使用

する。この実際の高さとは,そのビューポート要素の利用者座標系におけるビューポート要素の高

さである。 

詳細については,7.2を参照。 

7.12 包含ボックス 

ある要素の包含ボックス(bounding box,短縮形は"bbox")とは,要素と要素の子孫とを完全に取り囲む

外接長方形であり,その向きは要素の利用者座標系軸に並行に置かれる。包含ボックスは,fill,stroke,

opacity又はvisibilityプロパティに関連した値を全て排除して計算されなければならない。曲線図形につい

ては,包含ボックスは,その図形の終点だけではなく,エッジに沿った全ての部分を取り囲まなければな

らない。曲線に沿った位置をもたない曲線の制御点(例 3次ベジェ曲線命令における二つめの座標の組)

は,包含ボックスの範囲に影響を与えてはならないことに注意する(それらの点が図形自体の中にある場

合,その曲線に沿っている,又はその近くにある場合には,それらの点が包含ボックス領域に入る可能性

もある。)。例えば,曲線エッジの閉じない側においてその曲線エッジよりも遠い所にある曲線の制御点は,

包含ボックスから排除しなければならない。 

例bbox01.svgには,三つの包含ボックスをもつ図形(2次ベジェ曲線をもつ'path'要素)が示されている

が,一番左だけが正しいものである。 

例: bbox01.svg 

<svg xmlns='http://www.w3.org/2000/svg' 

background image

106 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

     xmlns:xlink='http://www.w3.org/1999/xlink' 

     version='1.1' width='380px' height='120px' viewBox='0 0 380 120'> 

  <title>Bounding Box of a Path</title> 

  <desc> 

    Illustration of one shape (a 'path' element with a quadratic Bézier) with 

    three bounding boxes, only one of which is correct. 

  </desc> 

  <defs> 

    <g id='shape'> 

      <line x1='120' y1='50' x2='70' y2='10' stroke='#888'/> 

      <line x1='20' y1='50' x2='70' y2='10' stroke='#888'/> 

      <path 

stroke-width='2' 

fill='rgb(173, 

216, 

230)' 

stroke='none' 

fill-rule='evenodd' 

            d='M20,50 

               L35,100 

               H120 

               V50 

               Q70,10 20,50'/> 

      <circle cx='120' cy='50' r='3' fill='none' stroke='#888'/> 

      <circle cx='20' cy='50' r='3' fill='none' stroke='#888'/> 

      <circle cx='70' cy='10' r='3' fill='#888' stroke='none'/> 

    </g> 

  </defs> 

  <g text-anchor='middle'> 

    <g> 

      <title>Correct Bounding Box</title> 

      <use xlink:href='#shape'/> 

      <rect x='20' y='30' width='100' height='70' 

            fill='none' stroke='green' stroke-dasharray='2' stroke-linecap='round'/> 

      <text x='70' y='115'>Correct</text> 

    </g> 

    <g transform='translate(120)'> 

      <title>Incorrect Bounding Box</title> 

      <desc>Bounding box does not encompass entire shape.</desc> 

      <use xlink:href='#shape'/> 

background image

107 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <rect x='20' y='50' width='100' height='50' 

            fill='none' stroke='red' stroke-dasharray='2' stroke-linecap='round'/> 

      <text x='70' y='115'>Incorrect</text> 

    </g> 

    <g transform='translate(240)'> 

      <title>Incorrect Bounding Box</title> 

      <desc>Bounding box includes control points outside shape.</desc> 

      <use xlink:href='#shape'/> 

      <rect x='20' y='10' width='100' height='90' 

            fill='none' stroke='red' stroke-dasharray='2' stroke-linecap='round'/> 

      <text x='70' y='115'>Incorrect</text> 

    </g> 

  </g> 

</svg> 

正の'width'属性又は'height'属性をもち,'display'プロパティがnone以外である全ての描画要素,及びその

要素を含んでもよい全てのコンテナ要素に対し,包含ボックスを適用することができなければならない。

描画ツリーに寄与しない要素(例 'defs'要素の中の要素,'display'がnoneである要素),及び描画ツリーに

寄与する子要素を一切もたない要素(例 子をもたない'g'要素)は,親要素の包含ボックスに影響を与え

ない。親要素の包含ボックスに影響を与えない要素であっても,必要な場合にはそれら自体の包含ボック

ス値を返さなければならない。 

この説明のために,次の例bbox-calc.svgには要素の集合が示されている。この例に基づき,その後に示

される結果が各要素について計算される。 

例: bbox-calc.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink"> 

  <title>Bounding Box Calculation</title> 

  <desc>Examples of elements with different bounding box results based on context.</desc> 

  <defs id="defs-1"> 

     <rect id="rect-1" x="20" y="20" width="40" height="40" fill="blue" /> 

  </defs> 

background image

108 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <g id="group-1"> 

    <use id="use-1" xlink:href="#rect-1" x="10" y="10" /> 

    <g id="group-2" display="none"> 

      <rect id="rect-2" x="10" y="10" width="100" height="100" fill="red" /> 

    </g> 

  </g> 

</svg> 

要素ID 

包含ボックス結果 

"defs-1" 

{0, 0, 0, 0} 

"rect-1" 

{20, 20, 40, 40} 

"group-1" 

{30, 30, 40, 40} 

"use-1" 

{30, 30, 40, 40} 

"group-2" 

{10, 10, 100, 100} 

"rect-2" 

{10, 10, 100, 100} 

SVGLocatableから引き出されたものの描画ツリーにはない文書片及び要素(例 'defs'要素にあるもの,

又は作成されたがまだDOMに挿入されていないもの)も,包含ボックスをもっていなければならない。

描画ツリーの外にある要素の幾何形状は,その要素及び文書片の中で指定される値若しくはプロパティ(例 

'font-size'),省略値,又は実装時定義の値をもつ値若しくはプロパティだけを考慮に入れるようにしなけれ

ばならない。 

テキスト内容要素では,包含ボックスの計算のために,各字形を別個の図形要素として扱わなければな

らない。この計算では,全ての字形は字形セル全体を占めることを仮定しなければならない。例えば,水

平に置かれるテキストについては,各字形はそのフォントのアセント値(ascent value)及びディセント値

(descent value)全体に対して垂直に伸ばされることをその計算で仮定しなければならない。その例外とし

て'textArea'があり,ここでは包含ボックスの計算にその要素の幾何形状が利用される。 

宣言的アニメーション又はスクリプトアニメーションは,要素の図形,サイズ及び位置を変えることが

できるので,包含ボックスは変更可能である。したがって,ある要素の包含ボックスは,その包含ボック

スが(スクリプトの呼出し,宣言の一部,又はリンク付け構文をとおして)要求された時点におけるその

要素の現在値を反映する。 

'width'又は'height'のどちらか(又は両方)が'0'である要素(例 垂直線,水平線,'width'又は'height'が指

定されていない'rect'要素)も包含ボックスをもつ。そのとき,正の寸法には正の値が与えられる(又は正

の寸法が指定されていなければ'width'及び'height'の両方が'0'になる。)。同様に,'0'の'width'及び'height'をも

つ'path'要素のサブパス部分は,包含ボックスのためにその要素の幾何形状に含まれていなければならない。

SVGLocatableから引き出されていない要素(例 グラデーション要素)は包含ボックスをもたず,したが

って,包含ボックスを要求するためのインタフェースを一切もっていないことにも注意する。 

未解決のリソースを参照している描画ツリーにおける要素も包含ボックスをもたなければならない。そ

の包含ボックスは,それらの属性が指定した位置及び範囲によって定義されるか,又は値が指定されてい

ない場合はそれらの属性の省略値によって定義される。例えば,要素<use xlink:href="#bad" x="10" y="10"/>

background image

109 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

は,'x'及び'y'が'10'であり'width'及び'height'が'0'である包含ボックスをもつ。 

包含ボックスの正式な定義については,[FOLEY-VANDAM]の15.2.3“Extents and Bounding Volumes”を

参照。詳細については,7.13,10.4,11.9及び14.3.2を参照。 

7.13 オブジェクト包含ボックス単位 

次の表の要素は,与えられた要素における包含ボックスに関する比率として座標値及び長さを表す選択

肢を(キーワード'objectBoundingBox'を介して)提供している。 

要素 

属性 

効果 

'linearGradient' 

gradientUnits="objectBoundingBox" 

グラデーションベクトル('x1','y1','x2','y2')
を指定する属性は,そのグラデーションが適用
されている要素の包含ボックスの比率を表し
ていることを示す。 

'radialGradient' 

gradientUnits="objectBoundingBox" 

中心点('cx', 'cy')及び半径('r')を指定する属性は,
そのグラデーションが適用されている要素の
包含ボックスの比率を表していることを示す。 

この後の説明において,“適用可能な要素”とは,与えられた効果が適用される要素のことである。グラ

デーションでは,その適用可能な要素は,与えられたグラデーションを参照する'fill'又は'stroke'プロパティ

をもつ図形要素である(11.11を参照。テキスト要素に関する特別な規則については,10.4を参照。)。 

キーワード'objectBoundingBox'を用いると,補足的な変換行列が入れ子にされた変換行列のリストに挿入

され新しい利用者座標系が作成されたかのような効果が与えられる。 

最初に,適用可能な要素及びその全ての子孫のために,座標(minx, miny)及び(maxx, maxy)が決定される。

値minx,miny,maxx及びmaxyは,その適用可能な要素の利用者座標系のx及びyにおけるその要素の

図形の最大範囲を計算することによって決定される。 

次に,新しい利用者座標系の座標(0, 0)が,その適用可能な要素の利用者座標系における包含ボックスの

角(minx, miny)にマップされる。そして,新しい利用者座標系の座標(1, 1)が,その適用可能な要素の包含ボ

ックスの角(maxx, maxy)にマップされる。ほとんどの場合,次の変換行列によって正しい効果が与えられ

る。 

[ (maxx-minx) 0 0 (maxy-miny) minx miny ] 

オブジェクト包含ボックス単位の比率として表された値には,どのような数値でも指定することができ

る。特に,0より小さい比率,又は1より大きい比率でも指定することができる。 

その適用可能な要素の幾何形状が幅又は高さをもたない場合は,キーワード'objectBoundingBox'を使用し

ないほうがよい。例えば水平線又は垂直線では,実際には閲覧時にその線に太さがある(0以外のストロ

ークの太さをもっていることによる。)としても,包含ボックスの計算のためにストロークの太さは無視さ

れる。その適用可能な要素の幾何形状に幅も高さもなく,'objectBoundingBox'が指定されたとき,グラデー

ションのような特定の効果は無視される。 

7.14 SVG内容のビューポートに固有のサイジングプロパティ 

SVGでは,他の言語における包含のために,固有のサイジングプロパティを計算する方法を指定する必

要がある。SVG内容のビューポートに固有の幅及び高さは,'width'及び'height'属性によって決められなけ

ればならない。これらが両方とも指定されていない場合は,省略値'100%'を使用しなければならない。 

注記 この'width'及び'height'属性は,CSSのwidth及びheightプロパティと同じではない。具体的には,

パーセンテージ値は固有の幅又は高さを提供せず,包含しているブロックのパーセンテージを

示さない。その代わりに,画像データで実際に覆われているビューポートの部分が示される。 

background image

110 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVG内容のビューポートに固有のアスペクト比が必要とされるのは,例えばCSSでスタイル付けされ

たXHTMLのオブジェクト要素からSVGを包含する場合である。あるSVG図形には固有のアスペクト比

があったとしても,固有の幅又は高さがないこともあり得る(実際のところ,よくある。)。固有のアスペ

クト比は,次のような規則に基づいて計算される。 

• 

そのアスペクト比は,幅を高さで除すことによって計算される。 

• 

最上位の'svg'要素における'width'及び'height'が,単位識別子(in,mm,cm,pt,pc,px,em,ex)

又は利用者単位において共に指定されている場合,そのアスペクト比は,両方の値を利用者単位に

解決した後でその'width'及び'height'属性から算出される。 

• 

最上位の'svg'要素における'width'及び'height'の両方(又はどちらか)が,パーセンテージ単位である

(又は省略されている。)場合,そのアスペクト比は,現在のSVG文書片に対して指定された

'viewBox'の幅及び高さの値から算出される。その'viewBox'が正しく指定されていない場合,又は

'none'に設定されている場合は,固有のアスペクト比を算出することができず,それが指定されてい

ないものとみなされる。 

次に固有アスペクト比1〜固有アスペクト比4の例を示す。 

例:固有アスペクト比1 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="10cm" height="5cm"> 

  ... 

</svg> 

この例では,そのビューポートの固有アスペクト比は2:1である。固有の幅は10 cmであり,固有の高

さは5 cmである。 

例:固有アスペクト比2 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="100%" height="50%" viewBox="0 0 200 200"> 

  ... 

</svg> 

この例では,最上位のビューポートの固有アスペクト比は1:1である。この場合のアスペクト比の計算

では,一方向にだけ抑制される包含ブロックにおけるオブジェクトへの埋込みが認められる。 

例:固有アスペクト比3 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="10cm" viewBox="0 0 200 200"> 

  ... 

</svg> 

この例では,固有アスペクト比は1:1である。 

例:固有アスペクト比4 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="75%" height="10cm" viewBox="0 0 200 200"> 

  ... 

background image

111 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

</svg> 

この例では,固有アスペクト比は1:1である。 

7.15 地理座標系 

SVGで符号化された地図を扱うSVG利用者エージェントとSVG内容ジェネレータとの間における相互

運用性のために,共通的なメタデータ定義を使用して,SVG文書を生成するための座標系を記述すること

が望ましい。 

そのメタデータは,地図を記述する最上位の'svg'要素における'metadata'要素の下に追加され,SVG地図

の生成に使われる座標系定義のRDF記述から構成される[RDF]。そのメタデータの存在は,SVGの描画に

は一切影響を与えないことに注意する。それは単に結合された地図を利用するアプリケーションに追加的

な意味論値を提供しているだけである。 

その定義は,GML 3.2.1で記述されるXML文法に適合していなければならない。GML 3.2.1とは,XML

の共通的CRSデータ型の符号化のためのOpenGIS標準である[GML]。SVGが使用する2次元データを正

しくマップするために,そのCRSは,サブタイプProjectedCRS又はGeographic2dCRSでなければならな

い。記述されたCRSにおける第一軸はSVGのx軸をマップし,副軸はSVGのy軸をマップする。 

そのようなメタデータの主な目的は,二つ以上のSVG文書を重ね合わせたり,又は単一の文書に統合し

たりすることができることをその利用者エージェントに示すことである。もちろん,二つの地図が同一の

座標参照系定義を参照していて,同一のSVGの'transform'属性値をもっている場合,そのデータを再投影

しなくてもそれらを重ね合わせることができる。複数の地図が異なる座標参照系を参照したり,異なった

SVGの'transform'属性値をもっていたりする場合には,専門的な地図製作用利用者エージェントは,座標デ

ータを変換してそのデータを重ね合わせてもよい。しかしながら,一般的なSVG利用者エージェントでは

このような変換を実行しなくてもよいし,メタデータの認識さえもする必要がない。このことは,地理座

標系及びSVG座標系のつな(繋)がりを明らかにするためにこの規格で示されている。 

7.16 'svg:transform'属性 

属性の定義: 

svg:transform = "<transform>" | "none" 

<transform> 

その地図データに適用されているアフィン変換を指定する。その構文は,'transform'属性のセクションに

書かれているそれと同じである。 

none 

その地図データには補助的なアフィン変換が適用されていないことを指定する。この値を使用すること

は恒等行列を指定していることと同じ意味であり,一切'svg:transform'属性を指定していないときと同じで

ある。 

アニメーション:不可 

この属性は,このマッピングの間に適用されている可能性がある任意の追加的なアフィン変換について

記述する。この属性は,OpenGISの'CoordinateReferenceSystem'要素に追加してもよい。'transform'属性とは

異なり,その変換がファイルのデータに適用されなければならないことを示してはいないことに注意する。

そうではなく,SVG符号化の場合そのデータに既に適用されている変換を記述しているだけである。 

'svg:transform'グローバル属性には,三つの典型的な使い方がある。それらを次に示す。また,それらの

例を07̲19.svg〜07̲21.svgに示す。 

background image

112 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

• 

大半のProjectedCRSは副軸の正の値で表される北の方向を向く。逆に,SVGはyが下向きの座標系

をもつ。したがって,通常の北を上にした地図表現の方法に従うために,そのようなProjectedCRS

では,値'scale(1, -1)'をもつ'svg:transform'グローバル属性を使用することが望ましい(例07̲21.svg

を参照)。 

• 

大半のGeographic2dCRSでは,その第一軸が経度ではなく緯度になる。このことは,その南北軸は

SVGにおける通常のy軸ではなくx軸で表現されることを意味する。したがって,通常の北を上に

した地図表現の方法に従うために,そのようなGeographic2dCRSでは,値'rotate(-90)'をもつ

'svg:transform'グローバル属性を使用することが望ましい(その一方で,ProjectedCRSについては

'scale(1, -1)'も追加する。)。例07̲19.svgを参照。 

• 

加えて,実数値の精度を制限するプロファイルを変換する場合,特定の領域における高い精度を保

つために,追加的な倍率を与えることが有用な場合もある。WGS84地理座標(EPGS 4326)からSVG

文書を生成する場合,値'rotate(-90) scale(100)'をもつ'svg:transform'グローバル属性に対応した,追加

的な100倍の倍率を使用することが望ましい(例07̲20.svgを参照)。特定のCRSによって,異な

るスケーリング値が必要となることもある。 

次の簡単な例では,URIを介して文書で使用する座標系を記述する座標メタデータが示されている。 

例: 07̲19.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="100" height="100" viewBox="0 0 1000 1000"> 

  <desc>An example that references coordinate data.</desc> 

  <metadata> 

    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 

             xmlns:crs="http://www.ogc.org/crs" 

             xmlns:svg="http://wwww.w3.org/2000/svg"> 

      <rdf:Description rdf:about=""> 

        <!-- The Coordinate Reference System is described 

             through a URI. --> 

        <crs:CoordinateReferenceSystem 

            svg:transform="rotate(-90)" 

            rdf:resource="http://www.example.org/srs/epsg.xml#4326"/> 

      </rdf:Description> 

    </rdf:RDF> 

  </metadata> 

  <!-- The actual map content --> 

</svg> 

例07̲20.svgでは,座標系を記述するよく知られた識別子が使用されている。この規格で使用されてい

background image

113 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

る座標には,与えられた変換が適用されていることに注意する。 

例: 07̲20.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="100" height="100" viewBox="0 0 1000 1000"> 

  <desc>Example using a well known coordinate system.</desc> 

  <metadata> 

    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 

             xmlns:crs="http://www.ogc.org/crs" 

             xmlns:svg="http://wwww.w3.org/2000/svg"> 

      <rdf:Description rdf:about=""> 

        <!-- In case of a well-known Coordinate Reference System 

             an 'Identifier' is enough to describe the CRS --> 

        <crs:CoordinateReferenceSystem svg:transform="rotate(-90) scale(100, 100)"> 

          <crs:Identifier> 

            <crs:code>4326</crs:code> 

            <crs:codeSpace>EPSG</crs:codeSpace> 

            <crs:edition>5.2</crs:edition> 

          </crs:Identifier> 

        </crs:CoordinateReferenceSystem> 

      </rdf:Description> 

    </rdf:RDF> 

  </metadata> 

  <!-- The actual map content --> 

</svg> 

例07̲21.svgでは,SVG文書の中で完全に座標系を定義している。 

例: 07̲21.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="100" height="100" viewBox="0 0 1000 1000"> 

  <desc>Coordinate metadata defined within the SVG document</desc> 

  <metadata> 

    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 

             xmlns:crs="http://www.ogc.org/crs" 

background image

114 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

             xmlns:svg="http://wwww.w3.org/2000/svg"> 

      <rdf:Description rdf:about=""> 

        <!-- For other CRS it should be entirely defined --> 

        <crs:CoordinateReferenceSystem svg:transform="scale(1,-1)"> 

          <crs:NameSet> 

            <crs:name>Mercator projection of WGS84</crs:name> 

          </crs:NameSet> 

          <crs:ProjectedCRS> 

            <!-- The actual definition of the CRS --> 

            <crs:CartesianCoordinateSystem> 

              <crs:dimension>2</crs:dimension> 

              <crs:CoordinateAxis> 

                <crs:axisDirection>north</crs:axisDirection> 

                <crs:AngularUnit> 

                  <crs:Identifier> 

                    <crs:code>9108</crs:code> 

                    <crs:codeSpace>EPSG</crs:codeSpace> 

                    <crs:edition>5.2</crs:edition> 

                  </crs:Identifier> 

                </crs:AngularUnit> 

              </crs:CoordinateAxis> 

              <crs:CoordinateAxis> 

                <crs:axisDirection>east</crs:axisDirection> 

                <crs:AngularUnit> 

                  <crs:Identifier> 

                    <crs:code>9108</crs:code> 

                    <crs:codeSpace>EPSG</crs:codeSpace> 

                    <crs:edition>5.2</crs:edition> 

                  </crs:Identifier> 

                </crs:AngularUnit> 

              </crs:CoordinateAxis> 

            </crs:CartesianCoordinateSystem> 

            <crs:CoordinateReferenceSystem> 

              <!-- the reference system of that projected system is 

                         WGS84 which is EPSG 4326 in EPSG codeSpace --> 

              <crs:NameSet> 

                <crs:name>WGS 84</crs:name> 

              </crs:NameSet> 

              <crs:Identifier> 

background image

115 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

                <crs:code>4326</crs:code> 

                <crs:codeSpace>EPSG</crs:codeSpace> 

                <crs:edition>5.2</crs:edition> 

              </crs:Identifier> 

            </crs:CoordinateReferenceSystem> 

            <crs:CoordinateTransformationDefinition> 

              <crs:sourceDimensions>2</crs:sourceDimensions> 

              <crs:targetDimensions>2</crs:targetDimensions> 

              <crs:ParameterizedTransformation> 

                <crs:TransformationMethod> 

                  <!-- the projection is a Mercator projection which is 

                        EPSG 9805 in EPSG codeSpace --> 

                  <crs:NameSet> 

                    <crs:name>Mercator</crs:name> 

                  </crs:NameSet> 

                  <crs:Identifier> 

                    <crs:code>9805</crs:code> 

                    <crs:codeSpace>EPSG</crs:codeSpace> 

                    <crs:edition>5.2</crs:edition> 

                  </crs:Identifier> 

                  <crs:description>Mercator (2SP)</crs:description> 

                </crs:TransformationMethod> 

                <crs:Parameter> 

                  <crs:NameSet> 

                    <crs:name>Latitude of 1st standart parallel</crs:name> 

                  </crs:NameSet> 

                  <crs:Identifier> 

                    <crs:code>8823</crs:code> 

                    <crs:codeSpace>EPSG</crs:codeSpace> 

                    <crs:edition>5.2</crs:edition> 

                  </crs:Identifier> 

                  <crs:value>0</crs:value> 

                </crs:Parameter> 

                <crs:Parameter> 

                  <crs:NameSet> 

                    <crs:name>Longitude of natural origin</crs:name> 

                  </crs:NameSet> 

                  <crs:Identifier> 

                    <crs:code>8802</crs:code> 

background image

116 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

                    <crs:codeSpace>EPSG</crs:codeSpace> 

                    <crs:edition>5.2</crs:edition> 

                  </crs:Identifier> 

                  <crs:value>0</crs:value> 

                </crs:Parameter> 

                <crs:Parameter> 

                  <crs:NameSet> 

                    <crs:name>False Easting</crs:name> 

                  </crs:NameSet> 

                  <crs:Identifier> 

                    <crs:code>8806</crs:code>          

                    <crs:codeSpace>EPSG</crs:codeSpace> 

                    <crs:edition>5.2</crs:edition> 

                  </crs:Identifier> 

                  <crs:value>0</crs:value> 

                </crs:Parameter> 

                <crs:Parameter> 

                  <crs:NameSet> 

                    <crs:name>False Northing</crs:name> 

                  </crs:NameSet> 

                  <crs:Identifier> 

                    <crs:code>8807</crs:code> 

                    <crs:codeSpace>EPSG</crs:codeSpace> 

                    <crs:edition>5.2</crs:edition> 

                  </crs:Identifier> 

                  <crs:value>0</crs:value> 

                </crs:Parameter> 

              </crs:ParameterizedTransformation> 

            </crs:CoordinateTransformationDefinition> 

          </crs:ProjectedCRS> 

        </crs:CoordinateReferenceSystem> 

      </rdf:Description> 

    </rdf:RDF> 

  </metadata> 

  <!-- the actual map content --> 

</svg> 

background image

117 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

パス 

8.1 

概説 

パスは,フィル又はストロークすることができる図形の外形を表す(箇条11を参照)。 

パスは,現在の点の概念を用いて示される。紙の上に絵を描く場合に例えると,現在の点はペンの位置

として考えることができる。ペンの位置は変更することができ,ペンで直線又は曲線を描くことによって,

(開いた,又は閉じた)図形の外形を描くことができる。 

パスは,moveto(新しい現在の点を設定する。),lineto(直線を引く。),curveto(3次ベジェ曲線を用い

て曲線を描く。),及びclosepath(最後のmovetoまで線を描くことによって現在の図形を閉じる。)要素に

ついて定義されたオブジェクトの外形の幾何形状を表現する。複合パス(すなわち,複数のサブパスをも

つパス)によって,オブジェクトにおいて“ドーナツの穴”のような効果を与えることができる。 

この箇条8では,SVGのパスのための構文及びその振る舞いについて説明している。SVGのパスに関す

る様々な実装上の注意については,C.6を参照。 

SVGでは,パスは'path'要素を用いて定義する。 

8.2 

'path'要素 

スキーマ: path  

    <define name='path'> 

      <element name='path'> 

        <ref name='path.AT'/> 

        <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='path.AT' combine='interleave'> 

      <ref name='svg.ShapeCommon.attr'/> 

      <ref name='svg.D.attr'/> 

      <optional> 

        <attribute name='pathLength' svg:animatable='true' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

d = "<path-data>" 

図形の外形の定義。8.3を参照。属性値が空(d="")の場合,その要素の描画はできない。省略値は空の

文字列である。 

アニメーション:可(ただし,8.2.1に記載されている制限を参照。)。 

pathLength = "<number>" 

描かれるパスの利用者単位における長さ。この値は,利用者エージェント自体のパスに沿った距離の計

算を測定するために用いられる。利用者エージェントは,それ自体のパス全長の算出値に対する'pathLength'

background image

118 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

の比によって,全てのパスに沿った距離の計算をスケールする。'pathLength'は,モーションアニメーショ

ン及び様々なストローク操作の計算に潜在的な影響を与える。 

負の値はサポート外の値である。 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

8.2.1 

パスデータのアニメーション化 

アニメーション指定におけるそれぞれの正規化されたパスデータ指定が,正規化後の'd'属性と全く同じ

パスデータ命令のリストをもっているときに限り,補間されたパスデータのアニメーションが可能である。

このことは,各パスデータ指定及び'd'属性は,正規化されたときに全く同じ命令リストをもつことを意味

する(A.3.2で定義している。)。アニメーションが指定されたもののパスデータ命令のリストが同じではな

い場合,そのアニメーション指定はサポート外として無視される。アニメーションエンジンは,与えられ

たアニメーション要素の属性に基づき,各パスデータ命令に対して各パラメタを補間する。 

補間されない(すなわち,calcMode="discrete")パスデータアニメーションは常に可能である。 

8.3 

パスデータ 

8.3.1 

パスデータの概説 

パスは,'d'属性をもつ'path'要素を包含することによって定義される。その'd'属性は,moveto,lineto,curveto

(2次及び3次ベジェ曲線),及びclosepath命令をもつ。 

例08̲01.svgでは,三角形の図形による'path'を指定している(Mはmoveto,Lはlineto,及びzはclosepath

を示す。)。 

例: 08̲01.svg 

<?xml version="1.0"?> 

<svg width="4cm" height="4cm" viewBox="0 0 400 400" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <title>Example triangle01- simple example of a 'path'</title> 

  <desc>A path that draws a triangle</desc> 

  <rect x="1" y="1" width="398" height="398" 

        fill="none" stroke="blue" /> 

  <path d="M 100 100 L 300 100 L 200 300 z" 

        fill="red" stroke="blue" stroke-width="3" /> 

</svg> 

background image

119 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

パスデータには改行文字を入れることができ,複数行に分けてその読みやすさを向上させることができ

る。 

大半のSVGファイルは多量のパスデータによって占められるので,パスデータの構文は簡潔にされ,最

小のファイルサイズ及び効率的なダウンロードを可能にしている。パスデータのサイズを最小化するため

にSVGが実施している方法には次のようなものがある。 

• 

全ての命令は一文字で表現される(例 movetoはMと表現される。)。 

• 

余計な空白及びコンマのようなセパレータは排除することができる(例 'M 100 100 L 200 200'は不

必要な空白を含んでいるので,'M100 100L200 200'というように,よりコンパクトに表現することが

できる。)。 

• 

同じ命令が連続して複数回使用されるとき,後に続く命令における命令文字は排除することができ

る(例 'M 100 200 L 200 100 L -100 -200'における二番目の"L"を取り除き,'M 100 200 L 200 100 -100 

-200'を代わりに使うことができる。)。 

• 

全ての命令は相対的な利用が可能である(大文字は絶対座標,及び小文字は相対座標を意味する。)。 

• 

linetoの代替形式を用いて,水平線及び垂直線の特別な事例を最適化することができる(絶対及び

相対)。 

• 

curveの代替形式を用いて,現在の部分における幾つかの制御点を前の部分の制御点から自動的に決

定することができる特別な事例を最適化する。 

パスデータの構文は,接頭辞表記法(すなわち,命令の後にパラメタがくる。)である。認められている

小数点は,Unicode U+002E FULL STOP (".")文字(Unicodeでは,PERIOD,dot,又はdecimal pointとも呼

ばれる[UNICODE])だけであり,それ以外の区切り文字は一切認められない(例 ''13,000.56"はパスデー

タの数値として無効であり,その代わりに"13000.56"とする。)。 

相対的な命令については,全ての座標値は,その命令の開始時における現在の点に相対的なものとする。 

8.3.2〜8.3.7の表では,次のような表記法が使用されている。 

• 

(): パラメタのグループ 

• 

+: そのパラメタは一つ以上必要である。 

• 

大文字の命令(例 M)の後の座標は,絶対座標として扱われなければならない。 

• 

小文字の命令(例 m)の後の座標は,相対座標として扱われなければならない。 

8.3.2〜8.3.8には様々な命令を記載している。 

8.3.2 

"moveto"命令 

'moveto'命令(M又はm)は,新しい現在の点を確立する。それは,“ペン”が持ち上げられて,新しい

位置まで移動されたときのような効果を与える。パスデータ部分は(もし存在すれば),'moveto'命令で開

始しなければならない。その後に来る'moveto'命令は(すなわち,その'moveto'が最初の命令ではないとき),

background image

120 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

新しいサブパスの開始を表す。 

命令 

名前 

パラメタ 

説明 


(絶対) 

(相対) 

moveto 

(x y)+ 

与えられた(x,y)座標において新しいサブパスを開始する。それは与え
られた座標において新しい現在の点も確立する。相対'moveto'(m)が
その'path'の最初の要素として現れた場合,それは絶対座標の組として
扱われなければならない。'moveto'の後に複数の座標の組がある場合,
それら後続の組は暗黙的な'lineto'命令として扱われなければならない。 

8.3.3 

"closepath"命令 

直線は,現在の点から現在のサブパスの始点まで描画され,現在のサブパスを終わらせなければならな

い。'closepath'(Z又はz)の直後に他の命令が続いている場合,次のサブパスは現在のサブパスと同じ始

点から開始しなければならない。 

あるサブパスが'closepath'で終了する場合,'lineto'命令でサブパスを“手で”閉じる場合と比べると,

'stroke-linejoin'及び'stroke-linecap'の実装の方法における振る舞いが異なる。'closepath'を用いると,そのサブ

パスの最後の部分の終わりは,'stroke-linejoin'の現在値を使用してそのサブパスの最初の部分の始まりに

“接合される”。'lineto'命令によって“手で”そのサブパスを閉じると,最初の部分の始まり及び最後の部

分の終わりは接合されず,'stroke-linecap'の現在値を用いてそれぞれ形が整えられる。その命令の終わりに

おいて,新しい現在の点は現在のサブパスの始点に設定される。 

命令 

名前 

パラメタ 

説明 


又は 

closepath 

(none) 

現在のサブパスは,現在の点から現在のサブパスの始点まで直線を描
画することによって閉じられなければならない。現在のサブパスの始
点は新しい現在の点にならなければならない。Z及びz命令はパラメ
タを一切もたないので,それらは同じ効果である。 

8.3.4 

"lineto"命令 

様々な'lineto'命令によって,現在の点から新しい点まで直線が描画される。 

命令 

名前 

パラメタ 

説明 


(絶対) 

(相対) 

lineto 

(x y)+ 

現在の点から与えられた(x,y)座標まで直線を描画する。その(x,y)座標
は新しい現在の点になる。二つ以上の座標の組が指定された場合,折
れ線が描画されなければならない。その命令の終わりにおいて,新し
い現在の点は最後に提供された座標集合に設定されなければならな
い。 


(絶対) 

(相対) 

horizontal 
lineto 

x+ 

現在の点(cpx, cpy)から(x, cpy)まで水平線を描画する。二つ以上のx値
が指定されると,複数の水平線を描画しなければならない(通常これ
には意味がないが)。その命令の終わりでは,最後のx値による(x, cpy)
を新しい現在の点にしなければならない。 


(絶対) 

(相対) 

vertical 
lineto 

y+ 

現在の点(cpx, cpy)から(cpx, y)まで垂直線を描画する。二つ以上のy値
が指定されると,複数の垂直線を描画しなければならない(通常これ
には意味がないが)。その命令の終わりでは,最後のy値による(cpx, y)
を新しい現在の点にしなければならない。 

8.3.5 

曲線命令 

次のような命令によって,曲線を描画する。 

• 

3次ベジェ曲線命令(C,c,S及びs):3次ベジェ曲線の部分は,始点,終点及び二つの制御点に

よって定義される。 

background image

121 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

• 

2次ベジェ曲線命令(Q,q,T及びt):2次ベジェ曲線の部分は,始点,終点,及び一つの制御点

によって定義される。 

8.3.6 

3次ベジェ曲線命令 

3次ベジェ曲線命令は次のとおり。 

命令 

名前 

パラメタ 

説明 


(絶対) 

(相対) 

curveto 

(x1 y1 x2 y2 x y)+ 

3次ベジェ曲線は,その曲線の最初の制御点に(x1,y1),最後の制御
点に(x2,y2)を用いて,現在の点から(x,y)まで描画されなければなら
ない。複数の座標の組が指定された場合,ポリベジェ(polybézier)
が描画されなければならない。その命令の終わりでは,そのポリベ
ジェ(polybézier)で使われている最後の(x,y)座標を新しい現在の
点にしなければならない。 


(絶対) 

(相対) 

短縮形/
スムーズ 
curveto 

(x2 y2 x y)+ 

3次ベジェ曲線は,現在の点から(x,y)まで描画されなければならな
い。最初の制御点は,現在の点に相対的な前の命令における二番目
の制御点の鏡像とする(前の命令が存在しない場合,又は前の命令
がC,c,S又はsではない場合には,その最初の制御点は現在の点
と同じでなければならない。)。(x2,y2)は二番目の制御点(すなわち,
その曲線の終わりの制御点)でなければならない。複数の座標の組
が指定された場合,ポリベジェ(polybézier)が描画される。その
命令の終わりでは,そのポリベジェ(polybézier)で使われている
最後の(x,y)座標を新しい現在の点にしなければならない。 

例08̲02.svgには,'path'における3次ベジェ曲線命令の簡単な使用例が幾つか示されている。"S"命令に

おける制御点は,その"S"命令の始点に対する前の"C"命令における制御点の鏡像として自動的に計算され

ることに注意する。 

例: 08̲02.svg 

<?xml version="1.0"?> 

<svg width="5cm" height="4cm" viewBox="0 0 500 400" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <title>Example cubic01- cubic Bézier commands in path data</title> 

  <desc>Picture showing a simple example of path data 

        using both a "C" and an "S" command, 

        along with annotations showing the control points 

        and end points</desc> 

  <rect fill="none" stroke="blue" stroke-width="1" x="1" y="1" width="498" height="398" 

/> 

  <polyline fill="none" stroke="#888888" stroke-width="1" points="100,200 100,100" /> 

  <polyline fill="none" stroke="#888888" stroke-width="1" points="250,100 250,200" /> 

  <polyline fill="none" stroke="#888888" stroke-width="1" points="250,200 250,300" /> 

  <polyline fill="none" stroke="#888888" stroke-width="1" points="400,300 400,200" /> 

  <path fill="none" stroke="red" stroke-width="5" d="M100,200 C100,100 250,100 250,200 

                                       S400,300 400,200" /> 

  <circle fill="#888888" stroke="none" stroke-width="2" cx="100" cy="200" r="10" /> 

  <circle fill="#888888" stroke="none" stroke-width="2" cx="250" cy="200" r="10" /> 

background image

122 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <circle fill="#888888" stroke="none" stroke-width="2" cx="400" cy="200" r="10" /> 

  <circle fill="#888888" stroke="none" cx="100" cy="100" r="10" /> 

  <circle fill="#888888" stroke="none" cx="250" cy="100" r="10" /> 

  <circle fill="#888888" stroke="none" cx="400" cy="300" r="10" /> 

  <circle fill="none" stroke="blue" stroke-width="4" cx="250" cy="300" r="9" /> 

  <text font-size="22" font-family="Verdana" x="25" y="70">M100,200 C100,100 250,100 

250,200</text> 

  <text font-size="22" font-family="Verdana" x="325" y="350" 

        text-anchor="middle">S400,300 400,200</text> 

</svg> 

次の図では,3次ベジェ曲線がその制御点の位置によってどのように形を変えるのかを示している。最

初の五つの例は,3次ベジェ曲線による単一のパス部分である。右下の例では,"C"命令に続いて"S"命令

が使われている。 

この例をSVGで見る(SVG対応ブラウザだけ)。 

http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/images/paths/cubic02.svg 

background image

123 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

8.3.7 

2次ベジェ曲線命令 

2次ベジェ曲線命令は次のとおり。 

命令 

名前 

パラメタ 

説明 


(絶対) 

(相対) 

2次ベジ
ェ曲線 
curveto 

(x1 y1 x y)+ 

2次ベジェ曲線は,(x1,y1)を制御点として現在の点から(x,y)まで描画され
る。複数の座標の組が指定された場合,ポリベジェ(polybézier)が描画さ
れなければならない。その命令の終わりでは,そのポリベジェ(polybézier)
で使われている最後の(x,y)座標を新しい現在の点にしなければならない。 


(絶対) 

(相対) 

短縮形/
スムーズ 
2次ベジ
ェ曲線 
curveto 

(x y)+ 

2次ベジェ曲線は,現在の点から(x,y)まで描画される。その制御点は,現
在の点に相対的な前の命令における制御点の鏡像としなければならない
(前の命令が存在しない場合,又は前の命令がQ,q,T又はtではない場
合には,その制御点は現在の点にしなければならない。)。複数の座標の組
が指定された場合,ポリベジェ(polybézier)が描画される。その命令の終
わりでは,そのポリベジェ(polybézier)で使われている最後の(x,y)座標を
新しい現在の点にしなければならない。 

例08̲03.svgには,パスにおける2次ベジェ曲線命令の簡単な使用例が幾つか示されている。"T"命令に

おける制御点は,その"T"命令の始点に対する前の"Q"命令における制御点の鏡像として自動的に計算され

ることに注意する。 

例: 08̲03.svg 

<?xml version="1.0"?> 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  

  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg width="12cm" height="6cm" viewBox="0 0 1200 600" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <title>Example quad01 - quadratic Bezier commands in path data</title> 

  <desc>Picture showing a "Q" a "T" command, 

        along with annotations showing the control points 

        and end points</desc> 

  <rect x="1" y="1" width="1198" height="598" 

        fill="none" stroke="blue" stroke-width="1" /> 

  <path d="M200,300 Q400,50 600,300 T1000,300" 

        fill="none" stroke="red" stroke-width="5"  /> 

  <!-- End points --> 

  <g fill="black" > 

    <circle cx="200" cy="300" r="10"/> 

    <circle cx="600" cy="300" r="10"/> 

    <circle cx="1000" cy="300" r="10"/> 

  </g> 

  <!-- Control points and lines from end points to control points --> 

  <g fill="#888888" > 

    <circle cx="400" cy="50" r="10"/> 

    <circle cx="800" cy="550" r="10"/> 

background image

124 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  </g> 

  <path d="M200,300 L400,50 L600,300  

           L800,550 L1000,300" 

        fill="none" stroke="#888888" stroke-width="2" /> 

</svg> 

8.3.8 

パスデータのための文法 

パスデータのための文法に関する次の記述にはEBNFが利用されている[EBNF]。 

path-data ::= 

   wsp* moveto-drawto-command-groups? wsp* 

moveto-drawto-command-groups ::= 

   moveto-drawto-command-group 

   | moveto-drawto-command-group wsp* moveto-drawto-command-groups 

moveto-drawto-command-group ::= 

   moveto wsp* drawto-commands? 

drawto-commands ::= 

   drawto-command 

   | drawto-command wsp* drawto-commands 

drawto-command ::= 

   closepath 

   | lineto 

   | horizontal-lineto 

   | vertical-lineto 

   | curveto 

   | smooth-curveto 

   | quadratic-bezier-curveto 

   | smooth-quadratic-bezier-curveto 

moveto ::= 

   ( "M"  

   | "m" ) wsp* moveto-argument-sequence 

125 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

moveto-argument-sequence ::= 

   coordinate-pair 

   | coordinate-pair comma-wsp? lineto-argument-sequence 

closepath ::= 

   ("Z"  

   | "z") 

lineto ::= 

   ( "L"  

   | "l" ) wsp* lineto-argument-sequence 

lineto-argument-sequence ::= 

   coordinate-pair 

   | coordinate-pair comma-wsp? lineto-argument-sequence 

horizontal-lineto ::= 

   ( "H"  

   | "h" ) wsp* horizontal-lineto-argument-sequence 

horizontal-lineto-argument-sequence ::= 

   coordinate 

   | coordinate comma-wsp? horizontal-lineto-argument-sequence 

vertical-lineto ::= 

   ( "V"  

   | "v" ) wsp* vertical-lineto-argument-sequence 

vertical-lineto-argument-sequence ::= 

   coordinate 

   | coordinate comma-wsp? vertical-lineto-argument-sequence 

curveto ::= 

   ( "C"  

   | "c" ) wsp* curveto-argument-sequence 

curveto-argument-sequence ::= 

   curveto-argument 

   | curveto-argument comma-wsp? curveto-argument-sequence 

curveto-argument ::= 

   coordinate-pair comma-wsp? coordinate-pair comma-wsp? coordinate-pair 

smooth-curveto ::= 

   ( "S"  

   | "s" ) wsp* smooth-curveto-argument-sequence 

smooth-curveto-argument-sequence ::= 

   smooth-curveto-argument 

   | smooth-curveto-argument comma-wsp? smooth-curveto-argument-sequence 

smooth-curveto-argument ::= 

   coordinate-pair comma-wsp? coordinate-pair 

126 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

quadratic-bezier-curveto ::= 

   ( "Q"  

   | "q" ) wsp* quadratic-bezier-curveto-argument-sequence 

quadratic-bezier-curveto-argument-sequence ::= 

   quadratic-bezier-curveto-argument 

   | quadratic-bezier-curveto-argument comma-wsp? 

   quadratic-bezier-curveto-argument-sequence 

quadratic-bezier-curveto-argument ::= 

   coordinate-pair comma-wsp? coordinate-pair 

smooth-quadratic-bezier-curveto ::= 

   ( "T"  

   | "t" ) wsp* smooth-quadratic-bezier-curveto-argument-sequence 

smooth-quadratic-bezier-curveto-argument-sequence ::= 

   coordinate-pair 

   | coordinate-pair comma-wsp? smooth-quadratic-bezier-curveto-argument-sequence 

coordinate-pair ::= 

   coordinate comma-wsp? coordinate 

coordinate ::= 

   number 

nonnegative-number ::= 

   integer-constant 

   | floating-point-constant 

number ::= 

   sign? integer-constant 

   | sign? floating-point-constant 

flag ::= 

   "0"  

   | "1" 

comma-wsp ::= 

   (wsp+ comma? wsp*)  

   | (comma wsp*) 

comma ::= 

   "," 

integer-constant ::= 

   digit-sequence 

floating-point-constant ::= 

   fractional-constant exponent? 

   | digit-sequence exponent 

fractional-constant ::= 

   digit-sequence? "." digit-sequence 

127 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

   | digit-sequence "." 

exponent ::= 

   ( "e"  

   | "E" ) sign? digit-sequence 

sign ::= 

   "+"  

   | "-" 

digit-sequence ::= 

   digit 

   | digit digit-sequence 

digit ::= 

   "0"  

   | "1"  

   | "2"  

   | "3"  

   | "4"  

   | "5"  

   | "6"  

   | "7"  

   | "8"  

   | "9" 

wsp ::= 

   (#x20  

   | #x9  

   | #xD  

   | #xA) 

EBNFの処理においては,そのEBNFの生成規則(production)をできる限り使用し,その生成規則を満

たさない文字に遭遇した時点で停止しなければならない。したがって,文字列'M 100-200'では,"moveto"

のための最初の座標は文字列"100"を使用し,マイナス記号に遭遇して停止する。なぜならば,そのマイナ

ス記号は座標の生成において数値の後に来ることができないからである。結果として,最初の座標は"100",

及び二番目の座標は"-200"となる。 

同じように,文字列'M 0.6.5'では,"moveto"のための最初の座標は文字"0.6"を使用し,二つ目の小数点に

遭遇して停止する。なぜならば,座標の生成においては一つの小数点しか認められていないからである。

結果として,最初の座標は"0.6",及び二番目の座標は".5"となる。 

EBNFでは,パスの'd'属性が空であることが認められていることに注意する。これはエラーでないが,

そのパスの描画は無効になる。EBNFにマッチしない'd'の値は,サポート外として扱われる。 

8.4 

パスに沿った距離 

モーションアニメーション及びストローク操作のような様々な操作において,利用者エージェントは,

図形要素(例 'path')の幾何形状に沿った距離を計算することができなければならない。 

background image

128 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

簡便な概数の使用を認めて手書きによる文書作成を支援する目的によって,制作者は'pathLength'属性を

使用してパスの全長を計算することができる。これによって,利用者エージェントはそれ自体のパス全長

の算出値に対する'pathLength'の比によって,パスに沿った距離の計算をスケールすることができる。 

'path'要素における"moveto"操作は,長さ0と定義される。"lineto"及び"curveto"命令だけがパスの長さの

計算に影響を与える。 

基本図形 

9.1 

概説 

SVGには,次のような基本図形要素の集合が含まれている。 

• 

長方形(角を丸めたものも含む。)。'rect'要素で作成される。 

• 

円。'circle'要素で作成される。 

• 

だ(楕)円。'ellipse'要素で作成される。 

• 

直線。'line'要素で作成される。 

• 

折れ線。'polyline'要素で作成される。 

• 

ポリゴン。'polygon'要素で作成される。 

数学的には,これらの図形要素は,同じ図形を構成する'path'要素と同等である。基本図形には,ストロ

ーク及びフィルを実施してもよい。'path'要素に利用することができる全てのプロパティは,基本図形にも

適用される。 

9.2 

'rect'要素 

'rect'要素は,現在の利用者座標系の軸にそろ(揃)えられた長方形を定義する。属性'rx'及び'ry'に適切な

値を設定することによって,丸められた長方形を実現することもできる。 

スキーマ: rect  

    <define name='rect'> 

      <element name='rect'> 

        <ref name='rect.AT'/> 

        <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='rect.AT' combine='interleave'> 

      <ref name='svg.ShapeCommon.attr'/> 

      <ref name='svg.XYWH.attr'/> 

      <ref name='svg.RxRyCommon.attr'/> 

    </define> 

属性の定義: 

x = "<coordinate>" 

現在の利用者座標系における長方形について,x座標値が小さい方の辺のx座標。 

省略値:'0' 

アニメーション:可 

129 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

y = "<coordinate>" 

現在の利用者座標系における長方形について,y座標値が小さい方の辺のy座標。 

省略値:'0' 

アニメーション:可 

width = "<length>" 

その長方形の幅。負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'0' 

アニメーション:可 

height = "<length>" 

その長方形の高さ。負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'0' 

アニメーション:可 

rx = "<length>" 

長方形の角に丸みをつけるために使われるだ(楕)円のx軸半径。負の値はサポート外である。この属

性を指定しないと何が起こるのかに関しては,ナビゲーション属性の定義の次の段落を参照。 

アニメーション:可 

ry = "<length>" 

長方形の角に丸みをつけるために使われるだ(楕)円のy軸半径。負の値はサポート外である。この属

性を指定しないと何が起こるのかに関しては,ナビゲーション属性の定義の次の段落を参照。 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

適切な指定値が'rx'には提供され'ry'には提供されていないとき,利用者エージェントは,'ry'の有効値は'rx'

と同じものとしてその'rect'要素を処理する。適切な指定値が'ry'には提供され'rx'には提供されていないとき,

利用者エージェントは,'rx'の有効値は'ry'と同じものとしてその'rect'要素を処理する。適切な指定値が'rx'

又は'ry'のどちらにも提供されていないとき,利用者エージェントは,丸み付けが指定されていないものと

してその'rect'要素を処理する(結果として四角い角が生成される。)。'rx'がその長方形の半分の幅よりも大

きいとき,利用者エージェントは,その長方形の半分の幅を'rx'の有効値として'rect'要素を処理する。'ry'

がその長方形の半分の高さよりも大きいとき,利用者エージェントは,その長方形の半分の高さを'ry'の有

効値として'rect'要素を処理する。 

'rect'要素は,(角の丸み付けを考慮に入れて)次のような外形がその代わりに指定されたときと同じ描画

結果を与えなければならない。 

注記 まず全ての座標及び長さの値が利用者空間座標に変換される。7.11を参照。 

a) 位置(x+rx,y)に絶対moveto操作を実行する。ここに,x及びyは利用者空間に変換された'rect'要素の

'x'及び'y'属性の値であり,rx及びryは利用者空間に変換された'rx'及び'ry'属性の有効値である。 

b) 位置(x+width-rx,y)に絶対水平lineto操作を実行する。このwidthは,利用者空間に変換された'rect'

要素の'width'属性である。 

background image

130 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

c) 座標(x+width,y+ry)に絶対だ(楕)円arc操作を実行する。利用者空間に変換された'rect'要素の'rx'及

び'ry'属性の有効値は,それぞれ長半径及び短半径として利用される。x-axis-rotationは0,走査方向

は時計回りで,小さい方のアークの走査が選択される。 

d) 位置(x+width,y+height-ry)に絶対垂直lineto操作を実行する。このheightは,利用者空間に変換され

た'rect'要素の'height'属性である。 

e) 座標(x+width-rx,y+height)に絶対だ(楕)円arc操作を実行する。 

f) 

位置(x+rx,y+height)に絶対水平lineto操作を実行する。 

g) 座標(x,y+height-ry)に絶対だ(楕)円arc操作を実行する。 

h) 位置(x,y+ry)に絶対垂直lineto操作を実行する。 

i) 

座標(x+rx,y)に絶対だ(楕)円arc操作を実行する。 

j) 

元々のmoveto操作で指定された座標に対してclosepath(z)を実行する。 

'rx'及び'ry'属性が指定されていない場合,又は値0に設定された場合には,だ(楕)円arc命令は省くこ

とが望ましい。 

例09̲01.svgには,角がとが(尖)った長方形を示している。'rect'要素は黄色でフィルされ,ネービーブ

ルーでストロークされている。 

例: 09̲01.svg 

<?xml version="1.0"?> 

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Example rect01 - rectangle with sharp corners</desc> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="1198" height="398" 

        fill="none" stroke="blue" stroke-width="2"/> 

  <rect x="400" y="100" width="400" height="200" 

        fill="yellow" stroke="navy" stroke-width="10"  /> 

</svg> 

例09̲02には,二つの丸みをつけられた長方形が示されている。'rx'は,その長方形の角に丸みをつける

方法を指定している。'ry'属性には値が指定されていないので,'rx'属性と同じ値が割り当てられることに注

意する。 

例: 09̲02.svg 

<?xml version="1.0"?> 

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 

background image

131 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Example rect02 - rounded rectangles</desc> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="1198" height="398" 

        fill="none" stroke="blue" stroke-width="2"/> 

  <rect x="100" y="100" width="400" height="200" rx="50" 

        fill="green" /> 

  <g transform="translate(700 210) rotate(-30)"> 

    <rect x="0" y="0" width="400" height="200" rx="50" 

          fill="none" stroke="purple" stroke-width="30" /> 

  </g> 

</svg> 

9.3 

'circle'要素 

'circle'要素は,中心点及び半径に基づいて円を定義する。 

現在の利用者座標系において,ある円に対するストローク操作は,点(cx+r,cy)から開始され,次に点

(cx,cy+r),(cx-r,cy),(cx,cy-r)に適用され,最後に(cx+r,cy)に戻る。ストローク操作では,その始まりを終わ

りに接合することができる線分は一つだけである。 

スキーマ: circle  

    <define name='circle'> 

      <element name='circle'> 

        <ref name='circle.AT'/> 

        <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='circle.AT' combine='interleave'> 

      <ref name='svg.ShapeCommon.attr'/> 

      <ref name='svg.CxCy.attr'/> 

      <ref name='svg.R.attr'/> 

    </define> 

属性の定義: 

background image

132 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

cx = "<coordinate>" 

円の中心のx座標。省略値:'0' 

アニメーション:可 

cy = "<coordinate>" 

円の中心のy座標。省略値:'0' 

アニメーション:可 

r = "<length>" 

円の半径。負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'0' 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

例09̲03.svgには,赤いフィル及び青いストロークを適用される'circle'要素が示されている。 

例: 09̲03.svg 

<?xml version="1.0"?> 

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Example circle01 - circle filled with red and stroked with blue</desc> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="1198" height="398" 

        fill="none" stroke="blue" stroke-width="2"/> 

  <circle cx="600" cy="200" r="100" 

        fill="red" stroke="blue" stroke-width="10"  /> 

</svg> 

9.4 

'ellipse'要素 

'ellipse'要素は,中心点及び二つの半径に基づいて現在の利用者座標系の軸にそろ(揃)えられただ(楕)

円を定義する。 

現在の利用者座標系において,あるだ(楕)円に対するストローク操作は,点(cx+rx,cy)から開始され,

次に点(cx,cy+ry),(cx-rx,cy),(cx,cy-ry)に適用され,最後に(cx+rx,cy)に戻る。ストローク操作では,その始

background image

133 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

まりを終わりに接合することができる線分は一つだけである。 

スキーマ: ellipse  

    <define name='ellipse'> 

      <element name='ellipse'> 

        <ref name='ellipse.AT'/> 

        <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='ellipse.AT' combine='interleave'> 

      <ref name='svg.ShapeCommon.attr'/> 

      <ref name='svg.RxRyCommon.attr'/> 

      <ref name='svg.CxCy.attr'/> 

    </define> 

属性の定義: 

cx = "<coordinate>" 

だ(楕)円の中心のx座標。省略値:'0' 

アニメーション:可 

cy = "<coordinate>" 

だ(楕)円の中心のy座標。省略値:'0' 

アニメーション:可 

rx = "<length>" 

だ(楕)円のx軸半径。負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'0' 

アニメーション:可 

ry = "<length>" 

だ(楕)円のy軸半径。負の値はサポート外である。値が0の場合,その要素の描画はできない。 

省略値:'0' 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

例09̲04.svgでは,'svg'要素の'viewBox'属性,並びに'g'及び'ellipse'要素の'transform'属性によって確立され

た利用者座標系における二つのだ(楕)円の座標が指定されている。どちらのだ(楕)円も,'cx'及び'cy'

属性[だ(楕)円の中心]のための省略値0を使用している。二つ目のだ(楕)円は回転している。 

例: 09̲04.svg 

<?xml version="1.0"?> 

background image

134 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Example ellipse01 - examples of ellipses</desc> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="1198" height="398" 

        fill="none" stroke="blue" stroke-width="2" /> 

  <g transform="translate(300 200)"> 

    <ellipse rx="250" ry="100" 

          fill="red"  /> 

  </g> 

  <ellipse transform="translate(900 200) rotate(-30)"  

        rx="250" ry="100" 

        fill="none" stroke="blue" stroke-width="20"  /> 

</svg> 

9.5 

'line'要素 

'line'要素は,ある点から始まりまた別の点で終わる線分を定義する。 

スキーマ: line  

    <define name='line'> 

      <element name='line'> 

        <ref name='line.AT'/> 

        <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='line.AT' combine='interleave'> 

      <ref name='svg.ShapeCommon.attr'/> 

      <ref name='svg.X12Y12.attr'/> 

    </define> 

属性の定義: 

x1 = "<coordinate>" 

線分の始点のx座標。省略値:'0' 

background image

135 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

アニメーション:可 

y1 = "<coordinate>" 

線分の始点のy座標。省略値:'0' 

アニメーション:可 

x2 = "<coordinate>" 

線分の終点のx座標。省略値:'0' 

アニメーション:可 

y2 = "<coordinate>" 

線分の終点のy座標。省略値:'0' 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

'line'要素は,次のようなパスがその代わりに指定されたときと同じような描画結果を与えなければなら

ない。 

注記 まず全ての座標及び長さの値が利用者空間座標に変換される。7.11を参照。 

a) 絶対位置(x1,y1)に絶対moveto操作を実行する。x1及びy1は,それぞれ利用者空間に変換された'line'

要素の'x1'及び'y1'属性の値である。 

b) 絶対位置(x2,y2)に絶対lineto操作を実行する。x2及びy2は,それぞれ利用者空間に変換された'line'

要素の'x2'及び'y2'属性の値である。 

'line'要素は単一の直線であり幾何学的に一次元なので,それには内部がない。したがって,'line'要素は

決してフィルされない(11.3を参照)。 

例09̲05.svgでは,'svg'要素の'viewBox'属性によって確立された利用者座標系における五つの線分の座標

が指定されている。これらの線分は異なった太さをもっている。 

例: 09̲05.svg 

<?xml version="1.0"?> 

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Example line01 - lines expressed in user coordinates</desc> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="1198" height="398" 

        fill="none" stroke="blue" stroke-width="2" /> 

  <g stroke="green" > 

    <line x1="100" y1="300" x2="300" y2="100" 

            stroke-width="5"  /> 

    <line x1="300" y1="300" x2="500" y2="100" 

            stroke-width="10"  /> 

background image

136 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    <line x1="500" y1="300" x2="700" y2="100" 

            stroke-width="15"  /> 

    <line x1="700" y1="300" x2="900" y2="100" 

            stroke-width="20"  /> 

    <line x1="900" y1="300" x2="1100" y2="100" 

            stroke-width="25"  /> 

  </g> 

</svg> 

9.6 

'polyline'要素 

'polyline'要素は,互いに接続される線分の集合を定義する。通常'polyline'要素は開いた図形を定義する。 

スキーマ: polyline  

    <define name='polyline'> 

      <element name='polyline'> 

        <ref name='polyCommon.AT'/> 

        <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='polyCommon.AT' combine='interleave'> 

      <ref name='svg.ShapeCommon.attr'/> 

      <optional> 

        <attribute name='points' svg:animatable='true' svg:inheritable='false'> 

          <ref name='Points.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

points = "<points-data>" 

折れ線を形作る複数の点。全ての座標値は利用者座標系にある。 

属性値が空(points="")の場合,その要素の描画はできない。省略値は空の文字列である。 

アニメーション:可 

background image

137 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

奇数個の座標が与えられた場合は,その属性が指定されていないときと同じようにその要素は処理され

る。 

'polyline'要素は,次のようなパスがその代わりに指定されたときと同じような描画結果を与えなければ

ならない。 

a) 点のリストにおける最初の座標の組に対して絶対moveto操作を実行する。 

b) 後に続く各座標の組については,その座標の組に絶対lineto操作を実行する。 

例09̲06.svgでは,'svg'要素の'viewBox'属性によって確立された利用者座標系における折れ線が指定され

ている。 

例: 09̲06.svg 

<?xml version="1.0"?> 

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Example polyline01 - increasingly larger bars</desc> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="1198" height="398" 

        fill="none" stroke="blue" stroke-width="2" /> 

  <polyline fill="none" stroke="blue" stroke-width="10"  

            points="50,375 

                    150,375 150,325 250,325 250,375 

                    350,375 350,250 450,250 450,375 

                    550,375 550,175 650,175 650,375 

                    750,375 750,100 850,100 850,375 

                    950,375 950,25 1050,25 1050,375 

                    1150,375" /> 

</svg> 

9.7 

'polygon'要素 

'polygon'要素は,互いに接続された線分の集合から構成される閉じた図形を定義する。 

background image

138 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

スキーマ: polygon  

    <define name='polygon'> 

      <element name='polygon'> 

        <ref name='polyCommon.AT'/> 

        <zeroOrMore><ref name='shapeCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

属性の定義: 

points = "<points-data>" 

ポリゴンを形作る複数の点。全ての座標値は利用者座標系にある。 

属性値が空(points="")の場合,その要素の描画はできない。省略値:空の文字列 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

'points'属性に奇数個の座標が与えられた場合は,それはサポート外の値として扱われる。 

'polygon'要素は,次のようなパスがその代わりに指定されたときと同じような描画結果を与えなければ

ならない。 

a) 点のリストにおける最初の座標の組に対して絶対moveto操作を実行する。 

b) 後に続く各座標の組については,その座標の組に絶対lineto操作を実行する。 

c) closepath命令を実行する。 

例09̲07.svgでは,'svg'要素の'viewBox'属性によって確立された利用者座標系における二つのポリゴン

(星形及び六角形)が指定されている。 

例: 09̲07.svg 

<?xml version="1.0"?> 

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Example polygon01 - star and hexagon</desc> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="1198" height="398" 

        fill="none" stroke="blue" stroke-width="2" /> 

  <polygon fill="red" stroke="blue" stroke-width="10"  

            points="350,75  379,161 469,161 397,215 

                    423,301 350,250 277,301 303,215 

                    231,161 321,161" /> 

  <polygon fill="lime" stroke="blue" stroke-width="10"  

background image

139 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

            points="850,75  958,137.5 958,262.5 

                    850,325 742,262.6 742,137.5" /> 

</svg> 

9.7.1 

'polyline'及び'polygon'要素における点指定のための文法 

次は'polyline'及び'polygon'要素における<points-data>値のためのEBNF文法である[EBNF]。 

points-data: 

   wsp* coordinate-pairs? wsp* 

coordinate-pairs: 

   coordinate-pair 

   | coordinate-pair comma-wsp coordinate-pairs 

coordinate-pair: 

   coordinate comma-wsp coordinate 

coordinate: 

   number 

number: 

   sign? integer-constant 

   | sign? floating-point-constant 

comma-wsp: 

   (wsp+ comma? wsp*)  

   | (comma wsp*) 

comma: 

   "," 

integer-constant: 

   digit-sequence 

floating-point-constant: 

   fractional-constant exponent? 

   | digit-sequence exponent 

fractional-constant: 

   digit-sequence? "." digit-sequence 

   | digit-sequence "." 

exponent: 

   ( "e"  

140 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

   | "E" ) sign? digit-sequence 

sign: 

   "+"  

   | "-" 

digit-sequence: 

   digit 

   | digit digit-sequence 

digit: 

   "0"  

   | "1"  

   | "2"  

   | "3"  

   | "4"  

   | "5"  

   | "6"  

   | "7"  

   | "8"  

   | "9" 

wsp: 

   (#x20  

   | #x9  

   | #xD  

   | #xA)+ 

10 テキスト 

10.1 概説 

SVG文書片の一部として描画されるテキストは,テキスト内容ブロック要素を用いて指定される。描か

れるべき文字は,その要素の中にXML内容として表現される。 

SVGのテキスト内容ブロック要素は,他の図形要素と同じように描画される。したがって,座標系変換

及び塗りの機能は,それらをパス又は長方形のような図形に適用するときと同じように,テキスト要素に

適用される。 

各'text'要素は,テキストの単一の文字列を描画する。'text'要素は,自動の改行又は単語送りを行わない。

複数行のテキストによる効果を出すためには,次のような方法のうちの一つを使用する。 

• 

'textArea'要素を用いて,テキストを流し込む長方形領域を指定する。 

• 

改行を事前計算(これは制作者又は制作者用ツールによって実施することができる。)して,各'text'

要素を用いることによってマニュアルでテキスト行を設置する。 

注記 この方法はアクセシビリティの観点から推奨できない。 

• 

'foreignObject'要素の中で行内に埋め込まれたXHTML [XHTML] のような別のXML名前空間への描

画によって,そのテキストを表現する。 

注記 現在のところ,この手法の正確な意味は完全に定義されているというわけではない。 

141 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'text'要素の中のテキスト文字列は一直線上に描画されなければならない。SVGは,直線テキストのため

に次の国際的なテキスト処理機能をサポートしている。 

• 

左から右,又は双方向のテキスト(すなわち,アラビア語又はヘブライ語などのような右から左及

び左から右の方向のテキストを混ぜる言語) 

• 

SVGフォントを使用する場合,アラビア語及びハン語のテキストの現在の形式に対応する正しい字

形の自動選択 

直線テキストのレイアウト規則については,10.6に示されている。 

SVGテキストはXML内容として包含されるので,次が守られなければならない。 

• 

SVG内容のテキストデータは,視覚障害者が容易にアクセスできなければならない(附属書Fを参

照)。 

• 

利用者の閲覧時の多くのシナリオにおいて,利用者はテキスト文字列を検索・選択し,システムの

クリップボードにそのテキスト文字列をコピーすることができる(10.13及び10.14を参照)。 

• 

XMLに適合したウェブ検索エンジンは,他のXML文書でテキスト文字列を見つけるために必要と

される以上の努力をする必要なく,SVG内容のテキスト文字列を見つけることができる。 

利用者の選択した言語に基づき複数のテキスト文字列を入れ替えることによって,多言語SVG内容を作

ることが可能である。 

アクセシビリティを高めるために,文書におけるテキストには,その機能を示す適切な意味論のマーク

付けが含まれていることが望ましい。この詳細については,附属書Fを参照。 

10.2 文字及びそれらに対応する字形 

XML [XML10,XML11] では,テキストの内容はXML文字のシーケンスによって定義される。そこで

は,各文字が特定のUnicode区点位置 [UNICODE] によって定義される。その一方で,フォントは字形の

集合及びその他の関連情報(フォントテーブルなど)から構成される。字形とは,一つ以上の文字(文字

の一部である場合もある。)を表現するための形式である。それぞれの字形は,ある種の識別子(文字列の

場合もあれば数値の場合もある。)及びその字形の描画に関する描画指示から構成される。 

多くの場合,Unicode文字(つまり,Unicode区点位置)は,フォントにおける字形に対して一対一でマ

ッピングされる。例えば,ラテン語(このラテン語という用語は,ラテン語に類似しそこから派生したア

ルファベットをもつ英語のようなヨーロッパ言語で使用される。)向けに設計されたフォントでは,各標準

ASCII文字(すなわち,A〜Z,a〜z,0〜9,及びASCIIの様々な句読文字)に対する単一の字形が通常含

まれている。したがって,一般的には,"XML"という文字列(三つのUnicode文字から構成される)は,

"X","M",及び"L"にそれぞれ対応する三つの字形によって描画される。 

しかしながら,Unicode文字が字形に対して厳密に一対一でマッピングされない場合も多々ある。一対

一のマッピングにならない場合を幾つか示す。 

• 

合字 ― 植字を最も見栄えよくするために,しばしば複数の文字の特定のシーケンスを単一の字

形として描画することが望ましい。"office"という単語を例に挙げる。多くのフォントが合字"ffi"を

定義する。"office"という単語を描画する場合,利用者エージェントは,異なる字形(すなわち,"f",

"f",及び"i")を三文字別々に描画するのではなく,合字"ffi"のための字形を描画することがある。

したがって,合字では,複数のUnicode文字が単一の字形にマップされる。様々な言語を適切に描

画するために,合字はある種の文字の組合せにとって必要であり,省略できる印刷機能ではないこ

とに注意する。このことは,例えば南アジア及び東南アジアにおけるほとんどの言語についていえ

ることである。 

142 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

• 

合成文字 ― 多くの場合,発音区別符のような一般的に使用される装飾は,一度特定の字形とし

てフォントで保存され,それから他の一つ以上の字形と一緒に構成されて目的の文字が形作られる。

例えば,あるフォントエンジンが文字éを描画する場合,最初にeの字形を描画し,次に´(アク

セント記号)の字形を描画して,そのアクセント記号がeの上にくるようにすることができる。こ

の場合,単一のUnicode文字が複数の字形にマップされている。 

• 

文脈に依存する字形の配置 ― 多くの筆記体では,特定の文字(特に発音区別符)の字形の正確

な配置は,その視覚的な文脈によって異なる。例えば,タイ語の声調記号はベース子音の上に描画

されるが,母音のサインもそのベース子音の上に出現する場合には,更に上に移動させる必要があ

る。メモリの中では同じ文字が使用されているが,字形の最終的な配置は,その文脈に依存してい

る。 

• 

文字字形の複合配置 ― インドの言語で使用されるような筆記体では,メモリのベース子音の後

に出現する結合した母音文字は,そのベース子音の左,又はそのベース子音の両側に表示してもよ

い(すなわち,描画されたテキストの一番左の字形がテキスト要素の先頭の文字ではないことがあ

る。)。実際のところ,そのような母音文字は,連続子音の左,又は両側に描画してもよく,その連

続子音はメモリ内では前にある文字で終わる。一方,ヒンディー語のRA文字では,メモリにおけ

る連続子音の最初の文字を,次の連続音節の右にある母音記号の上に表示してもよい。これらの筆

記体において字形が表示される左右の位置は,メモリ内の文字の順序とは大きく異なる可能性があ

る。 

• 

字形の入替え ― 多くの印刷システムは,テキスト内容の性質を調べ,異なった環境では異なっ

た字形を使用している。例えばアラビア語では,同じUnicode文字が四つの異なる字形のいずれか

によって描画されることがある。これは,草書体による文字列の最初,中,及び最後のうちどこに

その文字が出現するのかというようなことに依存する。行内の進行方向(例 水平対垂直)に依存

する句読文字にも異なる字形が使用される可能性がある。このような場合,単一のUnicode文字が

複数の字形のいずれかにマップされる可能性がある。 

• 

多くの言語では,特定の文字列が複数の字形に変換され,特定の文字のある部分が一つの字形に存

在し,その文字の残りの部分がまた別の字形に存在する。 

多くの場合,文字から字形へのマッピングアルゴリズムはシステム依存であり,テキストの描画をまた

別の利用者環境で見ると(通常僅かに)異なって見える可能性がある。SVG内容制作者が正確なフォント

及び字形を選ぶ必要がある場合には,その必要なフォント(与えられた文書に必要な字形だけを含むよう

潜在的に部分集合化される。)が,SVG内容に埋め込まれたSVGフォントとして,又は,SVG内容と同じ

ウェブ位置にあるウェブフォントとして利用できるようにするのがよい。 

この箇条10をとおして,文字(character)という用語の定義は,XML [XML11] の定義と同じものとす

る。 

10.3 フォント,フォントテーブル,及びベースライン 

フォントは,字形の集合と,それらの字形を使用して文字を媒体上に表示するために必要な情報(フォ

ントテーブル)とから構成される。この字形集合とフォントテーブルとの組合せは,フォントデータと呼

ばれる。フォントテーブルは,文字を字形へマップし,字形領域のサイズを決定し及び字形領域を配置す

るために必要な情報をもっている。それぞれのフォントテーブルは,'font-weight'及び'font-style'のような一

つ以上のフォント特性から構成される。 

幾何学フォントの特性は,EMボックスに基づく座標系で表現される[このEMとは,フォントにおけ

143 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

る字形の高さの相対的測定である。CSS2 em square([CSS2]の15.4.3)を参照]。高さ1 EM及び幅1 EMの

ボックスは,デザイン空間と呼ばれる。EMをunits-per-em([CSS2]の15.3.4)に細分化することによって,

幾何座標がこの空間に与えられる。 

注記1 units-per-emは,フォント特性である。units-per-emの一般的な値は,1 000又は2 048である。 

EMボックスの座標空間は,デザイン空間座標系と呼ばれる。拡大縮小可能なフォントにおいて字形を

描くために使われる曲線及び直線は,この座標系を使用して表現される。 

注記2 この座標系の(0,0)点は通常EMボックスの左端に置かれるが,左下隅には置かれない。通常,

ローマン体大文字の下部のY座標は0である。そして,ローマン体小文字のディセンダ

(descender)は,負の座標値をもつ。 

SVGでは,フォントテーブルが少なくとも三つのフォント特性を提供することが想定されている。アセ

ント,ディセント及びベースラインテーブルの組である。アセントとは,フォントの点(0,0)からEMボッ

クス上部までの距離である。ディセントとは,フォントの点(0,0)からEMボックス下部までの距離である。

ベースラインテーブルについてはこの10.3の下の方で示されている。 

注記3 OpenTypeフォントでは,横書きモードのとき,アセント及びディセントは,OS/2テーブル

におけるsTypoAscender及びsTypoDescenderエントリによって与えられる。縦書きモードの

とき,ディセント[この場合点(0.0)から字形左端までの距離]は通常0である。なぜならば,

その点(0.0)は左端にあるからである。縦書きモードのときのアセントは,1 emとなるか,又

は,縦書きモードのOpenTypeベーステーブルにおける表意文字の上部のベースライン値に

よって指定される。 

横書きモードのときには,特定のスクリプトの字形が置かれ,各字形の特定の点(整列点)は,そのス

クリプトにおける他の字形の整列点にそろ(揃)えられる。異なるスクリプト(例 西洋,北インド,極

東のスクリプト)の字形は,通常字形の異なる点においてそろ(揃)えられる。例えば,西洋の字形は大

文字の下部でそろ(揃)えられる。北インドの字形は字形の上部の近くの水平なストロークの上部でそろ

(揃)えられる。また,極東地域の字形は,字形の下部又は中央部のどちらかでそろ(揃)えられる。ス

クリプト及び単一のフォントサイズのテキスト行で,整列点のシーケンスは,行内の進行方向において,

ベースラインと呼ばれる幾何直線を定義する。西洋又は他のほとんどの地域のアルファベット及び音節の

字形は,“アルファベットの”ベースラインにそろ(揃)えられ,北インドの字形は“ぶら下がった”ベー

スラインにそろ(揃)えられ,極東の字形は“表意文字の”ベースラインにそろ(揃)えられる。 

ベースラインテーブルは,デザイン空間座標系における一つ以上のベースラインの位置を指定する。ベ

ースラインテーブルの機能は,異なるスクリプトが同じテキスト行に混在するときに,それらが容易に互

いに対して整列できるようにすることである。求められる相対的な整列は,どのスクリプトがその行(又

はブロック)において優位なのかに依存することがあるので,各スクリプトに対して別々のベースライン

テーブルが存在してもよい。加えて,横書きモード及び縦書きモードについて,それぞれ別の整列位置が

必要である。したがって,そのフォントはベースラインテーブルの組を保持してもよい。一般的には,横

書きモードについては1以上,縦書きモードについては0以上である。 

注記4 フォントによっては,ベースラインテーブルのための値をもっていないこともある。フォン

トがベースラインテーブルを提供していない場合には,経験則を用いてベースラインテーブ

ルを近似することが望ましい。 

その他にSVGが前提としていることとして,あるフォントのためのフォントデータの各字形には,横書

きモードのための整列点,幅の値,及び整列ベースラインがあるということがある(縦書きモードはこの

background image

144 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

規格ではサポートされていない。)。 

また,上で必要とされるフォント特性に加え,フォントは置換及び位置決めテーブルを提供してもよい。

この置換及び位置決めテーブルを用いて,フォーマッタ(formatter)は一つ以上の合成字形を作るために

字形のシーケンスを再整理し,結合し,位置決めをすることができる。その組合せは,合字と同じくらい

単純であってもよいし,複数の子音及び母音の字形を結合する(また,通常多少の再整理も実施する。)イ

ンドの音節と同じくらい複雑であってもよい。 

10.4 'text'要素 

'text'要素は,テキストから構成される図形要素を定義する。'text'要素の中のXML内容は,関連属性,プ

ロパティ及びフォント自体における文字から字形へのマッピングテーブルとともに,描画される字形を定

義する(10.2を参照)。'text'要素の属性及びプロパティは,記述方向,フォント仕様,塗り属性などを示す

ことによって,文字が実際にどのように描画されるのかを記述する。この10.4の以降の段落では,関連す

るテキスト特有の属性及びプロパティについて(特にテキストレイアウト及び双方向性について)説明し

ている。 

'text'要素は他の図形要素と同じ描画手法によって描画されるので,パス及び長方形のような図形に適用

されるものと同じ座標系変換及び塗りの機能が'text'要素にも適用される。 

テキストは他の図形オブジェクトと同じように振る舞うので,グラデーションをテキストに適用するこ

とができる。この機能がテキストに適用されると,オブジェクト包含ボックスユニットが全ての事例にお

ける'text'要素全体について計算される。同じ'text'要素内の異なる'tspan'要素に異なる効果が適用された場合

でも同じように計算される。 

'text'要素は,最初のテキスト現在位置にあるその一番目の字形(双方向の再整理の後で)を描画する。

このテキスト位置は'text'要素の'x'属性及び'y'属性によって確立される('text-anchor'プロパティの値によって

調整が加えられる場合もある。)。与えられた文字に対応する字形が描画された後,テキスト現在位置は次

の字形のために更新される。最も単純な場合,新しいテキスト現在位置は,前のテキスト現在位置に字形

の送り値を加えた位置である。字形の位置決め及び字形の送りについては,10.6を参照。 

スキーマ: text  

    <define name='text'> 

      <element name='text'> 

        <ref name='text.AT'/> 

        <zeroOrMore><ref name='svg.TextCommon.group'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='text.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.Editable.attr'/> 

      <ref name='svg.Focus.attr'/> 

background image

145 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <ref name='svg.Transform.attr'/> 

      <optional> 

        <attribute name='x' svg:animatable='true' svg:inheritable='false'> 

          <ref name='Coordinates.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='y' svg:animatable='true' svg:inheritable='false'> 

          <ref name='Coordinates.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='rotate' svg:animatable='true' svg:inheritable='false'> 

          <ref name='Numbers.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

x = "<list-of-coordinates>" 

一つの<coordinate>が提供された場合,その値はテキスト現在位置の新しいXの絶対座標を表す。これ

は,この要素又はその子孫のいずれかにおける先頭の文字に対応する字形を描画するために使われる。 

n <coordinate>のコンマ又は空白で区切られたリストが提供された場合,その値はテキスト現在位置の新

しいXの絶対座標を表す。これは,この要素又はその子孫のいずれかにおける先頭のn文字にそれぞれ対

応する字形を描画するために使われる。 

文字よりも多い<coordinate>が提供されている場合,付加的な<coordinate>は無視しなければならない。 

<coordinate>よりも多い文字が提供されている場合,それぞれの付加的な文字に対し,通常テキストレイ

アウト処理(10.6で説明している。)を実施しなければならない。 

この属性には少なくとも一つの<coordinate>値を指定しなければならない。 

省略値:'0' 

アニメーション:可 

y = "<list-of-coordinates>" 

この要素の文字に対応する字形のための絶対Y座標のリスト。'y'属性の処理規則は,'x'属性の処理規則

に沿ったものである。 

この属性には少なくとも一つの<coordinate>値を指定しなければならない。 

省略値:'0' 

アニメーション:可 

editable = "none" | simple" 

この属性は,テキストを編集することができるかどうかを示す。10.12.1を参照。 

アニメーション:可 

background image

146 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

rotate = "<list-of-numbers>" 

この属性は,この要素の中の文字に対応する字形に適用しなければならない整列点の周りの補足的な回

転を示す。次の規則に従う。 

コンマ又は空白で区切られた<number>のリストを提供しなければならない。最初の<number>は,この要

素又はその子孫のいずれかにおける先頭の文字に対応する字形に適用しなければならない補足的な回転を

指定し,二番目の<number>は,二番目の文字に対応する字形に適用しなければならない補足的な回転を指

定する(というように続く。)。 

文字よりも多い<number>が提供されている場合,付加的な<number>は無視しなければならない。 

<number>よりも多い文字が提供されている場合,それぞれの付加的な文字に対し,最後の数で指定した

回転値を使用しなければならない。 

複数の文字が一つの字形にマップされるとき,合字の先頭文字に指定された回転をその字形に適用する

のがよい。その他の文字のための回転は無視するのがよい。 

この属性には少なくとも一つの<number>値を指定しなければならない。 

この補足的な回転は,字形としてのテキスト現在位置の描画規則に対して一切影響を与えてはならない。 

アニメーション:可(非加法的,'set'要素及び'animate'要素だけ) 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

Navigation Attributes 

13.13.2を参照。 

次の例10̲01.svgは"Hello, out there"という文字列を含む。それは,青でフィルされる字形をもつVerdana

フォントファミリーを用いてキャンバスに描画される。 

例: 10̲01.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="10cm" height="3cm" viewBox="0 0 1000 300"> 

  <desc>Example text01 - 'Hello, out there' in blue</desc> 

  <text x="250" y="150"  

        font-family="Verdana" font-size="55" fill="blue"> 

    Hello, out there 

  </text> 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="998" height="298" 

        fill="none" stroke="blue" stroke-width="2"/> 

</svg> 

background image

147 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

10.5 'tspan'要素 

テキスト内容ブロック要素では,'tspan'要素を含むことによって,図形及びフォントプロパティを調整す

ることができる。 

スキーマ: tspan  

    <define name='tspan'> 

      <element name='tspan'> 

        <ref name='tspan.AT'/> 

        <zeroOrMore><ref name='svg.TextCommon.group'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='tspan.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.Focus.attr'/> 

    </define> 

'tspan'要素の基本的な使い方を次の例に示す。 

例10̲03.svgでは,'tspan'要素を用いて,単語"not"がボールド体で赤くフィルされることを示している。 

例: 10̲03.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="10cm" height="3cm" viewBox="0 0 1000 300"> 

  <desc>Example tspan01 - using tspan to change visual attributes</desc> 

  <g font-family="Verdana" font-size="45"> 

    <text x="200" y="150" fill="blue"> 

      You are 

        <tspan font-weight="bold" fill="red" >not</tspan> 

      a banana. 

    </text> 

  </g> 

background image

148 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <!-- Show outline of canvas using 'rect' element --> 

  <rect x="1" y="1" width="998" height="298" 

        fill="none" stroke="blue" stroke-width="2"/> 

</svg> 

テキスト内容ブロック要素では,'tspan'要素を含むことによって,図形及びフォントプロパティを調整す

ることができる。この規格では,'x','y',及び'rotate'のような位置属性を'tspan'要素で利用することはでき

ない。 

属性の定義: 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

Navigation Attributes 

13.13.2を参照。 

10.6 テキストレイアウト 

10.6.1 テキストレイアウトの概説 

この10.6では,SVGがサポートしているテキストレイアウト機能について説明する。テキストレイアウ

トは一般的で方向に関し中立的な方法で記述され,左から右の方向(例 ラテン語のスクリプト),双方向

(例 ヘブライ語,アラビア語),及び垂直方向(例 アジア圏のスクリプト)に適用されるレイアウト情

報に一つの参照点を提供する。縦書きはこの規格ではサポートされていない。この10.6の説明では,直線

テキスト(すなわち,現在の利用者座標系について厳密に水平又は垂直に置かれるテキスト)であること

を前提としている。 

それぞれのテキスト内容ブロック要素について,SVG利用者エージェントは,現在の参照方向を決定す

る。この参照方向とは,現在の利用者座標系においてY軸方向に負の無限大のベクトルである。 

注記 初期座標系では,参照方向は上向きである。 

その参照方向に基づいて,SVG利用者エージェントは現在の行内進行方向を決定する。左から右に書か

れるテキストについては,行内進行方向は,参照方向のベクトルから時計回りに90度の方向を指す。右か

ら左に書かれるテキストについては,行内進行方向は,参照方向のベクトルから反時計回りに90度の方向

を指す。 

その参照方向に基づいて,SVG利用者エージェントは現在のブロック進行方向を決定する。左から右,

及び右から左に書かれるテキストについて,ブロック進行方向は参照方向のベクトルから180度の方向を

指す。なぜならば,利用できる横書きモードはlr-tb及びrl-tbだけだからである。 

与えられたテキスト内容ブロック要素の処理の場合,SVG利用者エージェントはテキスト現在位置の経

149 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

過を追っている。最初のテキスト現在位置は,テキスト内容ブロック要素の'x'属性及び'y'属性によって確

立される。 

テキスト現在位置は,各字形の後に(次の字形を描画する。)新しいテキスト現在位置を確立するように

調整される。テキスト現在位置の調整は,現在の行内進行方向,描画したばかりの字形の字形方向に対応

する字形特有の送り値,そのフォントのカーニング表及び様々な属性及びプロパティ(テキスト内容ブロ

ック要素の全ての'x'属性,'y'属性及びスペーシングプロパティ(spacing property)の現在値に基づいている。

その字形が現在の字形方向に対応する明確な送り値を提供していない場合には,適切に近似を行うことが

望ましい。垂直に置かれるテキストについては,その字形のアセント値(ascent value)とディセント値

(descent value)との合計に近似することが望ましい。水平及び垂直に置かれるテキストのための送り値を

近似するまた別の方法として,emのサイズを用いることもできる(17.8.2を参照)。 

各字形を描画する場合,SVG利用者エージェントは,テキスト現在位置にちょうど置かれる字形の適切

な整列点を決定する。その整列点は,その字形自体における字形セル配置量,現在の行内進行方向,及び,

その行内進行方向に関する字形方向に基づいて決定されている。ほとんどのラテン語のテキストの場合,

字形における整列点は,字形セルの左端(又は,左側の原点を示すその他の字形特有のx軸座標)と,そ

の字形のラテン語のベースラインとが交差する点となる。上下に垂直に置かれるテキストレイアウトでは,

多くの場合,その参照点は,そのフォントの垂直なベースラインの集合に基づく字形特有の原点,又はト

ップラインをもつ字形の中心の交点(トップラインの定義については,[CSS2]の15.3.8を参照。)のどちら

かである。その字形が現在の字形方向に対応する明示的な原点を提供していない場合には,適切な近似を

行うことが望ましい(例 その字形に対して適切な水平のベースラインをもつ字形の左端の交点,適切な

垂直ベースラインをもつ字形の上端の交点)。ベースラインテーブルが利用できない場合には,利用者エー

ジェントは慣例に沿ったベースラインテーブルを確立するのがよい。 

テキスト現在位置の調整は,絶対位置調整又は相対位置調整のどちらかである。絶対位置調整は次のよ

うな環境で行われる。 

• 

'text'要素の始まり 

• 

'textArea'要素の始まり 

• 

それに明示的に割り当てられる'x'属性及び'y'属性をもつ'text'要素の各文字 

それ以外のテキスト現在位置の位置調整は,相対位置調整である。 

それぞれの絶対位置調整において,新しいテキストのかたまりが定義される。絶対位置調整は,テキス

トレイアウトに次のような影響を与える。 

• 

合字は,合字にマップすることができる文字の集合が全て同じテキストのかたまりの中にある場合

にだけ発生する。 

• 

各テキストのかたまりは,'text-anchor'プロパティ値による整列のために,テキストの別個のブロッ

クを表現する。 

• 

双方向性による文字の再整理は,テキストのかたまりの中だけで行われる。再整理は,複数のテキ

ストのかたまりをまたいで行われることはない。 

合字の構成には次の追加的な規則が適用される。 

• 

CSS 2スペーシングプロパティ(spacing property)に関するディスカッション([CSS2]の16.4)でも

説明されているように,二つの文字の間の結果的な空白が既定の英文字スペーシングと同じではな

い場合,利用者エージェントは合字を使わないほうがよい。また,使うスクリプトにおいて最も一

貫性をもつ結果を生み出す振る舞いを自らの知識によって判断して英文字スペーシングを適用しな

background image

150 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

いほうがよい(例 英文字スペーシングが高い場合,ローマスクリプトでは合字を壊すことによっ

て最も良い結果を生む可能性が高いが,これはアラビアスクリプトではあまり最適ではない。アラ

ビアスクリプトでは,英文字スペーシングを無視してその合字を維持することが望ましい。)。 

• 

合字の構成は,要素のマーク付けによって切り離されていない文字の間だけで行われなければなら

ないが,その他のXMLマーク付け(例 コメント,処理命令,CDATAセクション)で切り離され

た文字の間では実施できなければならない。合字の処理は,実体及び文字の参照が解決された後に

だけ行うことができる。例えば,文字列"dahut"について合字を定義し,かつ,実体参照'&hu-ent;'は

文字列"hu"を含んでいるとした場合,次の全ての例において合字"dahut"が有効である。 

・ <text>Le dahut vit dans les Alpes grenobloises.</text> 

・ <text>Le da&hu-ent;t vit dans les Alpes grenobloises.</text> 

・ <text>Le da<!-- random comment -->hut vit dans les Alpes grenobloises.</text> 

・ <text>Le da<?turn around?>hut vit dans les Alpes grenobloises.</text> 

・ <text>Le da<![CDATA[hu]>t vit dans les Alpes grenobloises.</text> 

しかしながら,次の場合にはそれは無効である。 

・ <text>Le da<tspan fill='orange'>h</tspan>ut vit dans les Alpes grenobloises.</text> 

• 

上記のように,合字の構成は,異なるテキストのかたまりの中の文字に対応する字形については有

効にしないほうがよい。 

10.6.2 双方向性との関係 

スクリプトによっては,文字が右から左の方向に書かれることがある。特にアラビア又はヘブライのス

クリプトで書かれた文書,及び多言語で書かれている文書では,直線上のテキストが異なる方向性をもっ

て出現することがある。この現象を双方向性(bidirectionality,短縮形はbidi)と呼ぶ。 

Unicode標準([UNICODE],特に[UAX9])では,テキストの適切な方向性を決めるための複雑なアルゴ

リズムが定義されている。このアルゴリズムは,文字のプロパティに基づく暗黙的な部分と,埋込み及び

上書きのための明示的な制御とから構成されている。SVG利用者エージェントは,テキスト内容ブロック

要素の中で文字のレイアウトを決定するとき,この双方向アルゴリズムを適用する。 

'direction'プロパティ及び'unicode-bidi'プロパティによって,制作者は内容の文字に固有の方向性を上書き

することができ,その結果,文書言語の要素及び属性をこのアルゴリズムにどのようにマップするのかを

明示的に制御することができる。これら二つのプロパティは,行内進行方向に垂直に位置する字形をもつ

全ての文字に適用することができる。 

多くの場合Unicode [UNICODE] の双方向アルゴリズムは自動的に希望どおりの結果を出すので,制作

者はその場合にはこれらのプロパティを使用しなくてもよい。右から左に書かれる言語を使用するときな

ど,それ以外の場合には,'direction'プロパティを最上位'svg'要素に加えて,その方向が全てのテキスト要

素に継承されるようにするだけで十分かもしれない。次に例を示す(この例はテンプレートとして使用し

てもよい。)。 

例: rtl-text.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     width="100%" height="100%" viewBox="0 0 400 400" 

     direction="rtl" xml:lang="fa"> 

background image

151 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <title direction="ltr" xml:lang="en">Right-to-left Text</title> 

  <desc direction="ltr" xml:lang="en"> 

    A simple example for using the 'direction' property in documents 

    that predominantly use right-to-left languages. 

  </desc> 

  <text x="200" y="200" font-size="20">

軾頄

一 匀

椀渀礀

一琀攀 琀

</svg> 

次にまた別の例を示す。ここでは,暗黙的な双方向性の再整理だけでは不十分である。 

例: rtl-complex.svg 

<?xml version="1.0" encoding="utf-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" 

     width="100%" height="100%" viewBox="0 0 400 400" 

     direction="rtl" xml:lang="he"> 

  <title direction="ltr" xml:lang="en">Right-to-left Text</title> 

  <desc direction="ltr" xml:lang="en"> 

    An example for using the 'direction' and 'unicode-bidi' properties 

    in documents that predominantly use right-to-left languages. 

  </desc> 

  <text x="200" y="200" font-size="20">  

  

MAC:&#x200F; 

     <tspan direction="ltr" unicode-bidi="embed">00-24-AF-2A-55-FC</tspan>  

</text> 

</svg> 

テキスト内容要素の中では,'text-anchor'又は'text-align'プロパティに関するテキストの整列は,'direction'

プロパティの値によって決定される。例えば,'text-anchor'値として"end"をもつ'text'要素があったとすると,

'direction'値が"ltr"である場合には,そのテキストは'text'要素の'x'属性値の位置の左にまで及ぶ。'direction'

値が"rtl"である場合には,そのテキストは'text'要素の'x'属性値の位置の右にまで及ぶ。 

双方向性に関するより詳しい説明については,CSS 2のテキスト方向の細分箇条([CSS2]の9.10)を参照。 

双方向テキストのための処理モデルは次のとおりである。利用者エージェントは,論理順序(すなわち,

原文書で文字が出現する順序)によって提供される文字を処理する。利用者エージェントは,それぞれに

Unicode双方向アルゴリズムを適用することが望ましい独立したブロックの集合を決定する。各テキスト

152 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

のかたまりは,テキストの独立したブロックを表す。Unicode双方向アルゴリズムとそれぞれの独立した

テキストブロックの'direction'及び'unicode-bidi'プロパティの処理とが終わったときには,その利用者エージ

ェントは,左から右への描画順序をもつ潜在的に再整理されている文字リストをもっている。カーニング

又は合字の処理はフォント特有であるかもしれない。しかしながら,文字の再整理が終わったときに,そ

の文字又は字形の組合せの間においてカーニング及び合字の処理が行われることが望ましいモデルである。 

10.6.3 'direction'プロパティ 

'direction' 

値: 

ltr | rtl | inherit 

初期値: 

ltr 

適用対象: 

テキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 不可 

このプロパティは,テキストが書かれる基本方向,Unicode双方向アルゴリズムにおける埋込み,及び

上書きの方向(10.6.4を参照)を指定する。'direction'プロパティが,新しいテキストのかたまりをそれ自

体では確立しない要素(例 この規格の'tspan'要素)に影響を与えるためには,'unicode-bidi'プロパティの

値をembed又はbidi-overrideにしなければならない。 

注記 このプロパティは,どのような要素においても継承のために宣言することができるが,それは

テキスト内容にしか影響を与えない。座標系又は図形の配置には影響を与えない。 

このプロパティの規定の定義は,この規格で追加された情報を除き,CSS 2([CSS2]の9.10)に記載され

ている。 

10.6.4 'unicode-bidi'プロパティ 

'unicode-bidi' 

値: 

normal | embed | bidi-override | inherit 

初期値: 

normal 

適用対象: 

テキスト内容要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 不可 

このプロパティの規定の定義は,この規格で追加された情報を除き,CSS 2([CSS2]の9.10)に記載され

ている。 

10.7 テキストの描画順序 

テキスト内容ブロック要素における文字に関連した字形は,視覚表示に必要な再整理(例 双方向性の

実装)とは無関係に,原文書の文字の論理順序に基づいて描画される。したがって,視覚的に右から左に

書かれるテキストの場合,一番右の文字に関連する字形が,論理順序において先にきているので,他の文

字に関連する字形の前に描画される。 

また,一つ一つの字形は,次の字形が描画される前に完全な形で描画される(すなわち,'fill'及び'stroke'

プロパティの指定に基づきフィル及びストロークされる。)。 

153 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

10.8 整列プロパティ 

10.8.1 テキストの整列プロパティ 

'text-anchor'プロパティは,与えられた軸及び点に基づいてテキスト文字列を整列するために用いられる。

整列の軸は,横書きモードか,又は縦書きモードかによって異なる。横書きモード(ラテン語又はアラビ

ア語の標準)では,その軸は水平である。縦書きモード(しばしば日本語で使用される。)では,その軸は

垂直である。 

注記1 この規格では縦書きテキストはサポートされていない。 

オリエンテーションポイント(orientation point)は,'text-anchor'プロパティの値に依存する。 

'text-anchor'プロパティは,与えられた'text'要素における各テキストのかたまりに適用される。それぞれ

のテキストのかたまりは,初期のテキスト現在位置をもつ。このテキスト現在位置は,テキストのかたま

りの中で最初に描画される文字に明示的に割り当てられる'text'要素の'x'属性及び'y'属性の適用によって作

られる(文脈による。)利用者座標系における点を表す。 

'text-anchor' 

値: 

start | middle | end | inherit 

初期値: 

start 

適用対象: 

'text'要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

これらの値は次のような意味をもつ(ここにおける右,左,上及び下とは,未変換座標空間における整

列のことを指す。)。 

start 

描画結果のテキストの開始位置が最初のテキスト現在位置になるよう,描画する文字をそろ(揃)える。

'direction'プロパティ値として"ltr"をもつ要素(大半のヨーロッパ言語における典型)は,そのテキストの

左側が最初のテキスト位置において描画される。'direction'プロパティ値として"rtl"をもつ要素(アラビア

語及びヘブライ語における典型)は,そのテキストの右側が最初のテキスト位置において描画される。主

として垂直のテキスト方向をもつ要素(アジア圏のテキストにおける典型)は,そのテキストの上側が最

初のテキスト位置において描画される。 

注記2 この規格では縦書きテキストはサポートされていない。 

middle 

描画結果のテキストの幾何学的な中心が最初のテキスト現在位置になるよう,描画する文字をそろ(揃)

える。 

end 

描画結果のテキストの終了位置が最初のテキスト現在位置になるよう,描画する文字をそろ(揃)える。

'direction'プロパティ値として"ltr"をもつ要素(大半のヨーロッパ言語における典型)は,そのテキストの

右側が最初のテキスト位置において描画される。'direction'プロパティ値として"rtl"をもつ要素(アラビア

語及びヘブライ語における典型)は,そのテキストの左側が最初のテキスト位置において描画される。主

として垂直のテキスト方向をもつ要素(アジア圏のテキストにおける典型)は,そのテキストの下側が最

154 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

初のテキスト位置において描画される。 

注記3 この規格では縦書きテキストはサポートされていない。 

10.9 フォント選択プロパティ 

SVGでは,次のようなフォント指定プロパティが使用される。このプロパティの規定の定義は,この規

格で追加された情報を除き,XSL 1.1([XSL]の7.9)に記載されている。 

'font-family' 

値: 

[[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit 

初期値: 

利用者エージェントに依存 

適用対象: 

テキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

このプロパティは,テキストを描画するためにどのフォントファミリーを使わなければならないのかを

示し,一般ファミリー名及び/又はフォントファミリー名の優先順位リストとして指定される。このプロ

パティの規定の定義は,この規格で追加された情報を除き,XSL 1.1([XSL]の7.9.2)に記載されている。 

'font-style' 

値: 

normal | italic | oblique | inherit 

初期値: 

normal 

適用対象: 

テキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

このプロパティは,そのテキストが標準(normal),斜体(italic),又はオブリーク体(oblique face)の

いずれかの形式によって描画されるのかどうかを指定する。XSL 1.1で定義されているフォントスタイル

値のバックスラント体(backslant)はサポートされていない。このプロパティの規定の定義は,この規格

で追加された情報を除き,XSL 1.1([XSL]の7.9.7)に記載されている。 

'font-variant' 

値: 

normal | small-caps | inherit 

初期値: 

normal 

適用対象: 

テキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

このプロパティは,そのテキストが小文字を標準(normal)字形又はスモールキャピタル(small-caps)

155 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

字形のいずれかを用いて描画するのかどうかを指定する。このプロパティの規定の定義は,この規格で追

加された情報を除き,XSL 1.1([XSL]の7.9.8)に記載されている。 

'font-weight' 

値: 

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit 

初期値: 

normal 

適用対象: 

テキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

正当な数値の一つ。数値以外の値は,次で定義される規則に従って数値に変換されな 

ければならない。 

このプロパティは,テキストの描画に使われる字形のボールド体の程度を示す。これは同じフォントフ

ァミリーにおける他のフォントとの比較によって示される。このプロパティの規定の定義は,この規格で

追加された情報を除き,XSL 1.1([XSL]の7.9.9)に記載されている。 

数値以外の値は,次のように解釈される。 

normal 

"400"と同じ。 

bold 

"700"と同じ。 

bolder 

継承しているフォントよりも濃いフォントに割り当てられる次のウェイトを指定する。もしそのような

ウェイトが存在せず継承値が"900"でもない場合には,単純に次に濃い数値が与えられ,フォントは変更さ

れないままである。継承値が"900"である場合には,ウェイトも"900"となる。 

lighter 

継承しているフォントよりも薄いフォントに割り当てられる次のウェイトを指定する。もしそのような

ウェイトが存在せず継承値が"100"でもない場合には,単純に次に薄い数値が与えられ,フォントは変更さ

れないままである。継承値が"100"である場合には,ウェイトも"100"となる。 

'font-size' 

値: 

<absolute-size> | <relative-size> | 

<length> | inherit 

初期値: 

中間 

適用対象: 

テキスト内容要素 

継承: 

可。算出値が継承される。 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

絶対的な長さ 

このプロパティは,複数行のレイアウト環境において複数行のテキストがべたで組まれるとき,ベース

ラインからベースラインまでのフォントのサイズを指定する。SVG利用者エージェントは,現在の利用者

156 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

座標系における高さの値として<length>を処理する。パーセンテージ値はサポートされていない。 

このプロパティの規定の定義は,この規格で追加された情報を除き,XSL 1.1([XSL]の7.9.4)に記載さ

れている。 

10.10 

空白処理 

SVGは標準XML属性'xml:space'をサポートし,与えられたテキスト内容ブロック要素の文字データにお

ける空白文字の処理を指定する。テキスト内容ブロック要素における全ての子要素は,その子要素のテキ

スト内容に適用される'xml:space'属性をもってもよいことに注意する。SVG利用者エージェントは,次に

示されているように,この属性に関連した特別な処理規則をもつ。これらは,XML構文解析 [XML11] の

後に発生する振る舞いであり,Document Object Model(DOM)[DOM3] の内容には影響を与えない。 

属性の定義: 

xml:space = "default" | "preserve" 

次のような二つの値のうちの一つを所持することができる継承可能な属性。 

default 

'xml:space'の初期値。xml:space="default"のとき,SVG利用者エージェントは元の文字データ内容を用い

て次を実施する。最初に,全ての改行文字を削除する。次に,全てのタブ文字を空白文字に変換する。そ

して,先頭及び末尾の空白文字を全て削除する。その結果,全ての連続する空白文字が統合される。 

preserve 

xml:space="preserve"のとき,SVG利用者エージェントは元の文字データ内容を用いて次を実施する。ま

ず,全ての改行文字及びタブ文字を空白文字に変換する。次に,空白文字(先頭空白文字,末尾空白文字,

複数の連続空白文字など)を全て描画する。したがって,xml:space="preserve"で描画を実施した場合には,

文字列"a   b"("a"と"b"の間に三つの空白)は,"a b"("a"と"b"との間に一つの空白)よりも"a"と"b"との

間が離される。 

アニメーション:不可 

次の例では,xml:space="default"とするとき,行インデントが重要になる場合があることを示している。

次の断片では,同じような'text'要素が二組示されている。どちらの'text'要素もxml:space='default'としてい

る。これらの例では,どの行の終わりにおいても付加的な空白は一切ない(すなわち,目に見える最後の

文字のすぐ後ろで改行されている。)。 

[01]  <text xml:space='default'> 

[02]    WS example 

[03]    indented lines 

[04]  </text> 

[05]  <text xml:space='preserve'>WS example indented lines</text> 

[06] 

[07]  <text xml:space='default'> 

[08]WS example 

[09]non-indented lines 

[10]  </text> 

[11]  <text xml:space='preserve'>WS examplenon-indented lines</text> 

background image

157 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

上の'text'要素の最初の組では,文字データにインデントが付けられている。最初の'text'要素における属

性xml:space='default'によって,SVG利用者エージェントは次を実施するよう指示される。 

• 

全てのタブ(もしあれば)を空白文字に変換する。 

• 

全ての改行を削除する(つまり,行[01],行[02],及び行[03]の後ろの改行を削除する。)。 

• 全ての先頭空白文字を削除する(つまり,行[02]における"WS example"の前の空白文字を削除する。)。 

• 

全ての末尾空白文字を削除する(つまり,行[04]における"</text>"の前の空白文字を削除する。)。 

• 

全ての中間空白文字(つまり,行[03]における"indented lines"の前の空白文字)を統合して,単一の

空白文字にする。 

上の'text'要素の二つ目の組では,文字データにインデントが付けられていない。三つ目の'text'要素にお

ける属性xml:space='default'によって,SVG利用者エージェントは次を実施するよう指示される。 

• 

全てのタブ(もしあれば)を空白文字に変換する。 

• 

全ての改行を削除する(つまり,行[07],行[08],及び行[09]の後ろの改行を削除する。)。 

• 

全ての先頭空白文字を削除する(この例には先頭空白文字はない。)。 

• 

全ての末尾空白文字を削除する(つまり,行[10]における"</text>"の前の空白文字を削除する。)。 

• 

全ての中間空白文字を統合して,単一の空白文字にする(この例には中間空白文字はない。)。 

XMLパーサは,文字データをアプリケーションに渡す前に,改行インディケータの標準的表示(例 連

続二文字のリテラル"#xD#xA",独立のリテラル#xD又は#xA)を,単一文字#xAに変換しなければならな

いことに注意する。XML end-of-line handling([XML11]の2.11)を参照。 

文字位置番号に基づくSVG言語又はSVG DOMにおける全ての機能は,ここで説明した空白処理規則

を適用した後の文字位置に基づく。特にxml:space="default"のときには,空白文字はしばしば処理の途中で

削除される。この10.10の規則によって空白文字が削除された後,文字位置番号はそのテキスト文字列に

インデックスをつける。 

10.11 

領域内のテキスト 

10.11.1 

領域内のテキストの概説 

'textArea'要素を用いることによって,特定の領域においてテキスト内容を簡単にラッピングすることが

できる。このSVGプロファイルでは,単一の長方形領域が規定される。他のプロファイルにおいては,任

意の図形のシーケンスが認められる可能性がある。 

'textArea'要素を用いたテキストラッピングは,完全なボックスモデルのレイアウトエンジンを不要とし,

簡単なテキストラッピングのための軽量で有用な機能である。 

ラップされるテキストのレイアウトは利用者エージェントに依存している。したがって,異なる結果が

生じる可能性がある(特に改行の位置について)ことを内容の制作者は認識している必要がある。 

領域内のテキストのために必要な最低限のレイアウト機能については,10.11.7に示されている。 

次の例textArea01.svgでは,長方形領域にラップされるテキスト文字列が示されている。入りきらない

テキストは描画されない。 

例: textArea01.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" viewBox="0 0 220 320"> 

background image

158 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <title>Basic textflow</title> 

  <textArea font-size="25" font-family="Georgia" x="10" y="10" width="200"  

        height="300">Tomorrow, and tomorrow, and 

        tomorrow; creeps in this petty pace from day to day, until the last syll&#xAD;able 

of recorded 

        time. And all our yesterdays have lighted fools the way to dusty death.</textArea> 

  <rect x="5" y="5" width="210" height="310" stroke-width="3" stroke="#777" 

fill="none"/> 

</svg> 

10.11.2 

'textArea'要素 

スキーマ: textArea  

    <define name='textArea'> 

      <element name='textArea'> 

        <ref name='textArea.AT'/> 

        <zeroOrMore> 

          <choice> 

            <element name='tspan'> 

              <ref name='tspan.AT'/> 

              <zeroOrMore> 

                <choice> 

                  <ref name='tbreak'/> 

                  <ref name='svg.TextCommon.group'/> 

                </choice> 

background image

159 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

              </zeroOrMore> 

            </element> 

            <ref name='svg.TextCommon.group'/> 

          </choice> 

        </zeroOrMore> 

      </element> 

    </define> 

    <define name='textArea.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.Focus.attr'/> 

      <ref name='svg.Transform.attr'/> 

      <ref name='svg.XY.attr'/> 

      <ref name='svg.Editable.attr'/> 

      <optional> 

        <attribute name='width' svg:animatable='true' svg:inheritable='false'> 

          <choice> 

            <ref name='Length.datatype'/> 

            <value>auto</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='height' svg:animatable='true' svg:inheritable='false'> 

        <choice> 

          <ref name='Length.datatype'/> 

          <value>auto</value> 

        </choice> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

x = "<coordinate>" 

テキスト内容が置かれる長方形領域の一角のx座標。省略値:'0' 

アニメーション:可 

y = "<coordinate>" 

background image

160 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

テキスト内容が置かれる長方形領域の一角のy座標。省略値:'0' 

アニメーション:可 

width = "auto" | "<coordinate>" 

テキスト内容が置かれる長方形領域の幅。値'auto'は,その長方形領域の幅が無限であることを示す。省

略値:'auto' 

アニメーション:可 

height = "auto" | "<coordinate>" 

テキスト内容が置かれる長方形領域の高さ。値'auto'は,その長方形領域の高さが無限であることを示す。

省略値:'auto' 

アニメーション:可 

editable = "none" | "simple" 

この属性は,テキストを編集することができるかどうかを示す。10.12.1を参照。 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

Navigation Attributes 

13.13.2を参照。 

'width'及び'height'の両方が値'auto'をもつ場合には,全てのテキストが描画されるまで,又は'tbreak'のよう

な改行要素に遭遇するまで,そのテキストはテキストの進行方向に沿って直線上に描画される。'tbreak'の

ような改行要素に遭遇した場合には,残りのテキストは新しい行に描画される。 

10.11.3 

'tbreak'要素 

'tbreak'要素は強制的にテキストの改行を行う空要素である。たとえテキストの現在の行が空であっても

改行は実施される(すなわち,複数の連続した'tbreak'要素はそれぞれ改行を実施する。)。 

スキーマ: tbreak 

    <define name='tbreak'> 

      <element name='tbreak'> 

        <ref name='tbreak.AT'/> 

        <empty/> 

      </element> 

    </define> 

    <define name='tbreak.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

    </define> 

'tbreak'要素は,標準的なコア属性及び条件付き属性を除き,属性をもたない。 

10.11.4 

'line-increment'プロパティ 

'line-increment'プロパティは,ブロック進行方向におけるそれぞれの行のサイズに関して限定的な制御を

161 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

行う。このプロパティは,'textArea'要素及び'textArea'要素の子要素に適用される。'line-increment'プロパテ

ィは,'textArea'要素以外の要素で使われた場合,又は祖先として'textArea'要素をもたない要素で使われた

場合には,一切影響を与えてはならない。 

'line-increment' 

値: 

auto | <number> | inherit 

初期値: 

auto 

適用対象: 

'textArea','tspan',及び'tbreak'要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

このプロパティの値は,次のような意味をもつ。 

auto 

既定行間隔の適正な値を乗じたその行に描画される全ての字形における最大のフォントサイズによって,

後に続く行が前の行によってオフセットされる。この規格では,この乗数には値1.1を推奨する。 

<number> 

この数値(利用者単位に基づく)によって,後に続く行が前の行によってオフセットされる。負の値は

サポート外である。 

10.11.5 

'text-align'プロパティ 

行内進行方向におけるテキストの整列は,text-alignプロパティによって実施される。このプロパティは,

XSL 1.1 text-alignプロパティ([XSL]の7.16.9)に変更を加えたものである。 

'text-align' 

値: 

start | end | center | inherit 

初期値: 

start  

適用対象: 

textArea要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

詳細については,XSL 1.1 text-align property([XSL]の7.16.9)を参照。利用者エージェントがこのプロパ

ティのための次のような値をサポートすることをSVGは必須としていないことに注意する。justify,inside,

outside,<string>,left,又はright。省略値:start  

'text-anchor'プロパティと同様に,値start及びendは'direction'プロパティの値に依存している(一般に,

使用される書記体系にふさわしい方法が取られる。)。 

• 

左から右に水平に書かれる場合(フランス語,ロシア語,タイ語など):startが左及びendが右 

• 

右から左に水平に書かれる場合(ヘブライ語,アラビア語など):startが右及びendが左 

• 

上から下に垂直に書かれる場合(縦書きの中国語など):startが上及びendが下 

注記 縦書きテキストはこの規格ではサポートされていない。 

10.11.6 

'display-align'プロパティ 

162 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'display-align'プロパティは,'textArea'要素のテキスト内容のブロック進行方向における整列を指定する。 

'display-align' 

値: 

auto | before | center | after | inherit 

初期値: 

auto 

適用対象: 

'textArea' 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

このプロパティの値は,次のような意味をもつ。 

auto 

SVGでは,autoはbeforeと同じである。 

before 

最初の行の前辺(before-edge)は,最初の領域の前辺にそろ(揃)えられる。 

center  

行はブロック進行方向における中心に置かれる。 

after  

最後の行の後辺(after-edge)は,最後の領域の後辺(after-edge)にそろ(揃)えられる。 

次の記述は参考(informative)である。'display-align'プロパティのより良い理解のために,XSL仕様書の

図([XSL]の4.2.3の最後の図)を参照。この図では,書式モードが混在している場合(西洋式及び日本式)

における様々な辺名の間の対応関係が示されている。 

10.11.7 

領域内テキストレイアウト規則 

領域内テキストレイアウトは,SVG標準テキストレイアウトモデルの後処理段階と定義することができ

る。 

適合SVG利用者エージェントは,その内容の中で'tbreak'要素によって明示的に改行が指定されていると

き,又は残り全ての字形を現在の行に入れることができないときには,改行を挿入するだけの簡単なレイ

アウトアルゴリズムを実装することができる。領域に入りきらない字形の行は,一切描画されない。 

SVG利用者エージェントは,SVG標準テキストレイアウトモデルの後処理段階として,最低限次のよう

な機能をサポートする改行アルゴリズムを実装していることが望ましい。 

a) 文字間の改行の機会を決定する論理順序に基づいてテキストが処理される(Unicode Standard Annex 

No. 14 [UAX14] による。)。 

b) 通常テキストレイアウトは,無限の長さをもつ単一の行において実行される。その行にはソフトハ

イフンが含まれる。結果として,配置された字形の集合が与えられる。 

c) 一番目の行は,ブロック進行方向において,その前辺がその領域の前辺にぴったりくっつくように

配置される。 

d) 字形は,ある単語における(単数又は複数の)文字を表現する。各字形は,その各文字を含んでい

る単語と関連付けられる。複数の単語の文字が同一の字形に寄与している場合には,それらの単語

は統合され,それら全ての字形が論理順序における最初の単語の一部として扱われる。 

e) ある単語の字形は,字形グループにまとめられる。字形グループは,同じ単語に基づく全ての連続

163 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

字形から構成される。ほとんどの場合,それぞれの単語は字形グループを一つ生成する。しかしな

がら,双方向性と特殊マーク付けとの相互作用によって,一つの単語に基づく字形が,それに埋め

込まれた他の単語に基づく字形をもつ場合もあるかもしれない。 

f) 

各字形グループは,二つの範囲を算出する。標準(normal)範囲,及びテキスト領域最終(last in text 

area)範囲である。標準範囲は,ソフトハイフンを除くグループにおける全ての字形の送りの合計

である。標準範囲は,後のほうの単語に基づく字形グループが同じテキスト領域にある場合に使用

される範囲である。テキスト領域最終範囲は末尾のソフトハイフンの送りを含んでいるが,末尾の

空白又は文字送りなしの結合文字の送りは含んでいない。このテキスト領域最終範囲は,字形グル

ープがテキスト領域の最後の単語(論理順序による。)に基づいているときに使用される(行全体が

壊すことのできない一単語から構成されている場合には,SVG利用者エージェントはその行におい

て強制的な改行を実施し,与えられた行に少なくとも何らかのテキストが出現するようにしてもよ

い。)。 

g) xml:space="default"の場合,'textArea'要素において改行を引き起こす全ての空白文字はその改行によ

って消費されるので,描画されない。しかしながら,xml:space="preserve"の場合には,改行を引き

起こす全ての空白文字,及びその行に入りきらない後に続く空白は,次の行に含まれなければなら

ない。 

h) 単語は論理順序によって現在の行に追加される。一つの単語に基づく全ての字形グループは,同一

行になければならない。字形グループに基づく全ての字形は,同一の'textArea'になければならない。 

i) 

'line-increment'が数値の場合,それぞれの行はブロック進行方向において'line-increment'の値に合わせ

てサイズを決められる。'line-increment'がautoの場合,その行の全字形のうちの最大の'font-size'によ

って,ブロック進行方向におけるその行のサイズが決められる。ある単語が追加されたとき,その

ラインインクリメント(line-increment)も増加してもよい。それが最初の単語から減少することは

ない。ラインインクリメント(line-increment)を増加させることは,その範囲におけるテキストの

位置決めに利用できる空白を削減することができるというだけである。その範囲は,単語の数の最

大許容値をもつ。与えられた行における優位なベースラインの位置は,まずその行のラインインク

リメント(line-increment)値を計算し,次にその優位なベースラインの位置を選択することによっ

て決定される。このとき,最初の文字の描画に使われるフォント,及びそのラインインクリメント

(line-increment)値と同じ想定フォントサイズのための特定のベースラインの位置が使用される。 

j) 

字形グループに基づく字形は,テキスト領域の始めに最初に選択した字形(表示順)を配置し,ま

た,先に選択された字形の後ろにその字形の位置における各後続字形(表示順)を配置することに

よって,そのテキスト領域に展開される。 

k) 次の単語が選択され,次の行の位置が決定される。次の行は,ブロック進行方向において,その前

辺がその前の行の後辺(after-edge)にぴったりくっつくように配置される。ステップh)へ。 

l) 

ブロック進行方向においてその領域の外まで伸びるような行は,描画されない。 

10.12 

編集可能なテキストフィールド 

この規格では,テキスト要素の編集が可能である。簡単なテキスト編集はスクリプトを用いて直接実装

することができるが,様々なプラットフォームで動作する直感的で国際的なテキスト入力システムを実装

することは複雑である。したがって,システムテキストライブラリにアクセスすることができるこの機能

がSVG利用者エージェントで提供される。内容の制作者は,この編集可能なテキストの機能の上において,

より高度なウィジェット(widgets)(例 フォーム入力フィールド)を構築することができる。 

background image

164 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

10.12.1 

'editable'属性 

テキスト内容ブロック要素は,ある要素の内容を適所で編集することができるかどうかを指定する

'editable'属性をもつ。 

スキーマ: editable  

    <define name='svg.Editable.attr' combine='interleave'> 

      <optional> 

        <attribute name='editable' svg:animatable='true' svg:inheritable='false'> 

          <choice> 

            <value>none</value> 

            <value>simple</value> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

editable = "none" | "simple"  

'none'(省略値)に設定された場合,SVG編集機能はテキスト内容ブロック要素の内容に対して提供さ

れない。'simple'に設定された場合には,SVG利用者エージェントは利用者が編集するための手段を提供し

なければならない。ここでは,その利用者は,隠されず(visibility="hidden"によって),又は描画ツリーか

ら削除されていない('switch'要素又はdisplay="none"によって)テキスト内容ブロック要素及び包含される

全子要素の内容を編集することができなければならない。 

そのプラットフォームがクリップボードをサポートしている場合には,要素からクリップボードに選択

したテキストを切り取り,コピーしたり,クリップボードから要素へテキストを貼り付けたりする手段も

SVG利用者エージェントは提供しなければならない。 

'editable'属性が'simple'のときには,実際の値にかかわらず,'focusable'属性は常に'true'であるとみなされ

る。 

アニメーション:可 

SVG利用者エージェントでは,その場のテキスト編集ができることが望ましい。しかしながら,モーダ

ル編集ダイアログによる編集は一つの方法だが,プラットフォームによってはそれが唯一の方法であるこ

ともある。現在の編集位置は,キャレット(caret)などで示すことが望ましい。SVG Tiny 1.2利用者エー

ジェントは,それをプラットフォーム上のアプリケーションにおいて利用する場合,コピー,貼付け,ド

ラッグ及びドロップのようなシステム機能もサポートしていなければならない。 

編集を開始するためには,'editable'属性の現在のプレゼンテーション値を'simple'とし,テキスト内容ブ

ロック要素をフォーカス(focus)し及びそれを活性化(例 Enterキーの使用,ポインタ装置によるテキ

スト領域上のクリック)しなければならない。テキストフィールドにおいてテキストを編集する場合,全

てのテキスト及びキーイベントがSVG利用者エージェントにディスパッチされ,そのSVG利用者エージ

ェントがそのイベントを処理してテキスト入力を適切に取り扱う。 

テキスト内容ブロック要素が編集可能である場合,利用者入力に従ってそのツリーに変更を加えるとき,

SVG利用者エージェントは利用者入力における空白を正規化してはならない。しかしながら,表示される

background image

165 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

テキストは'xml:space'に関するSVG規則に従って描画されなければならない。 

その場のテキスト編集のために,次のような機能を利用できるようにしなければならない。 

• 

前又は次の文字(論理順序による。)への移動。例えば,左向き又は右向きの矢印。 

• 

'textArea'要素における前又は次の行への移動。例えば,上昇又は下降キー。 

• 

行の始まりへの移動。例えば,ホームキー。 

• 

行の終わりへの移動。例えば,エンドキー。 

• 

(クリップボードがサポートされている場合)コピー,切取り,又は貼付け。例えば,コピー及び

ペーストキー。 

これらの機能については,与えられたプラットフォームにおけるそれらのタスクに使用される通常のキ

ーバインドを使用することが望ましい。キーボードを使うことができない装置においても,可能な限り同

等のシステム入力手段を利用することができるようにし,上記の機能を提供することが望ましい。 

その場のテキスト編集を実施するとき,編集されるDOM要素の内容は常にライブであり,編集される

文字列の状態がその編集中でも反映されてゆくことが望ましい。モーダル編集ダイアログを使用するとき,

利用者が編集を実行すると(例 Enterキーの使用,OKボタンのクリック,又はプラットフォームに付随

した同様の振る舞い),単一のtextInputイベントを発生させ,DOM要素の内容だけが変化する。 

Input Method Editor(IME)を使用している場合(例 携帯電話の数字キーを用いたラテン語テキストの

入力,又は漢字の入力),そのテキストイベントは入力された実際のテキスト(例 漢字,ラテン語文字)

に対応しているのであって,それを生成するためのキーボード又はマウスの動作(例 数字キーを連続し

て押した数,カナ文字列)に対応しているわけではない。 

SVG利用者エージェントでは,テキストの編集中にキャレット(caret)がテキストの周りを移動する(文

字のタイプのために,又は既存のテキストの中でそれを移動させるために)とき,利用者が常にそれを見

ることができるようにすることが望ましい。この機能をサポートしたときの正確な振る舞いは,そのSVG

利用者エージェントに依存する。 

キャレット(caret)が合字の中に置かれているときに編集されるテキストの振る舞いは,処理系に依存

する。しかしながら,SVG利用者エージェントでは,Character Model for the World Wide Web 1.0: 

Fundamentalsの6.1: String concepts [CHARMOD] における概念を考慮に入れることが望ましい。 

編集可能な要素のテキストが編集され,その要素が子要素をもっている場合,編集する要素の内容から

最初に全ての非'tbreak'要素を取り,それぞれの非'tbreak'要素の内容を適所に保持しなければならない。 

その編集可能な要素にテキスト内容がない場合は,ポインタを用いて編集を活性化することはできない

かもしれない。なぜならば,その上をクリックすることができる描画された要素が全くないからである。

'textArea'要素(固有の'width'及び'height'幾何形状をもつ)の場合には,'pointer-events'プロパティ値を

boundingBoxに設定することによって,利用者が編集を開始することができる(例textArea02.svgを参照)。

この機能は'text'要素にはない(なぜならば,それはテキスト内容抜きの固有の幾何形状をもたないからで

ある。)。 

次の例textArea02.svgでは,'pointer-events'プロパティ値のboundingBoxを利用して,ポインタ装置で活

性化することができる入力ボックスを宣言する方法を示している。 

例: textArea02.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" 

background image

166 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

     version="1.2" baseProfile="tiny" viewBox="0 0 250 100"> 

  <title>Editable text input</title> 

  <desc>Illustrates how to create an editable input box without script</desc> 

  <rect x='0' y='0' width='250' height='100' fill='#87ceeb'> 

    <title>background rectangle</title> 

  </rect> 

  <g id="nameInput" transform='translate(50, 20)'> 

    <text x="0" y="20" font-size="18" font-family="Arial" fill="#000080">Name:</text> 

    <rect x="0" y="25" width="156" height="26" rx="3" ry="3" 

          fill="white" stroke-width="2" stroke="#000080"/> 

    <textArea x="3" y="27" width="150" height="20" font-size="18" font-family="Arial" 

              editable="simple" focusable="true" pointer-events="boundingBox"/> 

  </g> 

</svg> 

10.13 

テキスト選択及びクリップボード操作 

あるSVGビューアがテキスト選択及びコピー・貼付け操作をサポートしている場合,そのSVGビュー

アは次をサポートしていなければならない。 

• 

SVG内容におけるテキスト文字列を利用者が選択できる。 

• 

システムのクリップボードに選択したテキスト文字列をコピーできる。 

テキスト選択の操作は,次の全てが行われたときに開始される。 

• 

利用者が,テキスト内容ブロック要素の一部として描画された字形の上にポインティング装置又は

キャレット(caret)を置き,選択操作を開始する(例 標準的システムのマウスボタンを押すこと

による選択操作)。次に,利用者はその選択操作を続けている間(例 標準的システムのマウスボタ

ンを押し続けることによる選択操作),テキスト現在位置を移動させる。 

• 

ポインティング装置がクリックした点の字形の上では,目に見える他の図形要素は一切塗られない。 

そのテキスト選択操作が続くとき(例:利用者がマウスボタンを押し続けているとき),他の図形要素に

関連する全てのイベントは無視される(すなわち,テキスト選択操作はモード方式である。)。そして,SVG

利用者エージェントは適切な強調表示技法(反対の色による選択した字形の描き直しなど)を用いてどの

文字が選択されるのかを動的に示さなければならない。そのテキスト選択プロセスにおいてテキスト現在

位置が移動するとき,そのテキスト選択操作における最後の字形は,字形セルがポインタの最も近くにあ

る同じ'text'要素内の字形である。その選択の始まりと終わりとの間に位置する'text'要素内の全ての文字は,

167 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

キャンバス上の位置及び選択点の終わりの上に位置する図形要素にかかわらず,強調表示されなければな

らない。 

テキスト選択操作が一旦終了すると(例 利用者がマウスボタンから手を離したとき),ポインタ装置の

活性化イベントのようなそのテキスト選択をキャンセルするイベント(例 マウスボタンを押したとき)

が発生するまで,選択されたテキストは強調表示され続ける。 

テキスト選択操作の間に強調表示する文字を決めるための細かい規則については,C.7を参照。 

システムクリップボードをもつシステムについて,SVG利用者エージェントは現在選択しているテキス

トのそのシステムクリップボードへのコピーを開始するための利用者インタフェースを提供していること

が望ましい。SVG利用者エージェントは,そのシステムにおけるプレーンテキストの適切なクリップボー

ド形式によって選択したテキスト文字列をポストすることができれば十分である。しかしながら,SVG利

用者エージェントがリッチテキストをポストすることもでき,与えられたテキスト文字列に関連する様々

なフォントプロパティも含めたリッチテキストも渡すこともできればより望ましい。 

双方向テキストについて,SVG利用者エージェントは論理順序におけるテキスト選択をサポートしてい

なければならないが,その場合文字の双方向性の再整理によって字形が不連続に強調表示される。それに

加えて,SVG利用者エージェントは,双方向テキストを視覚的な描画の順番(すなわち双方向テキストレ

イアウトアルゴリズムを適用した後の順番)に従って選択し,論理的に不連続な文字データが選択される

ような機能を選択できるようにしてもよい。この場合,利用者が双方向テキストをクリップボードにコピ

ーするように要求した場合には,SVG利用者エージェントは適切な調整をして,視覚的に選択された文字

だけをクリップボードにコピーするようにしなければならない。 

可能であれば,ウェブブラウザのようなSVG閲覧アプリケーションにおいて適切に順序付けられたテキ

スト選択が簡単にできるよう,SVGジェネレータがそれらのテキスト文字列を順序付けることが望ましい。 

個別のテキスト選択に加え,SVG利用者エージェントは,その範囲にある全てのテキストに対してテキ

スト全体の一括選択の機能を提供するのがよい。あるテキスト内容要素がフォーカス(focus)されている

場合,その全選択の操作によって,その要素の内容だけが含まれることが望ましい。テキスト内容要素が

フォーカス(focus)されていない場合,その全選択の操作によって,その文書における全テキストが選択

されることが望ましい。これは,後に続く操作の範囲を広くするプログレッシブ(progressive)な操作で

あってもよい。例えば,ある一般的な成句に対し,利用者がその単語の上をシングルクリックすればその

単語を選択することができ,次に二回目のクリックによって文章全体を選択することができ,三回目のク

リックによって文書全体を選択することができる,というようなテキスト選択をしてもよい。アクセシビ

リティを高めるために,利用者エージェントは,そのような全ての操作をキーボード及びポインタ装置

(ctrl/command+Aの全選択キーボードショートカットなど)によって実施することができるようにしなけ

ればならず,また,適切なアクセシビリティのためのAPIが公開されることが望ましい。 

10.14 

テキスト検索 

利用者エージェントがテキスト文字列の検索をサポートしている場合,SVG内容におけるテキスト文字

列の検索もサポートしていなければならない。検索をサポートしているSVGビューアは,描画ツリー内の

文書において検索されるテキスト文字列の全具体値(例 'display'プロパティの値がnone以外のもの)を

利用者が発見することができるようにし,また,各具体値を強調表示又は指し示さなければならない。テ

キスト文字列の順次検索ができるSVGビューアでは,必要に応じてビューポートをパン及びズームして,

そのテキスト文字列を文脈において表示することができなければならない。また,そのテキスト文字列を

含む要素への断片識別子のリンク追跡があるかのように,そのビューポートを調整できることが望ましい。 

background image

168 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

言い換えれば,含まれるテキスト内容要素がビューポートに収められないくらい大きい場合にはSVG

利用者エージェントはズームアウトすることが望ましいが,そのテキストが入りきる場合は,利用者エー

ジェントは単にパンだけを実施し,ズームは実施しないことが望ましい。制作者が内容を作成する場合に

は,それに十分な文脈を与える一方で,ビューポートに入りきる読みやすいサイズの個別のテキスト内容

要素にそのテキストを細かく分け,使いやすさを最大限にすることが望ましい。加えて,利用者が読むこ

とができないくらい小さなテキストについては,それをズームインできるような手段も提供されなければ

ならない。 

次の例'text̲search.svg'では,長いテキスト文字列が初期ビューポートの外まで伸びているので,ビュー

ポートの外にある単語の一つを検索することができるように調整を行わなければならない。画像は,Batik 

SVGツールキットを使用したテキスト検索の結果を示している。 

例: text̲search.svg 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" 

     width="100%" height="100%" viewBox="0 0 120 60"> 

  <title>Text Search</title> 

  <desc> 

    An example of text that extends beyond the viewport, 

    requiring the user agent to pan the viewport when  

    words are searched for. 

  </desc>   

   

  <!--  

    This rectangle is the same position and dimensions as the viewBox,  

    illustrating the initial area of the viewport.    

  --> 

  <rect x="0" y="0" width="120" height="60" fill="#6495ed" stroke="blue" /> 

   

  <!--  

    The contents of this text element extend beyond the initial viewport.    

  --> 

  <text x="120" y="35" text-anchor="middle" fill="blue"  

        font-size="10" font-family="Helvetica"> 

        Seek and you shall find, find and you will search. 

  </text> 

</svg> 

background image

169 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

11 塗り:フィル,ストローク,色,及びペイントサーバ 

11.1 概説 

図形要素(テキスト内容要素及び図形を含む。)には,フィル(そのオブジェクトの内部への塗りの適用)

及びストローク(そのオブジェクトの外形に沿った塗りの適用)を実施することができる。フィル及びス

トロークは,より一般的な言い方をすれば,塗り操作であると考えることができる。 

SVGでは,次によって塗り(すなわち,フィル又はストローク)を適用することができる。 

• 

単色(一定レベルの透明度をもたせることも可能) 

• 

グラデーション(直線又は放射) 

SVGは,ペイントサーバという一般概念を用いている。ペイントサーバは,システムペイントとは異な

り,'fill'又は'stroke'プロパティのローカルIRI参照を使用することによって指定される。グラデーション及

び色は,単に特定の種類のペイントサーバである。 

11.2 塗りの指定 

'fill'及び'stroke'プロパティは,次に示されるような<paint>型の値をとる。 

<paint>:        none | 

currentColor | 

<color> | 

<FuncIRI> [ none | currentColor | <color>] | 

<system paint> |  

inherit 

none  

一切塗りを適用しないことを示す。 

currentColor  

'color'プロパティの現在のアニメーション値によって指定された色を用いて塗りが実施されなければな

170 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

らないことを示す。このメカニズムの提供によって,他の(SVGではない)XMLなど親文法の間におけ

る色属性の共有が促進される。このメカニズムを用いることによって,利用者がHTMLでスタイルを定義

して'color'プロパティを設定し,次にそのスタイルをSVG利用者エージェントに渡すことによって,その

SVGテキストも同じ色で描画させることができる。 

<color>  

(sRGB色空間 [SRGB] における)明示的な色。 

<FuncIRI> [ none | currentColor | <color>]  

<FuncIRI>は,グラデーションのようなペイントサーバを指定する。<FuncIRI>の断片識別子は,現在の

オブジェクトを塗るために使用するペイントサーバ(例 グラデーション又は'solidColor')へのリンクを

提供する。SVG Tiny 1.2利用者エージェントは,ローカルIRI参照をサポートしなければならないだけで

ある。そのIRI参照が無効の場合(例 存在しないオブジェクトを指している場合,そのオブジェクトが

有効なペイントサーバではない場合,又は,それが非ローカルIRI参照でありビューアがそれをサポート

していない場合)には,予備の値(指定されていれば)が使用される。そうでない場合,noneが指定され

たものとして扱われる。 

<system paint> 

システムペイントサーバ。 

11.3 フィルプロパティ 

'fill'  

値: 

<paint> | inherit(11.2を参照)。 

初期値: 

black  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

"none",システムペイント,指定された<color>値,又は絶対IRI  

'fill'プロパティは,与えられた図形要素の内部の塗りを指定する。塗られる領域は,その図形の外形の

内側における全領域からなる。図形の内部を決定するためには,全てのサブパスを考慮しなければならな

い。また,その内部は,'fill-rule'プロパティの現在値に関連する規則に従って決定されなければならない。

図形の幅0の幾何学的外形が,塗りの対象としてその領域に含まれなければならない。 

追加的な"closepath"コマンドがパスに追加され,サブパスの始点と終点とを接続したかのように,開い

ているサブパスはフィル操作の実行によってフィルされなければならない。したがって,フィル操作は,

'path'要素内の開いているサブパス(すなわち,closepathコマンドのないサブパス)と,'polyline'要素との

両方に適用される。 

'fill-rule'  

値: 

nonzero | evenodd | inherit  

初期値: 

nonzero  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

background image

171 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

'fill-rule'プロパティは,キャンバスのどの部分がその図形の内部に含まれるのかを決定するために使用す

るアルゴリズムを示す。単純で交差もしないパスであれば,どの領域が“内部”なのかは直観的に分かり

やすい。しかしながら,それ自体が交差しているパス,又は一つのサブパスが別のサブパスを囲んでいる

ような複雑なパスについては,“内部”の解釈はそれほど明確ではない。 

'fill-rule'プロパティは,図形の内部を決定するための二つの選択肢を提供している。 

nonzero  

次のアルゴリズム,又は同様の結果を出す他のアルゴリズムを利用し,そのキャンバス上の点の“内部”

を決定しなければならない。まず,その点から任意の方向に無限の長さの射線をひく。そして,図形の部

分がその射線と交差する場所を調べる。0から数え出し,パスの部分がその射線を左から右に交差するた

びに1を加え,パスの部分がその射線を右から左に交差するたびに1を引く。交差した箇所を数え,その

結果が0の場合,その点はパスの外部にある。そうでなければ,それは内部にある。次の図は,このnonzero

規則を示している。 

この例をSVGで見る(SVG対応ブラウザだけ)。 

http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/images/painting/fillrule-nonzero.svg 

evenodd  

次のアルゴリズム,又は同様の結果を出す他のアルゴリズムを利用し,そのキャンバス上の点の“内部”

を決定しなければならない。まず,その点から任意の方向に無限の長さの射線をひく。そして,その射線

が交差した与えられた図形のパス部分の数を数える。その数が奇数の場合,その点は内部にある。偶数の

場合,その点は外部にある。次の図は,このevenodd規則を示している。 

この例をSVGで見る(SVG対応ブラウザだけ)。 

http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/images/painting/fillrule-evenodd.svg 

注記 上記の例では,そのパス部分が射線と一致したとき,又は射線の接線である場合の対応につい

ては示されていない。この射線はどのような射線でも構わないので,単純にそのような問題に

172 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

なる交わり方をしない射線を選んでもよい。 

'fill-opacity'  

値: 

<opacity-value> | inherit 

初期値: 

1  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

'fill-opacity'は,現在のオブジェクトの内部を塗るために使われなければならない塗り操作の不透明化を

指定する(3.4.1を参照)。 

<opacity-value>  

現在のオブジェクトをフィルする塗り操作の不透明化。0.0(完全な透明)から1.0(完全な不透明)ま

での範囲に入らない値は,この範囲に固定しなければならない(C.5を参照)。 

関連プロパティ: 'stroke-opacity'. 

11.4 ストロークプロパティ 

要素のストロークの方法に影響を与えるプロパティを次に示す。 

どの事例においても,方向による影響を受けるストローク(破線書式をもつものなど)は,そのストロ

ーク操作の開始点が図形要素の開始点と同じになるように描画されなければならない。特に'path'要素につ

いては,そのパスの始まりは最初の"moveto"コマンドの始点である。 

図形要素の外形に沿った進行によって計算される破線書式のようなストロークについては,その距離計

算において,SVG利用者エージェントの標準的なパスに沿った距離に関するアルゴリズムを使用しなけれ

ばならない。 

グラデーションのような複雑なペイントサーバを使用して実行されるストロークでは,そのストローク

操作が,現在の図形要素及びその関連ストロークプロパティの幾何形状が定義する幾何学図形が同等の

'path'要素に変換され,与えられたペイントサーバでフィルされたときと同じ結果にならなければならない。 

'stroke'  

値: 

<paint> | inherit(11.2を参照)。 

初期値: 

none  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

"none",システムペイント,指定された<color>値,又は絶対IRI  

'stroke'プロパティは,与えられた図形要素の外形に沿った塗りを適用する。 

単一のmovetoで構成されるサブパス(箇条8を参照)は,ストロークされない。全く同じ位置に対する

moveto及びlinetoから構成されるサブパス,又はmoveto及びclosepathから構成されるサブパスは,

'stroke-linecap'プロパティの値がbuttの場合,ストロークしてはならない。また,'stroke-linecap'プロパティ

background image

173 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

の値がround又はsquareの場合,ストロークしなければならない。それぞれ与えられた点の中心に置かれ

た円又は四角を生成する。 

このプロパティは,その要素の装飾的包含ボックスに寄与する。 

'stroke-width'  

値: 

<length> | inherit 

初期値: 

1  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

<length>  

現在のオブジェクトに適用するストロークの幅。 

値が0の場合,ストロークは一切塗られない。負の値はサポート外であり,その場合ストロークを指定

していないときと同様に処理される。 

このプロパティは,その要素の装飾的包含ボックスに寄与する。 

'stroke-linecap'  

値: 

butt | round | square | inherit 

初期値: 

butt  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

'stroke-linecap'は,ストロークが適用される開いているサブパスの終わりで使用する図形を指定する。 

butt  

開いているサブパスの終わりに描画される図形は,次の図のようにならなければならない。 

round  

開いているサブパスの終わりに描画される図形は,次の図のようにならなければならない。 

square  

開いているサブパスの終わりに描画される図形は,次の図のようにならなければならない。 

この例をSVGで見る(SVG対応ブラウザだけ)。 

http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/images/painting/linecap.svg 

このプロパティは,その要素の装飾的包含ボックスに寄与する。 

background image

174 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'stroke-linejoin'  

値: 

miter | round | bevel | inherit 

初期値: 

miter  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

'stroke-linejoin'は,ストロークが適用される図形の角で使用する図形を指定する。 

miter  

図形の角に描画される図形は,次の図のようにならなければならない。 

round  

図形の角に描画される図形は,次の図のようにならなければならない。 

bevel  

図形の角に描画される図形は,次の図のようにならなければならない。 

この例をSVGで見る(SVG対応ブラウザだけ)。 

http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/images/painting/linejoin.svg 

このプロパティは,その要素の装飾的包含ボックスに寄与する。 

'stroke-miterlimit'  

値: 

<miterlimit> | inherit 

初期値: 

4  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

二つの線分が鋭角をなして合わさり,かつ,'stroke-linejoin'にmiterが指定されている場合,パスをスト

ロークしている線の厚さをずっと超えてその留め継ぎ(miter)が伸ばされることがある。'stroke-miterlimit'

は,その留め継ぎの長さと'stroke-width'との比率に一定の制限を課すものである。その制限を超えたときに

は,miterはbevelに変換されなければならない。 

<miterlimit>  

175 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

その留め継ぎの長さと'stroke-width'との比率に対する制限。<miterlimit>の値は1以上の数値とする。そ

れ以外の値をもつ場合にはサポート外となり,そのプロパティが指定されていないときと同じように処理

されなければならない。 

留め継ぎの長さ(留め継ぎの外側の先端と内側の角との間の距離)と'stroke-width'との比率は,次の式に

よる利用者空間における部分の間の角度(θ)に直接関連する。 

miterLimit = miterLength / stroke-width = 1 / sin(θ/ 2) 

例えば,留め継ぎの制限が1.414の場合,θが90度未満であればmiterをbevelに変換する。制限が4.0

の場合,θが約29度未満であればそれらを変換する。制限が10.0の場合,θが約11.5度未満であればそ

れらを変換する。 

このプロパティは,その要素の装飾的包含ボックスに寄与する。 

'stroke-dasharray'  

値: 

none | <list-of-lengths> | inherit 

初期値: 

none  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可(非加法的) 

算出値: 

inheritを除く指定値 

'stroke-dasharray'は,パスのストロークに使用するダッシュ及びギャップのパターンを指定する。

<list-of-lengths>には,使用しなければならないダッシュ及びギャップの長さを指定する<length>のリストが

含まれる。値が奇数の場合,偶数の値を得るためにこの値のリストを繰り返さなければならない。したが

って,stroke-dasharray="5,3,2"は,stroke-dasharray="5,3,2,5,3,2"と同じである。属性'stroke-linecap'の算出値が

それぞれのダッシュの両側に適用される。そのダッシュの長さが0の場合でも,stroke-linecapの値がround

及びsquareであれば,その線端処理は追加される。 

none  

ダッシュを利用しないことを示す。ストロークを適用する場合には,その線は無地で描画されなければ

ならない。 

<list-of-lengths>  

使用しなければならないダッシュ及びギャップの長さを指定する<length>のリスト。負の<length>値はサ

ポート外として扱われなければならない。その場合プロパティを指定していないときと同様に処理される。

<length>の合計が0の場合には,値noneが指定されたときと同様にストロークが描画される。 

注記 ここでは,'stroke-dasharray'の振る舞いについて完全には規定していない事例が幾つかある。な

ぜならば,SVG Tinyの実装は,しばしばそれが容易に変えることができない予定された振る舞

いをもつ基本図形ライブラリに依存しているからである。その例として,二つのパス部分の角,

サブパスにおけるstroke-dasharrayの継続,その他においてダッシュがちょうど終わる場合の

'stroke-linejoin'及び'stroke-linecap'の描画がある。これらの事例は,SVG 1.2 Fullにおいて完全に

規定される可能性がある。線端処理とは別に定義することができる 破線端処理のような属性が

追加される可能性もある。このような現在規定されていない事例については,制作者は特定の

ビューアの'stroke-dasharray'に対する特定の振る舞いに依存しないようにすることが望ましい。 

176 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'stroke-dashoffset'  

値: 

<length> | inherit  

初期値: 

0  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

'stroke-dashoffset'は,ダッシュの開始に使われる破線書式への距離を指定する。複数のサブパスで'path'

要素を描画する場合,'stroke-dashoffset'の値は,それぞれのサブパスにおける元の'stroke-dashoffset'の値から

始めるのがよい。SVG 1.2 Fullでは,この振る舞いの変更のために属性を追加し,また,より厳格になる

可能性がある。 

<length>  

負の値をもつこともできる。 

'stroke-opacity'  

値: 

<opacity-value> | inherit 

初期値: 

1  

適用対象: 

図形及びテキスト内容要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

'stroke-opacity'は,現在のオブジェクトをストロークするために使われる塗り操作の不透明化を指定する

(3.4.1を参照)。 

<opacity-value>  

現在のオブジェクトをストロークする塗り操作の不透明化。0.0(完全な透明)から1.0(完全な不透明)

までの範囲に入らない値は,この範囲に固定しなければならない(C.5を参照)。 

関連プロパティ: 'fill-opacity' 

11.5 ノンスケーリングストローク 

どのような変換が適用されても,あるオブジェクトの外形について元の幅を維持したほうがよい場合が

ある。例えば,ある地図に道路を表現する2 pxの線が示されている場合,利用者がその地図をズームした

としても,その道路は2 pxのままであったほうがよい。このことを達成するために,この規格では,

'vector-effect'プロパティが導入されている。SVG言語の将来のバージョンでは,このプロパティを用いた

より強力なベクトル効果を提供する予定だが,このバージョンでは,ノンスケーリングストロークの振る

舞いを指定することができる機能にとどめる。 

'vector-effect'  

値: 

non-scaling-stroke | none | inherit  

初期値: 

none  

background image

177 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

適用対象: 

図形要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

none  

ベクトル効果を適用しないことを指定する(すなわち,SVG 1.1における既定の描画の振る舞いが適用

され,まず指定した塗りで図形の幾何形状がフィルされ,次に指定した塗りでその外形がストロークされ

なければならない。)。 

non-scaling-stroke  

オブジェクトがストロークされる方法を変更する。ストロークでは,通常の場合,現在の利用者空間で

その図形のパスにおけるストロークの外形を計算し,ストロークの塗り(色又はグラデーション)によっ

てその外形をフィルする。non-scaling-strokeのベクトル効果を用いた場合には,ストロークの外形は利用

者座標空間ではなく“ホスト”座標空間において計算されなければならない。より正確に説明すると,利

用者エージェントは,この規格においては常に“スクリーン座標空間”と同じであるホスト座標空間を確

立する。ストロークの外形は次の方法で計算される。まず,図形のパスがホスト座標空間に変換される。

ストロークの外形はそのホスト座標空間で計算される。その外形は変換されて利用者座標系に戻される(ス

トロークの外形は,常に現在の利用者空間におけるストロークの塗りでフィルされる。)。このような変更

の結果として,ストロークの太さがその要素の変換(不均等なスケーリング,横ずれ変換など),及びズー

ムのレベルに依存しない視覚的効果が得られる。 

注記 SVGの将来のバージョンでは,ホスト座標系を管理する方法が提供される可能性がある。 

次は,non-scaling-strokeである'vector-effect'の例である。 

例: non-scaling-stroke.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="6cm" height="4cm" viewBox="0 0 600 400"  

     viewport-fill="rgb(255,150,200)"> 

  <desc>Example non-scaling stroke</desc> 

  <rect x="1" y="1" width="598" height="398" fill="none" stroke="black"/> 

   

  <g transform="scale(9,1)"> 

    <line stroke="black" stroke-width="5" x1="10" y1="50" x2="10" y2="350"/> 

    <line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5"  

        x1="32" y1="50" x2="32" y2="350"/> 

    <line vector-effect="none" stroke="black" stroke-width="5"  

        x1="55" y1="50" x2="55" y2="350"/> 

  </g> 

background image

178 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

</svg> 

11.6 単純アルファ合成 

図形要素は,単純アルファ合成を用いることによって,既にキャンバスに描画されている要素と混合さ

れる。単純アルファ合成では,キャンバス上の全ピクセルにおける色及び不透明化は,次の式に基づいて

いなければならない(全ての色値は,前から乗算されたアルファを用いている。)。 

Er, Eg, Eb 

− 要素の色値 

Ea 

− 要素のアルファ値 

Cr, Cg, Cb 

− キャンバスの色値(混合前) 

Ca 

− キャンバスのアルファ値(混合前) 

Cr', Cg', Cb' − キャンバスの色値(混合後) 

Ca' 

− キャンバスのアルファ値(混合後) 

     Ca' = 1 − (1 − Ea) × (1 − Ca) 

     Cr' = (1 − Ea) × Cr + Er 

     Cg' = (1 − Ea) × Cg + Eg 

     Cb' = (1 − Ea) × Cb + Eb 

      

次の描画プロパティ(合成操作を実行する色空間に関する情報を提供する。)は,合成操作に適用される。 

• 

'color-rendering' 

11.6.1 currentColor値の合成 

currentColor値には,不透明化の部分をもつ色値を割り当ててもよい。この不透明値は,上で示されたア

ルファ合成を用いて,描画操作において利用される。すなわち,currentColorの不透明値は,ペイントサー

バ(それ自体が不透明値をもっていてもよい。)に色を合成する場合に利用されている。 

11.7 'viewport-fill'プロパティ 

SVGでは,制作者は無地を指定することができ,ビューポートを作成するどのような要素('svg'要素な

ど)のビューポートでも無地でフィルすることができる。 

'viewport-fill'プロパティを用いて,特定の要素が作成するビューポートのフィルに使用する色を指定する

ことができる。それは,指定された無地の種類によって,それが適用される要素のキャンバス全体をフィ

ルする。さらに,その要素の'viewBox'がそのキャンバスを切り取ってもよい。 

'viewport-fill'  

値: 

none | currentColor | <color> | inherit  

background image

179 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

初期値: 

none  

適用対象: 

ビューポート作成要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

"none"又は指定された<color>値。inheritを除く。 

'viewport-fill'の値がnoneの場合,そのビューポートには塗り操作が一切適用されない。 

'viewport-fill'の例を次に示す。 

例: 11̲02.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     viewport-fill="red"> 

  <desc> 

    Everything here has a red background. 

    The rectangle is not filled, so the red background will show through. 

  </desc> 

  <rect x="20" y="20" width="100" height="100" fill="none" stroke="black"/> 

</svg> 

例11̲03.svgは,もう少し複雑な例である。この'viewBox'は,幅300ユニット,高さ100ユニットの座

標系を与えている。図は,これが正方形のビューポートの中に表示された場合を示している。 

例: 11̲03.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     viewBox="0 0 300 100" viewport-fill="yellow"> 

  <desc> 

    The viewport has a yellow background. 

    The rectangle is filled and covers the viewport, so the yellow  

    background will only show through in the "leftovers" if the  

background image

180 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    aspect ratio of the viewport differs from that of the viewBox. 

  </desc> 

  <rect x="0" y="0" width="300" height="100" fill="red" fill-opacity="0.3" 

stroke="black"/> 

</svg> 

このビューポートのフィルは,要素の描画チェーンにおける最初の操作である。したがって: 

• 

ビューポートのフィル操作は,フィル及びストロークの前に行われる。 

• 

ビューポートのフィル操作は合成の前に行われる。したがって,それは合成操作に対する入力の一

部である。 

• 

ビューポートのフィル操作は,その要素の概念的なバッファ外のバッファに対して描画される。し

たがって,不透明化も通常どおり適用される。 

• 

ビューポートフィルは,'fill'又は'fill-opacity'プロパティの影響を受けない。 

11.8 'viewport-fill-opacity'プロパティ 

'viewport-fill-opacity'プロパティは,特定の要素に使用する'viewport-fill'の不透明化を指定する。 

'viewport-fill-opacity'  

値: 

<opacity-value> | inherit  

初期値: 

1.0  

適用対象: 

ビューポート作成要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

<opacity-value>  

ビューポートをフィルする塗り操作の不透明化。0.0(完全な透明)から1.0(完全な不透明)までの範

囲に入らない値は,この範囲に固定しなければならない(C.5を参照)。 

11.9 可視性及び描画の制御 

SVGでは,'display'プロパティ及び'visibility'プロパティを用いることによって,図形要素の描画又は

181 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

('display'プロパティの場合)コンテナ要素の描画を制御することができる。これら二つのプロパティは,

どちらもDOMにおけるそのオブジェクトの存在には影響を与えない。すなわち,これらのプロパティの

値が何であったとしても,そのオブジェクトはDOMに残ったままである。 

これら二つのプロパティの違いを次に示す。 

• 

コンテナ要素への適用の場合,'display'をnoneに設定すると,そのコンテナ及び子の全てが描画ツ

リーから排除される。したがって,それは一つのグループとして要素のグループに作用する。しか

しながら,'visibility'の場合には,個々の図形要素に適用されるだけである。'g'において'visibility'を

hiddenに設定すると,子がそれ自体の'visibility'プロパティをvisibleに指定しない限り,それらの子

は視覚的に見えなくなる。 

• 

'display'プロパティをnoneに設定すると,与えられた要素は描画ツリーの一部にはならない。しか

しながら,'visibility'をhiddenに設定すると,その要素は描画ツリーの一部であり,そこに場所を取

っているときと同じように処理される。しかし,キャンバスへの実際の視覚的な描画は実施されな

い。このような区別をすることは,'tspan'要素,イベント処理及び包含ボックスの計算において意味

がある。'tspan'要素において'display'をnoneに設定すると,そのテキスト文字列はテキストレイアウ

トにおいて無視される。しかし,'visibility'をhiddenに設定すると,そのテキスト文字列は視覚的に

キャンバスに描画されないにもかかわらず,テキストレイアウトには使用される(すなわち,場所

をとる。)。イベントについていえば,'display'をnoneに設定すると,その要素は,要素が描画ツリ

ーにあることが必要なイベント(例 マウスイベント)を一切受け取らない。しかし,'visibility'を

hiddenに設定すると,'pointer-events'プロパティの値によっては,その要素はイベントを受け取るこ

とがある。'display'をnoneに設定した図形要素の幾何形状は包含ボックスの計算には含まれない。

しかし,'visibility'をhiddenに設定した場合には,図形要素の幾何形状は包含ボックスの計算に使わ

れる。 

'display'  

値: 

inline | block | list-item | 

run-in | compact | marker | 

table | inline-table | table-row-group | table-header-group | 

table-footer-group | table-row | table-column-group | table-column | 

table-cell | table-caption | none | inherit  

初期値: 

inline  

適用対象: 

'svg','g','switch','a','foreignObject',図形要素(テキスト内容ブロック要素を含む。), 

メディア要素,及びテキストサブ要素(例 'tspan','a') 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

全て 

アニメーション: 可 

算出値: 

inheritを除く指定値 

値display="none"は,与えられた要素及びその子は直接描画されず,また,音声を発しない(すなわち,

それらの要素は描画ツリーに存在しない。)ことを示す。none以外の全ての算出値は,SVG利用者エージ

ェントによって要素が描画され,また,オーディブルにされなければならないことを示す。 

'display'プロパティは特定の要素の直接描画又は音声出力の有無に影響を与えるだけであり,要素が他の

182 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素から参照されることを妨げない。 

display="none"である要素はテキストレイアウト操作において場所を取らず,イベントを受け取らない。

また,包含ボックスの計算にも使われない。 

このプロパティの規定の定義は,この規格で追加された情報を除き,CSS 2([CSS2]の9.2.5)に記載さ

れている。 

'visibility'  

値: 

visible | hidden | collapse | inherit  

初期値: 

visible  

適用対象: 

図形要素(テキスト内容ブロック要素を含む。),メディア要素,及びテキストサブ要 

素(例 'tspan','a') 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

全て 

アニメーション: 可 

算出値: 

inheritを除く指定値 

visible  

現在の図形要素又はメディア要素が可視でなければならない。 

hidden 又は collapse  

現在の図形要素又はメディア要素が不可視でなければならない(つまり,キャンバスには何も塗られな

い。)。 

'visibility'プロパティは,'display'プロパティとは異なり,メディア要素の音声出力の有無には一切影響を

与えないことに注意する。要素の音声出力の有無を制御するには,'display'又は'audio-level'プロパティを使

用する。 

'tspan'要素において'visibility'プロパティがhiddenに設定されているときは,テキストは不可視だが,テ

キストレイアウトの計算においては場所を取っていなければならないことに注意する。 

'pointer-events'プロパティの値によっては,'visibility'プロパティをhiddenに設定している図形要素はイベ

ントを受け取ることができる。 

このプロパティの規定の定義は,この規格で追加された情報を除き,CSS 2([CSS2]の11.2)に記載され

ている。 

11.10 

描画ヒント 

11.10.1 

'color-rendering'プロパティ 

カラー補間及び合成を実行する場合,(トレードオフの関係にある)そのスピードに対して品質をどう扱

うのかについて,SVG内容の制作者が実装に対してヒントを提供したいときがある。'color-rendering'プロ

パティは,カラー補間及び合成操作を最適化する方法についてSVG利用者エージェントにヒントを提供す

る。 

'color-rendering'  

値: 

auto | optimizeSpeed | optimizeQuality | inherit  

初期値: 

auto  

適用対象: 

コンテナ要素,図形要素,及び'animateColor'  

継承: 

可 

183 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

auto  

利用者エージェントは,トレードオフの関係にあるスピードと品質との適切なバランスを達成しなけれ

ばならないが,スピードよりも品質をより重視することを示す。 

optimizeSpeed  

利用者エージェントは,品質よりも描画のスピードを優先させなければならないことを示す。RGBディ

スプレイ装置については,この選択肢を選択することによって,利用者エージェントが装置RGB色空間

におけるカラー補間及び合成を実行することがある。 

optimizeQuality  

利用者エージェントは,描画のスピードよりも品質を優先させなければならないことを示す。 

11.10.2 

'shape-rendering'プロパティ 

'path'要素のようなベクタ図形要素,並びに円及び長方形のような基本図形を描画する場合,トレードオ

フの関係をどう扱うのかについて,SVG内容の制作者が実装に対してヒントを提供したいときがある。

'shape-rendering'プロパティは,次のようなヒントを提供する。 

'shape-rendering'  

値: 

auto | optimizeSpeed | crispEdges |geometricPrecision | inherit  

初期値: 

auto  

適用対象: 

図形 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

auto  

利用者エージェントは,トレードオフの関係にあるスピード,エッジの明瞭性,及び幾何学的精度にお

ける適切なバランスを達成しなければならないが,スピード及びエッジの明瞭性よりも幾何学的精度をよ

り重視することを示す。 

optimizeSpeed  

利用者エージェントは,幾何学的精度及びエッジの明瞭性よりも描画のスピードを優先させなければな

らないことを示す。この選択肢を選択した場合,利用者エージェントは図形のアンチエイリアシングがさ

れなくなる。 

crispEdges  

利用者エージェントは,描画のスピード及び幾何学的精度よりも,芸術作品のエッジをくっきりと際立

たせることを優先するようにしなければならないことを示す。くっきりとしたエッジを達成するために,

利用者エージェントは全ての直線及び曲線(場合によっては垂直又は水平に近い直線だけ)に対するアン

チエイリアシングをしないようにすることもある。また,利用者エージェントは,装置のピクセルにエッ

ジをそろ(揃)えるために線位置及び線幅を調整してもよい。 

184 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

geometricPrecision  

利用者エージェントは,スピード及びエッジの明瞭性よりも幾何学的精度を優先させなければならない

ことを示す。 

11.10.3 

'text-rendering'プロパティ 

テキストを描画する場合,トレードオフの関係をどう扱うのかについて,SVG内容の制作者が実装に対

してヒントを提供したいときがある。'text-rendering'プロパティは,次のようなヒントを提供する。 

'text-rendering'  

値: 

auto | optimizeSpeed | optimizeLegibility |geometricPrecision | inherit  

初期値: 

auto  

適用対象: 

テキスト内容ブロック要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

auto  

利用者エージェントは,トレードオフの関係にあるスピード,視認性,及び幾何学的精度における適切

なバランスを達成しなければならないが,スピード及び幾何学的精度よりも視認性をより重視することを

示す。 

optimizeSpeed  

利用者エージェントは,視認性及び幾何学的精度よりも描画のスピードを優先させなければならないこ

とを示す。この選択肢を選択した場合,利用者エージェントはテキストのアンチエイリアシングを行わな

い場合もある。 

optimizeLegibility  

利用者エージェントは,描画のスピード及び幾何学的精度よりも視認性を優先させなければならないこ

とを示す。利用者エージェントは,テキストを最も読みやすくするために,しばしばアンチエイリアシン

グ技術,内蔵フォントヒントのどちらか,又はその両方を適用するかどうか選択する。 

geometricPrecision  

利用者エージェントは,視認性及び描画のスピードよりも幾何学的精度を優先させなければならないこ

とを示す。この選択肢を選択した場合,通常利用者エージェントは内蔵フォントヒントの使用を中断し,

字形の外形がパスデータの描画に匹敵する幾何学的精度によって描画されるようにする。 

11.10.4 

'image-rendering'プロパティ 

画像処理を実行する場合,(トレードオフの関係にある)そのスピードに対して品質をどう扱うのかにつ

いて,SVG内容の制作者が実装に対してヒントを提供したいときがある。'image-rendering'プロパティは,

画像処理を最適化する方法についてSVG利用者エージェントにヒントを提供する。 

'image-rendering'  

値: 

auto | optimizeSpeed | optimizeQuality | inherit  

初期値: 

auto  

適用対象: 

画像 

継承: 

可 

185 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

auto  

利用者エージェントは,トレードオフの関係にあるスピードと品質との適切なバランスを達成しなけれ

ばならないが,スピードよりも品質をより重視することを示す。利用者エージェントは,少なくとも最近

傍法リサンプリングと同じくらいの品質のリサンプリングアルゴリズムを利用しなければならないが,双

一次リサンプリングが強く推奨される。適合高品質SVGビューアでは,利用者エージェントは,少なくと

も双一次リサンプリングと同じくらいの品質のリサンプリングアルゴリズムを利用しなければならない。 

optimizeQuality  

利用者エージェントは,描画のスピードよりも品質を優先させなければならないことを示す。利用者エ

ージェントは,少なくとも双一次リサンプリングと同じくらいの品質のリサンプリングアルゴリズムを利

用しなければならない。 

optimizeSpeed  

利用者エージェントは,品質よりも描画のスピードを優先させなければならないことを示す。利用者エ

ージェントは,速い描画が可能なリサンプリングアルゴリズムを利用することが望ましい。そのリサンプ

リングアルゴリズムは,少なくとも最近傍法リサンプリングと同じくらいの品質でなければならない。よ

り高い品質のアルゴリズムを用いることによって性能の目標を達成することができる場合,利用者エージ

ェントは最近傍法リサンプリングではなくその高品質のアルゴリズムを使用することが望ましい。 

どの場合においても,元データ及び/又は対象装置がインデックス付きのカラーであったとしても,リ

サンプリングはトゥルーカラー(truecolor)(例 24ビット)色空間において実施しなければならない。 

11.10.5 

'buffered-rendering'プロパティ 

描画を実行する場合,そのスピードに対してメモリとのトレードオフ関係を適切に扱うために,SVG内

容の制作者が実装に対して要素が変更される頻度に関するヒントを提供したいときがある。

'buffered-rendering'プロパティは,要素の描画のバッファリングの方法についてSVG利用者エージェントに

ヒントを提供する。 

'buffered-rendering'  

値: 

auto | dynamic | static | inherit  

初期値: 

auto  

適用対象: 

コンテナ要素及び図形要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

auto  

利用者エージェントは,更新スピードとリソースの割振りとの間における合理的な妥協点において機能

することを示す。 

dynamic  

background image

186 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

その要素が頻繁に変更されることを示す。 

static  

その要素が頻繁に変更されないことを示す。つまり,利用者エージェントがバッファ外のバッファなど

のリソースを割り当てることによって,再描画における性能を向上させることができることである。要素

が決して変更されないという意味ではない。'static'値のときに要素が変更されると,再描画の性能が低下す

る可能性がある。 

11.11 

塗りプロパティの継承 

この11.11で示される全ての塗りプロパティの値は,与えられたオブジェクトの親から継承することが

できる。しかしながら,その塗りは常に各図形要素に個別に適用され,コンテナ要素レベル(例 'g')に

は決して適用されない。次のSVGの例では,グラデーションのフィルは'g'で指定されているが,そのグラ

デーションは単純に'g'要素をとおして各長方形に継承されるので,それらの長方形の描画では内部がグラ

デーションで塗られることになる。 

継承の例を次に示す。 

例: 11̲01.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="7cm" height="2cm" viewBox="0 0 700 200"> 

  <desc>Gradients apply to leaf nodes</desc> 

  <g> 

    <defs> 

      <linearGradient xml:id="MyGradient" gradientUnits="objectBoundingBox"> 

        <stop offset="0" stop-color="#F60"/> 

        <stop offset="1" stop-color="#FF6"/> 

      </linearGradient> 

    </defs> 

    <rect x="1" y="1" width="698" height="198" 

          fill="none" stroke="blue" stroke-width="2"/> 

    <g fill="url(#MyGradient)"> 

      <rect x="100" y="50" width="200" height="100"/> 

      <rect x="400" y="50" width="200" height="100"/> 

   </g> 

  </g> 

</svg> 

background image

187 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

オブジェクトの包含ボックスで定義される全ての塗りプロパティは,操作が適用される図形要素の包含

ボックスを使用する。テキスト要素の定義においては,オブジェクトの包含ボックスで定義される全ての

塗り操作が'text'要素全体の包含ボックスを使用することに注意する(10.4を参照)。 

11.12 

オブジェクト及びグループの不透明化:'opacity'プロパティ 

SVGには,幾つかの不透明化に関するプロパティがある。 

• 

無地不透明化 

• 

フィル不透明化 

• 

ストローク不透明化 

• 

グラデーション停止不透明化 

• 

ビューポートフィル不透明化 

• 

オブジェクトグループ不透明化(この11.12に示す。) 

オブジェクトグループ不透明化(この11.12に示す。)を除き,他の全ての不透明化プロパティは,中間

的な描画操作に関わっている。オブジェクトグループ不透明化は,後処理操作として概念的に考えること

ができる。概念的には,そのオブジェクトグループがRGBAのバッファ外画像に描画された後,オブジェ

クトグループ不透明化の設定において,そのバッファ外画像を現在の背景に混合させる方法が指定される。 

オブジェクトグループ不透明化は,コンテナ要素に適用されると,リソースを集約するような操作にな

ることがある。したがって,このバージョンのSVGではこのプロパティを制限し,'image'要素以外には設

定及び適用できないようにしている。 

注記 その値がinheritに設定された場合,この不透明化プロパティの初期値は1(完全な不透明化を

意味する。)である。これは,それを全く指定していないときと同じである。 

'opacity'  

値: 

<opacity-value> | inherit 

初期値: 

適用対象: 

'image'要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

<opacity-value>  

オブジェクト全体に適用されなければならない統一的な不透明化設定。0.0(完全な透明)から1.0(完

全な不透明)までの範囲に入らない値は,この範囲に固定しなければならない(C.5を参照)。 

次の'opacity'の例では,SVG Basic/Full 1.1とこの規格との間における振る舞いの違いが示されている。 

例: struct-image-201-t.svg 

background image

188 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

<?xml version="1.0" encoding="UTF-8"?> 

<svg version="1.2" baseProfile="tiny" xml:id="svg-root" width="100%" height="100%"  

  viewBox="0 

480 

360" 

xmlns="http://www.w3.org/2000/svg" 

xmlns:ev="http://www.w3.org/2001/xml-events" 

  xmlns:xlink="http://www.w3.org/1999/xlink"> 

  <!--======================================================================--> 

  <!--=  Copyright 2007 World Wide Web Consortium, (Massachusetts          =--> 

  <!--=  Institute of Technology, European Research Consortium for         =--> 

  <!--=  Informatics and Mathematics (ERCIM), Keio University).            =--> 

  <!--=  All Rights Reserved.                                              =--> 

  <!--=  See http://www.w3.org/Consortium/Legal/.                          =--> 

  <!--======================================================================--> 

  <metadata> 

      <p> 

        This test shows the differences in opacity-handling between SVG Tiny 1.2 and SVG 

Full 1.1. 

      </p> 

  <p> 

The test has passed if the leftmost column looks like either of the other 

two columns.  

SVG Tiny 1.2 requires only what is portrayed by the middle column, but 

does not require  

user agents that implement both SVG 1.1 and 1.2 Tiny to follow the more 

limited  

opacity-handling in 1.2 Tiny. 

  </p> 

  <p> 

In SVG Tiny 1.2 the opacity property is only allowed on the image element 

itself.  

If it's encountered anywhere else it must be treated as an unsupported 

value. 

NOTE: This test is not valid 1.2 Tiny because it's using opacity on something 

other than the image element. 

  </p> 

</metadata> 

  <title xml:id="test-title">&#36;RCSfile: struct-image-201-t.svg,v $</title> 

  <defs> 

    <font-face 

      font-family="SVGFreeSansASCII" 

background image

189 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      unicode-range="U+0-7F"> 

      <font-face-src> 

        <font-face-uri xlink:href="SVGFreeSans.svg#ascii"/> 

      </font-face-src> 

    </font-face> 

  </defs> 

  <g 

xml:id="test-body-content" 

font-family="SVGFreeSansASCII,sans-serif" 

font-size="18"> 

<text x="240" y="70" text-anchor="middle" font-size="32">Test opacity</text> 

<g id="test" transform="translate(-100 0)"> 

<text x="240" y="120" text-anchor="middle">Test</text> 

<text x="240" y="130" text-anchor="middle" font-size="9">Mouseover to 

compare</text> 

<rect id="r1" x="200" y="135" height="20" width="80" fill="green"/> 

<rect id="r2" x="200" y="160" height="20" width="80" fill="green"/> 

<rect id="r3" x="200" y="185" height="20" width="80" fill="green"/> 

<rect id="r4" x="200" y="210" height="20" width="80" fill="green"/> 

<g pointer-events="none"> 

<image 

width="460" 

height="20" 

x="10" 

y="135" 

xlink:href="1pixelwhite.png" preserveAspectRatio="none" opacity="0.25"/> 

<g opacity="0.5"> 

<image 

width="460" 

height="20" 

x="10" 

y="160" 

xlink:href="1pixelwhite.png" preserveAspectRatio="none" opacity="0.5"/> 

<rect id="r5" x="200" y="185" height="20" width="80" 

fill="white" opacity="0.5"/> 

</g> 

<g opacity="0.75"> 

<g opacity="inherit"> 

<image width="460" height="20" x="10" y="210" 

xlink:href="1pixelwhite.png" preserveAspectRatio="none" opacity="inherit"/> 

</g> 

</g> 

</g> 

<ev:listener event="mouseover" observer="r1" handler="#handler"/> 

background image

190 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

<ev:listener event="mouseout" observer="r1" handler="#handler"/> 

<ev:listener event="mouseover" observer="r2" handler="#handler"/> 

<ev:listener event="mouseout" observer="r2" handler="#handler"/> 

<ev:listener event="mouseover" observer="r3" handler="#handler"/> 

<ev:listener event="mouseout" observer="r3" handler="#handler"/> 

<ev:listener event="mouseover" observer="r4" handler="#handler"/> 

<ev:listener event="mouseout" observer="r4" handler="#handler"/> 

<handler id="handler"> 

if(event.type == "mouseover") 

event.target.setFloatTrait("width", 280); 

if(event.target.id == "r3") 

document.getElementById("r5").setFloatTrait("width", 280); 

else 

event.target.setFloatTrait("width", 80); 

if(event.target.id == "r3") 

document.getElementById("r5").setFloatTrait("width", 80); 

</handler> 

</g> 

<g id="tiny12reference"> 

<text x="240" y="120" text-anchor="middle">Tiny 1.2 ref</text> 

<rect x="200" y="135" height="20" width="80" fill="green"/> 

<rect x="200" y="160" height="20" width="80" fill="green"/> 

<rect x="200" y="185" height="20" width="80" fill="green"/> 

<rect x="200" y="210" height="20" width="80" fill="green"/> 

<rect 

x="200" 

y="135" 

height="20" 

width="80" 

fill="white" 

fill-opacity="0.25"/> 

<rect 

x="200" 

y="160" 

height="20" 

width="80" 

fill="white" 

fill-opacity="0.5"/> 

<rect 

x="200" 

y="185" 

height="20" 

width="80" 

fill="white" 

fill-opacity="1"/> 

<rect 

x="200" 

y="210" 

height="20" 

width="80" 

fill="white" 

fill-opacity="1"/> 

background image

191 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

</g> 

<g id="full11reference" transform="translate(100 0)"> 

<text x="240" y="120" text-anchor="middle">Full 1.1 ref</text> 

<rect x="200" y="135" height="20" width="80" fill="green"/> 

<rect x="200" y="160" height="20" width="80" fill="green"/> 

<rect x="200" y="185" height="20" width="80" fill="green"/> 

<rect x="200" y="210" height="20" width="80" fill="green"/> 

<rect 

x="200" 

y="135" 

height="20" 

width="80" 

fill="white" 

fill-opacity="0.25"/> 

<rect 

x="200" 

y="160" 

height="20" 

width="80" 

fill="white" 

fill-opacity="0.25"/> 

<rect 

x="200" 

y="185" 

height="20" 

width="80" 

fill="white" 

fill-opacity="0.25"/> 

<rect 

x="200" 

y="210" 

height="20" 

width="80" 

fill="white" 

fill-opacity="0.421875"/> 

</g> 

  </g> 

  <g font-family="SVGFreeSansASCII,sans-serif" font-size="32"> 

  <text xml:id="revision" x="10" y="340" stroke="none"  

    fill="black">&#36;Revision: 1.4 $</text> 

  </g> 

  <rect xml:id="test-frame" x="1" y="1" width="478" height="358" fill="none" 

stroke="#000"/> 

</svg> 

background image

192 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

11.13 

色 

この規格では,全ての色はsRGB色空間 [SRGB] で指定される。SVG Tiny 1.2利用者エージェントは,

色の管理を必ずサポートしなければならないことはないが,サポートしてもよい。しかしながら,ディス

プレイシステムの応答曲線がsRGBのそれと異なる場合には,SVG Tiny 1.2利用者エージェントはガンマ

補正を適用することが望ましい。 

11.13.1 

色値の構文 

この規格では五つの構文形式が指定されている。適合SVGインタプリタは,これら全てをサポートして

いなければならない。 

3桁の16進数 - #rgb 

それぞれの16進数は,0〜Fの範囲において,赤,緑,青の順序によってsRGB色成分を表現する。数

値A〜Fは,大文字又は小文字のどちらでもよい。色成分の値は数値を複製することによって得られる。

すなわち,0は00になり,1は11になり,FはFFになる。このコンパクトな構文形式は,4 096色だけを

表現することができる。例 #000(black),#fff(white),#6CF[#66CCFF,rgb(102, 204, 255)]。 

6桁の16進数 - #rrggbb 

それぞれの16進数の組は,0〜Fの範囲において,赤,緑,青の順序によってsRGB色成分を表現する。

数値A〜Fは,大文字又は小文字のどちらでもよい。当初HTMLで導入されたこの構文形式は,16 777 216

色を表現することができる。例 #9400D3(dark violet),#FFD700(golden color)。 

整数機能 - rgb(rrr, ggg, bbb) 

それぞれの整数はコンマ(空白も可)によって区切られ,赤,緑,青の順によってsRGB色成分を表現

する。各整数は0〜255の範囲にある。この構文形式では,16 777 216色を表現することができる。例 

rgb(233, 150, 122)(salmon pink),rgb(255, 165, 0)(orange)。 

フロート機能 - rgb(R%, G%, B%) 

それぞれのパーセンテージ値はコンマ(空白も可)によって区切られ,赤,緑,青の順によってsRGB

色成分を表現する。sRGB全域における色では,それぞれの構成要素の範囲は0.0%から100.0%までであり,

任意の数の小数位を提供してもよい。科学的記数法はサポートされていない。この構文形式はsRGB全域

をカバーし,任意の色を表現することができる。一つ以上の構成要素が0.0%より下又は100.0%より上の

色値は,sRGB全域の外における色を表現している。例  rgb(12.375%, 34.286%, 28.97%)。 

色キーワード 

11.13.2に示す16の色キーワード(HTML 4 [HTML4])がサポートされていなければならない。また,そ

れらは小文字で使用されなければならない。 

11.13.2 

HTML色キーワード 

 black 

rgb(0, 0, 0)  

 green 

rgb(0, 128, 0)  

 silver  

rgb(192, 192, 192)  

 lime  

rgb(0, 255, 0)  

 gray  

rgb(128, 128, 128)  

 olive  

rgb(128, 128, 0)  

 white  

rgb(255, 255, 255)  

 yellow  

rgb(255, 255, 0)  

 maroon  

rgb(128, 0, 0)  

 navy  

rgb(0, 0, 128)  

 red  

rgb(255, 0, 0)  

 blue  

rgb(0, 0, 255)  

 purple  

rgb(128, 0, 128)  

 teal  

rgb(0, 128, 128)  

 fuchsia  

rgb(255, 0, 255)  

 aqua  

rgb(0, 255, 255)  

193 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

11.14 

ペイントサーバ 

SVGでは,次のいずれかを用いて,フィル(図形及びテキストの内部への塗りの適用)及びストローク

(図形及びテキストの外形に沿った塗りの適用)を実施することができる。 

• 

色('solidColor'要素への参照又は<color>を利用) 

• 

システムペイント 

• 

グラデーション(直線又は放射) 

SVGは,ペイントサーバという一般概念を用いている。グラデーション及びパターンは,単に特定のタ

イプの内蔵ペイントサーバである。'solidColor'要素は,また,別の内蔵ペイントサーバである。これにつ

いては11.13に示す。 

ペイントサーバは,システムペイントとは異なり,'fill'又は'stroke'プロパティのローカルIRI参照を使用

することによって参照される。 

11.14.1 

システムペイントサーバ 

次のようなシステムペイントサーバのリストがサポートされていなければならない。ペイント仕様がシ

ステムペイントサーバの一つを指定している場合には,利用者エージェントはシステムで提供されたペイ

ントサーバを使用してペイントをするか,又は色及びグラデーションのような代替的なペイントサーバで

ペイントをする。システムペイントサーバは,しばしばオペレーティングシステム,利用者による選択,

及び実装に依存している。代替的なペイントサーバは,利用者による色の選択を含めて,プラットフォー

ム上の対応する利用者インタフェース要素の外観に適合するようにすることが望ましい。適合利用者エー

ジェントは,適切なシステムペイントサーバのAPIが提供されていない環境では,必ずその環境のシステ

ムペイントサーバに適合するとは限らない代替ペイントサーバでも使用してもよい。 

システムペイントとして指定されるペイントの算出値は,指定値である。 

ActiveBorder  

活性化したウィンドウの境界。 

ActiveCaption  

活性化したウィンドウの見出し。 

AppWorkspace  

複数の文書インタフェースの背景色。 

Background  

デスクトップの背景。 

ButtonFace  

立体的な表示要素のための書体の色。 

ButtonHighlight  

立体的な表示要素のための濃い影(光源から見て外方に向くエッジのため)。 

ButtonShadow  

立体的な表示要素のための影の色。 

ButtonText  

押しボタンのテキスト。 

CaptionText  

見出し,サイズボックス,及びスクロールバーアローボックス(arrow box)のテキスト。 

GrayText  

194 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

無効にされた(灰色にされた)テキスト。 

Highlight  

コントロールで選択されたアイテム。 

HighlightText  

コントロールで選択されたアイテムのテキスト。 

InactiveBorder  

非活性化したウィンドウの境界。 

InactiveCaption  

非活性化したウィンドウの見出し。 

InactiveCaptionText  

非活性化した見出しのテキストの色。 

InfoBackground  

ツールチップ(tooltip)コントロールのための背景色。 

InfoText  

ツールチップ(tooltip)コントロールのためのテキストの色。 

Menu  

メニューの背景。 

MenuText  

メニューのテキスト。 

Scrollbar  

スクロールバーのグレーエリア。 

ThreeDDarkShadow  

立体的な表示要素のための濃い影。 

ThreeDFace  

立体的な表示要素のための書体の色。 

ThreeDHighlight  

立体的な表示要素のためのハイライト色。 

ThreeDLightShadow  

立体的な表示要素のための淡色(光源のほうを向くエッジのため)。 

ThreeDShadow  

立体的な表示要素のための濃い影。 

Window  

ウィンドウの背景。 

WindowFrame  

ウィンドウのフレーム。 

WindowText  

ウィンドウにおけるテキスト。 

11.14.2 

'solidColor'要素 

'solidColor'要素は,不透明性をもつ単一の色を提供するペイントサーバである。他のペイントサーバ(グ

ラデーションなど)と同じように,それを参照することができる。 

background image

195 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

スキーマ: solidColor  

    <define name='solidColor'> 

      <element name='solidColor'> 

        <ref name='solidColor.AT'/> 

        <ref name='solidColor.CM'/> 

      </element> 

    </define> 

    <define name='solidColor.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='svg.Animate.group'/> 

          <ref name='svg.Handler.group'/> 

          <ref name='svg.Discard.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

    <define name='solidColor.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.Core.attr'/> 

    </define> 

'solid-color'プロパティは,この'solidColor'要素に使用する色を指定する。キーワードcurrentColorは,'fill'

プロパティ及び'stroke'プロパティに対する<paint>の指定と同じ要領で指定することができる。 

'solid-color'  

値: 

currentColor | <color> | inherit  

初期値: 

black  

適用対象: 

'solidColor'要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定された<color>値 

'solid-opacity'プロパティは,'solidColor'の不透明化を定義する。 

'solid-opacity'  

値: 

<opacity-value> | inherit  

初期値: 

1  

適用対象: 

'solidColor'要素 

background image

196 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

<opacity-value>  

'solidColor'の不透明性。0.0(完全な透明)から1.0(完全な不透明)までの範囲に入らない値は,この範

囲に固定しなければならない(C.5を参照)。 

'solidColor'ペイントサーバは,'solid-opacity'で定義された不透明化を用いて指定された色の塗りを適用す

る。'solid-opacity'の値は,'fill'又は'stroke'による塗りの描画に使われる不透明化からは独立している(11.6

を参照)。 

プロパティはその祖先から'solidColor'要素に継承されなければならない。プロパティは'solidColor'要素を

参照する要素を継承してはならない。 

'solidColor'要素は決して直接描画されない。それは,'fill'プロパティ及び'stroke'プロパティによって参照

することができる対象とする以外の用途をもたない。'display'プロパティは'solidColor'要素には適用されな

い。したがって,'display'プロパティがnone以外の値に設定されたとしても'solidColor'要素は直接描画され

ない。また,たとえ'solidColor'要素又はその祖先の'display'プロパティがnoneに設定されたとしても,

'solidColor'要素は参照先として利用することができる。 

'solidColor'要素の例を次に示す。 

例: solidcolor.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny" 

     width="480" height="360" viewBox="0 0 480 360"> 

  <title>'solidColor' example</title> 

  <defs> 

    <solidColor xml:id="solidMaroon" solid-color="maroon" solid-opacity="0.7"/> 

  </defs> 

  <g> 

    <circle transform="translate(100, 150)" fill="url(#solidMaroon)" r="30"/> 

    <rect fill="url(#solidMaroon)" transform="translate(190, 150)" x="-30" y="-30" 

width="60" height="60"/> 

    <path fill="url(#solidMaroon)" transform="translate(270, 150)"  d="M 0 -30 L 30 30 

L -30 30 Z" /> 

    <text 

fill="url(#solidMaroon)" 

transform="translate(340, 

150)" 

y="21" 

font-weight="bold" font-size="60">A</text> 

background image

197 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  </g> 

</svg> 

11.14.3 

'color'プロパティ 

'color'プロパティ(CSS 2ではテキストの色として定義されている。)は,SVG要素に直接適用すること

はできない。しかしながら,SVGの'color'プロパティの値は,次のようなcurrentColorキーワードを許容す

るプロパティに間接的な値を提供してもよい。'fill'プロパティ,'stroke'プロパティ,'solid-color'プロパティ

及び'stop-color'プロパティ 

'color'  

値: 

<color> | inherit  

初期値: 

利用者エージェントに依存 

適用対象: 

なし。currentColorを介して間接的に他のプロパティに影響を与える。 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定された<color>値 

このプロパティの規定の定義は,この規格で追加された情報を除き,CSS 2([CSS2]の14.1)に記載され

ている。 

11.15 

グラデーション 

グラデーションは,あるベクトルに沿った一つの色から別の色への絶え間なく滑らかな色の変化である。

その後に同じベクトルに沿って別の色への変化を加えることもできる。SVGでは,'linearGradient'及び

'radialGradient'の二つの型のグラデーションが提供されている。 

一度グラデーションを定義してしまえば,それは与えられた図形要素の'fill'プロパティ又は'stroke'プロパ

ティを用いて参照され,その要素が参照されたグラデーションによってフィル又はストロークされなけれ

ばならないことが示される。 

11.15.1 

線形グラデーション 

線形グラデーションは,'linearGradient'要素によって定義される。 

スキーマ: linearGradient  

    <define name='linearGradient'> 

      <element name='linearGradient'> 

        <ref name='linearGradient.AT'/> 

        <ref name='GradientCommon.CM'/> 

      </element> 

    </define> 

    <define name='linearGradient.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

background image

198 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <ref name='svg.GradientCommon.attr'/> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.X12Y12.attr'/> 

    </define> 

属性の定義: 

gradientUnits = "userSpaceOnUse" | "objectBoundingBox" 

グラデーションを描画する場合に使用する属性'x1','y1','x2'及び'y2'のための座標系を定義する。 

gradientUnits="userSpaceOnUse"のとき,'x1','y1','x2'及び'y2'は,グラデーション要素が参照される場合

に現在の利用者座標系(すなわち,そのグラデーション要素を'fill'又は'stroke'プロパティを用いて参照する

要素のための利用者座標系)を適所で取り込むことによる座標系の値を表していなければならない。 

gradientUnits="objectBoundingBox"のときは,属性'x1','y1','x2'及び'y2'の利用者座標系は,そのグラデー

ションが適用されている要素の包含ボックスを用いて確立されなければならない(7.13を参照)。 

gradientUnits="objectBoundingBox"のとき,線形グラデーションのストライプは,オブジェクト包含ボッ

クス空間(すなわち,オブジェクト包含ボックスの左上が(0,0)で右上が(1,0)である抽象座標系)における

グラデーションのベクトルに対して垂直でなければならない。そのオブジェクトの包含ボックスが正方形

ではない場合には,包含ボックス空間から利用者空間への不均等なスケーリング変換が適用され,そのス

トライプ(概念的にはオブジェクト包含ボックス空間のグラデーションベクトルに垂直)は,利用者空間

のグラデーションベクトルに対して非垂直に描画されなければならない。 

省略値:'objectBoundingBox' 

アニメーション:可 

x1 = "<coordinate>" 

'x1','y1','x2'及び'y2'は,線形グラデーションのためのグラデーションベクトルを定義する。このグラデ

ーションベクトルは,始点及びグラデーション停止をマップする終点を提供する。'x1','y1','x2'及び'y2'

の値は数値でなければならない。 

省略値:'0' 

アニメーション:可 

y1 = "<coordinate>" 

'x1'を参照。 

省略値:'0' 

アニメーション:可 

x2 = "<coordinate>" 

'x1'を参照。 

省略値:'1' 

アニメーション:可 

y2 = " <coordinate>" 

'x1'を参照。 

省略値:'0' 

アニメーション:可 

'x1' = 'x2'及び'y1' = 'y2'である場合,塗りの対象の領域は,最後のグラデーション停止の色及び不透明性

background image

199 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

を用いて単一の色で塗られなければならない。 

そのグラデーションが対象の長方形の境界の中で開始又は終了する場合には,そのグラデーションの最

後の色を用いて対象の領域の残りをフィルする。 

プロパティはその祖先から'linearGradient'要素に継承されなければならない。プロパティは'linearGradient'

要素を参照する要素を継承してはならない。 

'linearGradient'要素は決して直接描画されない。それは,'fill'プロパティ及び'stroke'プロパティによって参

照することができる対象とする以外の用途をもたない。'display'プロパティは'linearGradient'要素には適用さ

れない。したがって,'display'プロパティがnone以外の値に設定されたとしても'linearGradient'要素は直接

描画されない。また,たとえ'linearGradient'要素又はその祖先の'display'プロパティがnoneに設定されたと

しても,'linearGradient'要素は参照先として利用することができる。 

例13̲01.svgには,線形グラデーションのペイントサーバを参照し長方形をフィルする方法が示されて

いる。 

例: 13̲01.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="8cm" height="4cm" viewBox="0 0 800 400"> 

  <desc>Example 13̲01 - fill a rectangle using a linear gradient paint server</desc> 

  <g> 

    <defs> 

      <linearGradient xml:id="MyGradient"> 

        <stop offset="0.05" stop-color="#F60"/> 

        <stop offset="0.95" stop-color="#FF6"/> 

      </linearGradient> 

    </defs> 

    <!-- Outline the drawing area in blue --> 

    <rect fill="none" stroke="blue"  

          x="1" y="1" width="798" height="398"/> 

    <!-- The rectangle is filled using a linear gradient paint server --> 

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"   

          x="100" y="100" width="600" height="200"/> 

  </g> 

</svg> 

background image

200 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

11.15.2 

放射状グラデーション 

放射状グラデーションは,'radialGradient'要素によって定義される。 

スキーマ: radialGradient  

    <define name='radialGradient'> 

      <element name='radialGradient'> 

        <ref name='radialGradient.AT'/> 

        <ref name='GradientCommon.CM'/> 

      </element> 

    </define> 

    <define name='radialGradient.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.GradientCommon.attr'/> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.CxCy.attr'/> 

      <ref name='svg.R.attr'/> 

    </define> 

属性の定義: 

gradientUnits = "userSpaceOnUse" | "objectBoundingBox" 

グラデーションを描画する場合に使用する属性'cx','cy'及び'r'のための座標系を定義する。 

gradientUnits="userSpaceOnUse"のとき,'cx','cy'及び'r'は,グラデーション要素が参照される場合に現在

の利用者座標系(すなわち,そのグラデーション要素を'fill'又は'stroke'プロパティを用いて参照する要素の

ための利用者座標系)を適所で取り込むことによる座標系の値を表していなければならない。 

gradientUnits="objectBoundingBox"のときは,属性'cx','cy'及び'r'の利用者座標系は,そのグラデーション

が適用されている要素の包含ボックスを用いて確立されなければならない(7.13を参照)。 

gradientUnits="objectBoundingBox"のとき,放射状グラデーションの輪は,オブジェクト包含ボックス空

間(すなわち,オブジェクト包含ボックスの左上が(0,0)で右下が(1,1)である抽象座標系)において円形で

なければならない。そのオブジェクトの包含ボックスが正方形ではない場合には,包含ボックス空間から

利用者空間への不均等なスケーリング変換が適用され,その輪[概念的にはオブジェクト包含ボックス空

間において円形]は,だ(楕)円形に描画されなければならない。 

省略値:'objectBoundingBox' 

background image

201 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

アニメーション:可 

cx = "<coordinate>" 

'cx','cy',及び'r'は,その放射状グラデーションにおける最大の円(すなわち,一番外側の円)を定義す

る。また,0グラデーション停止は('cx', 'cy')にマップされる。 

省略値:'0.5' 

アニメーション:可 

cy = "<coordinate>" 

'cx'を参照。 

省略値:'0.5' 

アニメーション:可 

r = "<length>" 

'cx'を参照。 

負の値はサポート外として扱われなければならない。値が0である場合,その領域は,最後のグラデー

ション停止の色及び不透明性を用いて単一の色で塗られなければならない。省略値:'0.5' 

アニメーション:可 

グラデーションがそれが塗るオブジェクトの境界の中で開始又は終了する場合には,そのグラデーショ

ンの最後の色を用いて対象の領域の残りをフィルする。 

プロパティはその祖先から'radialGradient'要素に継承されなければならない。プロパティは'radialGradient'

要素を参照する要素を継承してはならない。 

'radialGradient'要素は決して直接描画されない。それは,'fill'プロパティ及び'stroke'プロパティによって参

照することができる対象とする以外の用途をもたない。'display'プロパティは'radialGradient'要素には適用さ

れない。したがって,'display'プロパティがnone以外の値に設定されたとしても'radialGradient'要素は直接

描画されない。また,たとえ'radialGradient'要素又はその祖先の'display'プロパティがnoneに設定されたと

しても,'radialGradient'要素は参照先として利用することができる。 

例13̲02.svgには,放射状グラデーションのペイントサーバを参照し長方形をフィルする方法が示され

ている。 

例: 13̲02.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="8cm" height="4cm" viewBox="0 0 800 400"> 

  <desc>Example 13̲02 - fill a rectangle by referencing a radial gradient paint 

server</desc> 

  <g> 

    <defs> 

      <radialGradient xml:id="MyGradient" gradientUnits="userSpaceOnUse" 

                      cx="400" cy="200" r="300"> 

        <stop offset="0" stop-color="red"/> 

background image

202 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        <stop offset="0.5" stop-color="blue"/> 

        <stop offset="1" stop-color="red"/> 

      </radialGradient> 

    </defs> 

    <!-- Outline the drawing area in blue --> 

    <rect fill="none" stroke="blue"  

          x="1" y="1" width="798" height="398"/> 

    <!-- The rectangle is filled using a radial gradient paint server --> 

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"   

          x="100" y="100" width="600" height="200"/> 

  </g> 

</svg> 

11.15.3 

グラデーション停止の定義:'stop'要素 

グラデーションで使用する色の勾配は,'linearGradient'要素又は'radialGradient'要素のどちらかの子要素で

ある'stop'要素によって定義される。 

スキーマ: stop  

    <define name='stop'> 

      <element name='stop'> 

        <ref name='stop.AT'/> 

        <ref name='stop.CM'/> 

      </element> 

    </define> 

    <define name='stop.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='svg.Animate.group'/> 

        </choice> 

      </zeroOrMore> 

background image

203 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    </define> 

    <define name='stop.AT' combine='interleave'> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.Core.attr'/> 

      <optional> 

        <attribute name='offset' svg:animatable='true' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

offset = "<number>" 

'offset'属性は,そのグラデーション停止を置かなければならない場所を示す<number>である。線形グラ

デーションでは,'offset'属性はグラデーションベクトルに沿った場所を表す。放射状グラデーションでは,

それは,('cx', 'cy')から一番外側の(最大の)円のエッジまでの相対的な距離を表す。 

省略値:'0' 

アニメーション:可 

'stop-color'プロパティは,このグラデーション停止で使用する色を指定する。キーワードcurrentColorは,

'fill'プロパティ及び'stroke'プロパティに対する<paint>の指定と同じ要領で指定することができる。 

'stop-color'  

値: 

currentColor | <color> | inherit 

初期値: 

black 

適用対象: 

'stop'要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定された<color>値 

'stop-opacity'プロパティは,このグラデーション停止で使用する不透明化を指定する。 

'stop-opacity'  

値: 

<opacity-value> | inherit 

初期値: 

適用対象: 

'stop'要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

204 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

グラデーションペイントサーバは,'stop-opacity'の値で定義された不透明化を用いて指定されたグラデー

ションの塗りを適用する。'stop-opacity'の値は,'fill'又は'stroke'による塗りの描画に使われる不透明化から

は独立している(11.6を参照)。 

<opacity-value>  

現在のグラデーション停止のための'stop-color'の不透明性。0.0(完全な透明)から1.0(完全な不透明)

までの範囲に入らない値は,この範囲に固定しなければならない(C.5を参照)。 

グラデーションに関する注意点を次に示す。 

• 

0.0〜1.0の範囲に入らない全てのグラデーションのoffset値は,この範囲に固定しなければならない

(C.5を参照)。 

• 

グラデーションの効果を得るためには,少なくとも二つの'stop'要素を指定しなければならない。

'stop'要素が一切指定されていない場合,そのペイントのスタイルとしてnoneが指定されたときと同

じように塗りを適用する。'stop'要素が一つ指定されている場合には,そのグラデーション停止のた

めに定義された色を用いた無地のフィルによる塗りを適用する。 

• 

各グラデーションのoffset値は,前のグラデーション停止のoffset値と同じか,それよりも大きくな

ければならない。与えられたグラデーション停止のoffset値が前の全てのoffset値と同じではなく,

それらより大きくもない場合には,そのoffset値を調整して,前の全offset値の中の最大値と同じに

なるようにする。 

• 

二つのグラデーション停止が同じoffset値をもつ場合,後のグラデーション停止がその重複点で色

値を制御する。特に: 

<stop offset="0" stop-color="white"/> 

<stop offset=".2" stop-color="red"/> 

<stop offset=".2" stop-color="blue"/> 

<stop offset="1" stop-color="black"/> 

上の例は,下の例とほぼ同じ効果を与える。 

<stop offset="0" stop-color="white"/> 

<stop offset=".1999999999" stop-color="red"/> 

<stop offset=".2" stop-color="blue"/> 

<stop offset="1" stop-color="black"/> 

ここでは,グラデーションが白から赤に滑らかに変化し,次に突然赤から青に移行し,最後に青

から黒に滑らかに変化する。 

• 

色及び不透明性はそれぞれ別々に補間され,結果としてのグラデーションは単純アルファ合成によ

って合成される。特に: 

<stop offset="0" stop-color="#F00" stop-opacity="0"/> 

<stop offset="1" stop-color="#0F0" stop-opacity="1"/> 

ここでは,完全に透明な赤から,部分的に透明な暗い黄色を介し,完全に不透明なライム色にな

るようなグラデーションが生成される。 

• 

全てのグラデーション停止は,補間色空間に変換しなければならない。グラデーション停止の色の

間の補間は,補間色空間で行われなければならない。 

• 

SVG Tiny 1.2利用者エージェントは,グラデーションを補間する場合,sRGB色空間又はlinearRGB

色空間のどちらかを選択することができる。どちらの色空間も同じ色域をもつ([SRGB] を参照)。 

background image

205 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

• 

他のW3Cの仕様書において,代替的な補間色空間が規定される可能性もある。 

12 マルチメディア 

12.1 メディア要素 

SVGは,SMIL 2.1メディア要素([SMIL21]の箇条7)に類似したメディア要素をサポートしている。メ

ディア要素は,その時間コンテナにおけるそれ自体の時間軸を定義する。全てのSVGメディア要素は,

SVGタイミング属性及び実行時同期属性をサポートする。全てのSVGメディア要素のための既定のイベ

ントベース要素は,その要素自体である。 

次の要素はメディア要素である。 

• 

'audio'  

• 

'video'  

• 

'animation' 

12.1.1 メディア時間軸及び文書時間軸 

メディア要素は,それが活性化したときに(すなわち,その'begin'属性に依存する文書時間軸で指定さ

れた時間に)再生を開始する(16.2.8を参照)。しかしながら,最上位の'svg'要素における'timelineBegin'属

性の値によっては,文書時間軸の実際の始まりは文書全体がロードされるまで遅らされることがある。こ

のことは,'timelineBegin'が'onLoad'に設定されたときに発生する。その場合,実際のメディアの再生の開始

は遅れるが,文書時間軸におけるそのメディアの開始時間は指定されたままの値で残る。 

注記 'image'要素は,時間付けされていないので,メディア要素とはみなされない。それは文書時間

軸における時間0に再生を開始する。 

この振る舞いの例を次に示す。 

例: video-timelineBegin-01.svg 

<?xml version="1.0"?> 

<svg 

xml:id="A" 

xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny"  

            timelineBegin="onLoad">          <!-- process time = t0 --> 

<!-- ...[many elements]... -->               <!-- additional process time = t1 = 5s --> 

<video xlink:href="myvideo.mp4" begin="0s"/> <!-- additional process time = t2 = 1s --> 

</svg> 

この例では,その文書が完全に処理された後(すなわち,t0+t1+t2 ≥ 6s)に文書時間軸が開始される。そ

のビデオは文書がロードされたときに開始される。その時には文書時間は0になり,ビデオの最初のフレ

ームからビデオが開始される。 

例: video-timelineBegin-02.svg 

<?xml version="1.0"?> 

<svg 

xml:id="B" 

xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny"  

            timelineBegin="onStart">         <!-- process time = t0 --> 

<!-- ...[many elements]... -->               <!-- additional process time = t1 = 5s --> 

<video xlink:href="myvideo.mp4" begin="0s"/> <!-- additional process time = t2 = 1s --> 

background image

206 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

</svg> 

この例では,'svg'要素が完全に解析及び処理されたとき(すなわち,t0)に文書時間軸が開始される。

ビデオも文書時間0に開始される。しかし,そのビデオは文書時間がt0+t1+t2のときにだけ処理されるの

で,それがフレームの表示を開始するのは,ビデオ時間軸におけるt0+t1+t2のときである。 

さらに,'syncBehavior'属性を用いることによって,再生されるメディア時間軸における時間(例 ビデ

オのフレームの再生,オーディオのサンプルの再生)を変更することができる。この振る舞いの例を次に

示す。下の例は上の例と同じだが,'syncBehavior'属性の値が既定値から'independent'に変更されている。 

例: video-timelineBegin-03.svg 

<?xml version="1.0"?> 

<svg 

xml:id="A" 

xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny"  

            timelineBegin="onLoad">          <!-- process time = t0 --> 

<!-- ...[many elements]... -->               <!-- additional process time = t1 = 5s --> 

<video 

xlink:href="myvideo.mp4" 

begin="0s" 

syncBehavior="independent"/> 

<!-- 

additional process time = t2 = 1s --> 

</svg> 

例: video-timelineBegin-04.svg 

<?xml version="1.0"?> 

<svg 

xml:id="B" 

xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" baseProfile="tiny"  

            timelineBegin="onStart">         <!-- process time = t0 --> 

<!-- ...[many elements]... -->               <!-- additional process time = t1 = 5s --> 

<video 

xlink:href="myvideo.mp4" 

begin="0s" 

syncBehavior="independent"/> 

<!-- 

additional process time = t2 = 1s --> 

</svg> 

例video-timelineBegin-03.svgでは,文書のロードイベントまでビデオは開始されない。しかし,例

video-timelineBegin-04.svgでは,そのビデオ要素が解析されビデオの描画の準備ができるとすぐにそのビデ

オは開始される。どちらの事例も文書及びビデオの時間軸はそれぞれ独立しているので,ビデオが開始さ

れるときには,それは最初のフレーム(すなわち,メディア時間軸における時間0)から開始される。 

12.1.2 メディア利用可能性 

'externalResourcesRequired'属性の値を用いてメディアが再生を開始する実際の時間を遅らせてもよい(画

像でも可)が,それは文書時間軸における時間には影響を与えない。実際,メディア要素及び画像要素は,

'xlink:href'属性によって参照される外部リソースを必要とすることがある。そのリソース又は場面ツリーの

親(例 'g'要素)において'externalResourcesRequired'属性を'true'に設定した場合には,そのメディアを開始

することができる前にその外部リソースが利用可能にならなければならない。'externalResourcesRequired'

属性を'false'に設定すると,そのメディア要素又は画像要素はそれらが活性化するとすぐに再生を開始する。 

ここでいう“利用可能”の意味は,メディア型,リソースにアクセスするためのプロトコル及び実装に

background image

207 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

よって変わってくる。例えば,HTTPなどのプロトコルが使用されている場合,“利用可能”とはリソース

全体がダウンロードされたことを意味するのかもしれない。また,プログレッシブ(progressive)PNG[PNG 

Pass extraction([PNG]の4.5.2)を参照]のような場合には,そのリソースの粗いバージョンが利用可能で

あることを意味するのかもしれない。この場合,リソース全体のダウンロードの前にその粗いバージョン

を表示するかどうかを決めるのは実装側である。また,別の例として,RTSP/RTPのようなストリーミン

グプロトコルを利用している場合がある。この場合,通常“利用可能”とは,再生を開始する前に十分な

ストリーム(stream)がバッファリングされたことを意味する。メディアが利用可能になるまでの時間を

減らすために,制作者は'prefetch'要素を使用して,外部リソースを先取りしなければならないことを示す

ことが望ましい。 

12.1.3 プラットフォームの制限 

プラットフォームによっては,ミックスすることができるオーディオのチャンネル,音の数,又は同時

に提供してもよいビデオストリーム(stream)の数について,制限があるかもしれない。これらはそれぞ

れ異なるので,SVG言語自体は,オーディオ又はビデオにそのような制限は一切設けない。 

12.1.4 'audio'要素及び'video'要素のオーディオミキシング 

'audio'要素又は'video'要素から二つ以上のオーディオストリーム(stream)が同時に活性化した場合,そ

れらの描画は,各オーディオストリーム(stream)における'audio-level'プロパティの算出値と同じ割合に

よってミックスされることが望ましい。あるオーディオストリーム(stream)が活性化した'audio'要素によ

って参照されるとき,又はそれが活性化した'video'要素が参照するビデオ内容の一部であるとき,そのオ

ーディオストリーム(stream)は活性化している。 

12.1.5 オーディオ及びビデオの個別制御 

'video'要素の見る部分と聞く部分とを別々に管理することを望む制作者もいるかもしれない。利用可能

な様々なプロパティを組み合わせることによって,次のような全ての組合せが可能である。 

• 

ビデオ及びオーディオの両方を再生:既定の設定であり,特に操作は必要ない。 

• 

ビデオを再生しオーディオを停止:'audio-level'プロパティの値を0にする。 

• 

ビデオを停止しオーディオを再生:'visibility'プロパティの値をhiddenにする。 

• 

ビデオ及びオーディオの両方を隠す:'display'プロパティの値をnoneにする。 

12.1.6 スクリプトによるメディア再生の制御 

メディア要素('audio','video','animation'など)の再生を制御するために決められた時間軸属性の値を

設定したり,宣言的なアニメーションを使用したりするほかにも,SVGではスクリプトによる制御が認め

られている。詳細については,A.2.9を参照。 

12.2 'audio'要素 

'audio'要素は,同期したオーディオを提供するために描画されなければならないオーディオファイルを

指定する。一般的なSMILタイミング機能を用いて,適切なときにオーディオを開始又は停止する。オー

ディオ内容へのリンクには'xlink:href'を使用しなければならない。視覚的な表現は一切生成してはならない。

しかしながら,内容制作者の必要に応じて,オーディオ内容の開始,停止,一時停止,巻き戻し,又はボ

リューム調整をするために,コントロールパネルの図形表示を作成することができる。 

'audio'要素は,オーディオストリーム(stream)をもつ内容を参照しなければならない。 

スキーマ: audio  

    <define name='audio'> 

background image

208 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <element name='audio'> 

        <ref name='audio.AT'/> 

        <ref name='audio.CM'/> 

      </element> 

    </define> 

    <define name='audio.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.XLinkEmbed.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.AnimateTiming.attr'/> 

      <ref name='svg.AnimateSync.attr'/> 

      <ref name='svg.Media.attr'/> 

      <ref name='svg.ContentTypeAnim.attr'/> 

    </define> 

    <define name='audio.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='svg.Animate.group'/> 

          <ref name='svg.Handler.group'/> 

          <ref name='svg.Discard.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

xlink:href = "<IRI>" 

IRI参照。不正なIRI参照はサポート外の値である。文字列の値が空(xlink:href="")の場合,その要素

の再生はできない。省略値:空の文字列 

この属性の値がアニメーション化又は変更されるとき,メディア時間軸を制御することができる場合,

'syncBehavior'属性をindependentに設定したときだけ,そのメディア時間軸は再開始される。そのメディア

時間軸を制御することができない場合,そのような変更があってもメディア時間軸は影響を受けない。 

アニメーション:可 

type = "<content-type>" 

そのオーディオの形式。実装の場合,そこでサポートしていない形式のオーディオを取ってこないよう

にする可能性がある。特定の内容形式を用いることによってダウンロード時間を最適化するためには,制

作者は'type'の代わりに'requiredFormats'を使用することが望ましい。 

background image

209 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

アニメーション:可 

実行時同期属性 

12.6を参照。 

SVGタイミング属性 

'fill'属性が指定された場合,それは一切影響を与えない。16.2.8を参照。 

'audio'要素の使い方を次の例に示す。ボタンを押すと,オーディオファイルが3回再生される。 

例: media01.svg 

<svg width="100%" height="100%" version="1.2" baseProfile="tiny" 

     xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink"> 

  <desc>SVG audio example</desc> 

  <audio xlink:href="ouch.ogg" audio-level="0.7" type="application/ogg" 

        begin="mybutton.click" repeatCount="3"/> 

  <g xml:id="mybutton"> 

    <rect width="150" height="50" x="20" y="20" rx="10" 

      fill="#ffd" stroke="#933" stroke-width="5"/> 

    <text x="95" y="55" text-anchor="middle" font-size="30" 

      fill="#933">Press Me</text> 

  </g> 

  <rect x="0" y="0" width="190" height="90" fill="none" stroke="#777"/> 

</svg> 

この規格では,一切特定のオーディオ形式のサポートを義務付けてはいない。'requiredFormats'条件付き

処理属性を用いて,特定のオーディオコーデックの有無を内容から確認することができる。 

12.3 'video'要素 

'video'要素は,同期したビデオを提供するために描画されなければならないビデオファイルを指定する。

一般的なSMILタイミング機能を用いて,適切なときにビデオを開始又は停止する。ビデオ内容へのリン

クには'xlink:href'を使用しなければならない。ビデオ内容にはオーディオストリーム(stream)も含まれて

いると想定される(それがビデオ内容を作成する場合の一般的な方法である。)ので,'video'要素のメディ

ア属性を用いてそのオーディオを制御する。 

background image

210 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'video'要素は,ビデオストリーム(stream)をもつ内容を参照しなければならない。 

'video'要素は描画の結果を生成するので,そのために'width'属性,'height'属性,'x'属性及び'y'属性をもっ

ている。 

'video'要素は,transformBehavior属性の値によって,二つの異なった変換の振る舞い(幾何学的及び固定

的)をもつことができる。その変換の振る舞いが幾何学的である場合には,'video'要素は参照する文書の

ために新しいビューポートを作成しなければならない。これについては7.10において示している。この場

合,'video'要素は'viewport-fill'プロパティと'viewport-fill-opacity'プロパティとをサポートする。新規ビュー

ポートの境界は,'x'属性,'y'属性,'width'属性,及び'height'属性によって定義する。参照されるビデオの配

置及びスケーリングは,'video'要素の'preserveAspectRatio'属性によって制御する。変換の振る舞いが固定的

な場合には,新しいビューポートを作成してはならない。同様に,'viewport-fill','viewport-fill-opacity','width',

'height',又は'preserveAspectRatio'は効果をもたない。 

'preserveAspectRatio'属性の評価に使用する'viewBox'属性の値は,参照される内容によって定義されなけ

ればならない。はっきりと'viewBox'を特定している内容については,その値を使わなければならない。ほ

とんどのビデオ内容では,そのビデオの境界を使用することが望ましい(すなわち,'video'要素が"0 0 

video-width video-height"という暗黙的な'viewBox'をもつ。)。容易に利用できる値がない場合には,

'preserveAspectRatio'属性は無視する。 

スキーマ: video  

    <define name='video'> 

      <element name='video'> 

        <ref name='video.AT'/> 

        <ref name='video.CM'/> 

      </element> 

    </define> 

    <define name='video.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.Media.attr'/> 

      <ref name='svg.XLinkEmbed.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.AnimateTiming.attr'/> 

      <ref name='svg.AnimateSync.attr'/> 

      <ref name='svg.Focus.attr'/> 

      <ref name='svg.Transform.attr'/> 

      <ref name='svg.XYWH.attr'/> 

      <ref name='svg.PAR.attr'/> 

      <ref name='svg.ContentTypeAnim.attr'/> 

      <ref name='svg.InitialVisibility.attr'/> 

background image

211 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <optional> 

        <attribute 

name='transformBehavior' 

svg:animatable='no' 

svg:inheritable='false'> 

          <choice> 

            <value>geometric</value> 

            <value>pinned</value> 

            <value>pinned90</value> 

            <value>pinned180</value> 

            <value>pinned270</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='overlay' svg:animatable='no' svg:inheritable='false'> 

          <choice> 

            <value>none</value> 

            <value>top</value> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

    <define name='video.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='svg.Animate.group'/> 

          <ref name='svg.Handler.group'/> 

          <ref name='svg.Discard.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

x = "<coordinate>" 

そのビデオが置かれる長方形領域のx座標。省略値:'0' 

そのビデオの変換の振る舞いが幾何学的な場合,この座標はその長方形領域の一角になる。それが固定

的である場合,この座標はその長方形領域上の固定点になる。この属性の解釈については,12.3.1を参照。 

アニメーション:可 

y = "<coordinate>" 

212 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

そのビデオが置かれる長方形領域のy座標。省略値:'0' 

そのビデオの変換の振る舞いが幾何学的な場合,この座標はその長方形領域の一角になる。それが固定

的である場合,この座標はその長方形領域上の固定点になる。この属性の解釈については,12.3.1を参照。 

アニメーション:可 

width = "<length>" 

そのビデオが置かれる長方形領域の幅。負の値はサポート外として扱われなければならない。省略値:

'0' 

そのビデオの変換の振る舞いが幾何学的な場合,値が0のときこの要素の描画は無効になる。それが固

定的である場合,この属性は描画に一切影響を与えない。 

アニメーション:可 

height = "<length>" 

そのビデオが置かれる長方形領域の高さ。負の値はサポート外として扱われなければならない。省略値:

'0' 

そのビデオの変換の振る舞いが幾何学的な場合,値が0のときこの要素の描画は無効になる。それが固

定的である場合,この属性は描画に一切影響を与えない。 

アニメーション:可 

xlink:href = "<IRI>" 

ビデオ内容へのIRI参照。不正なIRI参照はサポート外の値である。文字列の値が空(xlink:href="")の

場合,その要素の描画はできない。省略値:空の文字列 

この属性の値がアニメーション化又は変更されるとき,メディア時間軸を制御することができる場合,

'syncBehavior'属性をindependentに設定したときだけ,そのメディア時間軸は再開始される。そのメディア

時間軸を制御することができない場合,そのような変更があってもメディア時間軸は影響を受けない。 

アニメーション:可 

preserveAspectRatio = [defer] <align> [<meet>] 

均一的なスケーリングの適用の有無を示す。この属性の解釈及び<align>の構文については,7.9を参照。 

アニメーション:可 

type = "<content-type>" 

そのビデオの形式。実装の場合,そこでサポートしていない形式のビデオを取ってこないようにする可

能性がある。特定の内容形式を用いることによってダウンロード時間を最適化するためには,制作者は

'type'の代わりに'requiredFormats'を使用することが望ましい。 

アニメーション:可 

transformBehavior = "geometric" | "pinned" | "pinned90" | "pinned180" | "pinned270"  

12.3.1を参照。 

アニメーション:不可 

overlay = "top" | "none" 

12.3.2を参照。 

アニメーション:不可 

initialVisibility = "whenStarted" | "always" 

12.7を参照。 

アニメーション:不可 

background image

213 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

実行時同期属性 

12.6を参照。 

SVGタイミング属性 

16.2.8を参照。 

'video'要素の使い方を次の例において説明する。このビデオ内容は,その一部が他の図形要素によって

覆い隠されている。この例の'video'要素はバッファ外のバッファに描画され,次に通常どおり変換・合成

されることによって,他の全ての基本図形(画像,長方形など)と同様の振る舞いをする。このように,

'video'要素をスケーリング,回転,わい(歪)曲,アニメーション化,及び様々なサイズで表示させてよ

い。 

例: media02.svg 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     width="420" height="340" viewBox="0 0 420 340"> 

  <desc>SVG 1.2 video example</desc> 

    <g> 

    <circle cx="0" cy="0" r="170" fill="#da4" fill-opacity="0.3"/> 

    <video xlink:href="noonoo.avi" audio-level=".8" type="video/x-msvideo" 

         width="320" height="240" x="50" y="50" repeatCount="indefinite"/> 

    <circle cx="420" cy="340" r="170" fill="#927" fill-opacity="0.3"/> 

    <rect x="1" y="1" width="418" height="338" fill="none" 

       stroke="#777" stroke-width="1"/> 

    </g> 

</svg> 

background image

214 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この'video'要素の例は次による。http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/examples/noonoo.svg

[SVG Tiny 1.2ビューア,Windows AVI(Motion JPEG使用)のサポートが必要。3.7Mビデオファイル。] 

この規格では,特定のビデオ形式のサポートを一切義務付けてはいない。'requiredFormats'条件付き処理

属性を用いて,特定の動画コーデックの有無を内容から確認することができる。 

内容の制作者は,ビデオ機能は全ての対象装置において利用できるわけではないことを考慮することが

望ましい。内容の作成者は,相互運用的な内容を作成するために,'switch'要素を使って代替手段を提供し

ておくのがよい。次の機能文字列は,ビデオサポートの有無を確認するために定義される

(http://www.w3.org/Graphics/SVG/feature/1.2/#Video)。ビデオはリソースの限られた装置では完全にサポー

トされていない可能性がある。この規格では,全ての環境で再現可能な結果を出すために,より細かいビ

デオ描画制御を導入している。この制御について,12.3.1及び12.3.2に示す。 

12.3.1 'video'要素の変換の制限 

ビデオ変換は,特にモバイル機器向けの内容については慎重に実施することが望ましい高級な操作であ

る。全ての装置がこの機能をサポートしているわけではないので,変換されたビデオを用いることによっ

て,内容が相互運用的ではなくなる可能性がある。内容制作者がビデオ変換を制御できるように,この規

格では'transformBehavior'属性,及び対応する機能文字列が導入されている。 

http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo。ビデオ変換をサポートしているビューア

は,その変換に関し,他の全ての要素と同じように'video'要素を処理しなければならない。ビデオ変換を

サポートしていないビューアは,そのビデオを点として('x'及び'y'属性によって与えられる。)処理しなけ

ればならない。'width'属性及び'height'属性がある場合それらは無視する。その代わり,(装置画素における)

幅及び高さがそのメディア自体から取り出されなければならない。ビデオは,その中心を局所座標系の原

点に合わせて表示しなければならない。 

内容制作者は,'transformBehavior'属性を使用して,ビデオ変換をサポートしたビューアにおける変換の

振る舞いを明示的に選択することができる。このことは,制限のある装置向けの内容の性能を向上させる

ために役立つ。 

215 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性の定義: 

transformBehavior = "geometric" | "pinned" | "pinned90" | "pinned180" | "pinned270" 

あるビデオを変換・再サンプリングするのか(本質的には幾何学的長方形として処理),又はそのビデオ

を固定して再サンプリングは実施しないのか(非幾何学的な 直接描画領域における固定点として処理)を

定義する。 

この属性は次に示す五つの値のうちの一つを指定することができる。 

geometric 

そのメディアは局所座標系における幾何学的長方形として処理する('x'属性,'y'属性,'width'属性及び

'height'属性によって定義)。長方形のフィルのためにそのメディアを再サンプリングし,また,変換しなけ

ればならない。これは省略値である。 

pinned 

そのビデオは回転されずに表示される。 

pinned90 

そのビデオは,transform="rotate(90)"と同等の効果の一定の回転を適用されて表示される。 

pinned180 

そのビデオは,transform="rotate(180)"と同等の効果の一定の回転を適用されて表示される。 

pinned270 

そのビデオは,transform="rotate(270)"と同等の効果の一定の回転を適用されて表示される。 

'pinned','pinned90','pinned180',又は'pinned270'の四つの値のうちの一つが指定されている場合には,そ

のメディアは点として('x'及び'y'属性によって定義される。)処理されなければならない。その点は,最も

近い実際の装置画素に変換されなければならない。続いて,そのメディアの固有の解像度をもつビデオは,

固定点を中心としそのメディアが定義した幅及び高さをもつ領域に塗られなければならない。そのピクセ

ルは装置画素のグリッドとそろ(揃)っていなければならず,再サンプリングは実施しない。このとき,

'width'属性及び'height'属性の値はビデオの描画に対して一切影響を与えない。 

アニメーション:不可 

12.3.2 'video'要素の合成の制限 

変換の制限と同じ理由によって,内容制作者がビデオと他の要素との合成を制限することが必要な場合

がある。全ての装置がビデオ要素と他の内容との合成をサポートしているわけではない。その場合には,

他の全てのSVG内容の上にビデオを描画しなければならない。したがって,この規格では'overlay'属性と

対応する機能文字列が導入されている(http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo)。ビデ

オ合成をサポートしているビューアは,SVG塗り重ねモデルに従って'video'要素を描画しなければならず,

したがって,そのビデオの上に図形要素を描画してもよい。ビデオ合成をサポートしていないビューアは,

常にビデオを他の全SVG要素の上に描画しなければならない。 

内容制作者は,'overlay'属性を使用して,ビデオ合成をサポートしたビューアにおける合成の振る舞いを

明示的に選択することができる。このことは,制限のある装置向けの内容の性能を向上させる可能性があ

る。 

属性の定義: 

overlay = "top" | "none" 

SVG塗り重ねモデルに従って'video'を描画するのか,又は他の全てのSVG要素の上にそれを配置するの

かどうかを定義する。 

background image

216 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

その属性値には,次のどちらかを指定することができる。 

top 

'video'要素を通常どおりに背景に合成してはならない。その代わり,一時的なビデオキャンバスは別に

しておき,文書全体の合成プロセスの最後に描画しなければならない。 

none 

SVG塗り重ねモデルに従って'video'を描画しなければならない。これは省略値である。 

アニメーション:不可 

複数の'video'要素においてoverlay="top"と設定されている場合は,それらの'video'要素の描画順は一般的

なSVGの描画順に従う。 

12.3.3 例 

次の例は,http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo機能文字列の使い方を示してい

る。'switch'要素が二つのグループを囲んでいる。最初のグループは,ビデオ変換をサポートしたビューア

においてスケーリング及び回転させたビデオシーケンスを描画する。一方,二つ目のグループは,ビデオ

変換をサポートしないビューアにおいて未変換のビデオを描画する。 

例: media04.svg 

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" 

         xmlns:xlink="http://www.w3.org/1999/xlink" 

     width="100%" height="100%" viewBox="0 0 400 300"> 

     <desc>Example 

of 

switching 

on 

the 

http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo feature string</desc> 

     <switch> 

       <!-- Transformed video group --> 

       <g 

requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo" 

             transform="translate(-21,-34) scale(1.24) rotate(-30)"> 

         <rect x="6" y="166" width="184" height="140" fill="none" stroke="blue" 

                  stroke-width="4" /> 

         <video xlink:href="ski.avi" audio-level=".8" type="video/x-msvideo" 

                   x="10" y="170" width="176" height="132"/> 

       </g> 

       <!-- Untransformed video group --> 

       <g> 

         <rect  x="6" y="166" width="184" height="140" fill="none" stroke="blue" 

                  stroke-width="4"/> 

         <video xlink:href="ski.avi" audio-level=".8" type="video/x-msvideo" 

                   x="98" y="236"/> 

       </g> 

     </switch> 

</svg>  

background image

217 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

上の画像は,二つのSVG利用者エージェントによる例media04.svgの描画結果である。最初(左)の利

用者エージェントはビデオ変換をサポートしていて,二番目(右)のそれはサポートしていない。 

次の例は,http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo機能文字列の使い方を示している。

'switch'要素が二つのグループを囲んでいる。最初のグループは,ビデオ合成をサポートしたビューアにお

いてテキストを合成したビデオを描画する。一方,二つ目のグループは,ビデオ合成をサポートしないビ

ューアにおいてビデオの上部にテキストを配置してビデオを描画する。 

例: media05.svg 

<?xml version="1.1"?> 

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" 

  xmlns:xlink="http://www.w3.org/1999/xlink" 

     width="100%" height="100%" viewBox="0 0 400 300"> 

     <desc>Example 

of 

switching 

on 

the 

http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo feature string</desc> 

     <rect x="2" y="2" width="396" height="296" fill="none" stroke="black" 

                  stroke-width="2" /> 

     <rect x="106" y="66" width="184" height="140" fill="none" stroke="blue" 

                  stroke-width="4" /> 

     <switch> 

       <!-- Composited video group --> 

       <g 

transform="translate(100 

0)" 

requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo"> 

         <video xlink:href="ski.avi" audio-level=".8" type="video/x-msvideo" 

                   x="10" y="70" width="176" height="132"/> 

background image

218 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

         <text x="20" y="100" fill-opacity="0.5" fill="blue" font-size="20">Composited 

title.</text> 

       </g> 

       <!-- Overlayed video group --> 

       <g transform="translate(100 0)" font-size="18"> 

         <video xlink:href="ski.avi" audio-level=".8" type="video/x-msvideo" 

                   x="10" y="70" overlay="top" width="176" height="132"/> 

         <text 

x="15" 

y="60" 

fill="blue" 

fill-opacity="0.5" 

>Non-composited 

title.</text> 

       </g> 

     </switch> 

</svg> 

上の画像は,二つのSVG利用者エージェントによる例media05.svgの描画結果である。最初(左)の利

用者エージェントはビデオ合成をサポートしていて,二番目(右)のそれはサポートしていない。 

12.4 'animation'要素 

'animation'要素は,同期をとったアニメーションのベクタ図形を提供するSVG文書を指定する。'video'

要素と同じように,'animation'要素はそのサイズが'x'属性,'y'属性,'width'属性及び'height'属性で決められ

る図形オブジェクトである。さらに,'animation'要素はタイミング属性及び同期属性をサポートしている。

それらの属性によって,複数のアニメーションが同じSVG文書においてそれぞれ独立した時間軸によって

実行されるようになる。'video'要素及び'image'要素と全く同じように,'animation'要素はSVGファイルの中

の文書片をポイントしてはならない。 

'animation'要素は参照されるファイルのために新しいビューポートを作成する。これについては7.10に

示す。新規ビューポートの境界は,'x'属性,'y'属性,'width'属性及び'height'属性によって定義される。参照

されるSVG文書において,最上位の'svg'要素の'preserveAspectRatio'属性は無視される(その'width'属性及

び'height'属性も同様である。)。その代わり,参照する'animation'要素の'preserveAspectRatio'属性において,

そのSVG内容をビューポートに合わせる方法を定義する。'viewport-fill'プロパティ及び'viewport-fill-opacity'

プロパティにも同じ規則を適用する。 

'preserveAspectRatio'属性の評価に使用する'viewBox'属性の値は,参照される文書の'viewBox'値によって

background image

219 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

定義される。その値が手に入らない場合には'preserveAspectRatio'属性は無視され,そのビューポートの'x'

属性及び'y'属性による転換だけがその内容の表示に使用される。 

参照されるSVG文書は,それ自体のパーズツリー及び文書オブジェクトモデルを作り出す別個の文書で

ある。したがって,参照されるアニメーションへのプロパティの継承は一切行われない。詳細については,

14.1.6を参照。 

SVG仕様は,表示しないアニメーションをいつロードするのがよいのかを指定しない。利用者エージェ

ントは,表示しない(例 display="none")アニメーションのためのアニメーションデータをロードしなく

てもよい。しかしながら,アニメーションを初めて見るとき,これによって遅れが生じる可能性があるこ

とに注意することが望ましい。アニメーションデータの表示の前に利用者エージェントがそのデータをロ

ードすることを制作者が求める場合には,'prefetch'要素を使用するのがよい。 

スキーマ: animation  

    <define name='animation'> 

      <element name='animation'> 

        <ref name='animation.AT'/> 

        <ref name='animation.CM'/> 

      </element> 

    </define> 

    <define name='animation.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.Media.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.XLinkEmbed.attr'/> 

      <ref name='svg.Focus.attr'/> 

      <ref name='svg.AnimateTiming.attr'/> 

      <ref name='svg.AnimateSync.attr'/> 

      <ref name='svg.XYWH.attr'/> 

      <ref name='svg.PAR.attr'/> 

      <ref name='svg.Transform.attr'/> 

      <ref name='svg.InitialVisibility.attr'/> 

    </define> 

    <define name='animation.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='svg.Animate.group'/> 

background image

220 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

          <ref name='svg.Discard.group'/> 

          <ref name='svg.Handler.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

x = "<coordinate>" 

アニメーションが置かれる長方形領域の一角のx座標。省略値:'0' 

アニメーション:可 

y = "<coordinate>" 

アニメーションが置かれる長方形領域の一角のy座標。省略値:'0' 

アニメーション:可 

width = "<length>" 

そのアニメーションが置かれる長方形領域の幅。負の値はサポート外である。値が0の場合,その要素

の描画はできない。省略値:'0' 

アニメーション:可 

height = "<length>" 

そのアニメーションが置かれる長方形領域の高さ。負の値はサポート外である。値が0の場合,その要

素の描画はできない。省略値:'0' 

アニメーション:可 

xlink:href = "<IRI>" 

アニメーションデータへのIRI参照。不正なIRI参照はサポート外の値である。属性値が空(xlink:href="")

の場合,その要素の描画はできない。省略値:空の文字列 

この属性の値がアニメーション化又は変更されるとき,メディア時間軸を制御することができる場合,

'syncBehavior'属性をindependentに設定したときだけ,そのメディア時間軸は再開始される。そのメディア

時間軸を制御することができない場合,そのような変更があってもメディア時間軸は影響を受けない。 

アニメーション:可 

preserveAspectRatio = ["defer"] <align> [<meet>] 

均一的なスケーリングの適用の有無を示す(この属性の解釈及び<align>の構文については,7.9を参照)。 

アニメーション:可 

initialVisibility = "whenStarted" | "always" 

12.7を参照。 

アニメーション:不可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

実行時同期属性 

background image

221 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

12.6を参照。 

SVGタイミング属性 

16.2.8を参照。 

'animation'要素の基本的な使い方を次の例に示す。その他の例については,14.1.5のuse及びanimation

の例を参照。 

例: media03.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny"> 

  <desc>Example of two animation elements pointing to the same content.</desc> 

  <animation begin="1" dur="3" repeatCount="1.5" fill="freeze" 

             x="100" y="100" width="50" height="50"  

             xlink:href="bouncingBall.svg"/> 

              

  <animation begin="2" x="300" y="100" width="50" height="50"  

             xlink:href="bouncingBall.svg"/> 

</svg> 

12.5 'audio-level'プロパティ 

'audio-level'プロパティは,上に説明した'audio'要素,'video'要素,'animation'要素,'use'要素及び'g'要素の

ようなコンテナ要素に対して適用することができる。 

'audio-level'  

値: 

<number> | inherit  

初期値: 

1.0  

適用対象: 

メディア要素,'use'及びコンテナ要素 

継承: 

不可 

パーセンテージ: 該当なし 

メディア: 

視覚及び聴覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

'audio-level'プロパティは,特定の要素のボリュームの計算に使われる値を指定する。値が1.0未満のと

きはそれを減少させ,値が0のときはそれを無音にする。 

ある要素のボリュームは,その固定された'audio-level'プロパティから生成され,その親の固定された算

出値又は(親がない場合)初期値1.0のどちらかが適用される。0.0(無音)から1.0(システムボリュー

ム)までの範囲に入らない値については,オーディオレベルをこの範囲に固定しなければならない(C.5

を参照)。 

この一文は参考(informative)である。要素のボリュームは,その親のボリュームよりも大きくするこ

とができない。 

出力信号のレベルは,次のような対数尺度を使って計算される(volはその要素のボリューム値)。 

background image

222 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

dB change in signal level = 20 × log10(vol) 

利用者エージェントは,利用者の選択及びハードウェアの制約に基づき,実際の信号レベルを一定の最

大値に制限してもよい。 

要素のボリュームが0である場合,その出力信号は無音でなければならない。要素のボリュームが1で

ある場合,その出力信号はシステムのボリュームレベルでなければならない。'audio-level'プロパティ及び

要素ボリュームは,どちらもシステムボリューム設定を上書きしない。 

12.6 実行時同期のための属性 

この規格は,次のようなSMIL 2.1の五つの属性をサポートし,時間付き要素の実行時同期を制御する。

この規格では,'syncBehavior'属性,'syncTolerance'属性及び'syncMaster'属性は,'audio'要素,'video'要素,及

び'animation'要素において指定することができる。'syncBehaviorDefault'属性及び'syncToleranceDefault'属性は,

'svg'要素において指定することができる。 

属性の定義: 

syncBehavior = "canSlip" | "locked" | "independent" | "default" 

'syncBehavior'に関するSMIL 2.1の定義([SMIL21]の10.4.1)を参照。 

アニメーション:不可 

syncBehaviorDefault = "canSlip" | "locked" | "independent" | "inherit" 

'syncBehaviorDefault'に関するSMIL 2.1の定義([SMIL21]の10.4.1)を参照。 

アニメーション:不可 

syncTolerance = "<Clock-value>" | "default" 

'syncTolerance'に関するSMIL 2.1の定義([SMIL21]の10.4.1)を参照。 

アニメーション:不可 

syncToleranceDefault = "<Clock-value>" | "inherit" 

'syncToleranceDefault'に関するSMIL 2.1の定義([SMIL21]の10.4.1)を参照。 

アニメーション:不可 

syncMaster = "<boolean>" 

'syncMaster'に関するSMIL 2.1の定義([SMIL21]の10.4.1)を参照。 

アニメーション:不可 

例:テキストと同期をとられたビデオ内容 

次の二つの例では,同期属性によってビデオ内容及びテキストがきちんと同期をとることができるよう

にする方法が示されている。 

例: sync-attr-main.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg"  

     xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny"  

     viewBox="0 0 400 100" height="100%" width="100%" syncBehaviorDefault="locked"> 

   

  <title>Sync* Attributes</title> 

background image

223 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <desc>An example which illustrates the use of sync* attributes</desc> 

   

  <video x="10" y="10" xml:id="myclip"  

         xlink:href="rtsp://www.example.org/mysong.m4v" syncMaster="true"/> 

  <animation x="10" y="50" xml:id="mylyrics" xlink:href="timed-lyrics.svg"/> 

</svg>  

例: timed-lyrics.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg"  

     xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny"  

     viewBox="0 0 400 100" height="100%" width="100%"> 

      

  <title>Synchronizing lyrics with video</title> 

  <desc>This document contains the textual lyrics to synchronize with some video content 

in the referencing document</desc> 

  <g fill="blue" font-family="Arial" font-size="10" transform="translate(20, 20)"> 

    <text xml:id="Text0" display="none">This is some text</text> 

    <set xlink:href="#Text0" attributeName="display" to="inline" begin="0" end="1"/> 

    <text xml:id="Text10" display="none">simulating some lyrics</text> 

    <set xlink:href="#Text10" attributeName="display" to="inline" begin="1.1" end="2"/> 

    <text xml:id="Text20" display="none">displayed synchronously</text> 

    <set xlink:href="#Text20" attributeName="display" to="inline" begin="2.1" end="3"/> 

    <text xml:id="Text30" display="none">with some video</text> 

    <set xlink:href="#Text30" attributeName="display" to="inline" begin="3.1" end="4"/> 

    <text xml:id="Text40" display="none">in a different document</text> 

    <set xlink:href="#Text40" attributeName="display" to="inline" begin="4.1" end="5"/> 

  </g> 

</svg>  

時間付き要素('video'及び'animation')はそれらの実行時同期の振る舞いを'syncBehavior'属性を用いて指

定しないので,その振る舞いは最も近い祖先(この場合'svg'要素)にある'syncBehaviorDefault'属性から推

論される。 

この属性は値'locked'をもつ。それは,サブツリーにある全ての時間付き要素が同一の時間軸を共有して

いることを意味している。この場合,メインシーンの時間軸,'video'の時間軸及び'animation'の時間軸はお

互いに対してロックされる。 

続いて,マスタがビデオに与えられる。つまり,そのビデオがストリーミングセッション(streaming 

session)において止まってしまった場合,そのビデオの時間軸は一時停止し,結果として歌詞及びメイン

224 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

シーンの時間軸も同じように一時停止する。 

12.7 'initialVisibility'属性 

'initialVisibility'属性は視覚メディア要素('video'及び'animation')に適用され,最初の活性持続時間が始ま

る前の段階におけるそのメディアオブジェクトの可視性を制御するために用いられる。活性化の前に可視

的であるメディア要素は,その最初のフレームを表示する。つまり,'animation'要素は参照されるファイル

を時間0に描画し,'video'要素はそのビデオシーケンスの最初のフレームを時間0に描画する。 

属性の定義: 

initialVisibility = "whenStarted" | "always" 

最初の活性持続時間が始まる前の段階におけるそのメディアオブジェクトの可視性を制御する。 

その属性値には,次のどちらかを指定することができる。 

whenStarted 

省略値。最初の活性持続時間が始まるまでは,あたかも要素にdisplay="none"が設定されたかのように,

そのメディアオブジェクトは表示されないことを示す。 

always 

そのメディア要素は親の時間コンテナの初期化(すなわち,親のSVG文書における時間0)によって可

視的になる。この間,また活性持続時間が始まるまでの間は,そのメディア要素は初期化はされるが非活

性化のままである。 

アニメーション:不可 

13 対話性 

13.1 概説 

SVG内容は,次のようなSVG言語の機能を利用することによって,対話的(すなわち,利用者の開始

したイベントに反応可能)になることができる。 

• 

利用者が開始した操作(例 キー押下)によって,時間付き要素の開始・停止,スクリプトの実行,

又は'listener'要素による'handler'要素の起動を行うことができる。 

• 

特定の図形要素の上をスタイラスペンでクリックする操作などによって,利用者は新しいウェブペ

ージへのハイパーリンク(14.2を参照)を開始することができる。 

• 

'svg'要素の'zoomAndPan'属性の値及びSVG利用者エージェントの特性によって,利用者は多くの場

合SVG内容をズームインしたり,パンしたりすることができる。 

この箇条13では次の三つについて示す。 

• 

イベントに関する情報。イベントが起動される状況の説明など。 

• 

与えられた文書をズーム及びパンすることができるのかどうかを示す方法。 

• 

要素フォーカス(focus)及びナビゲーション。 

次の関連する情報については,他の箇条を参照。 

• 

ハイパーリンクについては,箇条14に示す。 

• 

'script'及び'handler'要素については箇条15に示す。 

• 

時間付き要素については,箇条16及び箇条12に示す。 

13.2 サポートされるイベント一覧 

SVGにおいてイベントは次のような影響を与える。 

• 

SVG uDOMによってスクリプトでイベントリスナを登録することができる。これによって,特定の

background image

225 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

イベントが起こったときにそのスクリプトを呼び出すことができる。 

• 

'handler'要素の'ev:event'属性は,'handler'が起動すべきイベントを指定する。 

• 

イベントに基づく開始又は終了のために時間付き要素を定義することができる。 

次の表に,SVGが認識及びサポートしなければならない全イベントを示す。“説明”の欄には,そのイ

ベントが発生するための必須条件を示している。 

イベント型 

説明 

アニメーション 

イベント名 

伝ぱ(播)

(bubbling)

キャン

セル 

uDOMインタ

フェース 

DOMFocusIn 

ある要素がフォーカス(focus)を受けたとき
に発生する。 
DOM 2のDOMFocusInイベントの定義
([DOM2EVENTS]の1.6.1)を参照。 

focusin 

可 

不可 

UIEvent 

DOMFocusOut ある要素がフォーカス(focus)から外された

ときに発生する。 
DOM 2のDOMFocusOutイベントの定義
([DOM2EVENTS]の1.6.1)を参照。 

focusout 

可 

不可 

UIEvent 

DOMActivate 

ある要素が活性化したときに(例 マウスクリ
ック,キー押下によって)発生する。 
DOM 2のDOMActivateイベントの定義
([DOM2EVENTS]の1.6.1)を参照。 

activate 

可 

可 

UIEvent 

click 

ある要素の上でポインティング装置のボタン
がクリックされたときに発生する。クリックと
は,同一のスクリーン位置におけるmousedown
及びmouseupであると定義される。これらの
イベントのシーケンスは,mousedown, 
mouseup, clickである。同一のスクリーン位置
において複数のクリックが発生した場合には,
そのシーケンスが繰り返され,そのたびに
detail属性の値が増加する。 
DOM 2

click

イベントの定義

([DOM2EVENTS]の1.6.2)を参照。 

click 

可 

可 

MouseEvent 

mousedown 

ある要素の上でポインティング装置のボタン
が押されたときに発生する。 
DOM 2のmousedownイベントの定義
([DOM2EVENTS]の1.6.2)を参照。 

mousedown 

可 

可 

MouseEvent 

mouseup 

ある要素の上でポインティング装置のボタン
がリリースされたときに発生する。 
DOM 2のmouseupイベントの定義
([DOM2EVENTS]の1.6.2)を参照。 

mouseup 

可 

可 

MouseEvent 

mouseover 

ある要素の上にポインティング装置を移動し
たときに発生する。 
DOM 2のmouseoverイベントの定義
([DOM2EVENTS]の1.6.2)を参照。 

mouseover 

可 

可 

MouseEvent 

mousemove 

ある要素の上にポインティング装置が置かれ
ている状態でそのポインティング装置を移動
したときに発生する。 
DOM 2のmousemoveイベントの定義
([DOM2EVENTS]の1.6.2)を参照。 

mousemove 

可 

可 

MouseEvent 

background image

226 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

イベント型 

説明 

アニメーション 

イベント名 

伝ぱ(播)

(bubbling)

キャン

セル 

uDOMインタ

フェース 

mouseout 

ある要素からポインティング装置を離したと
きに発生する。 
DOM 2のmouseoutイベントの定義
([DOM2EVENTS]の1.6.2)を参照。 

mouseout 

可 

可 

MouseEvent 

mousewheel 

ホイール入力装置が活性化したときに発生す
る。 
詳細については,A.6.5を参照。 

none 

可 

可 

MouseWheel 
Event 

textInput 

一つ以上の文字が入力された。 
詳細については,13.5を参照。 

none 

可 

可 

TextEvent 

keydown 

キーが押された。 
詳細については,13.6を参照。 

none 

可 

可 

KeyboardEvent 

keyup 

キーがリリースされた。 
詳細については,13.6を参照。 

none 

可 

可 

KeyboardEvent 

load 

このイベントは,利用者エージェントが要素及
び全ての依存リソース(画像,スタイルシート,
スクリプトなど)のロードを完了した時点で起
動される。その要素がスクリプトを参照してい
る場合,そのスクリプトを解釈する試みが実施
された後にだけそのイベントは提起される。依
存リソースのロードに失敗したとしても,それ
らを参照する要素がまだ文書ツリーに存在し,
また,それらがexternalResourcesRequiredと指
定されていない場合,このイベントの発生は妨
げられない。このイベントは,その要素をDOM
ツリーに追加した方法からは独立している。 

load 

不可 

不可 

Event 

SVGLoad 

このイベントは廃止される可能性があり,後方
互換性のためだけにある。この表の下の段落を
参照。このイベントは,loadイベントがディス
パッチされた後すぐにディスパッチされなけ
ればならない。 

none 

不可 

不可 

Event 

resize 

文書画面のサイズを変更しているときに発生
する。このイベントは'svg'要素だけに適用する
ことができ,リサイズ操作が行われた後にディ
スパッチされる。このイベントの対象は'svg'
要素である。 

resize 

可 

不可 

Event 

SVGResize 

このイベントは廃止される可能性があり,後方
互換性のためだけにある。この表の下の段落を
参照。このイベントは,resizeイベントがディ
スパッチされた後すぐにディスパッチされな
ければならない。 

none 

可 

不可 

Event 

scroll 

利用者の直接的な相互動作,又は
SVGSVGElementインタフェースで利用できる
currentTranslateプロパティへの変更のどちら
かによって,X軸,Y軸,又は両方の軸に沿っ
て文書画面が移動されているときに発生する。
このイベントは'svg'要素だけに適用すること
ができ,移動変更が行われた後にディスパッチ
される。このイベントの対象は'svg'要素であ
る。 

scroll 

可 

不可 

Event 

background image

227 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

イベント型 

説明 

アニメーション 

イベント名 

伝ぱ(播)

(bubbling)

キャン

セル 

uDOMインタ

フェース 

SVGScroll 

このイベントは廃止される可能性があり,後方
互換性のためだけにある。この表の下の段落を
参照。このイベントは,scrollイベントがディ
スパッチされた後すぐにディスパッチされな
ければならない。 

none 

可 

不可 

Event 

SVGZoom 

利用者の直接的な相互動作,又は
SVGSVGElementインタフェースで利用できる
currentScaleプロパティへの変更のどちらかに
よって,文書画面のズームレベルが変更されて
いるときに発生する。このイベントは'svg'要素
だけに適用することができ,ズームレベル変更
が行われた後にディスパッチされる。このイベ
ントの対象は'svg'要素である。 

zoom 

不可 

不可 

Event 

SVGRotate 

利用者の直接的な相互動作,又は
SVGSVGElementインタフェースで利用できる
currentRotateプロパティへの変更のどちらか
によって,文書画面のローテーションが変更さ
れているときに発生する。このイベントは'svg'
要素だけに適用することができ,ローテーショ
ン変更が行われた後にディスパッチされる。こ
のイベントの対象は'svg'要素である。 

rotate 

不可 

不可 

Event 

beginEvent 

時間付き要素が開始したときに発生する。 
SMIL 

2.1

beginEvent

([DOM2EVENTS]の10.6.2)を参照。 

beginEvent 

可 

不可 

TimeEvent 

endEvent 

時間付き要素が終了したときに発生する。 
SMIL 2.1のendEventの定義([DOM2EVENTS]
の10.6.2)を参照。 

endEvent 

可 

不可 

TimeEvent 

repeatEvent 

時間付き要素が反復するときに発生する。それ
は一回目の繰返しの後でその要素が反復され
るたびに提起される。 
SMIL 

2.1

repeatEvent

([DOM2EVENTS]の10.6.2)を参照。 

repeatEvent 

可 

不可 

TimeEvent 

loadstart 

ロード操作を開始した。 
このイベントの詳細については,A.6.9を参照。 

none 

不可 

不可 

ProgressEvent 

progress 

特定のリソースのロードが進行している。 
このイベントの詳細については,A.6.9を参照。 

none 

不可 

不可 

ProgressEvent 

loadend 

ロード操作を完了した。 
このイベントの詳細については,A.6.9を参照。 

none 

不可 

不可 

ProgressEvent 

SVGTimer 

あるタイマにおいて指定されたタイマ間隔が
経過したときに発生する。このイベントは,
SVG文書の現在のグローバル実行文脈におい
て動いている(running)タイマ(つまり,
SVGGlobalインタフェースによって具体値を
生成され,SVGTimerインタフェースのstart()
メソッドによって開始されたタイマ)だけが起
動する。このイベントの対象はSVGTimerオブ
ジェクトそれ自体である。このイベント処理は
対象中の位相に限定される。 
詳細については,A.8.19を参照。 

none 

不可 

不可 

Event 

background image

228 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この規格では,他のW3C仕様とイベント名を統一するために,SVG 1.1のイベント型の幾つかを非推奨

としていることに注意する。ここでいう“非推奨”とは,SVG 1.1及びこの規格の両方との互換性をもつ

利用者エージェントは,古い廃止予定のイベント名及び新しいイベント名の両方をサポートしなければな

らないことを意味する。この規格を対象とする内容の制作者は,非推奨のイベント型ではなく,新しいイ

ベント型を使用することが望ましい。具体的には次のとおりである。 

• 

"SVGLoad"イベントは非推奨である。代わりに"load"イベントを使用する。 

• 

"SVGResize"イベントは非推奨である。代わりに"resize"イベントを使用する。 

• 

"SVGScroll"イベントは非推奨である。代わりに"scroll"イベントを使用する。 

DOM Level2 Eventsが定義したイベント型のためのイベントリスナに渡すイベントオブジェクトの属性

値については,その仕様書のイベントの説明で詳細を知ることができる。それ以外のイベント型について

は,属性値がこの規格の他の場所において説明されている。 

13.3 利用者インタフェースイベント 

対話性をサポートしているSVG利用者エージェントでは,制作者は利用者インタフェースイベントに応

答できるSVG文書を定義することが一般的である。可能な利用者イベントとしては,ポインタイベント,

キーボードイベント,文書イベントなどがある。 

利用者インタフェース(UI)イベントへの応答において,制作者は,アニメーションの開始,別のウェ

ブページへのハイパーリンクの実行,文書の一部のハイライト(例 ポインタが置かれている図形要素の

色を変える。),“ロールオーバー”の開始(例 隠れている図形要素がポインタを近づけると現れる。),リ

モートデータベースと通信するスクリプトの開始などを実施することができる。 

次の例では,ECMAScriptイベントハンドラを起動するDOMActivateイベントの使い方を示している。 

例: activate.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     width="6cm" height="5cm" viewBox="0 0 600 500"> 

  <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc> 

  <!-- ECMAScript to change the radius --> 

  <script type="application/ecmascript"><![CDATA[ 

    function change(evt) { 

      var circle = evt.target; 

      var currentRadius = circle.getFloatTrait("r"); 

      if (currentRadius == 100) 

        circle.setFloatTrait("r", currentRadius * 2); 

      else 

        circle.setFloatTrait("r", currentRadius * 0.5); 

    } 

  ]]></script> 

background image

229 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <!-- Act on each DOMActivate event --> 

  <circle cx="300" cy="225" r="100" fill="red"> 

    <handler type="application/ecmascript" ev:event="DOMActivate"> change(evt); 

</handler> 

  </circle> 

  <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"> 

    Activate the circle to change its size 

  </text> 

</svg> 

13.4 ポインタイベント 

注記 W3CのWeb Content Accessibility Guidelines(WCAG)では,内容制作者に装置から独立した内

容を作成するよう求めている。特に,利用者がポインタ装置を使うことができることを前提と

した内容は作成しないほうがよい。 

ポインタ装置に対する利用者動作によって発生する利用者インタフェースイベントは,ポインタイベン

トと呼ばれる。 

多くのシステムにおいて,マウス,トラックボール,スタイラスペン,又はジョイパッドのようなポイ

ンタ装置がサポートされている。マウスを使用するシステムでは,そのポインタイベントはマウスの移動

及びマウスのクリックのような操作から構成される。それ以外のポインタ装置をもつシステムでは,その

ポインティング装置はしばしばマウスの振る舞いを模倣したものである。例えばボタンを押すことがマウ

スクリックと同じになるというような同等の利用者操作のためのメカニズムが提供される。 

スタイラスペンによるポインタとマウスによるポインタとの違いの一つとして,マウスではそのカーソ

ルに常に位置があるが,スタイラスペンは持ち上げてもよいので,それがスクリーン上でタップされたと

きにだけそのカーソルは位置をもつ,ということがある。したがって,全てのポインタ装置がmouseover

及びmouseoutイベントを生成することを前提にした内容は,全ての装置において動作するとは限らない。 

13.5 テキストイベント 

テキストを生成する利用者動作によって発生する利用者インタフェースイベントは,テキストイベント

と呼ばれる。それらは通常キーボードを用いて生成されるが,IME(例 日本語のテキスト),音声入力な

どのその他の入力手段によって作り出すこともできる。このイベントは一連のUnicode文字が文書に送ら

れるときにはいつでもディスパッチされるので,使用される入力装置又はメソッドからは独立している。 

13.6 キーイベント 

注記 W3CのWeb Content Accessibility Guidelines(WCAG)では,内容制作者に装置から独立した内

容を作成するよう求めている。特に,利用者が(フルサイズの)キーボードを使うことができ

ることを前提とした内容は作成しないほうがよい。 

キーを押す利用者動作(テキストとは対照的であり,例えばファンクションキー押下,ゲームのための

キー押下など)によって発生する利用者インタフェースイベントは,キーイベントと呼ばれる。 

13.7 イベントフロー 

DOM Level 2 Eventsは,イベントフローモデル([DOM2EVENTS]の1.2)を定義している。これは,文

230 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

書におけるイベントリスナが起動される三つの位相を定義したものである。取出し,対象中,及び伝ぱ(播)

(bubbling)。SVG Tiny 1.2利用者エージェントは,イベントフローモデルの捕捉段階(capture phase)をサ

ポートしていなくてもよい。捕捉段階(capture phase)がサポートされていない場合は次のとおり。 

• 

EventTarget::addEventListener()のuseCaptureパラメタにtrueを渡すことによってイベントリスナの捕

捉段階(capture phase)を登録すると,そのリスナーは起動されない。SVG uDOMによってリスナ

ーが要素上に登録されたかどうかを決定する方法はないので,そのような

EventTarget::addEventListener()へのコールは無視することができる。 

• 

'listener'においてphase="capture"と指定して捕捉段階(capture phase)のイベントリスナを登録する

と,イベントリスナは対象中及び既定位相に登録される。なぜならば,値'capture'は無視され,省略

値'default'が使用されるからである。適合SVG文書は,'phase'属性の値を指定する場合には'default'

を使用しなければならない。 

• 

アニメーションタイミング指定子リストにおけるaccessKey-valueに対応する全てのkeydownイベン

トは,どのような適切なリスナーでも決して起動しない。なぜならば,SVG利用者エージェントは,

stopPropagation()及びpreventDefault()が捕捉段階(capture phase)のイベントオブジェクト上に呼び

出されたかのような振る舞いをするからである(accessKey-value構文の定義で説明している。)。 

13.8 イベントディスパッチ 

各ポインタイベント,テキストイベント,又はキーイベントに関し,SVG利用者エージェントは与えら

れたイベントの対象オブジェクトを決定する。その対象オブジェクトとは,そのイベントの時点において,

(ポインタイベントに関し)関連する図形内容がポインタの下にあるか,(テキスト及びキーイベントに関

し)フォーカス(focus)されているような最上位の図形要素又はSVGElementInstanceオブジェクトでなけ

ればならない(ある要素の関連図形内容にポインタが置かれているかどうか,また,その環境においてそ

の図形要素がポインタイベントの対象オブジェクトになることができるかどうか,ということを決定する

方法については13.10を参照。)。要素が表示されないとき(すなわち,その要素又はその祖先の一つの

'display'プロパティが値noneをもつとき),その要素はポインタイベントの対象になってはならない。 

対象オブジェクト又は対象要素の祖先の一つにそのイベントをディスパッチ(dispatch)するかどうかは,

次によって決定する。 

• 

対象オブジェクトが全くなければ,イベントはディスパッチされない。 

• 

そうでなければ,その対象オブジェクトが与えられたイベントのための適切なイベントハンドラを

もっている場合,そのイベントは対象オブジェクトにディスパッチされる。 

• 

そうでなければ,対象オブジェクトのそれぞれの祖先(直近の親から始める)を検査し,適切なイ

ベントハンドラがあるかどうかを確認する。祖先が適切なイベントハンドラをもっている場合,そ

のイベントはその祖先要素にディスパッチされる。 

• 

そうでなければ,そのイベントは廃棄される。 

あるイベントが伝ぱ(播)(bubbling)([DOM2EVENTS]の1.2.3)するように定義されている場合,対象

オブジェクトの全ての直接の祖先にまで伝ぱ(播)(bubbling)が発生する。子孫の要素はその祖先よりも

先にイベントを受け取る。したがって,ある'path'要素が'g'要素の子であり,共にclickイベントのためのイ

ベントリスナをもっている場合,そのイベントは'g'要素よりも先に'path'要素にディスパッチされる。 

最初にあるイベントを特定の要素にディスパッチした後,以降の処理を止める適切な動作が行われてい

ないのであれば,そのイベントはその要素の祖先のための適切なイベントハンドラ(もし存在すれば)に

渡されなければならず,[イベント伝ぱ(播)(bubbling)の場合には]さらなる処理の対象となる。 

231 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

13.9 利用者インタフェースイベントの処理順序 

利用者インタフェースイベントの処理順序は次のようになる。 

• 

ポインタの下にある最上位の図形要素[及び潜在的なイベント伝ぱ(播)(bubbling)によるその図

形要素の様々な祖先]に割り当てられたイベントハンドラが,最初にイベントを受け取る。与えら

れたイベントに対するそれ以降の処理を明示的に妨げる活性化イベントハンドラが全くない場合,

そのイベントは次に渡される。 

• 

(利用者エージェントにおけるマウスクリックのような,ハイパーリンクを呼び出す利用者インタ

フェースイベントについて)リンク処理。あるハイパーリンクが利用者インタフェースイベントに

応答して呼び出されると,通常そのハイパーリンクはそれ以降の活性化イベント処理を無効にする

(例 しばしばそのリンクは別のウェブページへのハイパーリンクを定義する。)。与えられたイベ

ントへのそれ以降の処理がリンク処理によって無効にされない場合,そのイベントは次に渡される。 

• 

('text'要素上のマウスクリック及びドラッグのような,テキストを選択することができる利用者イ

ンタフェースイベントについて)テキスト選択処理。テキスト選択操作が行われると,それは通常

与えられたイベントへのそれ以降の処理を無効にする。そうではない場合には,そのイベントは次

に渡される。 

• 

文書全体のイベント処理。例えば,SVG文書片のズーム及びパンをすることができる利用者エージ

ェント機能など。 

'use'要素は,利用者インタフェースイベントの対象になることができる複製コンテンツを作成する。 

その複製コンテンツの中の利用者インタフェースイベントは,その複製コンテンツがメインの文書の一

部であるときと同じように,利用者インタフェースイベントの処理に加わる。言い換えれば,複製コンテ

ンツが現在のポインタ位置にある他の内容の上に描画をする図形要素を含んでいる場合,それは最上位の

図形要素となり,他の要素よりも先にそのポインタイベントを受け取る。この場合,利用者インタフェー

スイベントは対象の祖先を通って上がって行き,参照している要素に向かって文書の境界を越え,その要

素の祖先を通って伝ぱ(播)(bubbling)する。入れ子の複製ツリーに複数のレベルがある場合には,この

プロセスは必要に応じて継続される。 

13.10 

'pointer-events'プロパティ 

場合によっては,特定の図形要素がポインタイベントの対象になることができる状況を制作者が管理し

たいときがある。例えば,ある制作者は,図形のストロークされた周辺部分の上にポインタがあるときに

だけ要素がポインタイベントを受け取るようにしてもよい。また,別の場合には,制作者は,どんな状況

でもその要素はポインタイベントを無視し,与えられた要素の下にある図形要素がポインタイベントの対

象になるようにしてもよい。 

例えば,'stroke'がredであり(つまり,外形が無地の赤)'fill'がnoneである(つまり,内部に塗りを適

用しない。)'circle'が,'fill'がblueである'rect'の上に直接描画された場合を考えてみる。その制作者は,'circle'

の周辺上にポインタがあるときにだけその'circle'がポインタイベントの対象になるようにしてもよい。

'circle'の内部にポインタがあるときには,下にある'rect'がポインタイベントの対象要素になるようにしても

よい。 

'pointer-events'プロパティは,与えられた図形要素がポインタイベントの対象要素になることができる状

況を指定する。それは次が処理される場合の状況に影響を与える。 

• 

利用者インタフェースイベント(例 キー押下) 

• 

ハイパーリンク(14.2を参照) 

232 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'pointer-events' 

値: 

boundingBox | visiblePainted | visibleFill | visibleStroke | visible |  

painted | fill | stroke | all | none | inherit 

初期値: 

visiblePainted 

適用対象: 

図形要素 

継承: 

可 

パーセンテージ: 該当なし 

メディア: 

視覚 

アニメーション: 可 

算出値: 

inheritを除く指定値 

boundingBox  

与えられた要素の包含ボックス上にポインタがあるとき,その要素はポインタイベントの対象要素でな

ければならない。 

visiblePainted 

'visibility'プロパティがvisibleに設定され,また,“塗られた”領域上にポインタがあるときに限り,そ

の要素はポインタイベントの対象要素となることができる。塗られた領域上にポインタがあるときとは,

それが要素の内部(すなわち,'fill')の上にあり'fill'プロパティがnone以外の値であるとき,又はそれが

要素の周辺(すなわち,'stroke')上にあり'stroke'プロパティがnone以外の値のときである。 

visibleFill 

'visibility'プロパティがvisibleに設定され,また,その要素の内部(すなわち,'fill')にポインタがある

ときに限り,その要素はポインタイベントの対象要素となることができる。'fill'プロパティの値は,イベ

ント処理に影響を与えない。 

visibleStroke 

'visibility'プロパティがvisibleに設定され,また,その要素の周辺上(すなわち,'stroke')にポインタが

あるときに限り,その要素はポインタイベントの対象要素となることができる。'stroke'プロパティの値は,

イベント処理に影響を与えない。 

visible 

'visibility'プロパティがvisibleに設定され,さらに,ポインタがその要素の内部(すなわち,'fill')又は

周辺上(すなわち,'stroke')のどちらかにあるときに限り,その要素はポインタイベントの対象要素とな

ることができる。'fill'及び'stroke'の値は,イベント処理に影響を与えない。 

painted 

“塗られた”領域上にポインタがあるときに限り,その要素はポインタイベントの対象要素となること

ができる。塗られた領域上にポインタがあるときとは,それが要素の内部(すなわち,'fill')の上にあり'fill'

プロパティがnone以外の値であるとき,又はそれが要素の周辺(すなわち,'stroke')上にあり'stroke'プロ

パティがnone以外の値のときである。'visibility'プロパティの値は,イベント処理に影響を与えない。 

fill 

その要素の内部(すなわち,'fill')にポインタがあるときに限り,その要素はポインタイベントの対象

要素となることができる。'fill'プロパティ及び'visibility'プロパティの値は,イベント処理に影響を与えない。 

stroke 

その要素の周辺上(すなわち,'stroke')にポインタがあるときに限り,その要素はポインタイベントの

233 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

対象要素となることができる。'stroke'プロパティ及び'visibility'プロパティの値は,イベント処理に影響を

与えない。 

all 

ポインタがその要素の内部(すなわち,'fill')又は周辺上(すなわち,'stroke')のどちらかにあるときに

は,その要素は常にポインタイベントの対象要素でなければならない。'fill','stroke'及び'visibility'プロパテ

ィの値は,イベント処理に影響を与えない。 

none 

その要素はポインタイベントを受け取ってはならない。 

テキスト要素については,ヒット検出は文字セルに基づいて実行される。 

• 

値visiblePaintedの意味は,'fill'プロパティ又は'stroke'プロパティのどちらかがnone以外の値に設定

されていて,さらに,'visibility'プロパティがvisibleに設定されているとき,そのテキスト文字列は

文字セル内のどこにおいてもイベントを受け取ることができるという意味である。 

• 

値visibleFill,visibleStroke,及びvisibleは同等であり,そのテキスト文字列は'visibility'プロパティ

がvisibleに設定されていれば文字セル内のどこにおいてもイベントを受け取ることができることを

示す。'fill'及び'stroke'プロパティの値は,イベント処理に影響を与えない。 

• 

値paintedの意味は,'fill'プロパティ又は'stroke'プロパティのどちらかがnone以外の値に設定されて

いるとき,そのテキスト文字列は文字セル内のどこにおいてもイベントを受け取ることができると

いう意味である。'visibility'プロパティの値は,イベント処理に影響を与えない。 

• 

値fill,stroke,及びallは同等であり,そのテキスト文字列は文字セル内のどこにおいてもイベント

を受け取ることができることを示す。'fill','stroke'及び'visibility'プロパティの値は,イベント処理に

影響を与えない。 

• 

値noneは,そのテキストはポインタイベントを受け取らないことを示す。 

ラスタ画像に関しては,ヒット検出は全体の画像に基づいて実行(すなわち,画像のための長方形領域

は,その画像がイベントを受け取るかどうかを決定する要因の一つとなる。)されるか,又はピクセルに基

づいて実行(すなわち,ポインタの下にあるピクセルのアルファ値が,その画像がイベントを受け取るか

どうかを決定するために使われる。)されなければならない。次の規則を守らなければならない。 

• 

値visiblePaintedは,ポインタの下にあるラスタ画像の全ピクセルが完全な透明ではなく,さらに,

'visibility'プロパティがvisibleに設定されている場合,そのラスタ画像は画像の境界内のどこにおい

てもイベントを受け取ることができることを意味する。 

• 

値visibleFill,visibleStroke,及びvisibleは同等であり,その画像は'visibility'プロパティがvisibleに

設定されていれば画像の長方形領域内のどこにおいてもイベントを受け取ることができることを示

す。 

• 

値paintedは,ポインタの下にあるラスタ画像の全ピクセルが完全な透明ではない場合,そのラスタ

画像は画像の境界内のどこにおいてもイベントを受け取ることができることを意味する。'visibility'

プロパティの値は,イベント処理に影響を与えない。 

• 

値fill,stroke,及びallは同等であり,その画像は画像の長方形領域内のどこにおいてもイベントを

受け取ることができることを示す。'visibility'プロパティの値は,イベント処理に影響を与えない。 

• 

値noneは,その画像はポインタイベントを受け取らないことを示す。 

ラスタ画像については,'fill-opacity','stroke-opacity','fill',及び'stroke'プロパティの値はイベント処理に

影響を与えないことに注意する。 

234 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

13.11 

拡大及びパン 

拡大とはあるSVG文書片における一定の完全な変換のことであり,拡大操作によって全ての図形要素が

同じ割合でスケーリングされる。拡大操作には,SVG文書片の最上位(すなわち,最上位の'svg'要素の外)

における補助的な転換及びスケールの変換をする効果がある。 

パンとは,利用者インタフェース操作に対応したSVG文書片における文字変換のことである。 

相互動作が可能な利用者環境で作動するSVG利用者エージェントは,拡大及びパンをサポートしていな

ければならない。 

属性の定義: 

zoomAndPan = "magnify" | "disable" 

'svg'要素において指定することができる。この属性は,内容及び利用者インタフェースの両方において

SVGが使用されているアプリケーションを対象としている(例 地図アプリケーション)。既定のズーム

は画面から利用者インタフェースの重要な構成要素を移動して利用者を戸惑わせる可能性がある。より小

さい内容領域に対するズーム,パン及びローテーション制御ができるようにする一方で,既定のズーム,

パン及びローテーションは無効にしたほうが利用者にとってより快適さをもたらす。'zoomAndPan'は利用

者インタフェースにだけ影響を与えることができ,対応する要素においてスクリプトが開始したズーム及

びパンを無効にしてはならない。 

その属性値には,次のうちの一つを指定することができる。 

magnify 

省略値。利用者対話性をサポートした環境においてmagnifyが設定された場合,利用者エージェントは,

利用者が“拡大”操作を文書片に実行するための制御ができるようにしなければならない。 

disable 

disableが設定された場合,利用者エージェントは(その既定の相互動作モードにおいて)全ての拡大及

びパンに対する制御を無効にしなければならず,利用者による文書片上の拡大又はパンを認めてはならな

い。SVG利用者エージェントは,また,別のモードを提供して利用者が引き続きズーム及びパンを選択す

ることができるようにしてもよい。 

アニメーション:不可 

13.12 

要素のフォーカス(focus) 

13.12.1 

'focusable'属性 

テキスト編集など多くの場合において,利用者は特定の要素をフォーカス(focus)することによって,

キーボード入力のような入力イベントがきちんとその要素に送られるようにしなければならない。 

描画可能な全ての要素は,制作者によって指定されたときにフォーカス(focus)を受けることができな

ければならない。それらの要素には,コンテナ要素('defs'を除く。),図形要素,'tspan','foreignObject'など

がある。フォーカス(focus)可能なコンテナ要素は,フォーカス(focus)可能な子孫を含んでもよい。 

属性の定義: 

focusable = "true" | "false" | "auto" 

ある要素がキーボードのフォーカス(focus)(すなわち,キーボードイベントの取り込み)を受け,フ

ィールドからフィールドへのナビゲーション操作のための対象となることができるのかどうかを定義する。 

注記1 タブキーを用いてフィールドからフィールドへのナビゲーションを達成することができる環

境もある。 

その属性値には,次のうちの一つを指定することができる。 

235 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

true 

その要素はキーボードを認識し,フォーカス(focus)を受け取ることができる利用者インタフェースの

構成要素として扱わなければならない。 

false 

その要素をフォーカス(focus)することはできない。 

auto 

省略値。次のような場合には'true'として扱われるが,それ以外は'false'と同等である。 

• 

'a'要素 

• 

'editable'を'simple'に設定したテキスト内容ブロック要素 

• 

その開始又は終了リストが次のような利用者インタフェースイベントによって起動される

eventbaseタイミング指定子を含むアニメーションの対象である要素。DOMFocusIn,DOMFocusOut

及びDOMActivate 

• 

次の利用者インタフェースイベントのうちの一つに登録されたイベントリスナをもつ要素。

DOMFocusIn,DOMFocusOut及びDOMActivate 

注記2 リストにあるイベントのためのイベントリスナは,'listener'要素の'target'又は'observer'である

要素及び('ev:event'属性をもつ場合)'handler'要素の親要素に加えることができ,また,スク

リプトを使用することによって追加することもできる。 

アニメーション:可 

13.13 

ナビゲーション 

13.13.1 

ナビゲーションの振る舞い 

システムに依存する入力機能(例 大半のデスクトップコンピュータにあるタブキー)をサポートする

ことによって,フォーカス(focus)を受け取ることができる要素(すなわち,'focusable'属性の値が'true'

である要素)の間のナビゲーションができるようにすることが望ましい。 

フォーカス(focus)環の概念が文書において用いられる。これは,要素がフォーカス(focus)される順

番のことである。初期設定では,フォーカス(focus)環は文書の順番を利用して取り込む。全てのフォー

カス(focus)可能な要素は既定のフォーカス(focus)環の一部でなければならない。ある文書のフォーカ

ス(focus)環は,'use'要素のための複製ツリーの中に全てのフォーカス(focus)可能なオブジェクトを含

んでいる。既定のフォーカス(focus)環を変更するためにフォーカス(focus)属性を使用してもよい。 

SVG言語は,フォーカス(focus)可能な要素の間におけるフィールドナビゲーションの平たん(坦)化

された概念をサポートしている。ここでは,制作者はその文書階層に関係なくSVG文書で定義された二つ

のフォーカス(focus)可能な要素の間のフィールドナビゲーションを定義することができる。次に例を挙

げる。 

    <rect xml:id="r1" focusable="true" .../> 

    <g xml:id="g1" focusable="true"> 

      <circle xml:id="c1" focusable="true" .../> 

    </g> 

上記の例では,利用者が三つの要素のどれからでも直接ナビゲーションをすることができるようなフィ

ールドからフィールドへのナビゲーションを制作者は指定することができる。したがって,フィールドナ

236 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ビゲーションにタブキーを使用するデスクトップコンピュータであれば,そのタブキーを押すことによっ

て利用者が"r1","c1","g1"の順に誘導されるようなフォーカス(focus)ナビゲーションの順序を制作者は

指定してもよい。 

キャンバスにおける不可視の要素にナビゲーションするとき,次の規則を適用しなければならない。 

• 

SVG利用者エージェントは,display="none"である要素へナビゲーションすることはできない

[display="none"である要素はフォーカス(focus)することができない。]。 

• 

SVG利用者エージェントは,不可視の要素(すなわち,透明度が100%であるか,別の要素に隠れ

ている要素)へのナビゲーションを認めなければならない。 

• 

SVG利用者エージェントは,現在のビューポートの外に位置している要素へのナビゲーションを認

めなければならない。この場合,SVG利用者エージェントは現在のビューポートを変更し,フォー

カス(focus)されている要素を可視的にすることが望ましい。 

フィールドナビゲーションに関するSVGの平たん(坦)化された概念は,次に示すような参照される内

容及び複製ツリーにも拡張されなければならない。 

• 

'use'要素が参照する内容におけるフォーカス(focus)可能な要素は,平たん(坦)化されたフォー

カス(focus)モデルを使用してフィールドナビゲーション操作に加えられる。 

注記 参照されるグループがフォーカス(focus)可能な要素を含んでいて,そのグループが二つ

の'use'要素によって参照されるとき,その文書は二つの(一つだけではない)別個のフォ

ーカス(focus)可能なフィールドをもつ。 

• 

'animation'要素がSVG文書を参照している場合,そのSVG文書において定義される全てのフォーカ

ス(focus)可能なフィールドは,平たん(坦)化されたフォーカス(focus)モデルを使用してフィ

ールドナビゲーション操作に加えられる。 

フォーカス(focus)ナビゲーションは次のような振る舞いをしなければならない。 

a) 文書のロード時,まずSVG利用者エージェントにフォーカス(focus)を提供する。 

b) SVG利用者エージェントがフォーカス(focus)を放出すると,そのフォーカス(focus)は次のよ

うな基準を最初に満たしたエンティティに移動する。 

1) 最上位の'svg'要素[それがフォーカス(focus)可能な場合]  

2) 最上位の'svg'要素の'nav-next'属性が参照する要素(その属性がある場合) 

3) 最上位の'svg'要素から開始する文書における最初のフォーカス(focus)可能な要素 

4) SVG利用者エージェント 

c) そのフォーカス(focus)が文書における要素によって保持されている場合,ナビゲーションの順序

において次にくる要素は,次の基準に最初に適合するエンティティでなければならない。 

1) フォーカス(focus)されている要素の'nav-next'属性が参照する要素 

2) 文書の順番において次にフォーカス(focus)可能な要素 

3) SVG利用者エージェント 

d) そのフォーカス(focus)が文書における要素によって保持されている場合,ナビゲーションの順序

が先の要素は,次の基準に最初に適合するエンティティでなければならない。 

1) フォーカス(focus)されている要素の'nav-prev'属性が参照する要素 

2) 文書の順番において前のフォーカス(focus)可能な要素 

3) SVG利用者エージェント 

独立のSVG文書については,SVG利用者エージェントは現在フォーカス(focus)しているオブジェク

237 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

トを常にもっていなければならない。文書ツリーにおけるどのオブジェクトもフォーカス(focus)を所持

していない場合には,SVG利用者エージェントはSVGDocumentオブジェクトにフォーカス(focus)を与

えなければならない。 

非SVGホスト文書(例 XHTML)が参照するSVG文書では,そのSVG文書はホスト文書のフォーカ

ス(focus)環に加わってもよい。これによって,SVGのフォーカス(focus)可能要素から,そのホスト

文書のフォーカス(focus)可能要素への直接的なナビゲーションをすることができる。その他の複合文書

に関する仕様書において,SVG内容が複合文書の構成要素として使用されるような場合に関し,補足的な

SVGフォーカス(focus)ナビゲーション規則が定義される可能性もある。 

利用者エージェントは,利用者がフォーカス(focus)環からエスケープするためのメカニズムを提供す

ることが望ましい。利用者がそのメカニズムを開始したとき,利用者エージェントはその利用者エージェ

ントにフォーカス(focus)を変更し,現在フォーカス(focus)されている要素に適切なfocusoutイベント

を送ることが望ましい。 

13.13.2 

ナビゲーションの指定 

次に定義される10個のナビゲーション属性を使用することによって,ナビゲーションの順序を指定する

ことができる。 

属性の定義: 

nav-next, 

nav-prev = "<FuncIRI>" | "auto" | "self" 

フォーカス(focus)環における次の要素('nav-next'を使用している場合)又は前の要素('nav-prev'を使

用している場合)を指定する。 

'nav-next'及び'nav-prev'の属性値には,次のうちの一つを指定することができる。 

<FuncIRI> 

次の方向('nav-next')又は前の方向('nav-prev')へのナビゲーションが起動されるとき,フォーカス(focus)

を受け取る要素を指定する。指定される要素は,現在のSVG文書片の中になければならない。 

auto 

省略値。その属性が指定されていないかのような振る舞いをする(ナビゲーションは,13.13.1において

指定されている規則に従わなければならない。)。 

self 

フォーカス(focus)はその要素自体に残らなければならない。 

アニメーション:可 

nav-up, 

nav-up-right, 

nav-right, 

nav-down-right, 

nav-down, 

nav-down-left, 

nav-left, 

nav-up-left = "<FuncIRI>" | "auto" | "self" 

これら8個の各属性は,特定の方向にナビゲーションをするとき,フォーカス(focus)を受け取る要素を

指定する。それぞれの属性では,ナビゲーションで要素に指定する方向はその属性の名前によって示され

background image

238 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

る。次の表にこれらの方向の一覧を示す。 

属性名 

方向 

'nav-up' 

↑ 上方向 

'nav-up-right' 

↗ 右上方向 

'nav-right' 

→ 右方向 

'nav-down-right' 

↘ 右下方向 

'nav-down' 

↓ 下方向 

'nav-down-left' 

↙ 左下方向 

'nav-left' 

← 左方向 

'nav-up-left' 

↖ 左上方向 

これらの各属性の値には,次のうちの一つを指定することができる。 

<FuncIRI> 

与えられた方向へのナビゲーションが起動されるとき,フォーカス(focus)を受け取る要素を指定する。

指定される要素は,現在のSVG文書片の中になければならない。 

auto 

省略値。その振る舞いはSVG利用者エージェントに任せられていることを示す。 

self 

フォーカス(focus)はその要素自体に残らなければならない。 

アニメーション:可 

例: navigation.svg 

<svg xmlns="http://www.w3.org/2000/svg"  

     xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny"  

     viewBox="0 0 220 40"> 

  <title>Media Channel Navigation User Interface</title> 

  <desc>An example which illustrates the use of nav-* attributes</desc> 

  <!-- List of available channels --> 

  <rect x="0" y="0" width="100" height="20" fill="#fb0" stroke="#000" stroke-width="2" 

/> 

  <text x="50" y="13" font-size="8" font-family="Arial Black"  

        fill="#fff" text-anchor="middle">Channel 1</text> 

  <rect x="0" y="20" width="100" height="20" fill="#fb0" stroke="#000" stroke-width="2" 

/> 

  <text x="50" y="33" font-size="8" font-family="Arial Black"  

        fill="#fff" text-anchor="middle">Channel 2</text> 

  <rect x="0" y="40" width="100" height="20" fill="#fb0" stroke="#000" stroke-width="2" 

/> 

  <text x="50" y="53" font-size="8" font-family="Arial Black"  

        fill="#fff" text-anchor="middle">Channel 3</text> 

background image

239 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <!-- List of programs for channel nb 1 --> 

  <g xml:id="Chan1Prog1" focusable="true" nav-left="self" nav-right="url(#Chan1Prog2)"  

     nav-up="self" nav-down="url(#Chan2Prog1)"> 

    <rect 

x="100" 

y="0" 

width="100" 

height="20" 

fill="#fd0" 

stroke="#000" 

stroke-width="2"> 

      <set attributeName="fill" begin="Chan1Prog1.focusin" end="Chan1Prog1.focusout" 

to="#fa0"/> 

    </rect> 

    <text x="150" y="13" font-size="8" font-family="Arial Black"  

          fill="#fff" text-anchor="middle">Weather</text> 

  </g> 

  <g 

xml:id="Chan1Prog2" 

focusable="true" 

nav-left="url(#Chan1Prog1)" 

nav-right="url(#Chan1Prog3)"  

     nav-up="self" nav-down="auto"> 

    <rect 

x="200" 

y="0" 

width="120" 

height="20" 

fill="#fd0" 

stroke="#000" 

stroke-width="2"> 

      <set attributeName="fill" begin="Chan1Prog2.focusin" end="Chan1Prog2.focusout" 

to="#fa0"/> 

    </rect> 

    <text x="260" y="13" font-size="8" font-family="Arial Black"  

          fill="#fff" text-anchor="middle">The news</text> 

  </g> 

  <g xml:id="Chan1Prog3" focusable="true" nav-left="url(#Chan1Prog2)" nav-right="self"  

     nav-up="self" nav-down="auto" nav-next="self"> 

    <rect 

x="320" 

y="0" 

width="120" 

height="20" 

fill="#fd0" 

stroke="#000" 

stroke-width="2"> 

      <set attributeName="fill" begin="Chan1Prog3.focusin" end="Chan1Prog3.focusout" 

to="#fa0"/> 

    </rect> 

    <text x="380" y="13" font-size="8" font-family="Arial Black"  

          fill="#fff" text-anchor="middle">Football</text> 

  </g> 

  <!-- List of programs for channel nb 2 --> 

  <g xml:id="Chan2Prog1" focusable="true" nav-left="self" nav-right="auto"  

     nav-up="url(#Chan1Prog1)" 

nav-down="auto" 

nav-prev="url(#Chan1Prog1)" 

nav-next="auto"> 

    <rect x="100" y="20" width="150" height="20" fill="#fd0" stroke="#000" 

background image

240 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

stroke-width="2"> 

      <set attributeName="fill" begin="Chan2Prog1.focusin" end="Chan2Prog1.focusout" 

to="#fa0"/> 

    </rect> 

    <text x="175" y="33" font-size="8" font-family="Arial Black"  

          fill="#fff" text-anchor="middle">Long Movie</text> 

  </g> 

</svg>  

この例では,制作者はどのようにしてキャンバスに表示されたフォーカス(focus)可能な要素間のフォ

ーカス(focus)の順番を制御することができるのかを示している。 

二方向ナビゲーションシステムを提供する装置(例 TABメカニズム)における興味深い振る舞いを次

に示す。 

• 

特定のチャンネルにおける時間軸の最初にあるプログラムにそのフォーカス(focus)が置かれてい

るときは,利用者がフォーカス(focus)可能な前の項目に移動したいとき(すなわち,大半のデス

クトップコンピュータ上にある“リバースタブ”キーを利用者が押している。)のための三つの選択

肢が常に存在する。 

・ 選択肢1:そのフォーカス(focus)は前のチャンネルの最初のプログラムに移動する。 

・ 選択肢2:そのフォーカス(focus)は前のチャンネルの最後のプログラムに移動する。 

・ 選択肢3:そのフォーカス(focus)は同じ場所に残る。 

上の例では,チャンネル2において,id="Chan2Prog1"である'g'要素の属性

nav-prev="url(#Chan1Prog1)"が存在するので,選択肢1が適用される。 

選択肢2を適用したい場合には,nav-prev="url(#Chan1Prog3)"とすればよい。 

選択肢3を適用したい場合には,nav-prev="self"とすればよい。 

• 

特定のチャンネルにおける時間軸の最後にあるプログラムにそのフォーカス(focus)が置かれてい

るときは,利用者がフォーカス(focus)可能な次の項目に移動したいとき(すなわち,大半のデス

クトップコンピュータ上にある“タブ”キーを利用者が押している。)のための二つの選択肢が常に

存在する。 

・ 選択肢1:そのフォーカス(focus)は次のチャンネルの最初のプログラムに移動する。 

・ 選択肢2:そのフォーカス(focus)は同じ場所に残る。 

上の例では,チャンネル1において,id="Chan1Prog3"である'g'要素の属性nav-next="self"が存在

するので,選択肢2が適用される。 

選択肢1を適用したい場合には,nav-next="url(#Chan2Prog1)"とすればよい。 

• 

そのフォーカス(focus)が"Chan2Prog1"コンテナにあり,利用者がフォーカス(focus)可能な次の

要素に移動したい場合には,nav-next="auto"なのでフォーカス(focus)環の概念が常に適用される。

ここでは,文書の順序においてそれ以上フォーカス(focus)可能な要素がないので,フォーカス

(focus)環ナビゲーション規則に従ってSVG利用者エージェントにフォーカス(focus)を与える。 

四方向ナビゲーションシステムを提供する装置(例 ジョイスティック)における興味深い振る舞いを

次に示す。 

• 

特定のチャンネルにおける時間軸の最初にそのフォーカス(focus)が置かれているとき,利用者が

background image

241 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

“左”に移動しようとしても,常にフォーカス(focus)は同じ要素に残る。なぜならば,

id="Chan1Prog1"である'g'要素及びid="Chan2Prog1"である'g'要素が両方ともnav-left="self"であるか

らである。 

• 

そのフォーカス(focus)が"Chan1Prog1"コンテナにあり,利用者が“右”に移動したい場合には,

nav-right="url(#Chan1Prog2)"の値によってコンテナ要素"Chan1Prog2"にフォーカス(focus)が置かれ

る。しかし,"Chan1Prog2"包含ボックスの一部は現在のビューポートの外にあるので,SVG利用者

エージェントは現在のビューポートを変更し,新しくフォーカス(focus)される要素が可視的にな

るようにすることが望ましい。 

要素"Chan1Prog2"がフォーカス(focus) 

を受け取る前 

要素"Chan1Prog2"がフォーカス(focus) 
を受け取った後(利用者エージェントは 

自動でスクロールする。) 

• 

id="Chan2Prog1"の要素'g'には,値nav-right="auto"がある。この値はナビゲーション属性の既定値で

あり,したがって,その振る舞いは'nav-right'属性が全く定義されていないときと同じである。この

値'auto'は,利用者が'右'に行こうとしているとき,どのフォーカス(focus)可能な要素がフォーカ

ス(focus)を受けるのかの選択がSVG利用者エージェントに託されていることを示す。 

13.13.3 

フォーカス(focus)時のハイライトの指定 

'focusHighlight'属性を使用することによって,フォーカス(focus)時の自動ハイライトを指定すること

ができる。このヒントは,SVG利用者エージェントがフォーカス(focus)されている要素をハイライトす

るのがよいかどうかを示す。このハイライトの方法は処理系依存であり,SVG利用者エージェントは様々

な内容に適合するような方法を選択することが望ましい。この属性は全ての図形要素及びコンテナ要素に

おいて利用することができる。 

focusHighlight = "auto" | "none" 

SVG利用者エージェントがフォーカス(focus)されている要素をハイライトするのがよいかどうかを指

定する。 

その属性値には,次のうちの一つを指定することができる。 

auto 

省略値。その要素がフォーカス(focus)時にハイライトされることを示す。ハイライトの方法は,SVG

利用者エージェントに任されている。 

none 

SVG利用者エージェントはフォーカス(focus)されている要素をハイライトしない。 

アニメーション:不可 

例: focusHighlight.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink='http://www.w3.org/1999/xlink' 

background image

242 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

     version="1.2" baseProfile="tiny" viewBox="0 0 210 80"> 

   

  <desc>An example which illustrates the use of focusHighlight attribute</desc> 

  <text x="5" y="10">Do you want to validate transaction ?</text> 

  <text x="5" y="25">You may read <a xlink:href="http://www.example.org/pay" 

                       >this</a> 

and 

<a 

xlink:href="http://www.example.org/infos">that</a> 

  </text> 

   

  <a 

xml:id="ValidateButton" 

transform="translate(5,40)" 

focusHighlight="none" 

xlink:href="validate.htm"> 

    <rect x="0" y="0" width="90" height="20" fill="#0f0" stroke="#000" stroke-width="2"> 

      <set 

attributeName="fill" 

begin="ValidateButton.focusin" 

end="ValidateButton.focusout" to="#0a0"/> 

    </rect> 

    <text x="45" y="13" font-size="8" font-family="Arial Black"   

          fill="#000" text-anchor="middle">Validate</text> 

  </a> 

  <a 

xml:id="AbortButton" 

transform="translate(100,40)" 

focusHighlight="none" 

xlink:href="abort.htm"> 

    <rect x="0" y="0" width="90" height="20" fill="#f00" stroke="#000" stroke-width="2"> 

      <set 

attributeName="fill" 

begin="AbortButton.focusin" 

end="AbortButton.focusout" to="#a00"/> 

    </rect> 

    <text x="45" y="13" font-size="8" font-family="Arial Black"  

          fill="#000" text-anchor="middle">Abort</text> 

  </a> 

</svg> 

上記のSVGの例の説明を次に示す。 

• 

省略値はfocusHighlight="auto"なので,最初の二つのテキストのリンクに対するフォーカス(focus)

のハイライトは,SVG利用者エージェントに任されている(テキストへの下線の適用,包含ボック

background image

243 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

スのハイライト,テキストの色の変更など)。このテキストがデータベースから検索されていた場合,

そのデータベースには図形のスタイル付けの概念はなく,それが含んでいるフォーカス(focus)可

能な要素の種類をあらかじめ知る方法は全くない可能性があるので,制作者は文書のその部分につ

いてはフォーカス(focus)のハイライトを処理しない。 

・ 二つの図形ボタンへのフォーカス(focus)のハイライトが制作者によって設計されているので,SVG

利用者エージェントはそれをハイライトする必要がない。したがって,focusHighlight="none"を使用

することによって,既定のフォーカス(focus)ハイライトの振る舞いを無効にしている。 

13.13.4 

プログラムに基づくフォーカス(focus)の取り込み及びリスニング 

利用者エージェントがある要素にフォーカス(focus)を与えるとき,それはイベント対象として新しく

フォーカス(focus)されるオブジェクトをもつDOMFocusInイベント,及びイベント対象として以前にフ

ォーカス(focus)していたオブジェクトをもつDOMFocusOutイベントを受け取る。 

SVGSVGElementインタフェースは,要求されたオブジェクトにフォーカス(focus)を置くsetFocusメ

ソッドをもつ。フォーカス(focus)可能ではない要素にsetFocusを呼び出した場合,フォーカス(focus)

は現在フォーカス(focus)しているオブジェクトに残る。 

SVGSVGElementインタフェースには,motionTypeの値に基づいて異なるオブジェクトに現在のフォー

カス(focus)を移行させるmoveFocus(short motionType)がある。 

マウスのようなポインタ装置をサポートするSVG利用者エージェントでは,利用者はフォーカス(focus)

可能な要素にフォーカス(focus)を置くことができなければならない。例えば,フォーカス(focus)可能

な要素をクリックしてフォーカス(focus)を与えることができることが望ましい。 

SVGにおける空のテキストフィールドは理論的には一切空間を取らないが,それらはその空のテキスト

フィールドの位置を示す点及び幅0の線分をもっている。SVG利用者エージェントは,ポインタ装置をも

つ利用者が空のテキストフィールドの位置で選択操作(例 マウスクリック)を開始することによって,

空のテキストフィールドにフォーカス(focus)を置くことができるようにすることが望ましい。 

制作者は,要素のナビゲーション属性の現在値を変更するsetTraitメソッドを用いることによって,ス

クリプトからフィールドナビゲーションの順序を変更してもよい(次の例を参照)。 

例: changeNavigationOrder.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     xmlns:ev="http://www.w3.org/2001/xml-events"> 

      

  <desc>An example of how to change the navigation order from script by 

  changing nav-* attribute values. In this example, "myRect2" disappears between 10 and 

20 sec  

  and is replaced by the "myRectNew" rectangle during this period. Consequently, the 

navigation order  

  must be changed accordingly during this period and we must re-established initial order 

after 20s.</desc> 

background image

244 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <rect xml:id="myRect1" x="10" y="20" width="100" height="50" fill="red" 

focusable="true" nav-right="url(#myRect2)"> 

        <set begin="focusin" end="focusout" attributeName="fill" to="purple"/> 

  </rect> 

  <rect xml:id="myRect2" x="120" y="20" width="100" height="50" fill="red" 

focusable="true"  

        nav-right="url(#myRect3)" nav-left="url(#myRect1)"> 

        <set begin="focusin" end="focusout" attributeName="fill" to="purple"/> 

        <set begin="0"  end="10" attributeName="display" to="inline"/> 

        <set begin="10" end="20" attributeName="display" to="none"/> 

        <set begin="20"          attributeName="display" to="inline"/> 

  </rect> 

  <rect xml:id="myRect3" x="230" y="20" width="100" height="50" fill="red" 

focusable="true" nav-left="url(#myRect2)"> 

        <set begin="focusin" end="focusout" attributeName="fill" to="purple"/> 

  </rect> 

  <rect xml:id="myRectNew" x="120" y="20" width="100" height="50" fill="blue" 

focusable="true" nav-right="url(#myRect3)"  

        nav-left="url(#myRect1)" display="none" > 

        <set 

xml:id="myRectNewFillAnim" 

begin="focusin" 

end="focusout" 

attributeName="fill"    to="black"/> 

        <set 

xml:id="myRectNewDisplayAnim" 

begin="10" 

end="20"       

attributeName="display" to="inline"/> 

  </rect> 

  <!-- register a listener for myRectNew.beginEvent event --> 

  <ev:listener event="beginEvent" observer="myRectNew" handler="#myAnimationHandler" 

/> 

  <ev:listener event="endEvent"   observer="myRectNew" handler="#myAnimationHandler" 

/> 

  <!-- handler which is called when myRect2 is replaced by myRectNew --> 

  <handler xml:id="myAnimationHandler" type="application/ecmascript"><![CDATA[ 

    var myRect1 = document.getElementById("myRect1"); 

    var myRect3 = document.getElementById("myRect3"); 

     

    if (evt.type == "beginEvent" && evt.target.id == "myRectNewDisplayAnim") 

background image

245 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    { 

        myRect1.setTrait("nav-right", "url(#myRectNew)"); 

        myRect3.setTrait("nav-left", "url(#myRectNew)"); 

    } 

    else if (evt.type == "endEvent" && evt.target.id == "myRectNewDisplayAnim") 

    { 

        myRect1.setTrait("nav-right", "url(#myRect2)"); 

        myRect3.setTrait("nav-left", "url(#myRect2)"); 

    } 

  ]]></handler> 

</svg> 

14 リンク 

14.1 参照 

14.1.1 概説 

インターネットでは,IRI(国際化リソース識別子)を用いてリソースが特定される。例えば,

http://example.comにあるsomeDrawing.svgというSVGファイルは,次のようなIRIをもつことができる。 

http://example.com/someDrawing.svg 

IRIは,その一部としてIRI断片識別子を含めることによって,XML文書における特定の要素のアドレ

スを指定することもできる。IRI断片識別子を含むIRIは,省略可能な基点IRI,後続する文字"#"及びIRI

断片識別子の順番に並んで構成される。例えば,次のようなIRIを使用することによって,ファイル

someDrawing.svgの中のIDが"Lamppost"である要素を指定することができる。 

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

'xlink:href'属性の変更 

あるツリーにおける要素の'xlink:href'属性が,何らかの手段(例 スクリプト,宣言的アニメーション)

によって変更され新しいリソースが参照されるようになった場合,その新しいリソースは既存のリソース

と置き換えられ適切に描画されなければならない。'script'要素の'xlink:href'属性が変更されるときのスクリ

プトの文脈に対する具体的な効果については,15.2.1を参照。 

14.1.2 IRI及びURI 

IRI(国際化リソース識別子)は,URI(統一リソース識別子)をより一般化した補足版である。IRIは,

ユニバーサル文字集合[UNICODE] に基づく文字列である。URIは,ずっと制約の多い文字の集合から構

成されている。全てのURIは,既に適合したIRIである。IRIからURIへのマッピングについてはIRI仕

様書で定義されている。このことは,XML文書において,IRIをURIの代わりに用いてリソースを特定す

ることができることを意味する。IRIがプロトコルによって直接サポートされていない場合には,ネット

ワーク上の解決のためにIRIをURIに変換することができる。 

SVGの旧バージョンでは,Xlinkに倣い,IRI参照型の定義を“URI”,又は“特定のエスケープ手続が

適用された後にURI参照とならなければならない文字列”とした。このエスケープ手続は,XMLリンク

付け言語(Xlink)1.0 [JIS X 4176:2005]及びW3C XML Schema Part 2: Datatypes仕様書[SCHEMA2] におい

background image

246 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

て繰り返し使われた。このようなコピーによってエラー及び相違が生じる可能性があったが,IRI仕様書

はまだ標準化されていなかったのでそれは実施された。 

この規格では,正規の用語としてのIRIはこの“URI又は文字列,及びアルゴリズム”という意味で使

用される。また,IRIをURIに変換するエスケープメソッドは,IRI仕様書[RFC3987] に基づいて定義され

る。IRI仕様書はその後IETF Proposed Standardになっている。将来は他のW3C仕様書が改正され,上記

のようなエスケープ手続に関する二重の記述を撤廃し,IRIを直接参照するようになると思われる。 

14.1.3 構文形式:IRI及びFuncIRI 

IRIは,'xlink:href'属性において使用される。属性によっては,IRI及びテキスト文字列の両方をその内容

とすることができる。相対IRIからテキスト文字列の曖昧さを取り除くために,機能的表記法<FuncIRI>

が利用される。これは,単純に機能的表記法で区切られたIRIのことである。 

注記 歴史的な理由によって,CSS仕様書との互換性のために,デリミターは"url("及び")"である。

FuncIRI形式は,プレゼンテーション属性及びナビゲーション属性に使用される。 

SVGは,他のオブジェクトに対しても(絶対及び相対)IRI参照を広く利用する。例えば,ある長方形

を線形グラデーションでフィルするとき,次の例のように,まず'linearGradient'要素を定義してそれにID

を与える必要がある。 

例: 05̲07.xml 

<linearGradient xml:id="MyGradient">...</linearGradient> 

続いて,次の例のように,その長方形の'fill'プロパティの値として線形グラデーションを参照。 

例: 05̲08.xml 

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

14.1.4 参照の制限 

IRI参照を用いる要素がそれらを制限する場合もある。各要素において認められているIRI参照の種類に

ついて,次の表に示す。SVGでは,次のような五つのタイプのうちの一つ以上にIRI参照を分類すること

ができる。 

• 

A:現在の文書における断片への参照(例 '#someelement')。参照される断片が現在のSVG文書片

にない場合には,その参照が不正なIRI参照かどうかはホスト言語によって定義される。 

• 

B:外部の文書における断片への参照(例 'afile.svg#anelement')。 

• 

C:SVG文書全体への参照(例 'afile.svg')。 

• 

D:use断片をもつ(又はもたない)SVG以外のメディアリソースへの参照(例 'someimage.jpg',

'somecontainer#fragment')。適切な場合には次の表においてサポートしているメディア型が示されて

いる。 

• 

E:data: IRI(例 'data:image/jpeg;base64,/9j…')[RFC2397]。 data: IRIは,それがXMLの場合,参

照する要素のオーナー文書と異なる文書に解決するが,それ自体がIRIの一部なので,そのデータ

は既にロードされていることに注意する。 

上記のA〜Eの五つのIRIタイプについて,次の表では,その属性が与えられた形式で参照をしてもよ

いかどうかを示している。次の表に示す制限に適合しないIRI参照は,不正なIRI参照である。 

background image

247 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

参照する属性 

アニメーション
要素 

'xlink:href' 

○ 

参照の規則につ
いては,16.2.4
を参照。 

× 

× 

× 

× 

'discard' 

'xlink:href' 

○ 

参照の規則につ
いては,16.2.4
を参照。 

× 

× 

× 

× 

'a' 

'xlink:href' 

○ 

14.3を参照。 

○ 

14.2を参照。 

○ 

○ 

○ 

'a' 

'xlink:role' 
'xlink:arcrole'  

○ 

○ 

○ 

○ 

○ 

'use' 

'xlink:href' 

○ 

'use'要素は'svg'
要素を参照して
はならない。 

○ 

参照される断片
は,スクリプト,
アニメーション
へのハイパーリ
ンク,又は外部
から参照される
'use'要素若しく
は'animation'要
素を含んではな
らない。 

× 

× 

× 

'image' 

'xlink:href' 

× 

× 

× 

○ 

'image'要素は,ラ
スタ画像形式の
内容を参照しな
ければならない。 

○ 

data: IRI参照にお
ける内容は,ラス
タ画像でなけれ
ばならない。 

'animation' 

'xlink:href' 

× 

× 

○ 

× 

○ 

'prefetch' 

'xlink:href' 

○ 

○ 

○ 

○ 

× 

'audio' 

'xlink:href' 

× 

× 

× 

○ 

'type'属性が示す
サポートしてい
るオーディオ形
式に依存 

○ 

'video' 

'xlink:href' 

× 

× 

× 

○ 

'type'属性が示す
サポートしてい
るビデオ形式に
依存 

○ 

'foreignObject' 

'xlink:href' 

× 

○ 

× 

○ 

○ 

'script' 

'xlink:href' 

× 

× 

× 

○ 

スクリプトの内
容を提供する外
部リソースを参
照しなければな
らない。 

○ 

background image

248 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

参照する属性 

'handler' 

'xlink:href' 

○ 

○ 

× 

○ 

スクリプトの内
容を提供する外
部リソースを参
照しなければな
らない。 

○ 

'listener' 

'handler' 

○ 

× 

× 

× 

× 

塗りを指定して
もよい要素 

'fill' 

○ 

ペイントサーバ
だけを参照。11.2
を参照。 

× 

× 

× 

× 

塗りを指定して
もよい要素 

'stroke' 

○ 

ペイントサーバ
だけを参照。11.2
を参照。 

× 

× 

× 

× 

ナビゲーション
属性を指定して
もよい要素 

ナビゲーショ
ン属性 

○ 

13.13.2を参照。 

× 

× 

× 

× 

'font-face-uri' 

'xlink:href' 

○ 

SVG'font'要素へ
の参照でなけれ
ばならない。 

○ 

SVG'font'要素へ
の参照でなけれ
ばならない。 

× 

× 

○ 

'mpath' 

'xlink:href' 

○ 

'path'要素だけを
参照。 

× 

× 

× 

× 

加えて,解決することができないIRI参照は,全て不正なIRI参照である。IRI参照を解決することがで

きない理由の例を次に示す。 

• 

リソースが外部のリソースであり,利用することができない(例 利用者エージェントはリソース

が保存されているネットワーク上の位置に接続することができず,そのリソースがローカルにキャ

ッシュされていない。)。 

• 

存在しないローカルの要素へのIRI参照(例  'xlink:href'が実在しない要素を参照している'use'要

素)。 

• 

存在しないリソースへのIRI参照(例 応答主体にはサポートされたラスタ画像のリソースがあっ

たとしても,'image'要素がそのHTTPリソースを参照すると404レスポンスコードになった。)。 

不正なIRI参照をもつ属性に対して必要な処理については,属性の定義で説明されている。参照される

要素又はその祖先の一つにおいて,'externalResourcesRequired'属性が'true'に設定されている場合,未解決の

外部のIRI参照は特別な処理をもたらすことに注意する(5.9を参照)。 

循環するIRI参照はエラーである。SVG利用者エージェントが最初に循環参照を検出して中止する時期

には差がある可能性があるので,適合SVG文書片は,循環参照に依存してはならない。循環参照の例を次

に示す。 

• 

次のSVG文書片にあるような,直接的又は間接的にそれ自体を参照する'use'要素。 

<svg xmlns='http://www.w3.org/2000/svg' 

     xmlns:xlink='http://www.w3.org/1999/xlink' 

     version='1.2' baseProfile='tiny'> 

249 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <title>Example of a circular reference with 'use'</title> 

  <g id='a'> 

    <text>ABC</text> 

    <use xlink:href='#b'/> 

  </g> 

  <g id='b'> 

    <text>DEF</text> 

    <use xlink:href='#a'/> 

  </g> 

</svg> 

• 

次の例にあるような,現在のSVG文書片を含む文書を直接的又は間接的に参照する'animation'要素。 

<svg xmlns='http://www.w3.org/2000/svg' 

     xmlns:xlink='http://www.w3.org/1999/xlink' 

     version='1.2' baseProfile='tiny'> 

  <title>Example of a circular reference with 'animation'</title> 

  <animation xlink:href='#' width='100' height='100'/> 

</svg> 

参照される要素は可能な限り'defs'要素の中に定義するのがよい。常に参照される要素には,

'linearGradient'及び'radialGradient'がある。これらの要素を'defs'要素の中で定義することによって,SVG内

容はより理解しやすくなり,アクセシビリティも高められる。 

14.1.5 IRI参照属性 

IRI参照は,通常XLink [XLink] 名前空間において'href'属性を用いて指定される。例えば,Xlink名前空

間における属性に対して接頭辞'xlink'が用いられている場合は,その属性は'xlink:href'と指定される。この

属性の値は,要求しているリソース(断片識別子がある場合には2次的リソース)への参照を形成する。 

'href'属性の値は国際化リソース識別子でなければならない。 

HTTPなどのプロトコルがIRIを直接サポートしていない場合,SVGの実装によってそのIRIはURIに

変換される(これについてはIRI仕様書の3.1[RFC3987] において説明されている。)。 

アプリケーション側において値がIRI参照であることを確認することは非実用的なので,この規格は,

IRI仕様書に倣って,SVGアプリケーションに適合試験の実施を一切義務付けない。 

そのIRI参照が相対的である場合には,XML Base [XML-BASE] に示されている方法によって,その絶

対参照を使用前に計算しなければならない。 

追加的なXLink属性を指定し,参照されたリソースに関する補足的な情報を提供することができる。 

background image

250 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

スキーマ: xlinkattr  

    <define name='svg.XLinkBase.attr' combine='interleave'> 

      <optional> 

        <attribute name='xlink:type' svg:animatable='true' svg:inheritable='false'> 

          <value>simple</value> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='xlink:role' svg:animatable='false' svg:inheritable='false'> 

          <ref name='IRI.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='xlink:arcrole' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='IRI.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='xlink:title' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

    </define> 

    <define name='svg.XLinkHrefRequired.attr' combine='interleave'> 

      <optional> 

        <attribute name='xlink:href' svg:animatable='true' svg:inheritable='false'> 

          <ref name='IRI.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

    <define name='svg.XLinkBaseRequired.attr' combine='interleave'> 

      <ref name='svg.XLinkBase.attr'/> 

      <ref name='svg.XLinkHrefRequired.attr'/> 

    </define> 

    <define name='svg.XLinkActuateOnLoad.attr' combine='interleave'> 

background image

251 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <optional> 

        <attribute 

name='xlink:actuate' 

svg:animatable='false' 

svg:inheritable='false'> 

          <value>onLoad</value> 

        </attribute> 

      </optional> 

    </define> 

    <define name='svg.XLinkShowOther.attr' combine='interleave'> 

      <optional> 

        <attribute name='xlink:show' svg:animatable='false' svg:inheritable='false'> 

          <value>other</value> 

        </attribute> 

      </optional> 

    </define> 

    <define name='svg.XLinkEmbed.attr' combine='interleave'> 

      <optional> 

        <attribute name='xlink:show' svg:animatable='false' svg:inheritable='false'> 

          <value>embed</value> 

        </attribute> 

      </optional> 

      <ref name='svg.XLinkActuateOnLoad.attr'/> 

      <ref name='svg.XLinkBaseRequired.attr'/> 

    </define> 

    <define name='svg.XLinkRequired.attr' combine='interleave'> 

      <ref name='svg.XLinkShowOther.attr'/> 

      <ref name='svg.XLinkActuateOnLoad.attr'/> 

      <ref name='svg.XLinkBaseRequired.attr'/> 

    </define> 

    <define name='svg.XLinkReplace.attr' combine='interleave'> 

      <optional> 

        <attribute name='xlink:show' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

background image

252 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

            <value>new</value> 

            <value>replace</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='xlink:actuate' 

svg:animatable='false' 

svg:inheritable='false'> 

          <value>onRequest</value> 

        </attribute> 

      </optional> 

      <ref name='svg.XLinkBaseRequired.attr'/> 

    </define> 

    <define name='svg.XLink.attr' combine='interleave'> 

      <optional> 

        <ref name='svg.XLinkHrefRequired.attr'/> 

      </optional> 

      <ref name='svg.XLinkShowOther.attr'/> 

      <ref name='svg.XLinkActuateOnLoad.attr'/> 

      <ref name='svg.XLinkBase.attr'/> 

    </define> 

xlink:type = "simple" 

使用されるXLinkの型を特定する。この規格では,単純リンクだけを利用することができる。XLink 1.1 

[XLINK11] において提案された変更に合わせ,この属性は単純リンクにおいて省略してもよい。リンクは

既定が単純リンクなので,属性xlink:type="simple"は省略可能であり,明示的に記述しなくてもよい。XML

リンク付け言語(Xlink)1.0 [JIS X 4176:2005] を参照。 

アニメーション:不可 

xlink:role = "<IRI>" 

意図した特性を記述した何らかのリソースを特定するための省略可能なIRI参照。その値はIRI参照で

なければならない([RFC3987] で定義)が,使用しているIRIスキームにおいて絶対形式及び相対形式を

もってもよい場合,そのIRI部分は絶対的でなければならないという場合を除く。値がないときには,特

定の役割値を推論しない。XMLリンク付け言語(Xlink)1.0 [JIS X 4176:2005] を参照。 

アニメーション:不可 

xlink:arcrole = "<IRI>" 

意図した特性を記述した何らかのリソースを特定するための省略可能なIRI参照。その値はIRI参照で

なければならない([RFC3987] で定義)が,使用しているIRIスキームにおいて絶対形式及び相対形式を

もってもよい場合,そのIRI部分は絶対的でなければならないという場合を除く。値がないときには,特

定の役割値を推論しない。arcrole属性は,ある特性の[RDF]における概念に対応している。ここでは,そ

background image

253 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

の役割において,"starting-resource HAS arc-role ending-resource"(始点リソースがarc-roleの終点リソースを

もつ。)ということが示されていると解釈することができる。この文脈上の役割は,この特定のアークの文

脈の外では,終点リソースの意味と異なる可能性がある。例えば,あるリソースは一般的な“人”を表し

ていたとしても,特定のアークの文脈では“母”の役割をもつかもしれないし,また別のアークの文脈で

は“娘”の役割をもつかもしれない。XMLリンク付け言語(Xlink)1.0 [JIS X 4176:2005] を参照。 

アニメーション:不可 

xlink:title = "<string>" 

title属性は,role又はarcrole属性と同様に,人間に可読的な方法によってリンク又はリソースの意味を

記述するために使用する。その値は省略可能であるが,値を与える場合にはそのリソースに関して説明し

た文字列を含む。一般的には,title属性は,title子要素を利用することが望ましい。一般的には,'title'属

性よりも'title'子要素を使用することが望ましい。この情報の利用法は,実施される処理の種類に大きく依

存する。例えば,視覚障害者によって使用されるアプリケーションのためのタイトルの利用,リンクの表

の作成,又は,利用者が始点リソース上にマウスポインタを重ねると現れるヘルプテキストの表示などに

それを利用してもよい。XMLリンク付け言語(Xlink)1.0 [JIS X 4176:2005] を参照。 

アニメーション:不可 

xlink:show = "new' | 'replace' | 'embed' | 'other' | 'none' 

この属性は,SVG 1.1との後方互換性のために提供される。それはXlinkを認識するプロセッサにドキ

ュメンテーションを提供する。衝突が発生した場合には,対象属性のほうがより広い値域を表現すること

ができるので,そちらを優先させる。XMLリンク付け言語(Xlink)1.0 [JIS X 4176:2005] を参照。 

アニメーション:不可 

xlink:actuate = "onLoad' 

この属性は,SVG 1.1との後方互換性のために提供される。それはXlinkを認識するプロセッサにドキ

ュメンテーションを提供する。XMLリンク付け言語(Xlink)1.0 [JIS X 4176:2005] を参照。 

アニメーション:不可 

どの場合においても,SVG内容において上記のXLink属性のうちの一つが利用されるときには,いつも

明示的なXLink名前空間宣言を提供し,Namespaces in XML 1.0勧告又はNamespaces in XML 1.1勧告 

[XML-NS10][XML-NS] のどちらかに適合しなければならない。そのようなXLink名前空間宣言を提供す

る簡単な方法は,XLink属性を使用する内容のための'svg'要素にXLink名前空間への'xmlns'属性を含める

ことである。 

例:XLink名前空間宣言 

例: 05̲09.svg 

<?xml version="1.0"?> 

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 

  xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Declaring the XLink namespace, as well as the SVG one</desc> 

  <image xlink:href="foo.png"/> 

</svg> 

例:use及びanimation 

次の二つのファイルは,(更に下に記載している)use及びanimationの例において参照されるファイル

background image

254 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

である。 

例: referencedRect.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny"  

     xml:id="animationRef" width="150" height="50" viewBox="0 0 150 50" fill="inherit">  

    <rect xml:id="aMovingRect" width="50" height="50" rx="5" ry="5" fill="inherit" 

stroke-width="3" stroke="black"> 

         <animateTransform 

attributeName="transform" 

type="translate" 

values="0,0;0,100" begin="0" dur="2" fill="freeze"/> 

    </rect> 

</svg> 

例: referencedRect2.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny"  

     xml:id="animationRef" width="150" height="50" viewBox="0 0 150 50" fill="inherit">  

    <rect 

xml:id="aMovingRect" 

width="50" 

height="50" 

rx="5" 

ry="5" 

fill="rgb(255,28,141)" stroke-width="3" stroke="black"> 

         <animateTransform 

attributeName="transform" 

type="translate" 

values="0,0;0,100" begin="0" dur="2" fill="freeze"/> 

    </rect> 

</svg> 

'animation'要素からSVG内容を参照する方法を次の例において説明する。異なる'fill'値を用いることによ

って,'animation'要素が参照する内容にプロパティを継承する方法が示されている。 

例: animation.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 580 400">  

    <g fill="rgb(157,0,79)"> 

        <animation x="20" xlink:href="referencedRect.svg"/> 

        <animation x="100"  xlink:href="referencedRect2.svg"/> 

        <animation 

begin="1" 

x="180" 

viewport-fill="rgb(255,28,141)" 

xlink:href="referencedRect.svg"/> 

    </g> 

background image

255 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

     

</svg> 

次の画像は,上記のanimationの例の正しい描画である。矢印はアニメーションを示す。グレーの長方形

は初期状態(すなわち,time=0)を示し,色付きの長方形は最終状態(アニメーションの完了)を示す。 

'use'要素からSVG内容を参照することができる幾つかの方法を次の例において説明する。異なる'fill'値

を用いることによって,'use'要素が参照する内容にプロパティを継承する方法が示されている。 

background image

256 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

例: use.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  

     version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 580 400">  

    <defs> 

        <g fill="green"> 

            <rect 

xml:id="aMovingRect" 

width="50" 

height="50" 

rx="5" 

ry="5" 

fill="inherit" stroke-width="3" stroke="black"> 

                <animateTransform 

attributeName="transform" 

type="translate" 

values="0,0;0,100" begin="0" dur="2" fill="freeze"/> 

            </rect> 

        </g> 

    </defs> 

     

    <g fill="rgb(157,0,79)"> 

        <use x="20" xlink:href="#aMovingRect"/> 

             

        <use x="100" fill="rgb(255,28,141)" xlink:href="#aMovingRect"/> 

     

        <use x="180" xlink:href="referencedRect.svg#aMovingRect"/> 

        <use 

x="260" 

fill="rgb(255,28,141)" 

xlink:href="referencedRect.svg#aMovingRect"/> 

    </g> 

</svg> 

次の画像は,上記のuseの例の正しい描画である。矢印はアニメーションを示す。グレーの長方形は初

期状態(すなわち,time=0)を示し,色付きの長方形は最終状態(アニメーションの完了)を示す。 

background image

257 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

14.1.6 文書への外部参照の処理 

SVG利用者エージェントがある文書への外部参照を解決するとき,どのようにその文書がロード・処理

されるのかは,どのようにその文書が参照されたのかによる。次に定義されるように,文書はプライマリ

文書又はリソース文書のどちらかに分類され,この分類によって外部参照のロードに関するその文書の処

理が決定される。 

プライマリ文書とは,利用者エージェントによってその全体が提示されるものである。具体的には,次

がプライマリ文書として分類される。 

• 

(それがSVGの独立文書,又はSVG文書片を含むことができるその他の文書のどちらであっても)

文書全体。例えば,ウェブブラウザをIRIへナビゲーションする場合,そのブラウザのアドレスバ

ーにそのIRIをタイプするか,そのIRIへのリンク上をクリックするか,又はLocation::assign()メソ

ッドを呼び出すことによって,それは体裁のために利用者エージェントにロードされる[HTML 5

利用者エージェントでは,これはその文書が最上位ブラウジング文脈([HTML5]の4.1.1)の一部で

あるときである。]。 

• 

それが'animation'要素によって参照されることによってロードされるSVG文書全体。 

• 

(HTMLの'object','iframe'要素を用いるなどして)それが参照され,体裁のために親の非SVG文書

に包含されることによってロードされる文書。 

リソース文書とは,SVG文書片がその一部をリソースとして参照するためにロードされた文書のことで

ある。具体的には,次のような外部参照(全て要素への参照)によって,ロードされる文書がリソース文

書に分類される。 

• 

'use'要素の'xlink:href'属性 

• 

'font-face-uri'要素の'xlink:href'属性 

• 

'fill'又は'stroke'プロパティにおけるペイントサーバ参照 

プライマリ文書及びリソース文書のどちらも(最上位の'svg'要素を文書要素とする。)完全なSVG文書

ではなくてもよいことに注意する。どちらもSVG文書片を含む非SVG文書であってもよい。 

258 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

それぞれのプライマリ文書は,IRIをリソース文書にマップする辞書を保持している。この辞書はリソ

ース文書をロードするときにはいつも使用される。なぜならば,プライマリ文書(又はそのリソース文書

のうちの一つ)におけるSVG文書片がそれを参照するからである。リソース文書のロードの前に,まずそ

のIRIがプライマリ文書の辞書において調べられ,それが既にロードされているのかどうかが確認される。

もし既にロードされている場合には,別個の文書具体値を作成するのではなく,その既にロードされてい

る文書が利用される。したがって,各プライマリ文書ではリソース文書は一度しかロードされない。プラ

イマリ文書は常に別々の自己完結的な文書具体値であり,また,リソース文書は異なるプライマリ文書の

間では共有されない。 

リソース文書の辞書においてキーとして使われるIRIは,それを全ての適切なベースIRIに対して解決

した後,絶対IRIにしなければならない。また,辞書キーの比較は,Simple String Comparisonを使用して

実行しなければならない(Internationalized Resource Identifiers [RFC3987]の5.3.1にて定義されている。)。 

その文書がプライマリ文書でもリソース文書でも,一度ロードされてしまえばその処理は同じである。

その文書における各SVG文書片は,別個のSVG処理文脈として機能する。ここでは,イベントが発生し,

スクリプトが実行され,アニメーションの時間軸が作成されてアニメーションが実行され,(そのSVG利

用者エージェントがサポートしていれば)スタイルシートが適用される。リソース文書は単なる静的DOM

ではないので,それに対するいかなる変更も(スクリプトによる変更かアニメーションのプレゼンテーシ

ョン値の変更かにかかわらず),そのリソース文書への全ての参照を通じて可視的である。 

複数のプライマリ文書からリソースへのIRI参照によって,論理的に別個のリソース文書が具体値化さ

れることになるので,一般的にSVG利用者エージェントは,そのリソース文書の一つの具体値だけをメモ

リに保持してメモリを節約することができないことに注意する。多くのプライマリ文書が一つの大きな共

通リソースファイルを参照している場合には,大量のメモリが消費されるようになる可能性が高い。メモ

リで単一の具体値を共有しても(例 リソース文書に対する書き換え時コピー方式の使用),複数のプライ

マリ文書が同じ振る舞いをすることをそのSVG利用者エージェントが証明することができる場合,もちろ

んそのような最適化を実行してもよい。 

メディア又は外部スクリプトのような他のいかなる文書への参照も,プライマリ文書又はリソース文書

には分類しない。特定のIRIにおいてメディアへの複数の参照を行うと,常に別々の時間軸が作成される

結果となる。 

14.2 SVG内容の外へのリンク:'a'要素 

SVGは,リンク(ハイパーリンク又はウェブリンクとも呼ばれる。)を示すために,'a'要素を提供して

いる(HTMLの'a'要素に類似している。)。SVGは,全てのリンクの定義においてXLink [JIS X 4176:2005] を

使用する。 

この規格では,利用者エージェントがXLinkの単純リンクの概念をサポートすることだけが義務付けら

れている。各単純リンクは二つのリソース(ローカル及びリモート)を関連付け,前者から後者へのアー

クをもつ。 

単純リンクは,'a'要素の中に含まれるそれぞれ別々に描画される要素に対して定義される。したがって,

その'a'要素に三つの'circle'(円)要素がある場合,それぞれの円に対してリンクが作成される。'a'要素のそ

れぞれの描画される要素は,ローカルリソース[リンク元のアンカー(the source anchor for the link)]であ

る。 

リモートリソース(そのリンクの行き先)は,'a'要素におけるXLinkの'href'属性によって指定されたIRI

によって定義される。このリモートリソースは,どのようなウェブリソースであってもよい[例 画像,

background image

259 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ビデオクリップ,サウンドバイト(sound bite),プログラム,他のSVG文書,HTML文書]。これらのリ

ンクを活性化(マウスクリック,キーボード入力,音声命令などによって)することによって,利用者は

これらのリソースにハイパーリンクをたど(辿)ることができる。 

そのIRIが現在のSVG文書片におけるアニメーション要素を特定した場合,'a'要素を活性化することに

よって,そのアニメーションへのハイパーリンクが実行される[SMIL 2.1([SMIL21]の10.4.3)にて定義

されている。]。 

例17̲01.svgでは,あるだ(楕)円へのリンクが割り当てられている。 

例: 17̲01.svg 

<?xml version="1.0"?> 

<svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.2" baseProfile="tiny" 

     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 

  <title>Example 17̲01</title> 

  <desc>A simple link on an ellipse.</desc> 

  <rect x=".01" y=".01" width="4.98" height="2.98"  

        fill="none" stroke="blue"  stroke-width=".03"/> 

  <a xlink:href="http://www.w3.org/"> 

    <ellipse cx="2.5" cy="1.5" rx="2" ry="1" 

             fill="red" /> 

  </a> 

</svg> 

SVG及びHTMLを両方サポートしている利用者エージェントで上記のSVGファイルを閲覧すると,こ

のだ(楕)円をクリックすることによって,現在のウィンドウ又はフレームがW3Cのホームページに置

き換えられる。 

'a'のための内容モデル及び要素定義スキーマはここでは定義されない。発生することができる全ての場

所で定義される。 

スキーマ: a.at  

    <define name='a.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.External.attr'/> 

background image

260 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <ref name='svg.Focus.attr'/> 

      <ref name='svg.Transform.attr'/> 

      <ref name='svg.XLinkReplace.attr'/> 

      <optional> 

        <attribute name='target' svg:animatable='true' svg:inheritable='false'> 

          <choice> 

            <value>̲replace</value> 

            <value>̲self</value> 

            <value>̲parent</value> 

            <value>̲top</value> 

            <value>̲blank</value> 

            <ref name='XML-Name.datatype'/> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

xlink:type = "simple" 

'xlink:type'属性の一般的な説明を参照。 

xlink:role = "<IRI>" 

'xlink:role'属性の一般的な説明を参照。 

xlink:arcrole = "<IRI>" 

'xlink:arcrole'属性の一般的な説明を参照。 

xlink:title = "<string>" 

'xlink:title'属性の一般的な説明を参照。 

xlink:show = "new" | "replace"  

この属性は,SVG 1.1との後方互換性のために提供される。それはXlinkを認識するプロセッサにドキ

ュメンテーションを提供する。target="̲blank"の場合,xlink:show="new"を用いる。そうでない場合,'replace'

を用いる。衝突が発生した場合には,対象属性のほうがより広い値域を表現することができるので,そち

らを優先させる。XMLリンク付け言語(Xlink)1.0 [JIS X 4176:2005] を参照。 

アニメーション:不可 

xlink:actuate = "onRequest" 

この属性は,SVG 1.1との後方互換性のために提供される。それは,あるアプリケーションはたど(辿)

るために起動されるポストローディングイベントだけにおいて始点リソースから終点リソースまでをたど

(辿)るのがよいというドキュメンテーションをXlinkを認識するプロセッサに提供する。XMLリンク付

け言語(Xlink)1.0 [JIS X 4176:2005] を参照。 

アニメーション:不可 

xlink:href = "<IRI>" 

IRI参照として表される,参照されたオブジェクトの位置。 

261 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

アニメーション:可 

target = "̲replace" | "̲self" | "̲parent" | "̲top" | "̲blank" | "<XML-Name>"  

可能な終点リソースの対象が複数存在する場合にはこの属性を使用することが望ましい(例 親文書が

マルチフレームのHTML又はXHTML文書である場合)。この属性は,対象のウィンドウ,フレーム,ペ

イン,タブ,又はその他の関連する体裁の文脈(例 HTML又はXHTMLのframe,iframe,又はオブジェ

クト要素)の部分又は名前を指定する。リンクが活性化されたとき,これらに対して文書が開かれなけれ

ばならない。この属性の値及び意味は,WebCGM Picture Behavior値 [WEBCGM] と同じである。 

̲replace 

現在のSVG画像は,その画像と同じフレームの同じ長方形領域においてリンクされている内容と取り替

えられる。 

̲self 

現在のSVG画像は,その画像と同じフレームにおいてリンクされている内容と取り替えられる。対象属

性が指定されていない場合,これは省略値である。 

̲parent 

そのSVG画像の直近のフレーム集合の親が,リンクされている内容と取り替えられる。 

̲top 

フルウィンドウ又はタブ(全てのフレームを含む。)の内容が,リンクされている内容と取り替えられる。 

̲blank 

新規の名前のないウィンドウ又はタブが,リンクされている内容の表示のために要求される。これが失

敗した場合には,その結果は̲topと同じである。 

<XML-Name> 

リンクされている内容の表示のために,フレーム,ペイン,又はその他の関連する体裁の文脈の名前を

指定する。これが既に存在している場合,それは再利用され,既存の内容と取り替えられる。存在してい

ない場合,それは作成される(名前をもっていることを除けば'̲blank'と同じ。)。 

注記 値'̲new'は,targetの正規の値ではない('̲blank'を使用する。)。 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

14.2.1 リンクの表示 

一般的な慣例によって,HTML利用者エージェントは,それらがリンクであることを示すためにアンカ

ー要素の内容をスタイル付けする。例えば,テキストに下線を引き,テキストの色を変え,画像又はその

他の代用内容の境界に色を適用する。SVGは不規則な図形又は複雑なリンク構造(例えば,他のリンクの

中のリンクの許可)をもつ視覚言語であり,内容の見た目をより正確に制御することができるように設計

されているので,SVG利用者エージェントは'a'要素の子内容に既定のスタイル付けを適用しないほうがよ

く,その代わりに制作者がリンクに関する慣例を管理できるようにすることが望ましい。 

しかしながら,利用者にとってリンクが明白であるようにして各リンクの詳細な情報を提供するために,

それらのリンクが選択範囲に置かれたときには,SVG利用者エージェントは明確な指標を提供することが

262 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

望ましい。'a'要素の一つの子要素の上にポインタ装置のカーソルが置かれたとき,又はその要素が現在フ

ォーカス(focus)されている要素であるときに,リンクが選択範囲に置かれなければならない。利用者エ

ージェントは,そのリンクが選択範囲に置かれていることを示すために選択範囲のインディケータを変更

し(例 カーソルから指差しマークへの変更,フォーカス(focus)のハイライト表示を色分けすることに

よるリンクのステータスの表示),そのリンクのURIを示し[例 ステータスバー(status bar)における

表示,音声による表現],そのリンクに関して制作者が提供している全情報を表示する[ツールチップ

(tooltip)など]ことが望ましい。制作者は,リンクに関する情報を利用者に提供するために,リンクに

は'xlink:title'属性を適切に使用することが望ましい。 

14.3 SVG内容へのリンク:IRI断片及びSVGビュー 

14.3.1 概説:IRI断片及びSVGビュー 

しばしばSVG内容は何らかの絵又は描画を表現するので,変換の初期状態を示し,文書の特定の部分を

大写しにするようなビューにリンクをすることが一般的に必要とされる。 

14.3.2 SVG断片識別子 

SVG文書の特定のビューにリンクをするために,IRI断片識別子は正しく形成されたSVG断片識別子で

なければならない。SVG断片識別子は,MIMEメディア型"image/svg+xml"のリソースの場所を見つけるIRI

の"selector"(セレクタ)又は"fragment identifier"(断片識別子)の部分の意味を定義する。 

SVG断片識別子は二つの形式をとることができる。 

a) 短縮形ベア名形式のアドレッシング(例 someDrawing.svg#someView)。この形式のアドレッシング

ではそのIDによるSVG要素のアドレッシングが認められ,HTMLの旧版の断片アドレッシングメ

カニズム又はXPointer Framework [XPTRFW] における短縮形ベア名形成との互換性がある。 

b) SVGビューの指定[例 someDrawing.svg#svgView(transform(scale(2)))]。この形式のアドレッシング

は,完全にそのSVG断片指定の中で要求する文書のビュー(例 ビューの対象の文書領域,初期の

ズームレベル)を指定する。そのSVGビュー指定の内容は"transform(...)"であり,ここにおけるパ

ラメタは,対応する属性が'g'要素においてもつ意味と同じ意味をもつ。 

SVG断片識別子は次のように定義される。 

SVGFragmentIdentifier ::=  

   BareName  

   |SVGViewSpec 

BareName ::=  

   NCName 

SVGViewSpec ::= 

   'svgView(' SVGViewAttributes ')' 

SVGViewAttributes ::=  

   SVGViewAttribute  

   |SVGViewAttribute ';' SVGViewAttributes 

SVGViewAttribute ::=  

   transformSpec 

263 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

transformSpec ::= 

   'transform(' TransformList ')' 

ここに, 

• 

NCNameは<NCName>値である。 

• 

TransformListはTransformList値に対応する。例 transform(scale(5)) 

SVG断片識別子は,指定された文法に適合しなければならない。内容の堅ろう(牢)性を保つために,

制作者は数値の間の空白を除外するか,又はこれらの空白を適宜パーセント符号化した文字列又はコンマ

と取り替えることが望ましい。 

注記 断片識別子は解決の前にIRIから削除されるので,US-ASCIIの範囲外の断片における文字は一

切エスケープしなくてもよい。 

同一の文書内から,又は外部のソース文書からということにかかわらず,利用者エージェントがSVG

文書片へリンクをたど(辿)らせると,SVG断片識別子はSVG文書に対して初期のビューを指定する。

それがSVGの'a'要素からのリンクなのか,HTMLのアンカー要素 [HTML4](つまり,HTMLの<a href=...>

要素)からのリンクなのか,又はXLink [JIS X 4176] を用いた指定からのリンクなのかにかかわらず,こ

れは適用される。利用者エージェントは,そのリンクをたど(辿)ることの効果を決めるとき,次のよう

なステップを踏む。 

• 

SVG断片識別子が提供されない場合(すなわち,指定されたIRIが文字“#”を含んでいない場合。

例 someDrawing.svg),最上位の'svg'要素のビュー指定属性(すなわち,viewBoxなど)を使用する

ことによって,SVG文書への初期のビューを確立する。 

• 

SVG断片識別子が特定のSVGビューをアドレッシングする場合[例 

linking-svgView-102-t.svg#svgView(transform(rotate(30, 150, 150)))],最も近い祖先の'svg'要素が定義し

た文書片が,そのSVG断片識別子によって提供されたSVGビュー指定を用いてビューポートに表

示される。 

• 

SVG断片識別子がどのような要素でもアドレッシングし(例 #rectId又はsomeDrawing.svg#rectId),

その断片識別子が示す要素が発見された場合,そのSVG文書の座標系の現在の文字変換は調整され,

特定された要素の装飾的包含ボックスの中心点がビューポートの中心に位置付けられる。その要素

の装飾的包含ボックスが現在のビューポートに合わないほど大きく,最上位の'svg'要素の

'zoomAndPan'属性が'disable'には設定されていない場合,そのビューポートは再配置をするだけでは

なく,その要素の装飾的包含ボックス全体の幅及び高さが収まるように現在のスケールを拡大しな

ければならない。対照的に,対象要素の包含ボックスがビューポートよりも小さい場合には,その

ビューポートはあらかじめ設定した値を残す(すなわち,その要素において自動的にズームインし

ない。)。指定された要素に装飾的包含ボックスがない場合,現在の文字変換及びスケールは設定値

のままで変更されない。そのビューポートの現在の文字変換又はスケールの変更とは無関係に,現

在の座標系における現在のローテーションは保持されなければならず(すなわち,対象の装飾的包

含ボックスの中心点が,一定のローテーション角をもってそのローテーションの中心点とならなけ

ればならない。),既存のアスペクト比も変更してはならない。外部リンクからたど(辿)る場合に

は,そのビューポートは最上位の'svg'要素で指定された値によって確立される。また,内部リンク

の場合には,以前に実施された全てのズーム操作(例 以前にナビゲーションしたリンク,利用者

264 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

によるズーム,現在の座標系のスクリプト変更など)によって初期のビューポートが追加的に調整

されなければならず,そのたど(辿)った結果として起こる全ての文字変換又はスケーリングは,

その初期状態として既存の座標系を使用する。その要素が見つからない場合,又は装飾的包含ボッ

クスがない場合には,そのビューポートを移動もズームもしない。どのたど(辿)ることの事例に

おいても,対象要素へのその他の改良的な移行又はアニメーションのパンは実施せず,即座にビュ

ーを確立しなければならない。対象要素の装飾的包含ボックスのアニメーションに適合させるため

にviewboxを継続的にアニメーション化してはならない。将来の仕様書では,また,別のメカニズ

ムによって,もっとカスタマイズ可能なたど(辿)る振る舞いが認められる可能性もある。 

• 

SVG断片識別子がどのような要素でもアドレッシングし,その要素が発見されない場合は,断片が

指定されていないかのように,最上位の'svg'要素のビュー指定属性(すなわち,viewBoxなど)を

使用することによって,SVG文書への初期のビューを確立する。 

注記 この規格では,単一の'svg'要素だけが認められている。したがって,最も近い祖先である'svg'

要素と最上位の'svg'要素とは同じである。このことは,その区別が重要である他のSVGプロフ

ァイルには該当しない。 

15 スクリプト 

15.1 スクリプト言語の指定 

15.1.1 既定のスクリプト言語の指定 

'svg'要素の'contentScriptType'属性は,特定の文書片に既定のスクリプト言語を指定する。 

15.1.2 スクリプト言語のローカル宣言 

'script'及び'handler'要素における'type'属性を指定することによって,個々の'script'又は'handler'要素に対し

てスクリプト言語を指定することもできる。 

15.2 'script'要素 

'script'要素は,実行可能内容を包含又は指し示すことができる(例 ECMAScript [ECMA-262],Java [JAVA] 

JARファイル)。実行可能内容は,スクリプト(テキストコード)か,又はコンパイル済みコードのどち

らかの形式をとることができる。そのコードがテキストの場合には,それを(文字データとして)'script'

要素に行内で配置するか,又は'xlink:href'属性を通して参照される外部リソースとして配置することができ

る。コンパイル済みコードは外部リソースでなければならない。ある'script'要素に'xlink:href'属性及び子の

文字データが両方存在する場合には,そのスクリプトのための実行可能内容は'xlink:href'属性のIRIから取

り込まれ,その子の内容はスクリプトの文脈には追加されない。 

その実行可能内容が行内で存在する場合には,15.7に示される方法によってそれを処理しなければなら

ない。 

ECMAScriptのような幾つかのスクリプト言語には,“グローバルスコープ”又は“グローバルオブジェ

クト”という概念があり,ここでは単一のグローバルオブジェクトがその文書に関連していなければなら

ない(それぞれのuDOM Document要素に対してユニーク)。このオブジェクトは,その文書に含まれた全

ての要素によって共有される。したがって,'script'要素の中で定義されるECMAScript機能は,そのスクリ

プトが属する文書全体の“グローバルな”範囲において存在しなければならない。グローバルオブジェク

トは,SVGGlobalインタフェースを実装しなければならない。グローバルなECMAScriptオブジェクトへ

の実装に加えて,SVGGlobalオブジェクトは,DocumentオブジェクトのDocumentView::defaultView属性

をとおして取り込むこともできる。また,イベント属性及び'handler'要素をとおして加えられたイベントリ

265 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

スナは,それらが定義される文書のグローバルスコープを使用することで評価される。 

“グローバルスコープ”の概念がないコンパイラ型言語(Javaなど)については,それぞれの'script'要

素は,実質的に別個のスコープオブジェクトを提供する。このスコープオブジェクトでは初期化を実行し

なければならず(附属書Aに示す。),それは'handler'要素のためのイベントリスナファクトリーとして機

能する。 

15.2.1 スクリプト処理 

与えられた'script'要素の実行は,一度だけである。この振る舞いを強制する各'script'要素に関連した概念

的なフラグ(ここでは"処理済み"フラグと呼ぶ。)が存在する。その'script'要素がいつ実行されるのかは,

その要素が文書に挿入された方法による。 

'script'要素を文書に挿入する方法の一つの可能性は,文書の解析中にそれを挿入したのかどうかである。

5.9.2でも言及されているように,文書の解析中に'script'要素と遭遇すると,要素の終了(end element)イ

ベントが起こった直後(しかし,その文書の残りが解析され更に要素が文書に挿入される前)にそれは処

理される('script'要素が処理されることの意味については,下の方を参照)。一旦処理されれば,文書の構

文解析が再開される。 

'script'要素を文書に挿入する方法のまた別の可能性は,パーサ以外のものによってそれが挿入された(例 

他のスクリプトの実行)のかどうかである。その場合,一つ以上の'script'要素が文書に挿入されると,す

ぐさまそれらを文書の順序で一つずつ処理しなければならない。 

'script'要素は次のように処理される。 

a) その'script'要素の"処理済み"フラグが真である場合,又はその要素が文書ツリーにない場合には,何

の操作も実行されず,このステップは終了である。 

b) その'script'要素が外部のスクリプト内容を参照している場合は,'xlink:href'属性の現在値を使用して

いるその外部のスクリプト内容を取ってくる。それ以降の'script'要素の処理は,その外部のスクリ

プト内容に依存し,そのリソースを取ってくるまで,又はそれが不正なIRI参照であると決定され

るまで阻止される。 

c) 'script'要素の"処理済み"フラグが真に設定される。 

d) そのスクリプト内容が行内である場合,又はそれが外部にありきちんと取ってくることができた場

合には,そのスクリプトは実行される。この時点において,そのスクリプトを実行することによっ

て,さらに,'script'要素がその文書に挿入される場合,これらのステップを繰り返してもよいこと

に注意する。 

loadイベントはそれが一度処理されれば'script'要素にディスパッチされることに注意する。ただし,そ

れが不正なIRI参照をもつ外部のスクリプト内容を参照していて'externalResourcesRequired'が'true'に設定さ

れていた場合を除く。 

スクリプトの実行が開始された後に'script'要素(又は内容)を変更・削除する場合には,それらによっ

てスクリプトの実行が一切影響を受けてはならない。 

"処理済み"フラグを真に設定した後で'script'要素の'xlink:href'属性を変更したとしても,新しいスクリプ

ト内容を取ってきたり,実行したりすることはない。 

スクリプト内容の実行が何を意味するのかは,そのスクリプト内容の型による。この規格は,特定のプ

ログラム言語のサポートを一切義務付けない。しかしながら,SVGでは二つの特定スクリプト型のための

振る舞いを定義し,実装がそれをサポートしている場合に備えている。 

application/ecmascript 

background image

266 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この型の実行可能内容は,ECMAScriptプログラム言語のためのソースコードでなければならない。上

で説明したように,このコードは,この要素のオーナー文書のグローバルスコープの文脈において実行さ

れなければならない。 

内容コーディングをサポートしているHTTPのようなプロトコルを通して外部リソースをロードする

SVGの実装は,gzip圧縮を用いてコード化された外部のスクリプトファイル(HTTPでは"Content-Encoding: 

gzip"を用いてフラグ)を許可しなければならない。 

application/java-archive 

この型の実行可能内容は,Java JARアーカイブを含む外部リソースでなければならない。そのJARアー

カイブのマニフェストファイルは,SVG-Handler-Classというエントリをもたなければならない。そのエン

トリの値は,このアーカイブに含まれたクラスのための完全修飾Javaクラス名でなければならない。利用

者エージェントは,JARファイルからクラスを具体値化して,それをEventListenerInitializer2インタフェ

ースに型変換しなければならない。そして,パラメタとして'script'要素オブジェクトそれ自体で

initializeEventListenersメソッドを呼び出さなければならない。SVG-Handler-Classにリスティングされたク

ラスが,EventListenerInitializer2を実装しない場合,それはエラーである。 

利用者エージェントは同一のURLからロードされたクラスを再利用してもよい。したがって,そのコー

ドにおいて,全ての'script'要素又は文書がそれ自体の別個のクラスオブジェクトを作成することを仮定し

てはならないことに注意する。したがって,例えばそのクラスにおける静的フィールドが,ある文書にプ

ライベートであると仮定することができない。 

実装においては,SVG 1.1との後方互換性のために,スクリプト型'text/ecmascript'も認めなければならな

い。しかしながら,この型は廃止される可能性があり,内容の制作者は利用しないほうがよい。 

他の言語バインディングにおいても,上で説明した二つのうちのどちらかと同様のアプローチをとるこ

とが望ましい。 

例18̲01.svgでは,'circle'要素をクリックすると呼び出される関数circle̲clickが定義されている。下の左

の絵は,初期の画像である。下の右の絵は,その円をクリックした後の結果である。この例では,この箇

条5の後の方で説明している'handler'要素が使われている。 

この例では,clickイベントを説明のために使用していることに注意する。この例では,マウスと同じ振

る舞いをする入力装置があることを前提としているが,いつもそうであるわけではない。できる限り広範

囲の利用者をサポートするために,clickイベントではなく,DOMActivateイベントを使用することが望ま

しい。 

例: 18̲01.svg 

<?xml version="1.0"?> 

<svg width="6cm" height="5cm" viewBox="0 0 600 500" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     xmlns:ev="http://www.w3.org/2001/xml-events"> 

  <desc>Example: invoke an ECMAScript function from an click event 

  </desc> 

  <!-- ECMAScript to change the radius with each click --> 

  <script type="application/ecmascript"> <![CDATA[ 

    function circle̲click(evt) { 

background image

267 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      var circle = evt.target; 

      var currentRadius = circle.getFloatTrait("r"); 

      if (currentRadius == 100) 

        circle.setFloatTrait("r", currentRadius*2); 

      else 

        circle.setFloatTrait("r", currentRadius*0.5); 

    } 

  ]]> </script> 

   

  <!-- Outline the drawing area with a blue line --> 

  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/> 

  <!-- Act on each click event --> 

  <circle cx="300" cy="225" r="100" fill="red"> 

  <handler type="application/ecmascript" ev:event="click">  

        circle̲click(evt); 

    </handler> 

  </circle>   

   

  <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"> 

    Click on circle to change its size 

  </text> 

</svg> 

ここでも同じスクリプトが呼び出されるが,今回はそれは外部ファイルにある。 

例: 18̲02.svg 

<?xml version="1.0"?> 

<svg width="6cm" height="5cm" viewBox="0 0 600 500" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     xmlns:ev="http://www.w3.org/2001/xml-events"> 

  <desc>Example: invoke an external ECMAScript function from an click event 

  </desc> 

  <!-- ECMAScript to change the radius with each click --> 

background image

268 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <script type="application/ecmascript" xlink:href="sample.es"/>  

   

  <!-- Outline the drawing area with a blue line --> 

  <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/> 

  <!-- Act on each click event --> 

  <circle cx="300" cy="225" r="100" fill="red"> 

  <handler type="application/ecmascript" ev:event="click">  

        circle̲click(evt); 

    </handler> 

  </circle>   

   

  <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"> 

    Click on circle to change its size 

  </text> 

</svg> 

スキーマ: script  

    <define name='script'> 

      <element name='script'> 

        <ref name='script.AT'/> 

        <ref name='script.ATCM'/> 

      </element> 

    </define> 

    <define name='script.AT' combine='interleave'> 

      <ref name='svg.CorePreserve.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.ContentType.attr'/> 

    </define> 

    <define name='script.ATCM'> 

      <interleave> 

        <choice> 

          <group> 

            <ref name='svg.XLinkRequired.attr'/> 

          </group> 

          <text/> 

        </choice> 

        <ref name='svg.Desc.group'/> 

background image

269 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      </interleave> 

    </define> 

属性の定義: 

type = "<content-type>" 

その'script'要素のためのプログラム言語を特定する。"<content-type>"値は,多目的インターネットメー

ル拡張(MIME)−第2部:メディア型[JIS X 5810-2:2008] によるメディア型を指定する。'type'が指定さ

れていない場合には'svg'要素の'contentScriptType'の値が使用されなければならず,これは省略値

'application/ecmascript' [RFC4329] をもつ。SVG文書片の中に'script'要素がない場合,'type'は

'application/ecmascript'を既定としなければならない。例えば,'script'要素が任意の非SVGマーク付けの子で

ある場合にそのようになる可能性がある。 

アニメーション:不可 

xlink:href = "<IRI>" 

そのスクリプトコードを含む外部リソースへのIRI参照。その属性が不正なIRI参照を含んでいる場合,

'script'要素は一切スクリプトを実行しない。 

アニメーション:不可 

15.3 XMLイベント 

XML Events [XML-EVENTS] は,イベントリスナ及びハンドラをDOM Level 2 Events [DOM2EVENTS] 

と統合させるためのXML構文である。SVG 1.1の宣言的イベントハンドリングがその言語に組み込まれ,

そこでは,開発者は要素構文にイベントハンドラを埋め込まなければならなかった(例 'onclick'属性をも

つ要素)。この規格は,イベント属性('onload','onclick','onactivate'など)をサポートしない。その代わり,

この規格は'listener'及び'handler'要素を包含してXML Eventsを使用しているので,図形内容とは別にイベン

トリスナを指定することができる。 

この規格がサポートしているイベントの一覧は,13.2に示す。 

SVG Tiny 1.2内容にハンドラを置くためには二つの方法がある。最初の方法は,単純な事例に最も適し

ている。 

例: simplehandler.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     version="1.2" baseProfile="tiny"> 

        

  <rect x="10" y="20" width="10" height="20" fill="red"> 

    <handler type="application/ecmascript" ev:event="click"> 

      var theRect = evt.target; 

      var width = theRect.getFloatTrait("width"); 

      theRect.setFloatTrait("width", width + 10); 

    </handler> 

  </rect> 

     

</svg> 

background image

270 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この方法では,'handler'要素はオブザーバ([XML-EVENTS]の3.1)の子要素である。例えば,'rect'要素

の子として'handler'を置くことができ,この'rect'要素はオブザーバになる。これによって,関心のあるイベ

ント(この場合はclick)が'rect'に起こったときには,いつでも'handler'要素が呼び出されるようになる。 

次はXML Eventsを使用するSVG文書の例であり,ここでは幾つかのオブジェクトにおいて'handler'要

素を再利用することができる。XML Eventsからの'listener'要素が,特定の'event'に対して'observer'及び

'handler'を指定するために使用される。 

例: handler.svg 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     xmlns:ev="http://www.w3.org/2001/xml-events"> 

      

  <desc>An example of the handler element.</desc> 

  <rect xml:id="theRect1" x="10" y="20" width="10" height="20" fill="red"/> 

  <rect xml:id="theRect2" x="10" y="40" width="10" height="20" fill="green"/> 

  <ev:listener event="click" observer="theRect1" handler="#theClickHandler"/> 

  <ev:listener event="click" observer="theRect2" handler="#theClickHandler"/> 

                  

  <handler xml:id="theClickHandler" type="application/ecmascript"> 

    var theRect = evt.target; 

    var width = theRect.getFloatTrait("width"); 

    theRect.setFloatTrait("width", (width+10)); 

  </handler> 

</svg> 

上記の例では,"theRect1"又は"theRect2"においてclickイベントが起こればいつでも"theClickHandler"要

素を呼び出すのがよい,ということを'listener'要素において登録している。 

XML Events構文及び新しい'handler'要素の組合せによって,コンパイラ型言語においてより簡単にイベ

ントハンドリングを処理することができる。次は,Java言語を用いたイベントハンドラの例である。 

例: javahandler.svg 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     xmlns:foo="http://www.example.com/foo" 

      xmlns:xlink="http://www.w3.org/1999/xlink"> 

      

  <desc>Example of a Java handler</desc> 

  <rect xml:id="theRect" x="10" y="20" width="200" height="300" fill="red"/> 

background image

271 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <!-- reference a jar containing an EventListenerInitializer2 object --> 

  <script 

type="application/java-archive" 

xml:id="init" 

xlink:href="http://example.com/theJar.jar"/> 

   

  <!-- register a listener for a theRect.click event --> 

  <ev:listener event="click" observer="theRect" handler="#theClickHandler" /> 

  <handler 

xml:id="theClickHandler" 

type="application/java-archive" 

xlink:href="#init" foo:offset="10"/>       

</svg> 

この事例では,'handler'要素は,EventListenerInitializer2インタフェースに適合するコンパイル済みコー

ドの位置を指定する'script'要素への参照を指定している。利用者エージェントは,対象のインタフェース

においてcreateEventListenerメソッドを呼び出す。 

この事例では,theJar.jarマニフェストのSVG-Handler-Classエントリによって参照される

MyListenerInitializerクラスは,次のような定義をもつ。 

MyListenerInitializer  

package com.example; 

import org.w3c.dom.Document; 

import org.w3c.dom.Element; 

import org.w3c.dom.events.Event; 

import org.w3c.dom.events.EventListener; 

import org.w3c.dom.svg.EventListenerInitializer2; 

public class MyListenerInitializer implements EventListenerInitializer2 { 

   Document document; 

    public void initializeEventListeners(Element scriptElement) { 

        document = scriptElement.getOwnerDocument(); 

    } 

    public EventListener createEventListener(final Element handlerElement) { 

        return new EventListener() { 

            public void handleEvent(Event event) { 

                Element theRect = document.getElementById("theRect"); 

background image

272 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

                float width = Float.parseFloat(theRect.getAttributeNS(null, "width")); 

                float 

offset 

Float.parseFloat(handlerElement.getAttributeNS("http://www.example.com/foo", 

"offset"); 

                theRect.setAttributeNS(null, "width", "" + (width + offset)); 

            } 

        }; 

    } 

EventListenerInitializer2インタフェースは,現在SVGのパッケージとして定義されている。将来の仕様

では,SVGのパッケージにおいて常に利用できることは保証されるものの,この包含は移動される可能性

がある。 

15.4 'listener'要素 

XML Events [XML-EVENTS] の'listener'要素がサポートされていなければならない。'listener'要素の定義

は,[XML-EVENTS] にて与えられている。この規格にある全ての追加的な制限も適用しなければならな

い。 

listener要素の属性が変更されると,常に対応するイベントリスナは削除され,新規に作成される。listener

要素を追加又は削除すると,イベントリスナも追加又は削除される。 

'listener'要素はXML Events名前空間で指定されなければならず,そのローカル名として"listener"をもつ

SVG名前空間の要素はこの15.4で説明している要素であると理解してはならないことに注意する。また,

XML Events名前空間にあるときにだけ他の要素で利用可能なXML Events属性は,それらがどの名前空間

にも存在しないときは,この要素だけで利用することができる。 

スキーマ: listener  

    <define name='listener'> 

      <element name='listener'> 

        <ref name='listener.AT'/> 

        <ref name='listener.CM'/> 

      </element> 

    </define> 

    <define name='listener.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <optional> 

        <attribute name='event' svg:animatable='false' svg:inheritable='false'> 

          <ref name='XML-NMTOKEN.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

background image

273 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        <attribute name='phase' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value>default</value> 

            <value>capture</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='propagate' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value>continue</value> 

            <value>stop</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='defaultAction' 

svg:animatable='false' 

svg:inheritable='false'> 

          <choice> 

            <value>perform</value> 

            <value>cancel</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='observer' svg:animatable='false' svg:inheritable='false'> 

          <ref name='IDREF.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='target' svg:animatable='false' svg:inheritable='false'> 

          <ref name='IDREF.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='handler' svg:animatable='false' svg:inheritable='false'> 

          <ref name='IRI.datatype'/> 

        </attribute> 

      </optional> 

background image

274 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    </define> 

    <define name='listener.CM'> 

      <empty/> 

    </define> 

属性の定義: 

event = "<XML-NMTOKEN>"  

XML Eventsの'event'属性の定義を参照。'event'属性は,13.2で定義されているように,有効なこの規格の

イベント識別子でなければならない。 

アニメーション:不可 

observer = "<IDREF>"  

XML Eventsの'observer'属性の定義を参照。'observer'属性が存在しない場合,オブザーバは'listener'要素の

親であることに注意する。 

アニメーション:不可 

target = "<IDREF>"  

XML Eventsの'target'属性の定義を参照。 

アニメーション:不可 

handler = "<IRI>"  

XML Eventsの'handler'属性の定義を参照。この属性はIRI参照である。この15.4で指定されるように,

認められるIRIに関する制限を適用しなければならない。 

アニメーション:不可 

phase = "default"  

XML Eventsの'phase'属性の定義を参照。この規格では捕捉段階(capture phase)のサポートは義務付け

られていない。それをサポートしていない実装では,この属性をそれが指定されていないときと同じよう

に処理しなければならない。 

アニメーション:不可 

propagate = "stop" | "continue"  

XML Eventsの'propagate'属性の定義を参照。 

アニメーション:不可 

defaultAction = "cancel" | "perform"  

XML Eventsの'defaultAction'属性の定義を参照。 

アニメーション:不可 

15.5 'handler'要素 

'handler'要素は'script'要素と類似している。その内容(行内に含まれるか,又は参照される。)は,利用者

エージェントによって使用されるスクリプトエンジンによって実行されるコードである。 

しかし,'script'要素はそのロード時に内容を実行するが,'handler'要素はイベントに対応したときにだけ

その内容を実行しなければならない。このことは,この規格が'handler'を使用することによって,SVG Full

イベント属性([SVG11]の18.4)で提供されているものと同等の機能性を得られることを意味する。 

background image

275 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

その実行可能内容が行内に存在する場合には,15.7に示す方法によってそれを処理しなければならない。 

例えば,次のようなSVG 1.1文書を考えてみる。 

例: nohandler.svg 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 

  <rect id="theRect" x="10" y="20" width="200" height="300" fill="red" 

        onclick="evt.target.width.baseVal.value += 10"/> 

</svg> 

上の例は,'handler'要素及びXML Eventsを用いて次のように書き直さなければならない。 

例: handler2.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     version="1.2" baseProfile="tiny"> 

  <desc>handler element example</desc> 

  <rect xml:id="theRect" x="10" y="20" width="200" height="300" fill="red"> 

    <handler type="application/ecmascript" ev:event="click"> 

      var theRect = evt.target; 

      var width = theRect.getFloatTrait("width"); 

      theRect.setFloatTrait("width", width + 10); 

    </handler> 

  </rect> 

</svg>  

'handler'要素の'type'又はev:event属性が変更されると,常に対応するイベントリスナは削除され,新規に

作成される。'xlink:href'属性が変更された場合,又は'handler'要素の内容が変更された場合には,既存のイ

ベントリスナは保持されるが,利用者エージェントは更新後のハンドラ処理を実行しなければならない。

'handler'要素を追加又は削除すると,対応するイベントリスナも追加又は削除される。 

ECMAScriptでは,'handler'要素の内容は,それらが新しいFunctionオブジェクトの内容であるかのよう

に概念的な振る舞いをする。 

function(event) { 

    var evt = event; 

    //contents of handler 

上記の'event'パラメタは,'handler'を起動するイベントに対応するEventオブジェクトである。変数'evt'

は'event'の代わりに使用することができる('evt'は'event'の別名である。)。 

background image

276 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

スキーマ: handler  

    <define name='handler'> 

      <element name='handler'> 

        <ref name='handler.AT'/> 

        <ref name='handler.ATCM'/> 

      </element> 

    </define> 

    <define name='handler.AT' combine='interleave'> 

      <ref name='svg.CorePreserve.attr'/> 

      <ref name='svg.External.attr'/> 

      <optional> 

        <attribute name='ev:event' svg:animatable='false' svg:inheritable='false'> 

          <ref name='XML-NMTOKEN.datatype'/> 

        </attribute> 

      </optional> 

      <ref name='svg.ContentType.attr'/> 

    </define> 

    <define name='handler.ATCM'> 

      <interleave> 

        <choice> 

          <group> 

            <ref name='svg.XLinkRequired.attr'/> 

          </group> 

          <text/> 

        </choice> 

        <ref name='svg.Desc.group'/> 

      </interleave> 

    </define> 

属性の定義: 

type = "<content-type>" 

その'handler'要素のためのプログラム言語を特定する。"<content-type>"値は,多目的インターネットメー

ル拡張(MIME)−第2部:メディア型[JIS X 5810-2:2008] によるメディア型を指定する。'type'が指定さ

れていない場合には'svg'要素の'contentScriptType'の値が使用されなければならず,これは省略値

'application/ecmascript' [RFC4329] をもつ。 

アニメーション:不可 

xlink:href = "<IRI>" 

この属性が存在する場合,'handler'要素のスクリプト内容をこのリソースからロードしなければならない。

background image

277 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

また,その'handler'要素がもつ内容は実行してはならない。 

アニメーション:不可 

ev:event = "<XML-NMTOKEN>" 

扱うイベントの名前。この属性はXML Events名前空間に存在する。http://www.w3.org/2001/xml-events。

サポートされている全イベントのリストについては13.2を参照。'ev:event'属性の定義についてはXML 

Events仕様書([XML-EVENTS]の3.1)を参照。 

アニメーション:不可 

Javaにおけるスクリプトハンドラでは,'xlink:href'属性は,EventListenerInitializer2実装を指し示す

SVG-Handler-Classエントリをもつマニフェストを保持するJARアーカイブをそれ自体が参照する'script'

要素を参照しなければならない。 

15.5.1 'handler'要素へのパラメタ 

多くの場合,スクリプトの制作者は,'handler'要素の内容を用いてパラメタを渡し,他の機能を呼び出す

ためのテンプレートとして'handler'を使用する。しかしながら,コンパイラ型言語では,'handler'要素は実

行可能な内容を一切もたない。 

その場合には,制作者は,外部の名前空間における'handler'要素の属性,又は外部の名前空間における要

素の子の形式によるカスタム内容として,'handler'にパラメタを埋め込むことが望ましい。 

'handler'要素にパラメタを使用した例を次に示す。 

例: handlerparam.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     xmlns:foo="http://www.example.com/foo" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny"> 

  <desc>An example of parameters on the handler element.</desc> 

  <rect xml:id="theRect" x="10" y="20" width="200" height="300" fill="red"/>               

  <!-- reference a jar containing an EventListenerInitializer2 object --> 

  <script 

type="application/java-archive" 

xml:id="init" 

xlink:href="http://example.com/theJar.jar"/> 

  <!-- register a listener for a theRect.click event --> 

  <ev:listener event="click" observer="theRect" handler="#theClickHandler" /> 

  <handler 

xml:id="theClickHandler" 

type="application/java-archive" 

xlink:href="#init"> 

    <foo:offset value="10"/> 

    <foo:person> 

background image

278 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

     <foo:name>Victor Vector</foo:name> 

     <foo:age>42</foo:age> 

    </foo:person> 

  </handler> 

</svg> 

この事例では,theJar.jarマニフェストのSVG-Handler-Classエントリによって参照されるオブジェクトは,

そのcreateEventListenerメソッドを呼び出し,返されたEventListenerを登録する。"theRect"要素において

clickイベントが観測されたときには,常にリスナーのhandleEventメソッドが呼び出される。そして,そ

のオブジェクトはhttp://www.example.com/foo名前空間の要素からそのパラメタを取り込むために'handler'

要素にアクセスすることができる。 

15.6 イベントハンドリング 

次のどちらかが起こったとき,イベントはスクリプトを実行させなければならない。 

• 

イベントが特定の要素に割り当てられ,'handler'要素を通してスクリプトに関連付けられた。与えら

れたイベントが発生すると,そのスクリプトは実行される。 

• 

DOM Level 2 Events [DOM2EVENTS] で説明されるイベントリスナが定義されたとき,それは,与

えられたイベントがその対象で発生したときに呼び出される。 

この規格の関連する細分箇条を次に示す。 

• 

13.3に,ポインタ移動イベント(例 マウスの移動),活性化イベント(例 マウスクリック)など

のイベントをSVG利用者エージェントが処理する方法が示されている。 

15.7 行内実行可能内容の処理 

実行可能内容が'script','handler'要素などの実行可能要素の行内に存在する場合,それを解析及び実行す

る前に,次のように処理しなければならない。 

('type'属性,'contentScriptType',又は省略値のいずれかをとおして得られる)内容のタイプ,属性,又

は既定値が利用者エージェントに未知な場合,利用者エージェントはその内容を無視し,それ以上の処理

は一切実行してはならない。 

その内容のタイプがXMLメディア型 [RFC3023] の場合,実行可能要素のサブツリー全体を触らずにス

クリプトエンジンに渡さなければならない。 

そうでなければ,その利用者エージェントのスクリプトエンジンが取り込む内容は,次のステップによ

って取り込まなければならない。 

a) その実行可能要素の全ての子孫要素を取り除く。 

b) 次に,その実行可能要素のテキスト内容を使用する[DOM Level 3 Core([DOM3]の1.4)における

Node::textContentによって定義される。]。 

16 アニメーション 

16.1 概説 

SVGでは,時間の経過に伴ってベクタ図形を変化させる機能がサポートされている。次のような方法で

SVG内容をアニメーション化することができる。 

• 

SVGアニメーション要素の使用。SVG文書片は,文書要素に対する時間に基づく変更を記述するこ

279 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

とができる。様々なアニメーション要素を使用して,モーションパス,フェードイン又はフェード

アウト効果,及び,拡大,縮小,回転,又は色が変化するオブジェクトを定義することができる。 

• 

SVG uDOMの使用。SVG uDOMは,Document Object Model(DOM)Level 3仕様書 [DOM3] に適

合している。SVG属性にはスクリプトにアクセスすることができる属性があり,それらを操作する

ことによって,数多くの種類のアニメーションを実現することができる。uDOMのタイマ機能を使

用することによって,アニメーションを開始して,制御することができる(下の方の例を参照)。 

16.2 アニメーション要素 

16.2.1 概説 

SVGアニメーション要素は,W3CのSynchronized Multimedia(SYMM)ワーキンググループとの連携に

よって開発された。このワーキンググループは,Synchronized Multimedia Integration Language(SMIL)2.1

仕様書 [SMIL21] を開発している。 

SVGはSMIL 2.1仕様書が定義するアニメーション機能を組み込み,SVG特有の拡張を幾つか提供して

いる。 

SMIL 2.1アニメーションをサポートする全ての言語において利用できる手法及び機能に関する概説につ

いては,SMIL 2.1 Animation Modulesの概説及びアニメーションサンドイッチモデルの部分を参照

([SMIL21]の3.2及び3.3.3)。SMILアニメーションを拡張したアニメーション機能のリストについては,

下の方のSMIL 2.1アニメーションのSVG拡張を参照。 

16.2.2 SMIL 2.1アニメーションとの関係 

SVGは,SMIL 2.1アニメーションに関してはホスト言語である。したがって,その仕様書によって認め

られている追加的な制限及び機能を導入している。この規格において明示的に言及されている全てのSVG

特有の規則を除けば,SVGアニメーション要素及び属性の規定の定義は,SMIL 2.1 Animation Modules及

びSMIL 2.1 Timing and Synchronizationの箇条([SMIL21]の箇条3及び箇条10)にある定義である。SMIL

タイミングエンジンは描画ツリーと直交している(orthogonal)ことに注意する。 

SVGはSMIL 2.1 Animation Modulesで定義されている次の四つのアニメーション要素をサポートしてい

る。 

'animate' 

スカラ属性及びプロパティに対して時間の経過に伴い異なる値を割り当てるこ

とを認める。 

'set' 

'animate'の便利な短縮形。非数値の属性又はプロパティ(例 'visibility'プロパティ)

にアニメーション値を割り当てるために役立つ。 

'animateMotion' 

モーションパスに沿って要素を移動する。 

'animateColor' 

時間の経過に伴い,特定の属性又はプロパティの色値を変更する。 

さらに,SVGでは,SMIL 2.1に対して次のような互換性のある拡張を行う。 

'animateTransform' 

時間の経過に伴いSVG変換属性(例 'transform'属性)の一つを変更する。 

'path'属性 

'animateMotion'要素の'path'属性においてSVGパスデータ構文の全機能の指定を認

める(SMIL 2.1アニメーションでは,'path'属性におけるSVGのパスデータ構文

の部分集合を認めるだけである。)。 

'mpath'要素 

'animateMotion'要素が,モーションパスの定義としてSVGの'path'要素を参照する

background image

280 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

子の'mpath'要素を含むことを認める。 

'keyPoints'属性 

モーションパスのアニメーションの速度を細かく制御するために,'keyPoints'属性

を'animateMotion'に追加する。 

'rotate'属性 

あるオブジェクトが自動的に回転することによって,そのx軸がモーションパス

の方向の接線ベクトルと同じ方向(又は逆方向)を指しているかどうかを制御す

るために,'rotate'属性を'animateMotion'に追加する。 

その言語の他の側面との互換性のために,SVGは'xlink:href'属性を介してIRI参照を利用し,アニメーシ

ョンの対象とする要素を識別する。 

SMIL 2.1アニメーションでは,ホスト言語は文書の開始及び文書の終了の意味を定義しなければならな

いが,それらは1.6に示されている。 

16.2.3 アニメーション要素の例 

次の例19̲01.svgでは,五つのSVGアニメーション要素がそれぞれ示されている。 

例: 19̲01.svg 

<?xml version="1.0"?> 

<svg width="8cm" height="3cm"  viewBox="0 0 800 300" 

     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"> 

  <desc>Example anim01 - demonstrate animation elements</desc> 

  <rect x="1" y="1" width="798" height="298"  

        fill="none" stroke="blue" stroke-width="2" /> 

  <!-- The following illustrates the use of the 'animate' element 

        to animate a rectangles x, y, and width attributes so that 

        the rectangle grows to ultimately fill the viewport. --> 

  <rect xml:id="RectElement" x="300" y="100" width="300" height="100" 

        fill="rgb(255,255,0)"  > 

    <animate attributeName="x"  

             begin="0s" dur="9s" fill="freeze" from="300" to="0" /> 

    <animate attributeName="y"  

             begin="0s" dur="9s" fill="freeze" from="100" to="0" /> 

    <animate attributeName="width"  

             begin="0s" dur="9s" fill="freeze" from="300" to="800" /> 

    <animate attributeName="height"  

             begin="0s" dur="9s" fill="freeze" from="100" to="300" /> 

  </rect> 

  <!-- Set up a new user coordinate system so that 

        the text string's origin is at (0,0), allowing 

        rotation and scale relative to the new origin --> 

  <g transform="translate(100,100)" > 

    <!-- The following illustrates the use of the 'set', 'animateMotion', 

         'animateColor' and 'animateTransform' elements. The 'text' element  

background image

281 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

         below starts off hidden (i.e., invisible). At 3 seconds, it: 

           * becomes visible 

           * continuously moves diagonally across the viewport 

           * changes color from blue to dark red 

           * rotates from -30 to zero degrees 

           * scales by a factor of three. --> 

    <text xml:id="TextElement" x="0" y="0" 

          font-family="Verdana" font-size="35.27" visibility="hidden"  >  

      It's alive! 

      <set attributeName="visibility" to="visible" 

           begin="3s" dur="6s" fill="freeze" /> 

      <animateMotion path="M 0 0 L 100 100"  

           begin="3s" dur="6s" fill="freeze" /> 

      <animateColor attributeName="fill" 

           from="rgb(0,0,255)" to="rgb(128,0,0)" 

           begin="3s" dur="6s" fill="freeze" /> 

      <animateTransform attributeName="transform"  

           type="rotate" from="-30" to="0" 

           begin="3s" dur="6s" fill="freeze" /> 

      <animateTransform attributeName="transform"  

           type="scale" from="1" to="3" additive="sum" 

           begin="3s" dur="6s" fill="freeze" /> 

    </text> 

  </g> 

</svg> 

0秒 

3秒 

6秒 

9秒 

次の細分箇条では,様々なアニメーション属性及び要素について説明している。 

16.2.4 アニメーションのために対象要素を識別する属性 

次の属性は全てのアニメーション要素に共通であり,アニメーションのために対象要素を識別する。そ

background image

282 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

の対象要素がアニメーションの対象になることができない場合,そのアニメーションは一切効果をもたな

い。 

特定のタイプのアニメーションの対象になることができる要素のタイプに対する制限については,個々

のアニメーション要素の説明を参照。 

スキーマ: animatecommon  

    <define name='svg.AnimateCommon.attr'> 

      <ref name='svg.XLink.attr'/> 

      <ref name='svg.Conditional.attr'/> 

    </define> 

属性の定義: 

xlink:href = "<IRI>" 

このアニメーションの対象であり,よって時間の経過に伴い変更を加えられる要素へのIRI参照。 

この対象の要素は現在のSVG文書片の一部でなければならない。その対象要素が現在のSVG文書片の

一部ではない場合,又は,そのIRI参照が不正なIRI参照である場合には,そのアニメーションは一切効

果をもたない。このことは,それでもアニメーションのタイミングは実行されるが,その対象属性にはア

ニメーションの効果が一切与えられないことを意味する。 

xlink:href'属性が提供されていない場合,対象要素は現在のアニメーション要素の直近の親要素となる。 

'xlink:href'は,一つの対象要素だけを指し示さなければならない。'xlink:href'が複数の対象要素を指し示

している場合,それはサポート外の値として扱われ,その属性を指定していないときと同様に処理されな

ければならない。xlink:href=""(空の文字列)である場合,それは'xlink:href'属性を指定していないときと

同様に処理されなければならない。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation Modulesにおけるアニメーション対象の指定の項([SMIL21]の3.5.1)に記載されてい

る。 

アニメーション:不可 

アニメーションの対象となっている要素の'xml:id'又は'id'属性が変更された場合,それがアニメーション

に影響を与えるのかどうかは定義されず,処理系依存である。将来の仕様では,既に文書ツリーにあるア

ニメーション要素に影響を与える要素を変更したときの結果をより詳しく記述する。 

そのアニメーション要素が文書ツリーに挿入されたとき,又は文書の開始の時間にあるとき(どちらか

遅い方),アニメーション対象の解決が起こる(いつ文書の開始の時間が発生するのかを制御する

'timelineBegin'属性も参照。)。 

16.2.5 アニメーションのために対象属性又はプロパティを識別する属性 

次の属性は,時間の経過に伴いその値が変化する対象要素のために,対象属性又はプロパティを識別す

る。 

スキーマ: animateattributecommon  

    <define name='svg.AnimateAttributeCommon.attr'> 

      <optional> 

        <attribute 

name='attributeName' 

svg:animatable='false' 

svg:inheritable='false'> 

background image

283 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

          <ref name='QName.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='attributeType' 

svg:animatable='false' 

svg:inheritable='false'> 

          <choice> 

            <value>XML</value> 

            <value>CSS</value> 

            <value>auto</value> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

attributeName = "<QName>"  

対象属性の名前を指定する。修飾名は(もし使用する場合),その属性のためのXML名前空間を示す。

その接頭辞は,現在の(すなわち,参照)アニメーション要素の範囲にある名前空間名に解決される。

'attributeName'属性は省略可能だが,省略値がないことに注意する。その値が指定されていない場合でも,

アニメーションは実行され,アニメーション要素に関連するイベント(例 beginEvent)は発生する。し

かし,そのアニメーションはどの属性にも適用されない。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation Modulesにおけるアニメーション対象の指定の項([SMIL21]の3.5.1)に記載されてい

る。 

アニメーション:不可 

attributeType = "CSS" | "XML" | "auto" 

対象属性及びその関連値が定義される名前空間を指定する。この属性の値は次のうちの一つとなる(値

は大文字及び小文字を区別する。)。 

CSS 

'attributeName'の値はこの規格でアニメーション可と定義されたプロパティの名前であることを示す。 

XML 

'attributeName'の値はその対象要素におけるXML属性の名前であることを示す。'attributeName'の値が接

頭辞をもつ場合,それは(上の方で説明しているように)解決される。もっていない場合,その対象属性

はどの名前空間にも存在しない。その属性は,この規格においてアニメーション可と定義されていなけれ

ばならない。 

auto 

利用者エージェントは,その'attributeName'を,対象要素に適切であるアニメーション可能なプロパティ

又は属性にマッチングするのがよい。その利用者エージェントがCSSをサポートしている場合,それは最

background image

284 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

初にサポートしているCSSプロパティ(SVGが定義していないものを含む。)のリストを調べ,その対象

要素のためにアニメーション可能と定義されるマッチしたプロパティ名を探さなければならない。適当な

プロパティが見つからない場合には,利用者エージェントはふさわしい名前空間を使用して適切でアニメ

ーション可能な属性を探さなければならない。'attributeName'が接頭辞をもっていない場合,探されている

その属性はどの名前空間にも存在しない。それが接頭辞をもっている場合,上で説明したようにその接頭

辞は解決され,探されたその属性は関連する名前空間で解決される。適当なプロパティも属性も見つから

ない場合には,そのアニメーションは一切効果をもたない。 

同じ名前の属性をその要素に適用することができたとしても,全てのプロパティを全てのSVG要素に適

用することができるわけではないことに注意する。特に,CSSの'width'及び'height'プロパティは,'width'

及び'height'属性をもつSVG要素には適用することができない。 

省略値:'auto'  

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation Modulesにおけるアニメーション対象の指定の項([SMIL21]の3.5.1)に記載されてい

る。 

スタイルシート(外部スタイルシート,他のSVGプロファイルで利用することができる'style'要素又は

'style'属性)がない場合,プレゼンテーション属性のアニメーションは,対応するプロパティのアニメーシ

ョン化と同等である。したがって,この規格のプロパティでは,attributeType="XML"によってプレゼンテ

ーション属性をアニメーション化することと,attributeType="CSS"によって対応するプロパティをアニメー

ション化することは,同じ効果である。 

アニメーション:不可 

16.2.6 名前空間をもつアニメーション 

次の例animns01.svgでは,参照する要素の有効範囲における名前空間名に解決される名前空間の接頭辞

があり,その名前空間名がアニメーション化する属性を識別するために利用(対象範囲で使用されている

接頭辞とは無関係に)されているところを示している。 

例: animns01.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" 

    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <title>Demonstration of the resolution of namespaces for animation</title> 

    <!-- at the point of definition, the QName a:href resolves to the namespace  

        name "http://www.w3.org/1999/xlink" and the local name "href" --> 

    <g xmlns:a="http://www.w3.org/1999/xlink"> 

        <animate attributeName="a:href" xlink:href="#foo" dur="2s" to="two.png" 

fill="freeze"/> 

    </g> 

    <!-- at the point of use, the namespace name "http://www.w3.org/1999/xlink"  

      happens to be bound to the namespace prefix 'b'  while the prefix 

      'xlink' is bound to a different namespace name--> 

    <g xmlns:b="http://www.w3.org/1999/xlink" xmlns:xlink="http://example.net/bar"> 

background image

285 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        <image xml:id="foo" b:href="one.png" x="35" y="50" width="410" height="160"/> 

    </g> 

</svg> 

16.2.7 ペース付けアニメーション及び複合型 

ペース付けアニメーションは,'to','from','by',及び'values'属性によって定義される様々なアニメーシ

ョン値の間の距離の概念を利用する。距離は,'animateTransform'がサポートする変換型の部分集合,スカ

ラ型(<length>など),及び色のためだけに定義される。次の距離関数のリストでは,Va及びVbは,その

間の距離が計算される二つの値を表している。 

ペース付けアニメーションでは一定のペースで変化するアニメーションの作成が意図されているので,

全てのデータ型のために距離関数を定義することは理にかな(適)わない。距離は,値がn次元のベクト

ルである型について定義することができる(1次元のベクトルであるスカラを含む。)。例えば,<length>

値はスカラ値であり,<color>値は3次元のベクトルである。したがって,これらの型の属性は,それらに

ペース付けアニメーションを適用することができる。一方,<list-of-length>('stroke-dasharray'によって使用

される。)はスカラのリスト(1次元ベクトル)であり,<points-data>('polygon'の'points'属性によって使用

される。)は2次元ベクトルのリストである。したがって,これらの型では距離関数は定義されず,それら

にペース付けアニメーションを適用することができない。 

ペース付けアニメーションをサポートする型のための距離関数は次のとおりである。 

<coordinate>,<integer>,<length>,及び<number>  

distance(Va, Vb) = |Va − Vb| 

例 'rect'における'x'属性,又は'circle'における'stroke-width'プロパティのアニメーション化。 

<color>  

distance(Va, Vb) = sqrt[(Va.red − Vb.red)2 + (Va.green − Vb.green)2 + (Va.blue − Vb.blue)2] 

ここに, 

Vi.redはVi色値の赤構成要素である。 

Vi.greenはVi色値の緑構成要素である。 

Vi.blueはVi色値の青構成要素である。 

各カラー構成要素値は,通常は範囲[0, 1]にある。ここでは,0はsRGB全域 [SRGB] におけるカラー構

成要素なしを表し,1はそのカラー構成要素の最大量を表す。<color>値はsRGB全域の外にある色を指定

してもよいので,これらの構成要素値は,範囲[0, 1]の外の値であってもよい。 

例 'ellipse'の'fill'プロパティのアニメーション化。 

'translate'型の変換の定義 

distance(Va, Vb) = sqrt[(Va.tx − Vb.tx)2 + (Va.ty − Vb.ty)2] 

ここに, 

Vi.txはVi文字変換値のx構成要素である。 

Vi.tyはVi文字変換値のy構成要素である。 

例(全ての変換定義型について) 'animateTransform'を用いて'g'の'transform'属性をアニメーション化。 

'scale'型の変換の定義 

background image

286 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

distance(Va, Vb) = sqrt[(Va.sx − Vb.sx)2 + (Va.sy − Vb.sy)2] 

ここに, 

Vi.sxはViスケール変換値のx構成要素である。 

Vi.syはViスケール変換値のy構成要素である。 

<transform-list>でスケール変換を指定するとき,そのスケールのy構成要素が省略されている場合はそ

れが暗黙的にx構成要素と同じになることに注意する。 

'rotate','skewX'及び'skewY'型の変換の定義 

distance(Va, Vb) = sqrt[(Va.angle − Vb.angle)2] 

ここに, 

Vi.angleはViローテーション又はわい(歪)曲変換値の角構成要素である。 

ローテーションに関する距離関数は,そのローテーションの中心点の構成要素について存在しないので,

ローテーションの中心点を変化させるペース付けアニメーションでは,アニメーションの適用時にペース

付けられた動作を示さない可能性がある。 

他の全てのデータ型のための距離関数は定義されない。上に示されていない型をもつ属性又はプロパテ

ィのアニメーションにおいてcalcMode="paced"とした場合,そのアニメーションの効果は未定義である。

SVG利用者エージェントはcalcMode="linear"のときと同じようにそのアニメーションを実行することを選

択してもよいが,これはする必要がない。制作者は,上に示されていない型についてはペース付けアニメ

ーションを指定しないほうがよい。 

16.2.8 アニメーションのタイミングを制御する属性 

次の属性は全てのアニメーション要素に共通であり,アニメーションのタイミングを制御する。例えば,

何がそのアニメーションを開始・終了させるのか,そのアニメーションは繰り返して実行されるのか,又

は,そのアニメーションが終わったときに終了時の状態は維持されるのか,ということが制御される。 

これらのタイミング属性はメディア要素にも適用される。 

スキーマ: animatetiming  

    <define name='svg.AnimateTiming.attr' combine='interleave'> 

      <ref name='svg.AnimateTimingNoMinMax.attr'/> 

      <optional><attribute 

name='min' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='max' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

    </define> 

    <define name='svg.AnimateTimingNoMinMax.attr' combine='interleave'> 

      <ref name='svg.AnimateTimingNoFillNoMinMax.attr'/> 

      <optional> 

        <attribute name='fill' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value>remove</value> 

background image

287 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

            <value>freeze</value> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

    <define name='svg.AnimateTimingNoFillNoMinMax.attr' combine='interleave'> 

      <ref name='svg.AnimateBegin.attr'/> 

      <optional><attribute 

name='dur' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='end' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='repeatCount' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='repeatDur' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional> 

        <attribute name='restart' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value>always</value> 

            <value>never</value> 

            <value>whenNotActive</value> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

    <define name='svg.AnimateBegin.attr' combine='interleave'> 

      <optional><attribute 

name='begin' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

    </define> 

次の構文仕様では,任意の空白は次のように定義される"S"として示される。 

S ::=  

   (#x20  

   | #x9  

   | #xD  

   | #xA)* 

属性の定義: 

begin = "begin-value-list"  

288 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

いつその要素を開始する(すなわち,活性化する。)のがよいのかを定義する。この属性の値は,タイミ

ング指定子の値によるセミコロンで区切られたリストである。 

begin-value-listの定義は次のとおりである。 

begin-value-list ::= begin-value ( S? ";" S? begin-value-list )? 

開始値のセミコロンで区切られたリスト。開始時間のリストの解釈については,SMIL 2.1の"Evaluation of 

begin and end time lists"の部分で詳しく説明されている。 

begin-value ::= ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | "indefinite" )  

その要素の開始時間を記述する。 

offset-value ::= ( S? "+" | "-" S? )? ( <Clock-value> ) 

SMIL 2.1では,暗黙的な同期基点とのオフセットによって要素の開始を記述する。SVGでは,暗黙的な

同期基点の開始は,文書の開始と相対的に定義される。文書の開始時間が解決されていさえすれば,負の

開始時間も完全に有効であり,簡単に計算することができる。 

syncbase-value ::= ( Id-value "." ( "begin" | "end" ) ) ( S? ( "+" | "-" ) S? <Clock-value> )? 

ある同期基点と,その同期基点からの省略可能なオフセットとについて記述する。その要素の開始は,

別のアニメーションの開始又は活性時間の終了と相対的に定義される。同期基点は,参照されるアニメー

ション要素の開始又は活性時間の終了と同期をとるのかどうかを特定するために,.begin又は.endのどち

らかが後に続く,また別のアニメーション要素に対するID参照から成る。 

event-value ::= ( Id-value "." )? ( event-ref ) ( S? ( "+" | "-" ) S? <Clock-value> )? 

その要素の開始を決めるイベント及び省略可能なオフセットについて記述する。アニメーションの開始

は,そのイベントがイベント基点要素に発行される時間に対して相対的に定義される。event-ref値として

使用することができるイベント名のリストについては,13.2の表における“アニメーションイベント名”

の列を参照。イベントベースのタイミングの詳細については,SMIL 2.1 Timing and Synchronizationの

Unifying event based and scheduled timingの細分箇条([SMIL21]の10.11)を参照。 

repeat-value ::= ( Id-value "." )? "repeat(" <integer> ")" ( S? ( "+" | "-" ) S? <Clock-value> )? 

その要素が開始することになる,回数が指定されたリピートイベント及び省略可能なオフセットについ

て記述する。要素の開始は,整数(正の数でなければならない。)で指定された反復値をもつrepeatEvent

イベントがイベント基点要素に発行される時間に対して相対的に定義される。 

accessKey-value ::= "accessKey(" character ")" ( S? ( "+" | "-" ) S? <Clock-value> )? 

その要素を開始することになる,キー押下イベント及び省略可能なオフセットについて記述する。要素

の開始は,指定されたキーに対応したkeydownイベントの時間に対して相対的に定義される。正式な処理

モデルの視点では,accessKey-valueは,捕捉段階(capture phase)においてstopPropagation()とpreventDefault

()とが呼び出されたかのような振る舞いをする文書のkeydownイベントリスナに対応する(この振る舞

いの結果については13.7を参照。)。 

character値は二つのタイプのうちの一つであることができる。それは,A.6.7に示されているキーボード

イベント識別子の文字列のどれであってもよい。また,この値を単一のUnicode文字 [UNICODE] にする

こともできる。その場合には,その単一の文字はaccessKey-valueイベントリスナを処理するためにキーボ

ード識別子にマップされる。例えば,'accessKey(Q)'は,'accessKey(U+0051)'が使われているかのように,

対象のキーボード識別子の文字列として"U+0051"を用いてkeydownイベントリスナに転換される。 

"indefinite" 

アニメーションの開始は,その要素を対象とするハイパーリンク又はbeginElement()メソッドの呼出

289 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

しによって決定される(ハイパーリンクベースのタイミングについては,SMIL 2.1 Timing and 

Synchronization: Hyperlinks and timingを参照。)。 

SVGでは,'begin'が指定されていない場合,その時間コンテナの既定のタイミングは,オフセット値'0'

と同等である。'begin'属性が,そのリスト自体又は個々のリスト値において構文上無効である場合,単一

の'begin'の値が'indefinite'であるときと同等である。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and Synchronizationにおけるbasic timing supportの部分に記載されている。Id-value及び

event-refのための特別な構文解析規則について,Parsing timing specifiers([SMIL21]の10.4.1)も参照。 

アニメーション:不可 

dur = "<Clock-value>" | "media" | "indefinite" 

単純持続時間を指定する。その属性値には,次のうちの一つを指定することができる。 

<Clock-value> 

文書時間における単純持続時間の長さを指定する。その値は0よりも大きくなければならない。 

media 

固有のメディア持続時間として単純持続時間を指定する。これはメディアを定義する要素だけに有効で

ある。 

SVGアニメーション要素については,'media'が指定されるとその属性は無視される。 

indefinite 

単純持続時間を不定として指定する。 

そのアニメーションに'dur'属性がない場合,単純持続時間は不定である。単純持続時間が不定である場

合,補間が機能しないということに注意する(しかしながら,'set'要素には役立つかもしれない。)。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and SynchronizationにおけるDur value semanticsのセクション([SMIL21]の10.4.1)に記載

されている。 

アニメーション:不可 

end = "end-value-list" 

活性持続時間を抑制することができるアニメーションのための終了値を定義する。この属性の値は,セ

ミコロンで区切られた値のリストである。 

end-value-list ::= end-value (S? ";" S? end-value-list )? 

終了値のセミコロンで区切られたリスト。終了時間のリストの解釈については次で説明している。 

end-value ::= ( offset-value | syncbase-value | event-value | repeat-value | accessKey-value | "indefinite" ) 

そのアニメーションの活性時間の終了を記述する。 

値'indefinite'は,アニメーションの終了がendElement()メソッドの呼出しによって決定されることを指

定する。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and Synchronizationにおけるbasic timing supportの細分箇条に記載されている。Id-value及

びevent-refのための特別な構文解析規則について,Parsing timing specifiers([SMIL21]の10.4.1)も参照。 

アニメーション:不可 

min = "<Clock-value>" | "media" 

活性持続時間の最小値を指定する。その属性値には,次のどちらかを指定することができる。 

290 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

<Clock-value> 

ローカル時間で測定される活性持続時間の最小値の長さを指定する。 

その値は0よりも大きくなければならない。 

media 

固有のメディア持続時間としての活性持続時間の最小値を指定する。これはメディアを定義する要素だ

けに有効である。 

SVGアニメーション要素については,'media'が指定されるとその属性は無視される。 

'min'の省略値は'0'である。これはその活性持続時間を一切抑制しない。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and SynchronizationにおけるMore control over the active durationの細分箇条([SMIL21]の

10.4.1)に記載されている。 

アニメーション:不可 

max = "<Clock-value>" | "media" 

活性持続時間の最大値を指定する。その属性値には,次のどちらかを指定することができる。 

<Clock-value> 

ローカル時間で測定される活性持続時間の最大値の長さを指定する。 

その値は0よりも大きくなければならない。 

media 

固有のメディア持続時間としての活性持続時間の最大値を指定する。これはメディアを定義する要素だ

けに有効である。 

SVGアニメーション要素については,'media'が指定されるとその属性は無視される。 

'max'に省略値はない。省略された場合,その活性持続時間は一切抑制されない。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and SynchronizationにおけるMore control over the active durationの細分箇条([SMIL21]の

10.4.1)に記載されている。 

アニメーション:不可 

restart = "always" | "whenNotActive" | "never" 

always 

いつでもそのアニメーションを再開始することができる。これは省略値である。 

whenNotActive 

それが活性化していないときに限り(すなわち活性時間の終了後),アニメーションを再開始することが

できる。活性持続時間においてアニメーションを再開始しようとしても無視される。 

never 

親の時間コンテナにおける現在の単純持続時間の残りの間に,その要素を再開始することができない

(SVGの場合は親の時間コンテナはSVG文書片なので,文書持続時間の残りのためにアニメーションを

再開始することができない。)。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and SynchronizationにおけるThe restart attributeの細分箇条([SMIL21]の10.4.1)に記載さ

れている。 

アニメーション:不可 

291 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

repeatCount = "<number>" | "indefinite" 

アニメーション関数の反復の回数を指定する。それは次のような属性値をもつことができる。 

<number> 

これはその反復回数を指定する"浮動小数点"数値(十進法)である。小数値として表現される部分的な

反復を含むことができる。小数値は,単純持続時間の部分を記述する([SMIL21]の3.5.2)。その値は0よ

りも大きくなければならない。 

indefinite 

このアニメーションは,無制限に(すなわち,文書の終了まで)反復するように定義される。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and SynchronizationにおけるRepeating elementsの細分箇条([SMIL21]の10.4.1)に記載さ

れている。 

アニメーション:不可 

repeatDur = "<Clock-value>" | "indefinite" 

反復における全持続時間を指定する。それは次のような属性値をもつことができる。 

<Clock-value> 

アニメーション関数f(t)([SMIL21]の3.3.1)を反復するための文書時間における持続時間を指定する。 

"indefinite" 

このアニメーションは,無制限に(すなわち,文書の終了まで)反復するように定義される。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and SynchronizationにおけるRepeating elementsの細分箇条([SMIL21]の10.4.1)に記載さ

れている。 

アニメーション:不可 

fill = "freeze" | "remove" 

この属性は次のような値をもつことができる。 

freeze 

アニメーション効果f(t)([SMIL21]の3.3.1)を定義し,その効果値を活性持続時間の最終値に凍結する。

個別のアニメーションでは,使用される凍結値は,活性持続時間の終わりのすぐ前のアニメーションの値

であることに注意する。そのアニメーション効果は,文書持続時間の残りの間[又はそのアニメーション

が再開始されるまで(The restart attribute [SMIL21]の10.4.1を参照)]“凍結”される。 

remove 

そのアニメーションの活性持続時間が終了したとき,そのアニメーション効果を取り除く(もう適用さ

れない。)。そのアニメーションの活性時間が終了した後は,アニメーションは対象に影響を与えない[ア

ニメーションが再開始された場合を除く(The restart attribute [SMIL21]の10.4.1を参照)。]。 

これは省略値である。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Timing and SynchronizationにおけるExtending an elementの細分箇条([SMIL21]の10.4.1)に記載

されている。 

アニメーション:不可 

SMIL 2.1では,上記の属性に関連した細かい処理規則が定義されている。 

イベントベース要素 

292 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

イベントベース要素は参考(informative)である。 

イベントベース要素の規定の定義については,SMIL 2.1 Animation Modules([SMIL21]の箇条3)及びこ

の規格の箇条12を参照。アニメーション要素及び'discard'要素では,既定のイベントベース要素はアニメ

ーションの対象('xlink:href'属性がある要素については対象IRI,そうでなければその親要素)である。全

てのSVGメディア要素(例 'audio','video',及び'animation')のための既定のイベントベース要素は,そ

の要素自体である。Id-valueによって前書きされる全てのイベント値については,イベントベース要素は

そのIDが示す要素である。 

注記 描画されない要素(例 'audio'要素)は利用者が開始したポインタイベントを受けることがで

きない。したがって,制作者が利用者インタフェースイベントを使用するときには,描画され

る要素をイベントベース要素に指定することが望ましい。 

時計値 

時計値は,SMIL 2.1([SMIL21]の10.4.1)で定義される時計値の構文の部分集合化された構文をもつ。 

Clock-val ::=  

   Timecount-val 

Timecount-val ::=  

   Timecount ("." Fraction)? (Metric)? 

Metric ::=  

   "s"  

   | "ms" 

Fraction ::=  

   DIGIT+ 

Timecount ::=  

   DIGIT+ 

DIGIT ::=  

   [0-9] 

timecount値については,既定の接尾辞は"s"(秒)である。時計値では埋込みの空白は認められず,先頭

及び末尾の空白文字は無視される。 

時計値は文書時間を記述する。 

正式な時計値の例を次に示す。 

• 

Timecount値: 

  30s     = 30秒 

  5ms     = 5ミリ秒 

  12.467  = 12秒と467ミリ秒 

小数値は単純に秒の浮動小数点定義(10進数)である。したがって, 

00.5s = 500ミリ秒 

16.2.9 時間の経過に伴いアニメーション値を定義する属性 

次の属性は'animate','animateMotion','animateColor'及び'animateTransform'要素に共通である。これらの

background image

293 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性は,時間の経過に伴い対象属性又はプロパティに割り当てられる値を定義する。次の属性を用いて,

主要フレームの相対的なタイミングと特定の値の間で使用する補間手法とを制御する。 

スキーマ: animatevalue  

    <define name='svg.AnimateToCommon.attr' combine='interleave'> 

      <optional><attribute 

name='to' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

    </define> 

    <define name='svg.AnimateValueCommon.attr'> 

      <ref name='svg.AnimateToCommon.attr'/> 

      <optional> 

        <attribute name='calcMode' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value>discrete</value> 

            <value>linear</value> 

            <value>paced</value> 

            <value>spline</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional><attribute 

name='values' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='keyTimes' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='keySplines' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='from' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='by' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

    </define> 

属性の定義: 

calcMode = "discrete" | "linear" | "paced" | "spline" 

そのアニメーションのための補間モードを指定する。次のような値をもつことができる。省略値は'linear'

であるが,'animateMotion'は例外(省略値'paced')である。しかしながら,その対象属性が補間をサポート

していない場合は(例 <string>型の属性のアニメーション化),'calcMode'属性は無視され,離散的なアニ

メーションが使用される。 

discrete 

そのアニメーション関数は,一切補間を適用せず,ある値から次の値にジャンプすることの指定。 

294 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

linear 

値の間における単純線形補間がアニメーション関数の計算に使われる。 

paced 

そのアニメーションを通して一定のペースの変化を生成するための補間を定義する。これは,スカラ数

値型及び16.2.7に示される型だけを含む適切な距離関数が定義されているデータ型のためだけにサポート

されている。'paced'を指定すると,全ての'keyTimes'及び'keySplines'は無視される。利用者エージェントに

よっては予測できない振る舞いをする可能性があるので,制作者は距離関数が定義されていない型におけ

るペース付けアニメーションの使用はしないほうがよい。 

spline 

3次ベジェスプライン(Bézier spline calculation)によって定義された時間関数に従って,'values'リストのあ

る値から次の値への補間を行う。そのスプラインの点は'keyTimes'属性において指定され,各区間に対する

制御点は'keySplines'属性において指定される。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるSimple animation function attributesの細分箇条([SMIL21]の3.5.2)に

記載されている。 

アニメーション:不可 

values = "<list>" 

一つ以上の値のセミコロンで区切られたリスト。ベクトル値の属性は,'attributeType'ドメインのベクト

ル構文を用いてサポートされる。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるSimple animation function attributesの細分箇条([SMIL21]の3.5.2)に

記載されている。SMIL仕様書によって,先頭及び末尾の空白,また,セミコロンセパレータの前後の空

白が認められていて,それらは無視されることに注意する。 

アニメーション:不可 

keyTimes = "<list>" 

アニメーションのペース付けを制御するために使われる時間値のセミコロンで区切られたリスト。その

リストにおける各時間は'values'属性のリストの値に対応し,いつその値がアニメーション関数に使用され

るのかを定義する。'keyTimes'リストの各時間値は,0及び1(それらを含む。)の間の浮動小数点値として

指定され,そのアニメーション要素の単純持続時間に対するオフセットの割合を表現する。 

'keyTimes'のリストが指定された場合,その'keyTimes'リストにおける値の数は,'values'リストにおける値

の数と同じでなければならない。 

次にくる時間値は,前にある時間値と同じかそれよりも大きくなければならない。 

'keyTimes'リストの意味は,その補間モードに依存する。 

• 

線形及びスプラインアニメーション(spline animation)については,そのリストにおける最初の時

間値は0でなければならず,そのリストにおける最後の時間値は1でなければならない。それぞれ

の値に関連する'keyTimes'値は,いつその値を設定するのかを定義する。値は'keyTimes'の間で補間

される。 

• 

離散的なアニメーションについては,そのリストにおける最初の時間値は0でなければならない。

それぞれの値に関連する時間は,いつその値を設定するのかを定義する。'keyTimes'で定義された次

の時間になるまで,アニメーション関数はその値を用いる。 

295 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

補間モードが'paced'のとき,'keyTimes'属性は無視される。 

'keyTimes'属性が上記のような条件に適合しない値をもつ場合,その'keyTimes'属性はサポート外の値を

もっていることになり,その属性が指定されていないときと同じように処理される。 

その単純持続時間が不定の場合,どのような'keyTimes'の指定も無視される。 

ペース付けアニメーションの補間は幾つかの値の型については指定されていないので,制作者は算出さ

れた'keyTimes'を用いて'linear'のアニメーション補間を実施し,これらの型のために特定の補間の振る舞い

を実現することが望ましい。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるCalculation mode attributesの細分箇条([SMIL21]の3.8.1)に記載され

ている。 

アニメーション:不可 

keySplines = "<list>" 

区間ペース付けを制御する3次ベジェ関数を定義する,その'keyTimes'のリストに関連したベジェ制御点

の集合。この属性の値は,制御点記述のセミコロンで区切られた値のリストである。それぞれの制御点記

述は四つの値の集合であり(x1 y1 x2 y2),一つの時間セグメントに対するベジェ制御点を記述する。 

SMIL 2.1では,任意で空白を伴うコンマ,又は空白だけを使用してこれらの値を区切ることが認められて

いることに注意する。関連セグメントを定義する'keyTimes'値はベジェ"アンカー点"であり,'keySplines'値

は制御点である。したがって,制御点の集合の数は,'keyTimes'よりも一つ少なくなければならない。 

その値は0〜1の範囲になければならない。 

'calcMode'が'spline'に設定されていなければ,この属性は無視される。 

'keySplines'属性が上記のような条件に適合しない値をもつ場合,その'keySplines'属性はサポート外の値を

もっていることになり,その属性が指定されていないときと同じように処理される。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるCalculation mode attributesの細分箇条([SMIL21]の3.8.1)に記載され

ている。 

アニメーション:不可 

from = "<value>" 

アニメーションの開始値を指定する。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるSimple animation functions specified by from, to and byの細分箇条

([SMIL21]の3.5.4)に記載されている。 

アニメーション:不可 

to = "<value>" 

アニメーションの終了値を指定する。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるSimple animation functions specified by from, to and byの細分箇条

([SMIL21]の3.5.4)に記載されている。 

アニメーション:不可 

by = "<value>" 

アニメーションのための相対的なオフセット値を指定する。 

background image

296 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるSimple animation functions specified by from, to and byの細分箇条

([SMIL21]の3.5.4)に記載されている。 

アニメーション:不可 

SMIL 2.1では,上記の属性に関連した細かい処理規則が定義されている。 

'values','from','to'及び'by'属性で指定したアニメーション値は,指定した対象属性のための正当な値で

なければならない。先頭及び末尾の空白,また,セミコロンセパレータの前後の空白は無視される。正当

な値がない場合にはサポート外とみなされ,それらが指定されていないときと同じように処理される。 

'values'のリストが使用されている場合,それらの値はそのアニメーションの過程において順番に適用さ

れる。'values'属性を指定すると,全ての'from','to',又は'by'属性の値は無視される。 

from,to,及びbyアニメーションの変化形の処理規則('from','to',及び'by'属性のうちどれが他に優先

されるのかなど)については,Simple animation functions specified by from, to and byの細分箇条([SMIL21]

の3.5.4)に記載されている。 

プロパティをアニメーション化するとき,補間は算出値に対して実行される。したがって,数値による

算出値をもたらすinheritのようなキーワードが,補間されるアニメーションの値リストに含まれていても

よい。例えば,そのinherit値がペイントサーバ参照,システムペイント,又は値noneに対して算出され

ていない場合,values="red; inherit; blue"を用いた'fill'プロパティの線形アニメーションが可能である。 

'keySplines'属性の解釈について次の図に示す。それぞれのダイヤグラムは,単一の区間(すなわち,

'keyTimes'及び'values'のリストにおける関連値のペアとペアとの間)のための'keySplines'設定の効果を示し

ている。横軸は,その区間における補間の単位進行のための入力値(すなわち,与えられた区間に沿って

補間が進行するペース)として考えることができる。縦軸は,'keySplines'関数がもたらす単位進行の結果

としての値である。別のいい方で説明すると,横軸はその区間についての入力単位時間であり,縦軸は出

力単位時間である。SMIL 2.1 Timing and SynchronizationにおけるTiming and real-world clock timesの細分箇

条([SMIL21]の10.4.3)も参照。 

keySplines="0 0 1 1" 

(既定) 

keySplines=".5 0 .5 1" 

background image

297 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

keySplines="0 .75 .25 1" 

keySplines="1 0 .25 .25" 

'keySplines'の例 

この計算の説明のために,簡単な例を考えてみる。 

<animate dur="4s" values="10; 20" keyTimes="0; 1" 

     calcMode="spline" keySplines="{as in table}"/> 

上記の四つの事例において'keySplines'値を使用すると,アニメーションが進行する場合のおおまかな補

間値を次に示す。 

keySplines値 

初期値 

1秒後 

2秒後 

3秒後 

最終値 

0 0 1 1 

10.0 

12.5 

15.0 

17.5 

20.0 

.5 0 .5 1 

10.0 

11.0 

15.0 

19.0 

20.0 

0 .75 .25 1 

10.0 

18.0 

19.3 

19.8 

20.0 

1 0 .25 .25 

10.0 

10.1 

10.6 

16.9 

20.0 

ベジェスプライン(Bézier spline calculation)計算の正式な定義については,[FOLEY-VANDAM] 488-491

ページを参照。 

16.2.10 

アニメーションが加算的であるかどうかを制御する属性 

アニメーションを絶対値として定義するよりも,属性値に対するオフセット又は差分として定義するほ

うがしばしば有用である。ある"増大する"単純なアニメーションは,オブジェクトの幅を10単位広げるこ

とができる。 

<rect width="20" ...> 

  <animate attributeName="width" from="0" to="10" dur="10s" 

           additive="sum"/> 

</rect> 

反復するアニメーションを作成するとき,反復のたびに蓄積させて前の結果の上にそれを作ることがし

ばしば有用である。次の例では,アニメーションの反復のたびに増大してゆく長方形を示している。 

<rect width="20" ...> 

  <animate attributeName="width" from="0" to="10" dur="10s" 

           additive="sum" accumulate="sum" repeatCount="5"/> 

</rect> 

最初の反復が終了したとき,長方形の幅は30単位である。2回目の反復が終了したとき,長方形の幅は

background image

298 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

40単位である。5回目の反復が終了したとき,長方形の幅は70単位である。 

加算的アニメーションに関する詳細については,Additive animation([SMIL21]の3.3.6)を参照。累積的

アニメーションに関する詳細については,Cumulative animation([SMIL21]の3.3.5)を参照。 

次の属性は'animate','animateMotion','animateColor'及び'animateTransform'要素に共通である。 

スキーマ: animateaddition  

    <define name='svg.AnimateAdditionCommon.attr'> 

      <optional> 

        <attribute name='additive' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value>replace</value> 

            <value>sum</value> 

          </choice> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='accumulate' svg:animatable='false' svg:inheritable='false'> 

          <choice> 

            <value>none</value> 

            <value>sum</value> 

          </choice> 

        </attribute> 

      </optional> 

    </define> 

属性の定義: 

additive = "replace" | "sum" 

そのアニメーションが加算的であるかどうかを制御する。 

sum 

そのアニメーションは,他の優先度の低いアニメーション及び属性の基本値に加えられることを指定す

る。 

replace 

そのアニメーションは,他の優先度の低いアニメーション及び属性の基本値を上書きすることを指定す

る。これは省略値である。しかしながら,アニメーション値の属性'by'及び'to'によってもその振る舞いは影

響を受ける。これについては,Simple animation functions specified by from, to and byの細分箇条([SMIL21]

の3.5.4)に記載されている。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるAnimation effect function attributesの細分箇条([SMIL21]の3.5.3)に記

載されている。 

アニメーション:不可 

accumulate = "none" | "sum" 

background image

299 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

そのアニメーションが累積的であるかどうかを制御する。 

sum 

それぞれの反復(一回目より後)は,前の反復による最終値に基づいて行われることを指定する。 

none 

その反復は累積しないことを指定する。これは省略値である。 

対象属性の値が加算をサポートせず,また,そのアニメーション要素が反復されない場合,この属性は

無視される。 

アニメーション関数が'to'属性だけを用いて指定されている場合,この属性は無視される。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるAnimation effect function attributesの細分箇条([SMIL21]の3.5.3)に記

載されている。 

アニメーション:不可 

16.2.11 

継承 

SVGでは,属性及びプロパティの両方をアニメーション化することができる。与えられた属性又はプロ

パティをその子孫が継承することができる場合,'g'要素のような親要素におけるアニメーションは,その

アニメーションの進行に伴いその属性又はプロパティのアニメーション値を子孫要素に伝ぱ(播)

(bubbling)する。このようにして,子孫要素はその祖先からアニメーション属性及びプロパティを継承

することができる。 

16.2.12 

'animate'要素 

'animate'要素は,時間の経過に伴い単一の属性又はプロパティをアニメーション化するために用いられ

る。例えば,ある長方形を5秒の間に少しずつ消して行きたい場合,次のように指定することができる。 

<rect> 

  <animate attributeType="CSS" attributeName="fill-opacity" 

         from="1" to="0" dur="5s" repeatCount="indefinite" /> 

</rect> 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるThe animate elementの細分箇条([SMIL21]の3.6.1)に記載されてい

る。 

スキーマ: animate  

    <define name='animate'> 

      <element name='animate'> 

        <ref name='animate.AT'/> 

        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='animate.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

background image

300 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <ref name='svg.AnimateCommon.attr'/> 

      <ref name='svg.AnimateAttributeCommon.attr'/> 

      <ref name='svg.AnimateTiming.attr'/> 

      <ref name='svg.AnimateValueCommon.attr'/> 

      <ref name='svg.AnimateAdditionCommon.attr'/> 

    </define> 

'animate'要素を使用してアニメーション化することができる属性及びプロパティのリストについては,

16.2.18を参照。 

'animate'要素によって色値をアニメーション化する場合は,'animateColor'要素と同じ計算方法が使用され

る。つまり,'animate'及び'animateColor'は,色をアニメーション化するときに同じ振る舞いをする。 

16.2.13 

'set'要素 

'set'要素は,指定された持続時間において,単純に属性の値を設定するための簡単な方法を提供する。そ

れは大半の属性型をサポートしていて,文字列又はブール値のような補間をすることができない属性もサ

ポートしている。'set'要素は加算的又は累積的アニメーションを実行することができない。'additive'又は

'accumulate'属性を指定しても無視される。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるThe set elementの細分箇条([SMIL21]の3.6.2)に記載されている。 

スキーマ: set  

    <define name='set'> 

      <element name='set'> 

        <ref name='set.AT'/> 

        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='set.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.AnimateCommon.attr'/> 

      <ref name='svg.AnimateAttributeCommon.attr'/> 

      <ref name='svg.AnimateTiming.attr'/> 

      <ref name='svg.AnimateToCommon.attr'/> 

    </define> 

属性の定義: 

to = "<value>" 

'set'要素の持続時間における属性の値を指定する。その値は,アニメーション化する対象の属性に従った

適切な型でなければならない。 

アニメーション:不可 

'set'要素を使用してアニメーション化することができる属性及びプロパティのリストについては,16.2.8

background image

301 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

を参照。 

16.2.14 

'animateMotion'要素 

'animateMotion'要素によって,その対象の要素がモーションパスに沿って移動する。 

'transform'属性をとることができる全ての要素は,モーションアニメーションをそれに適用してもよい。

これらの要素のリストについては,附属書Lを参照。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるThe animateMotion elementの細分箇条([SMIL21]の3.6.3)に記載され

ている。 

スキーマ: animateMotion  

    <define name='animateMotion'> 

      <element name='animateMotion'> 

        <ref name='animateMotion.AT'/> 

        <zeroOrMore> 

          <ref name='animateCommon.CM'/> 

        </zeroOrMore> 

        <optional> 

          <ref name='mpath'/> 

        </optional> 

        <zeroOrMore> 

          <ref name='animateCommon.CM'/> 

        </zeroOrMore> 

      </element> 

    </define> 

    <define name='animateMotion.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.AnimateCommon.attr'/> 

      <ref name='svg.AnimateTiming.attr'/> 

      <ref name='svg.AnimateAdditionCommon.attr'/> 

      <ref name='svg.AnimateValueCommon.attr'/> 

      <optional><attribute 

name='path' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='keyPoints' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='rotate' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

      <optional><attribute 

name='origin' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute></optional> 

    </define> 

302 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性の定義: 

calcMode = "discrete" | "linear" | "paced" | "spline" 

そのアニメーションのための補間モードを指定する。上記の'calcMode'属性の一般定義を参照。一つだけ

異なる点は,'animateMotion'のための'calcMode'属性の省略値は'paced'である。 

アニメーション:不可 

path = "<path-data>" 

'path'要素における'd'属性と同じ形式で表現され,同じように解釈されるモーションパス。モーションパ

スのアニメーションは,時間の経過に伴い算出されたx値及びy値によって,現在の利用者座標系におけ

るx軸及びy軸に沿った文字変換をする対象の要素のために,そのCTMに対して補足的な変換行列を右

から乗じる効果をもつ。 

アニメーション:不可 

keyPoints = "<list-of numbers>" 

0と1との間の浮動小数点値によるセミコロンで区切られたリストを得る。その対象要素が,対応する

'keyTimes'値で指定した時間において,モーションパスに沿ってどれくらい移動するのかを示す。距離計算

では,その利用者エージェントにおけるパスに沿った距離のアルゴリズムが使用される。そのリストにお

けるそれぞれの進行値は,'keyTimes'属性リストにおける値に対応している。 

'keyPoints'のリストが指定された場合,その'keyPoints'リストにおける値の数は,'keyTimes'リストにおけ

る値の数と同じでなければならない。 

'keyPoints'属性が上記のような条件に適合しない値をもつ場合,その属性はサポート外の値をもっている

ことになり,アニメーション要素はその属性が指定されていないときと同じように処理される。 

アニメーション:不可 

rotate = "auto" | "auto-reverse" | "<number>"  

'rotate'属性は,現在の利用者座標系の原点について回転変換を適用するために,対象要素のCTMに補足

的な変換行列を右から乗じる。回転変換は,'path'属性によって計算される補足的な文字変換の後に適用さ

れる。 

auto 

その対象要素は,モーションパスの方向の角度(すなわち,方向の接線ベクトル)まで,時間の経過と

ともに回転することを示す。 

auto-reverse 

その対象要素は,モーションパスの方向の角度(すなわち,方向の接線ベクトル)に180度を足した角

度まで,時間の経過とともに回転することを示す。 

<number> 

指定された角度をその回転角に用いて,その対象要素に一定の回転変換を適用することを示す。 

省略値:'0'  

アニメーション:不可 

origin = "default" 

'origin'に関するSMIL 2.1の定義([SMIL21]の3.6.3)を参照。それはSVGにおいて一切効果をもたず,

指定された場合には値'default'をとらなければならない。 

アニメーション:不可 

'animateMotion'については,'from','by','to',及び'values'の指定値は,x座標及びy座標を区切る空白又

303 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

は単一のコンマをもつ(x, y)座標組から構成される。例えば,from="33,15"と指定すると,x座標値が33で

y座標値が15である。 

'values'属性が与えられた場合,それは(x, y)座標組のリストから構成される。その座標値は,少なくとも

一つの空白文字又はコンマによって区切られる。セパレータの周りに追加的な空白を置くことも認められ

ている。例えば,values="10,20;30,20;30,40"は,三つの座標の組のリストを指定している。それぞれの座標

は<length>によって表される。属性'from','by','to',及び'values'は,その対象要素の利用者座標系において,

モーションパスを表す図形を指定する。 

SVGのパスデータ命令を用いたモーションパスの定義において,二つの選択肢を利用することができる。 

• 

'path'属性。これはSVGのパスデータ命令を使用して'animateMotion'要素にモーションパスを直接定

義する。 

• 

'animateMotion'要素の'mpath'子要素。これによってモーションパスの定義として外部の'path'要素を参

照することができる。 

'animateMotion'又は'mpath'要素に対するスタイル付けは,定義されたパスに一切影響を与えないことに注

意する。例えば,破線ストロークを指定したとしても,そのアニメーションが破線から破線へ飛ぶという

ようなことはない。 

その図形の(x, y)点は,対象の要素のCTMに対して右から乗じられる補足的な変換行列を提供する。そ

の対象の要素では,時間の経過に伴い算出されたその図形の(x, y)値によって,現在の利用者座標系におけ

るx,y軸に沿った文字変換が実施される。したがって,現在の利用者座標系の原点に対するモーションパ

スのオフセットによって,その対象要素は時間の経過とともに文字変換される。その補足的な変換は,対

象要素の'transform'属性による全ての変換に対して,又はその要素を対象とする'animateTransform'要素によ

るその属性への全てのアニメーションに対して適用される。 

'additive'及び'accumulate'属性は,'animateMotion'要素に適用される。同時に同じ対象要素を参照する複数

の'animateMotion'要素は,互いについて加算的であることができる。しかしながら,'animateMotion'要素か

ら生じる変換は,その対象要素の'transform'属性又は'animateTransform'要素によって,どのような変換に対

しても補足的である。 

'animateMotion'のための既定の補間モードは'paced'である。これは,指定されたパスに沿った一定の速度

によるモーションを生み出す。'animateMotion'要素は加算的になることができるものの,二つ以上の'paced'

(等速の)アニメーションを加えたとしても,一定の速度をもつ結合したモーションアニメーションには

ならない可能性があることに注意する。 

ある'animateMotion'要素が'calcMode'として'discrete','linear',又は'spline'をもち,かつ,'keyPoints'属性が

指定されていない場合には,値の数は,そのパスによって定義された点の数として定義される。ただし,

そのパスデータに"move to"命令がある場合を除く。そのパスにおける"move to"命令(すなわち,最初のパ

スデータ命令以外)は,その持続時間を分割するとき,又は'keyTimes','keySplines',及び'keyPoints'値を関

連させるときには,追加的な点として数えない。'calcMode'が'paced'の場合には,全ての"move to"命令は長

さ0(すなわち,それらは常に即座に発生する。)であるとみなされ,それらはペース付けを計算する場合

に考慮されない。 

モーションパスに沿った速度の制御をより柔軟に実行できるように,'keyPoints'属性を用いて,それぞれ

の'keyTimes'の指定値に関してモーションパスに沿った進行を指定することができる。'keyPoints'を指定す

ると,'keyTimes'は,'values'属性の配列で指定される点又はモーションパス上の点ではなく,'keyPoints'の値

に適用される。 

background image

304 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

'animateMotion'の上書き規則は次のとおりである。モーションパスの定義では,'mpath'要素は'path'属性を

上書きし,'path'属性は'values'を上書きし,'values'は'from','by'及び'to'を上書きする。'keyTimes'属性に対応

する点を決定する場合には,'keyPoints'属性は'path'及び'mpath'を上書きし,'path'及び'mpath'は'values'を上書

きし,'values'は'from','by'及び'to'を上書きする。 

持続時間durであるモーションパスアニメーションにおけるどの時間tにおいても,そのモーションパ

スに沿って算出される座標組(x, y)は,利用者エージェントのパスに沿った距離のアルゴリズムを用いて,

そのモーションパスに沿った距離(t / dur)である点(x, y)を見つけることによって決定される。 

次の例には,モーションパスアニメーションの間に計算される補足的な変換行列を示す。 

例19̲02.svgでは,モーションパスに沿って移動する三角形が示されている。 

例: 19̲02.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     version="1.2" baseProfile="tiny" width="5cm" height="3cm" viewBox="0 0 500 300"> 

  <desc>Example 19̲02 - demonstrate motion animation computations</desc> 

  <rect x="1" y="1" width="498" height="298" 

        fill="none" stroke="blue" stroke-width="2"/> 

  <!-- Draw the outline of the motion path in blue, along 

          with three small circles at the start, middle and end. --> 

  <path xml:id="path1" d="M100,250 C 100,50 400,50 400,250" 

        fill="none" stroke="blue" stroke-width="7.06"/> 

  <circle cx="100" cy="250" r="17.64" fill="blue"/> 

  <circle cx="250" cy="100" r="17.64" fill="blue"/> 

  <circle cx="400" cy="250" r="17.64" fill="blue"/> 

  <!-- Here is a triangle which will be moved about the motion path. 

       It is defined with an upright orientation with the base of 

       the triangle centered horizontally just above the origin. --> 

  <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" 

        fill="yellow" stroke="red" stroke-width="7.06"> 

    <!-- Define the motion path animation --> 

    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"> 

       <mpath xlink:href="#path1"/> 

    </animateMotion> 

  </path> 

</svg> 

background image

305 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

0秒 

3秒後 

6秒後 

次に,モーションパスアニメーションの効果を得るために適用される補足的な変換行列を示す。 

0秒 

3秒後 

6秒後 

モーションパスに沿った移動による
補足的変換 

translate(100,250) 

translate(250,100) 

translate(400,250) 

rotate="auto"による補足的変換 

rotate(-90) 

rotate(0) 

rotate(90) 

16.2.15 'mpath'要素 

'mpath'要素を用いることによって,既存の'path'要素を参照してモーションアニメーションパスとして使

用することができる。それは,パスを提供した単なる'animateMotion'要素の子として現れてもよい。 

例mpath01.svgには,描画された既存の'path'要素を参照している'mpath'要素の使い方を示している。も

し'mpath'がなかったら,パスデータは'animateMotion'要素の'path'属性において繰り返し記述しなければなら

ない。 

例: mpath01.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg xmlns="http://www.w3.org/2000/svg"  

     xmlns:xlink="http://www.w3.org/1999/xlink"   

     version="1.2" baseProfile="tiny" viewBox="0 0 80 60"> 

  <desc>Example demonstrating the use of the 'mpath' element.</desc> 

  <path xml:id="mpathRef" d="M15,43 C15,43 36,20 65,33" fill="none" stroke="black" 

stroke-width="1"/> 

  <circle r="5" fill="blue"> 

    <animateMotion begin="0s" dur="6s" calcMode="linear" fill="freeze"> 

      <mpath xlink:href="#mpathRef"/> 

    </animateMotion>         

  </circle> 

</svg> 

2秒後 

4秒後 

6秒後 

スキーマ: mpath  

    <define name='mpath'> 

      <element name='mpath'> 

background image

306 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        <ref name='mpath.AT'/> 

        <zeroOrMore><ref name='svg.Desc.group'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='mpath.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.XLinkRequired.attr'/> 

    </define> 

属性の定義: 

xlink:href = "<IRI>" 

そのモーションパスを定義する'path'要素へのIRI参照。不正なIRI参照はサポート外の値である。省略

値は空の文字列である。属性値が空の場合,それでもアニメーションのタイミングは実行されるが,モー

ションアニメーションはその対象要素に一切適用されない。 

アニメーション:不可 

16.2.16 

'animateColor'要素 

'animateColor'要素は,時間の経過に伴う色の推移を指定する。 

この規格において明示的に言及されている全てのSVG特有の規則を除けば,この属性の規定の定義は,

SMIL 2.1 Animation ModulesにおけるThe animateColor elementの細分箇条([SMIL21]の3.6.4)に記載され

ている。 

スキーマ: animateColor  

    <define name='animateColor'> 

      <element name='animateColor'> 

        <ref name='animateColor.AT'/> 

        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='animateColor.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.AnimateCommon.attr'/> 

      <ref name='svg.AnimateAttributeCommon.attr'/> 

      <ref name='svg.AnimateTiming.attr'/> 

      <ref name='svg.AnimateValueCommon.attr'/> 

      <ref name='svg.AnimateAdditionCommon.attr'/> 

    </define> 

'from','by',及び'to'属性は色値をとる。それぞれの色値は'solid-color'プロパティ(<color>,currentColor,

又はinherit)と同じ構文を用いて表現されるか,又は追加的な値noneをとる。'values'属性は,それと同じ

background image

307 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

構文を使用して,色値のセミコロンで区切られたリストをもつ。 

その値に'none'がなければ,補間されたアニメーション(すなわち,'calcMode'が'linear','paced',又は'spline'

であるアニメーション)をカラーアニメーションについて実行することができる。そうでない場合には,

離散的なアニメーションしか実行することができない。 

範囲外の色値も提供することができるが,その利用者エージェントにおける処理は処理系依存になる。

利用者エージェントは,できる限り遅く色値を固定して色の範囲値を使えるようにすることが望ましいが,

システムの違いによって,異なるシステムにおいて一貫した振る舞いをさせることができない可能性があ

ることに注意する。 

'animateColor'要素を使用してアニメーション化することができる属性又はプロパティのリストについて

は,16.2.18を参照。 

16.2.17 

'animateTransform'要素 

'animateTransform'要素は対象要素の変換属性をアニメーション化し,それによってアニメーションは文

字変換,スケーリング,回転,又はわい(歪)曲を制御することができる。 

スキーマ: animateTransform  

    <define name='animateTransform'> 

      <element name='animateTransform'> 

        <ref name='animateTransform.AT'/> 

        <zeroOrMore><ref name='animateCommon.CM'/></zeroOrMore> 

      </element> 

    </define> 

    <define name='animateTransform.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.AnimateCommon.attr'/> 

      <ref name='svg.AnimateAttributeCommon.attr'/> 

      <ref name='svg.AnimateTiming.attr'/> 

      <ref name='svg.AnimateValueCommon.attr'/> 

      <ref name='svg.AnimateAdditionCommon.attr'/> 

      <ref name='svg.AnimateTypeCommon.attr'/> 

    </define> 

属性の定義: 

type = "translate" | "scale" | "rotate" | "skewX" | "skewY" 

その値を時間の経過とともに変更する変換の型を示す。'type'がサポート外の値をもつ場合(例 

type="foo",type="ref(svg)"),'animateTransform'要素は無視される。 

アニメーション:不可 

'from','by',及び'to'属性は,与えられた変換の型と同じ構文を用いて表現される値をとる。 

• 

type="translate"のとき,個々の値は<tx> [,<ty>]として表現される。 

• 

type="scale"のとき,個々の値は<sx> [,<sy>]として表現される。 

• 

type="rotate"のとき,個々の値は<rotate-angle> [<cx> <cy>]として表現される。 

308 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

• 

type="skewX"及びtype="skewY"のとき,個々の値は<skew-angle>として表現される。 

(7.6を参照)。 

'animateTransform'要素の'values'属性はセミコロンで区切られた値のリストからなり,個々の値は'from',

'by',及び'to'と同様に表現される。 

'animateTransform'のアニメーション効果は,その特定の振る舞いによって,基本値に追加されるのでは

なく,加算的な'animateTransform'アニメーションの基本値に対して右から乗じられる(次を参照)。 

from-to,from-by,及びbyアニメーションは,対応するvaluesアニメーションと同等になるよう,SMIL

で定義されている。SMIL 2.1 Animation ModulesにおけるSimple animation functions specified by from, to and 

byの細分箇条([SMIL21]の3.5.4)を参照。しかしながら,toアニメーションは,加算的で非加算的でも

ある混合された振る舞いをする[SMIL 2.1 Animation ModulesにおけるTo animationの細分箇条([SMIL21]

の3.5.4)を参照]。toアニメーションは,基本値から'to'の属性値までのスムーズな変化を得るための特定

機能を提供する。しかし,これは数学的に(右から乗じられる)加算的変換アニメーションにおける必要

条件と矛盾する。したがって,この規格では,'animateTransform'におけるtoアニメーションの振る舞いは

定義されていない。制作者が希望どおりの変換アニメーションを実現するためには,from-to,from-by,by,

又はvaluesアニメーションを使用することが望ましい。 

'calcMode'が値'paced'をもつとき,変換のための"距離"の計算については,16.2.7を参照。 

あるアニメーションが活性化しているとき,非加算的な'animateTransform'(すなわち,additive="replace")

は,特定の属性値を'animateTransform'によって定義された変換と取り替える効果をもつ。加算的アニメー

ション(すなわち,additive="sum")は,基本値を表す変換のベース集合に対してこの'animateTransform'で

定義した変換に対応する変換行列を右から乗じる効果をもつ。これを次で説明する。 

<rect transform="skewX(30)" ...> 

  <animateTransform attributeName="transform" attributeType="XML" 

                    type="rotate" from="0" to="90" dur="5s" 

                    additive="replace" fill="freeze"/> 

  <animateTransform attributeName="transform" attributeType="XML" 

                    type="scale" from="1" to="2" dur="5s" 

                    additive="replace" fill="freeze"/> 

</rect> 

上記の部分コードでは,どちらのアニメーションもadditive="replace"なので,最初のアニメーションは

その長方形自体における変換を上書きし,二番目のアニメーションは最初のアニメーションの変換を上書

きする。したがって,時間が5秒のとき,これら二つのアニメーションの視覚効果は次の静的な長方形と

同じである。 

<rect transform="scale(2)" .../> 

また別の例を考えてみる。 

<rect transform="skewX(30)" ...> 

  <animateTransform attributeName="transform" attributeType="XML" 

                    type="rotate" from="0" to="90" dur="5s" 

                    additive="sum" fill="freeze"/> 

309 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  <animateTransform attributeName="transform" attributeType="XML" 

                    type="scale" from="1" to="2" dur="5s" 

                    additive="sum" fill="freeze"/> 

</rect> 

この部分コードでは,どちらのアニメーションもadditive="sum"なので,最初のアニメーションではそ

の長方形自体の全ての変換に対してその変換が右から乗じられ,二番目のアニメーションでは最初のアニ

メーションの全ての変換に対してその変換が右から乗じられる。したがって,時間が5秒のとき,これら

二つのアニメーションの視覚効果は次の静的な長方形と同じである。 

<rect transform="skewX(30) rotate(90) scale(2)" .../> 

'animateTransform'要素を使用してアニメーション化することができる属性又はプロパティのリストにつ

いては,16.2.18を参照。 

16.2.18 

アニメーション化することができる属性及びプロパティ 

この規格のそれぞれの属性又はプロパティでは,アニメーション要素によってそれらをアニメーション

化することができるのかどうかが示されている。アニメーション化することができる属性及びプロパティ

は次のように示されている。 

アニメーション:可 

一方,アニメーション化することができない属性及びプロパティは次のように示されている。 

アニメーション:不可 

SVGでは,それがサポートしている様々な属性及びプロパティのための基本データ型の集合が定義され

ている。アニメーション化することができる属性及びプロパティについて,次の表では,それぞれの基本

データ型をアニメーション化するためにはどのアニメーション要素を使用することができるのかを示して

いる。 

あるアニメーションにおける指定値,及び,与えられた属性又はプロパティの算出値を,全て数値に変

換することができる場合,加算的アニメーションは可能である。しかしながら,そのアニメーション又は

ベース値が,数値に変換することができない一つ以上のキーワード値を使っている場合,加算的アニメー

ションは不可能である。 

次の例では,'fill'プロパティは基本値currentColorをもち,redから#DDFまでアニメーション化される。

'color'プロパティの値はyellowである。 

<rect color="yellow" fill="currentColor"> 

  <animateColor attributeName="fill" from="red" to="#DDF"  

                begin="1s" dur="5s" fill="freeze" additive="sum"/> 

</rect> 

このアニメーションは加算的になることができる。なぜならば,'fill'プロパティの算出値はyellowで,そ

れを数値(255, 255, 0)であるRGBカラーに変換することができるからである。同様に,キーワードredは数

値(255, 0, 0)のRGBカラーに変換することができる。値#DDFも(221, 221, 255)に対応している。これらい

ずれかの値がnone又はurl(#foo)のような数値表現に変換することができないキーワードであった場合,こ

のアニメーションは加算的になることができない。 

background image

310 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

データ型 

加算的 'animate' 

'set' 

'animate 

Color' 

'animate 

Transform' 

備考 

<color> 

○ 

○ 

○ 

○ 

× 

それぞれの値をRGBカラーに変
換することができる場合に限り
加算的になる。 

<coordinate> 

○ 

○ 

○ 

× 

× 

<integer> 

○ 

○ 

○ 

× 

× 

<length> 

○ 

○ 

○ 

× 

× 

<list-of-Ts> 

× 

○ 

○ 

× 

× 

<number> 

○ 

○ 

○ 

× 

× 

<paint> 

○ 

○ 

○ 

○ 

× 

それぞれの値をRGBカラーに変
換することができる場合に限り
加算的になる。 

<transform> 

○ 

× 

× 

× 

○ 

加算的とは,ある変換がその基
本値を表す変換のベース集合に
対して右から乗じられることを
意味する。 

<IRI> 

× 

○ 

○ 

× 

× 

アニメーション化ができる属
性及びプロパティで使用され
るその他全てのデータ型 

× 

○ 

○ 

× 

× 

上の表で加算的アニメーションになることができるとされている全ての型は,累積的アニメーションに

もなることができる。 

上の表から逸脱した内容,並びに,特定の属性及びプロパティのアニメーション機能に関するその他の

特別な注意事項については,この規格においてその属性又はプロパティを定義している細分箇条に記載さ

れている。 

加算的アニメーション要素が属性又はプロパティをアニメーション化している間にその属性又はプロパ

ティの値が変更される場合,そのアニメーションは新しい値に動的に適応しなければならない。 

16.3 SVG DOMを用いたアニメーション 

例dom̲animate.svgには,DOMを用いた単純なアニメーションを示す。 

例: dom̲animate.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     version="1.2" baseProfile="tiny" 

     width="4cm" height="2cm" viewBox="0 0 400 200"> 

  <desc>A simple animation using the uDOM and the Timer interface of the uDOM.</desc> 

  <script type="application/ecmascript"><![CDATA[ 

    var timeValue = 0; 

    var timerIncrement = 50; 

    var maxTime = 5000; 

background image

311 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    var textElement; 

    var svgRoot; 

    var mytimer; 

    // A listener for the timer 

    function someListener(evt) { 

      showAndGrowElement(); 

    } 

    function init() { 

      textElement = document.getElementById("svgtext"); 

      svgRoot = document.documentElement; 

      launchTimer(); 

    } 

    function launchTimer() { 

      // Fire timer event as soon as possible, initialInterval = 0 

      // Timer event must be sent every 50 ms, repeatInterval = 50 

      someTimer = createTimer(0, 50); 

      // Add a listener for the "SVGTimer" event 

      someTimer.addEventListener("SVGTimer", someListener, false); 

      // Start the timer, which will fire the first event immediately as initialInterval 

is 0 

      someTimer.start(); 

    } 

    function showAndGrowElement() { 

      timeValue += timerIncrement; 

      // Scale the text string gradually until it is 20 times larger 

      scalefactor = (timeValue * 20) / maxTime; 

      var matrix = svgRoot.createSVGMatrixComponents(scalefactor, 0, 0, scalefactor, 0, 

0); 

      textElement.setMatrixTrait("transform", matrix); 

      // Make the string more opaque 

background image

312 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      var opacityFactor = timeValue / maxTime; 

      textElement.setFloatTrait("fill-opacity", opacityFactor); 

      if (timeValue >= maxTime) { 

        someTimer.stop(); 

      } 

    } 

  ]]></script> 

  <handler type="application/ecmascript" ev:event="load"> 

    init(); 

  </handler> 

  <rect 

x="1" 

y="1" 

width="398" 

height="198" 

fill="none" 

stroke="blue" 

stroke-width="2"/> 

  <g transform="translate(50,150)" font-size="7" stroke="none"> 

    <text fill="red" fill-opacity="0" xml:id="svgtext">SVG</text> 

  </g> 

</svg> 

0秒 

2.5秒後 

5秒後 

上記のSVGファイルには,"SVG"と書く'text'要素が含まれている。このアニメーションは5秒間でルー

プする。このテキスト文字列は最初は小さく透明な文字列であり,それから増大して,大きく不透明な文

字列になる。この例がどのように動作しているのかを,次に説明する。 

• 

loadイベントを扱うために,この例の中にユニークな'handler'が宣言される。 

• 

      <handler type="application/ecmascript" ev:event="load"> 

• 

          init(); 

• 

      </handler> 

文書が完全にロード・処理されると,この'handler'はECMAScript関数init()を呼び出す。 

• 

'script'要素はアニメーションをドライブするECMAScriptを定義する。init()関数が一度だけ呼び出さ

れ,グローバル変数textElement及びsvgRootに値を与え,launchTimer()関数を介してSVGTimerオ

ブジェクトを作成,開始させる。showAndGrowElement()は,それが呼び出されるたびに,'text'要素

における'fill-opacity'プロパティ及び'transform'属性を新しい値に設定する。 

• 

someListener関数はEventListenerオブジェクトとして使用される。launchTimer()関数では,そのタイ

マオブジェクトのaddEventListener()メソッドへのパラメタとしてsomeListenerを渡すことによって,

313 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVGTimerイベントがディスパッチされるたびにそれが呼び出される(someTimerオブジェクトはこ

のイベントの唯一の対象である。)。このようにして,スクリプトを使用するタイマオブジェクトに

リスナーを登録することができる。 

• 

SVGTimerイベントは定期的にディスパッチされるので,showAndGrowElement()は50ミリ秒ごとに

呼び出され,テキスト属性を変更して,そのテキストをアニメーション化する。

showAndGrowElement()は,それが呼び出されるたびに,そのアニメーションの最大の持続時間に到

達したかどうかを確認し,到達していればタイマオブジェクトのstop()メソッドを呼び出してその

アニメーションを停止させる。 

16.4 アニメーション及び包含ボックス 

アニメーション効果によって,アニメーション化される要素の包含ボックスが変更される可能性がある。

この詳細については,7.12の定義を参照。 

17 フォント 

17.1 概説 

信頼されるフォントを提供することは,SVGの必須条件である。制作者は任意のフォントを用いてSVG

内容を作成することができる必要がある。また,制作者は,エンド利用者がその内容を見るとき,彼らの

コンピュータに必要なフォントがインストールされていないとしても,全て同一の図形の表示結果が現れ

るとみなすことができる必要がある。これは印刷物の世界にもいえることである。制作者が印刷のための

描画を行う場合に特定のフォントを使用したとき,その制作者のオーサリングシステム上の図形内容の表

示と,印刷物上の図形内容の表示とが全く同じである必要がある。 

歴史的には,全てのテキストを,使用している字形を表すパスに変換するという手法が存在する。この

手法においては,その視覚的な外観は維持されるが,テキストは失われる。つまり,それを動的に更新す

ることができず,アクセシブルではない。また,別の手法として,与えられた名前のフォントが全てのレ

ンダラーで利用できることを前提にするという方法がある。このような想定はデスクトップではうまく行

かず,異種のモバイル環境では大変具合が悪い。SVGでは,テキストからパスへの変換を認めるものの,

それらのパスをSVGフォントとして保存することによって,この問題を解決している。そのテキストは保

持され,動的に修正をすることもでき,アクセシブルなままである。 

17.1.1 SVGで利用することができるフォントの記述 

SVGでは,フォントを参照するために,"Cascading Style Sheets(CSS)level 2"仕様書[CSS2] で定義され

るウェブフォント機能のXML版が利用されている。記述されるフォントには,様々な種類の形式がある。

そのフォントの鍵となる詳細情報(ファミリー名,ウェイト,斜体の適用の有無など)を記述しておけば,

使用されるフォントをテキストごとに明示的に示さなくても,記述したフォントのプロパティをテキスト

においてずっと使うことができる。 

17.1.2 SVGにおけるフォントの定義 

これまでのウェブフォント機能における一つの欠点は,[CSS2]のような仕様書では,特定のフォント形

式のサポートをする必要がないことである。その結果,実装が異なればサポートされるウェブフォント形

式も異なり,ウェブサイトの制作者が全ての利用者エージェントにおいて機能するウェブフォントを用い

た単一のウェブサイトを作成することを難しくしていた。 

SVGのための共通的なフォント形式を提供し,全ての適合SVGビューアによってそれがきちんとサポ

ートされるようにするために,SVGではSVGフォント形式が定義されている。ここでは,(SVGパス要素

314 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

が使用しているものと同じ)字形のための幾何学的メカニズムが採用されている。この機能はSVGフォン

トと呼ばれる。SVGの実装では,SVGフォント形式がサポートされていなければならない。また,他の形

式をサポートしていてもよい。ウェブフォントは,それらを使用するSVG文書に含めたり,別個の文書に

保存したりしてもよい(例 複数のSVG文書による同じフォントの共有)。 

これら二つのメカニズムが一緒になることによって,信頼できるフォントデータをエンド利用者にきち

んと提供し,豊かな図形を保存し,テキストデータにアクセスをすることもできるようになる。一般的な

シナリオでは,SVGオーサリングアプリケーションは,そのSVG文書片が使用する全テキスト要素に対

して,圧縮及び部分集合化されたウェブフォントを生成する。SVGフォントは,テキストを表現する図形

において,その意味論の豊かさを向上させることができる。例えば,多くの企業のロゴは,美術的にデザ

インされた企業名からなっている。そのロゴをSVGフォントの一連の字形として表現し,そのフォントを

参照する'text'要素としてロゴを描画することによって,アクセシビリティを高めることができる事例もあ

る。 

17.2 SVGフォントの概説 

SVGフォントは,SVGの'font'要素を使用して定義されるフォントである。 

SVGフォントの目的は,表示だけの環境において字形の外形を提供することができるようにすることで

ある。ウェブページに付随するSVGフォントは,ブラウジング及び閲覧をする環境においてだけサポート

されていなければならない。図形編集アプリケーション又はファイル変換ツールを用いて,SVGフォント

をシステムフォントに変換するようなことをしてはならない。 

SVGフォントには,ヒントなしのフォント外形が含まれる。そのために,多くの実装においては,小さ

いフォントサイズのテキストの品質又は明瞭性に制約が発生する。内容制作者は,オペレーティングシス

テムに備え付けのフォント又は代替ウェブフォント形式のようなフォント技術をその代わりに使用して,

小さいフォントサイズにおける品質又は明瞭性を向上させることもできる。 

SVGフォントはSVG要素及び属性を用いて表現される。したがって,特にフォントデータのコンパク

トな表現のために設計された他の形式によって表されたフォントと比べると,SVGフォントはより多くの

空白をとる場合もある。内容制作者は,そのウェブページを最も速く提供するために,相互運用性を高め

るSVGフォントの代わりとして,他のフォント技術の使用を最初に選択してもよい。 

SVGフォントの一番の価値は,複数のSVG利用者エージェントにおいてきちんと利用することができ

ることである。テキストを描画する場合に,SVGフォントを最初に選択することが適切な場合もある。ま

た,別の状況では,SVGフォント以外の最初に選択したフォント(おそらくヒントありのシステムフォン

ト)を利用者が利用できなくなった場合のために,SVGフォントを代替的なバックアップ用フォントとし

て利用することもできる。 

SVGフォントの特性及び属性は,"Cascading Style Sheets(CSS)level 2"仕様書[CSS2] の"Fonts"の箇条で

説明されているフォント特性及びパラメタと密接に関わっている。このモデルでは,様々なフォント配置

量(送り値,ベースライン位置,字形外形それ自体など)は,同じタイプサイズにおけるタイプの行と行

との間の距離がその高さである抽象的な正方形に相対的な単位によって表現される。この正方形はemス

クエアと呼ばれ,それは字形の外形を定義するデザイン格子である。'font'要素の'units-per-em'属性の値は,

そのemスクエアを何単位に分割するのかを示す。例えば,他のフォントタイプにおける一般的な値は,

250(Intellifont),1000(Type 1),又は2 048(TrueType,TrueType GX,Open-Type)などである。初期座

標系ではY軸が下向きであるSVG標準図形(7.3を参照)とは異なり,SVGフォントのデザイン格子では

(字形の初期座標系と同様に)そのY軸が上向きであり,様々な一般フォント形式における業界の慣行と

background image

315 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

の整合が図られている。 

SVGフォント及びその関連字形は,包含ボックス情報を指定しない。字形の外形はSVGパス要素とし

て表現されるので,実装における字形の描画では,標準的な図形の呼出しの使用,又は特殊目的のフォン

ト描画技術の使用を選択することができる。後者の場合,その字形の外形に含まれるパス要素を分析する

ことによって,必要とされるどのような最大限の包含ボックス又ははみ出し量の計算でも実行することが

できる。 

SVGフォントは,そのフォントを使用している同じ文書に埋め込むか,又は外部リソースの一部として

保存することができる。 

SVG文書の中にSVGフォントを埋め込む方法を次の例に示す。 

例: 20̲01.svg 

<?xml version="1.0"?> 

<svg width="400px" height="300px" version="1.2" baseProfile="tiny" 

  xmlns = 'http://www.w3.org/2000/svg'> 

  <defs> 

    <font xml:id="Font1" horiz-adv-x="1000"> 

      <font-face font-family="Super Sans" font-weight="bold" font-style="normal" 

          units-per-em="1000" cap-height="600" x-height="400" 

          ascent="700" 

descent="300" 

alphabetic="0" 

mathematical="350" 

ideographic="400" hanging="500"> 

      </font-face> 

      <missing-glyph d="M0,0h200v200h-200z"/> 

      <glyph unicode="!" horiz-adv-x="300" d="--Outline of exclam. pt. glyph--"/> 

      <glyph unicode="@" d="--Outline of @ glyph--"/> 

      <!-- more glyphs --> 

    </font> 

  </defs> 

  <desc>An example using an embedded font.</desc> 

  <text x="100" y="100" font-family="Super Sans, Helvetica, sans-serif" 

                  font-weight="bold" font-style="normal">Text  

    using embedded font</text> 

</svg> 

17.3 'font'要素 

'font'要素はSVGフォントを定義する。 

スキーマ: font  

    <define name='font'> 

      <element name='font'> 

        <ref name='font.AT'/> 

        <ref name='font.CM'/> 

      </element> 

background image

316 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    </define> 

    <define name='font.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.FontAdvOrigCommon.attr'/> 

      <optional> 

        <attribute 

name='horiz-origin-x' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

    <define name='font.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='font-face'/> 

          <ref name='missing-glyph'/> 

          <ref name='glyph'/> 

          <ref name='hkern'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

horiz-origin-x = "<number>" 

そのフォント座標系において水平方向のテキストを描画するときに使用される字形の原点のX座標(そ

の原点は,フォントの全字形に適用されることに注意する。)。 

省略値:'0' 

アニメーション:不可 

horiz-adv-x = "<number>" 

水平方向に字形を描画した後における既定の水平方向のアドバンス。その字形が通常右から左に描画さ

れる場合(例 ヘブライ語,アラビア語のスクリプト)においても,字形幅は負の数であってはならない。 

省略値:'0' 

アニメーション:不可 

それぞれの'font'要素には,フォントの様々な特性を記述する'font-face'子要素がなければならない。 

17.4 'glyph'要素 

'glyph'要素は,与えられた字形のための図形を定義する。その字形のための座標系は,'font'要素におけ

background image

317 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

る様々な属性によって定義される。 

その'glyph'を形作る図形は,'d'属性における単一のパスデータ指定から構成される。 

スキーマ: glyph  

    <define name='glyph'> 

      <element name='glyph'> 

        <ref name='glyph.AT'/> 

        <ref name='glyph.CM'/> 

      </element> 

    </define> 

    <define name='glyph.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.FontAdvOrigCommon.attr'/> 

      <ref name='svg.D.attr'/> 

      <optional> 

        <attribute 

name='unicode' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='glyph-name' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='arabic-form' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional> 

        <attribute name='lang' svg:animatable='false' svg:inheritable='false'> 

          <ref name='LanguageIDs.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

    <define name='glyph.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

318 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

unicode = "<string>" 

この字形に対応する文字列を示す一つ以上の文字。単一の文字が提供された場合,その字形は特定の

Unicode文字に対応する。複数の文字が提供された場合,その字形は特定のUnicode文字列に対応する。

文字列の使い方の一つとして,合字がある。例えばunicode="ffl"である場合,その字形は"f","f",及び"l"

の文字列を描画するために用いられる。 

10進法又は16進法で表現されるXML文字参照を使用して文字を参照することはしばしば有用である。

例えば,unicode="ffl"をXML文字参照で表現すると,16進法ではunicode="&#x66;&#x66;&#x6c;",10進

法ではunicode="&#102;&#102;&#108;"とすることができる。 

'unicode'属性は,どの字形がどの文字の表現に使われるのかを決定するための処理において役に立つ。

17.6を参照。この規格では,'unicode'属性がその'glyph'に対して提供されない場合,その字形にアクセスす

ることができない。 

アニメーション:不可 

glyph-name = "<list-of-strings>" 

その字形のための省略可能な名前。字形名は,フォントの中では一意となるべきである。字形名は,フ

ォントの中でユニークであるのがよい。Unicode文字番号が正しい字形にアクセスするための十分な情報

を提供していない場合(例 一つのUnicode文字に複数の字形が存在する場合),字形名を使用することが

できる。字形名については,17.7の定義を参照。 

アニメーション:不可 

d = "path data" 

'path'要素の'd'属性と同じ構文を用いた字形の外形の定義。8.3を参照。 

この属性に関する情報については下の方を参照。 

アニメーション:不可 

arabic-form = "initial | medial | terminal | isolated" 

アラビア語の字形について,この字形が四つの形式のうちのどれを表現しているのかを示す。arabic-form

がそれを必要とする字形に対して指定されていない場合には,その字形は孤立(isolated)形式をとり,最

初(initial),中間(medial)及び最後(terminal)の形式は,個別に指定されていない限りmissing-glyphに

よって描画される。 

さらに,arabic-formを指定しなくてもよい字形において最初(initial),中間(medial)及び最後(terminal)

の形式が指定された場合には,そのarabic-form属性は効果をもたない。 

アニメーション:不可 

lang = "<list-of-language-ids>" 

この属性値は,IETF Best Current Practice 47 [BCP47]によって定義される言語タグのコンマで区切られた

リストである。XML内容では,'xml:lang'属性がこのパラメタの値で与えられた言語のうちの一つに完全に

適合する場合,又は'xml:lang'属性がこのパラメタの値で与えられた言語のうちの一つの接頭辞と全く同じ

場合(その接頭辞に続く最初のタグ文字は"-")には,その字形を使用することができる。この属性が指定

されていない場合には,その字形を全ての言語において使用することができる。 

例えば,フランス語に適した字形(lang属性が言語タグ'fr'を含む。)は,全てのタイプのフランス語テキ

ストに適する(例 カナダ系フランス語はxml:lang="fr-ca")。lang属性が繁体字中国語に特有である字形

(langにzh-Hantを含む。)は,簡体字中国語(xml:lang="zh-Hanc")又は一般中国語(xml:lang="zh")には

適当ではない。 

background image

319 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

アニメーション:不可 

horiz-adv-x = "<number>" 

水平方向に字形を描画した後における水平方向のアドバンス。この属性が指定されていない場合,あた

かもこの属性がそのフォントの'horiz-adv-x'属性の値に設定されたかのような効果が与えられる。 

その字形が通常右から左に描画される場合(例 ヘブライ語,アラビア語のスクリプト)においても,

字形幅は負の数であってはならない。 

アニメーション:不可 

'glyph'のための図形は,'d'属性を用いて指定される。この属性におけるパスデータは,次のように処理さ

れなければならない。 

• 

そのパスデータ指定における全ての相対座標は,同等の絶対座標に変換される。 

• 

各絶対座標は,フォント座標系からテキスト内容要素の現在の座標系に変換される。そのとき,そ

のフォント座標系の原点がその字形のテキスト現在位置及び向きにそろ(揃)うよう,その原点は

適切に配置・回転され,また,正しい'font-size'が実現できるようにスケーリングされる。 

• 

変換されたパス指定は,あたかもそれが'path'要素であるかのように描画される。このとき,与えら

れた字形に対応する文字に適用されているスタイル付けプロパティが使用され,また,'font'要素又

は'glyph'要素で指定されている全てのスタイル付けプロパティは無視される。 

一般的に,'d'属性はシステムフォントと同じ方法で描画される。例えば,破線書式は,システムフォン

トに適用されても,又は(その字形を'd'属性を用いて定義する。)SVGフォントに適用されても,通常は

同じように表示される。今後より多くの実装において,更なる性能の向上のために,字形を素早く描画し

たり,フォントキャッシュを使用したりすることができるようになるだろう。 

次の例font01.svgには,たった三つの文字(S,V,及びG),及び他の全ての文字に対するmissing glyph

のためのフォントが含まれている。また,V及びGの字形を互いに詰めるためのカーニング対もある。こ

のAnglepoiseフォントはLarabie FontsのRay Larabie氏が設計したものであり,許可を得て使用している。 

例: font01.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg 

version="1.2" 

baseProfile="tiny" 

viewBox="0 

160 

70"  

xmlns="http://www.w3.org/2000/svg" 

    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <title>Font example</title> 

    <defs> 

        <font horiz-adv-x="313" xml:id="la"> 

            <metadata>Converted from Larabie Anglepoise by Batik ttf2svg 

            See http://www.larabiefonts.com/ </metadata> 

            <font-face font-family="larabie-anglepoise" units-per-em="1000"  

                panose-1="0 0 4 0 0 0 0 0 0 0" ascent="703" descent="-300" alphabetic="0"/> 

            <missing-glyph 

horiz-adv-x="500" 

d="M63 

0V700H438V0H63ZM125 

63H375V638H125V63Z"/> 

            <glyph 

unicode="S" 

glyph-name="S" 

horiz-adv-x="385" 

d="M371 

1H29V144H264Q264 151 264 

background image

320 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

                166Q265 180 265 188Q265 212 249 212H132Q83 212 55 247Q29 279 29 

                329V566H335V422H136V375Q136 360 144 356Q148 355 168 355H279Q327 355 352 

309Q371 273 

                371 221V1Z"/> 

            <glyph unicode="V" glyph-name="V" horiz-adv-x="351" d="M365 563L183 -33L0 

563H101L183 

                296L270 563H365Z"/> 

            <glyph unicode="G" glyph-name="G" horiz-adv-x="367" d="M355 

                1H18V564H355V420H125V144H248V211H156V355H355V1Z"/> 

            <hkern g1="V" g2="G" k="-40"/> 

        </font> 

    </defs> 

    <text 

x="40" 

y="50" 

font-family="larabie-anglepoise" 

font-size="70" 

fill="#933">SVG</text> 

    <rect x="00" y="00" width="160" height="70" stroke="#777" fill="none"/> 

</svg> 

次の例font02.svgには単一文字のためのフォント(アラビア語文字

,空白,及びmissing glyph)が含

まれている。この文字のための四つの字形があり,それぞれ同じUnicode区点位置U+062Eに対応してい

る。それらはarabic-form属性の値によって識別される。そのテキスト文字列は四つの各形式を表現する。 

例: font02.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg 

version="1.2" 

baseProfile="tiny" 

viewBox="80 

100 

260 

180" 

xmlns="http://www.w3.org/2000/svg" 

    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <title>Font example for arabic-form</title> 

    <defs> 

        <font horiz-adv-x="573"> 

            <font-face font-family="SVGAr" units-per-em="1000" panose-1="5 1 1 1 1 1 1 

1 1 1" 

                ascent="1025" descent="-399" alphabetic="0"/> 

            <missing-glyph 

horiz-adv-x="500" 

d="M31 

0V800H469V0H31ZM438 

31V769H62V31H438Z"/> 

background image

321 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

            <glyph unicode=" " glyph-name="space" horiz-adv-x="370"/> 

            <glyph unicode="&#x62e;" glyph-name="khah-isolated" arabic-form="isolated" 

                horiz-adv-x="562" d="M309 360Q309 353 297 335T271 317Q260 317 227 337T194 

370Q194 

                380 205 397T232 415Q246 415 277 395T309 360ZM518 -265Q516 -269 509 -275Q507 

-277 502 

                -281Q447 -319 424 -330Q356 -363 281 -363Q228 -363 186 -347T110 -294Q69 

-249 54 

                -199Q44 -167 44 -127Q44 -96 50 -65T76 12Q88 39 110 70Q152 127 152 137Q152 

151 148 

                156T121 161Q95 161 85 156Q72 146 62 140Q44 128 35 130Q35 138 35 146Q37 

151 43 162Q77 

                208 98 219T159 231Q170 231 234 221Q255 218 298 210H340Q347 210 382 218T425 

230T435 

                235Q446 239 449 234Q454 226 444 189T426 152Q418 152 393 154T360 156Q327 

156 297 

                149T228 120Q180 93 142 36Q96 -33 96 -110Q96 -209 168 -257Q223 -294 300 

-294Q343 -294 

                371 -291Q429 -285 489 -267Q506 -260 511 -260Q514 -262 518 -265Z"/> 

            <glyph unicode="&#x62e;" glyph-name="khah-initial" arabic-form="initial" 

                horiz-adv-x="728" d="M297 372Q297 365 285 347T259 329Q248 329 215 349T182 

382Q182 

                392 193 409T220 427Q234 427 265 407T297 372ZM600 0H0V68H373Q396 68 396 

86Q396 89 394 

                95Q377 137 347 159Q308 188 243 188Q210 188 183 171Q165 160 157 158T145 

156Q138 156 

                138 164L140 174Q145 196 191 220Q228 240 269 240Q313 240 355 221T447 160Q488 

120 530 

                81Q543 73 563 71T609 68Q619 68 620 68T625 68Q645 68 645 46Q645 30 633 

15T600 0Z"/> 

            <glyph unicode="&#x62e;" glyph-name="khah-medial" arabic-form="medial" 

                horiz-adv-x="625" d="M296 376Q296 369 284 351T258 333Q247 333 214 353T181 

386Q181 

                396 192 413T219 431Q233 431 264 411T296 376ZM625 0H0V68H373Q396 68 396 

86Q396 89 394 

                95Q377 137 347 159Q308 188 243 188Q210 188 183 171Q165 160 157 158T145 

156Q138 156 

                138 164L140 174Q145 196 191 220Q228 240 269 240Q313 240 355 221T447 160Q488 

120 530 

background image

322 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

                81Q543 73 563 71T609 68Q619 68 620 68T625 68V0Z"/> 

            <glyph unicode="&#x62e;" glyph-name="khah-terminal" arabic-form="terminal" 

                horiz-adv-x="514" d="M296 352Q296 345 284 327T258 309Q247 309 214 329T181 

362Q181 

                372 192 389T219 407Q233 407 264 387T296 352ZM514 0H375Q313 0 298 64T261 

128Q209 128 

                153 62Q91 -12 91 -101Q91 -199 162 -243Q220 -279 319 -279Q367 -279 390 

-276T463 

                -259Q466 -258 475 -255T488 -252Q490 -252 491 -254T489 -263Q484 -272 466 

-286T433 

                -307Q408 -320 401 -323Q349 -344 277 -344Q169 -344 104 -274Q44 -210 44 

-118Q44 -88 51 

                -53T73 14Q80 31 97 56Q132 108 132 118Q132 127 126 134T110 141Q92 141 85 

137Q72 127 

                59 117Q49 112 44 112Q38 112 38 119Q38 122 40 128Q49 156 80 182Q116 212 

157 212Q170 

                212 188 208Q232 198 258 198H320Q345 198 357 201Q374 207 383 209T398 214T412 

216Q420 

                216 421 212Q424 202 414 170T396 137Q394 137 382 140T362 143Q346 143 337 

135T327 

                104Q327 91 341 80T379 68H514V0Z"/> 

        </font> 

    </defs> 

    <g font-family="SVGAr" font-size="80"> 

        <!-- this should produce isolated khah, followed by initial,medial and terminal 

khah --> 

        <text x="100" y="200">&#x62e; &#x62e;&#x62e;&#x62e;</text> 

        <rect x="80" y="100" width="260" height="180" fill="none" stroke="#777"/> 

     </g> 

</svg> 

background image

323 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

17.5 'missing-glyph'要素 

'missing-glyph'要素は,そのフォントから字形を描画しようとしたときにその字形が定義されていない場

合に使われる図形を定義する。'missing-glyph'要素の属性は,'glyph'要素において対応する属性と同じ意味

をもつ。 

スキーマ: missing-glyph  

    <define name='missing-glyph'> 

      <element name='missing-glyph'> 

        <ref name='missing-glyph.AT'/> 

        <ref name='missing-glyph.CM'/> 

      </element> 

    </define> 

    <define name='missing-glyph.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.FontAdvOrigCommon.attr'/> 

      <ref name='svg.D.attr'/> 

    </define> 

    <define name='missing-glyph.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

17.6 字形選択規則 

background image

324 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ある文字列を描画するための字形を決定したとき,'font'要素における最初の'glyph'要素から最後のそれ

までを論理順序で検索し,描画するUnicode文字列と,その'glyph'要素の'unicode'属性が指定するUnicode

文字列とが適合しているのかどうかを確認しなければならない。最初に成功したマッチが利用されなけれ

ばならない。したがって,そのフォントにおいて合字"ffl"が字形"f"の後に定義されている場合,それは使

用されない。 

17.7 'hkern'要素 

'hkern'要素は,水平方向における字形の組に対するカーニング対を定義する。 

カーニング対は,隣り合った字形の組が描画されるときに,字形内部のスペーシングが調整される単一

フォント内の字形の組を特定する。SVGフォントカーニングでは,その字形の組は同じフォントからきて

いなければならないという条件に加えて,その二つの字形が'font-family','font-size','font-style'及び

'font-weight'プロパティと同じ値をもつ文字に対応しているときにだけそれを実行することができる。 

カーニング対の例として,文字"Va"がある。ここで文字"V"と"a"とを少し詰めて描画すると,印刷結果

の見栄えが良くなることがある。 

SVGでは,右から左への方向をもつテキスト又は双方向のテキストは,二段階で処理される(10.6.2を

参照)。カーニングの適用の前にSVGフォントが使用されている場合は,文字は左から右(縦書の場合は

上から下)の視覚的描画順に並び替えられる。それからSVGフォントのカーニングが隣接して描画される

字形の組に適用される。そのカーニング対における最初の字形は,視覚的描画順において左(又は上)に

ある字形である。そのカーニング対における二番目の字形は,そのペアの右(又は下)のほうの字形であ

る。 

フォントの制作者にとって便利であり,また,ファイルサイズが最小になるように,単一の'hkern'は,

ある字形集合(Unicode文字列又は範囲)ともう一つの字形集合(例 Unicode文字のまた別の範囲)との

間における単一のカーニング調整値を定義することができる。 

'hkern'要素は,隣接していて共に水平方向に(つまり隣同士に)描画される字形の組を描画する場合,

その水平方向の送り値における調整値及びカーニング対を定義する。文字の間のスペーシングはカーニン

グ調整によって減少する(負のカーニング調整の場合は,文字の間のスペーシングが増大する。)。 

スキーマ: hkern  

    <define name='hkern'> 

      <element name='hkern'> 

        <ref name='hkern.AT'/> 

        <ref name='hkern.CM'/> 

      </element> 

    </define> 

    <define name='hkern.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <optional> 

        <attribute 

name='u1' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

background image

325 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <optional> 

        <attribute 

name='g1' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional> 

        <attribute 

name='u2' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional> 

        <attribute 

name='g2' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional> 

        <attribute name='k' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

    <define name='hkern.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

u1 = "[<Char> | <urange> ] [, [<Char> | <urange>] ]* " 

そのカーニング対において可能な最初の字形集合を特定する文字の(コンマで区切られた)シーケンス

及び/又はUnicode文字の範囲([CSS2]におけるUnicode文字の範囲の説明を参照)。その集合において与

えられるUnicode文字が,対応する複数の'glyph'要素をもつ場合(すなわち,'unicode'属性値は同じだが

'glyph-name'値が異なる'glyph'要素が複数ある場合),そのような字形は全てその集合に含まれる。コンマは

区切り文字なので,コンマをカーニングするためには,そのコンマをUnicode文字の範囲の一部として指

定するか,又は'g1'属性を用いてそのコンマを字形名として指定する。そのカーニング対において可能な最

初の字形の全体集合は,'u1'及び'g1'属性によって指定された字形の結合体である。 

アニメーション:不可 

g1 = "<list-of-strings>" 

そのカーニング対において可能な最初の字形集合を特定する字形名のシーケンス(すなわち,'glyph'要

素の'glyph-name'属性に適合する値)。与えられた字形名をもつ全ての字形がその集合に含まれる。そのカ

background image

326 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ーニング対において可能な最初の字形の全体集合は,'u1'及び'g1'属性によって指定された字形の結合体で

ある。 

アニメーション:不可 

u2 = "[<Char> | <urange> ] [, [<Char> | <urange>] ]* " 

'u2'属性はそのカーニング対において可能な二番目の字形を指定することを除き,'u1'属性と同じ。 

アニメーション:不可 

g2 = "<list-of-strings>" 

'g2'属性はそのカーニング対において可能な二番目の字形を指定することを除き,'g1'属性と同じ。 

アニメーション:不可 

k = "<number>" 

そのカーニング対における二つの字形の間のスペーシングを減少させる量。その値はフォント座標系に

基づく。省略値:'0' 

アニメーション:不可 

少なくとも'u1'及び'g1'のうちの一つを提供しなければならない。また,少なくとも'u2'及び'g2'のうちの一

つを提供しなければならない。 

17.8 フォントの記述 

17.8.1 フォント記述の概説 

フォント記述は,制作者によるフォントの指定とフォントデータとの間の橋渡しをする。このフォント

データは,テキストをフォーマットして,文字がマップされる抽象字形を描画するために必要なデータ(実

際の拡大縮小可能な外形又はビットマップ)である。フォントは,'font-family'プロパティのようなプロパ

ティによって参照される。 

それぞれの指定されたフォント記述をフォントデータベースに追加することによって,関連するフォン

トデータを選択するためにそれを使用することができる。フォント記述には,ウェブ上におけるそのフォ

ントデータの位置,そのフォントデータの特性などに関する記述子が含まれている。フォント記述子は,

フォントプロパティを特定のフォントデータにマッチさせるためにも必要である。フォント記述の内容の

細かさは,フォント名だけの場合から字形幅のリストの場合まで,様々なレベルであることができる。 

フォント記述に関する詳細については,CSS 2仕様書[CSS2]のFontsの箇条を参照。 

17.8.2 'font-face'要素 

'font-face'要素は,CSS 2の@font-face機能に直接対応するXML構造である。全てのフォント,SVGフォ

ント,又はそれ以外の特性について記述するためにそれを使用することができる。 

同じ文書に含まれるSVGフォントの特性を記述するために利用する場合には,'font-face'要素をそれが記

述している'font'要素の子にして,その'font'要素が自己完結的で完全に記述されているようにすることが望

ましい。この場合,その'font-face'要素は親の'font'要素の特性を記述していると仮定されるので,'font-face'

要素における全ての'font-face-src'要素は無視される。 

スキーマ: font-face  

    <define name='font-face'> 

      <element name='font-face'> 

        <ref name='font-face.AT'/> 

        <ref name='font-face.CM'/> 

background image

327 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      </element> 

    </define> 

    <define name='font-face.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.External.attr'/> 

      <optional><attribute 

name='font-family' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='font-style' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='font-weight' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='font-variant' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='font-stretch' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='unicode-range' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='panose-1' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='widths' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional><attribute 

name='bbox' 

svg:animatable='false' 

svg:inheritable='false'><text/></attribute> 

      </optional> 

      <optional> 

        <attribute name='units-per-em' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

background image

328 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        <attribute name='stemv' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='stemh' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='slope' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='cap-height' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='x-height' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='accent-height' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='ascent' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='descent' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

background image

329 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      </optional> 

      <optional> 

        <attribute name='ideographic' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='alphabetic' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='mathematical' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute name='hanging' svg:animatable='false' svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='underline-position' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='underline-thickness' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='strikethrough-position' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

background image

330 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      <optional> 

        <attribute 

name='strikethrough-thickness' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='overline-position' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

      <optional> 

        <attribute 

name='overline-thickness' 

svg:animatable='false' 

svg:inheritable='false'> 

          <ref name='Number.datatype'/> 

        </attribute> 

      </optional> 

    </define> 

    <define name='font-face.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='font-face-src'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

font-family = "<string>" 

@font-face規則における'font-family'記述子と同じ構文及び意味論をもつ。 

アニメーション:不可 

font-style = "all | [ normal | italic | oblique] [, [normal | italic | oblique]]*" 

@font-face規則における'font-style'記述子と同じ構文及び意味論をもつ。あるフォントのスタイル。コン

マで区切られたリストであってもよいことを除き,'font-style'プロパティと同じ値をとる。 

省略値:'all' 

アニメーション:不可 

font-weight = "all | [normal | bold |100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold |100 | 200 

| 300 | 400 | 500 | 600 | 700 | 800 | 900]]*" 

331 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

@font-face規則における'font-weight'記述子と同じ構文及び意味論をもつ。 

同じフォントファミリーにおける他のものに対する相対的な書体のウェイト。'font-weight'プロパティと

同じ値をとるが,次のような三つの例外事項がある。 

• 

相対的なキーワード(bolder又はlighter)を使用してはいけない。 

• 

複数のウェイトを含むフォントについては,コンマで区切られた値リストを使用してもよい。 

• 

追加的なキーワードである'all'を使用してもよい。'all'とは,そのフォントが全ての可能なウェイト

にマッチすることを示す。なぜならば,それが複数のウェイトを含んでいたり,又はその書体が単

一のウェイトだけをもっていたりするからである。 

省略値:'all' 

アニメーション:不可 

unicode-range = "<urange> [, <urange>]*" 

@font-face規則における'unicode-range'記述子と同じ構文及び意味論をもつ。そのフォントにおける字形

によってカバーされていると思われるISO/IEC 10646文字[UNICODE] の範囲。この属性の規定の定義は,

この規格で追加された情報を除き,[CSS2]に記載されている。 

省略値:'U+0-10FFFF' 

アニメーション:不可 

units-per-em = "<number>" 

@font-face規則における'units-per-em'記述子と同じ構文及び意味論をもつ。emスクエア(字形が配置さ

れるデザイン格子のサイズ)における座標単位の数。 

他のほとんどの属性にはデザイン格子の定義が必須なので,この値は指定されることが望ましい。 

省略値:'1000' 

アニメーション:不可 

panose-1 = "[<integer>]{10}" 

@font-face規則における'panose-1'記述子と同じ構文及び意味論をもつ。空白によって区切られ,10個の

十進整数によって構成されるPanose-1番号。この属性の規定の定義は,この規格で追加された情報を除き,

[CSS2]に記載されている。 

省略値:'0 0 0 0 0 0 0 0 0 0' 

アニメーション:不可 

stemv = "<number>" 

@font-face規則における'stemv'記述子と同じ構文及び意味論をもつ。 

アニメーション:不可 

stemh = "<number>" 

@font-face規則における'stemh'記述子と同じ構文及び意味論をもつ。 

アニメーション:不可 

slope = "<number>" 

@font-face規則における'slope'記述子と同じ構文及び意味論をもつ。フォントの垂直ストローク角。この

属性の規定の定義は,この規格で追加された情報を除き,[CSS2]に記載されている。 

省略値:'0' 

アニメーション:不可 

cap-height = "<number>" 

332 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

@font-face規則における'cap-height'記述子と同じ構文及び意味論をもつ。フォント座標系におけるフォン

トの大文字の字形の高さ。 

アニメーション:不可 

x-height = "<number>" 

@font-face規則における'x-height'記述子と同じ構文及び意味論をもつ。フォント座標系におけるフォント

の小文字の字形の高さ。 

アニメーション:不可 

accent-height = "<number>" 

フォント座標系における距離によって測定される,原点からアクセント文字の上端までの距離。 

この属性が指定されていない場合,あたかもこの属性が'ascent'属性の値に設定されたかのような効果が

与えられる。この属性が使用されている場合,'units-per-em'属性も指定しなければならない。 

アニメーション:不可 

ascent = "<number>" 

@font-face規則における'ascent'記述子と同じ構文及び意味論をもつ。フォント座標系におけるフォント

のアクセントがない最大の高さ。 

この属性が指定されていない場合,あたかも対応するフォントにおける'units-per-em'と'vert-origin-y'との

値の差にこの属性が設定されたかのような効果が与えられる。 

アニメーション:不可 

descent = "<number>" 

@font-face規則における'descent'記述子と同じ構文及び意味論をもつ。フォント座標系におけるフォント

のアクセントがない最大の深さ。 

この属性が指定されていない場合,あたかもこの属性が対応するフォントについて'vert-origin-y'の値に設

定されたかのような効果が与えられる。 

アニメーション:不可 

widths = "<string>" 

@font-face規則における'widths'記述子と同じ構文及び意味論をもつ。 

アニメーション:不可 

bbox = "<string>" 

@font-face規則における'bbox'記述子と同じ構文及び意味論をもつ。 

アニメーション:不可 

ideographic = "<number>" 

水平方向の字形のレイアウトについて,表意文字のベースラインを整列するための字形の整列座標を示

す。その値はフォント座標系におけるオフセットである。この属性が提供されている場合,'units-per-em'

属性も指定しなければならない。 

アニメーション:不可 

alphabetic = "<number>" 

@font-face規則における'baseline'記述子と同じ構文及び意味論をもつ。水平方向の字形のレイアウトにつ

いて,アルファベットのベースラインを整列するための字形の整列座標を示す。その値はフォント座標系

におけるオフセットである。この属性が提供されている場合,'units-per-em'属性も指定しなければならない。 

アニメーション:不可 

333 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

mathematical = "<number>" 

@font-face規則における'mathline'記述子と同じ構文及び意味論をもつ。水平方向の字形のレイアウトに

ついて,数学用のベースラインを整列するための字形の整列座標を示す。その値はフォント座標系におけ

るオフセットである。この属性が提供されている場合,'units-per-em'属性も指定しなければならない。 

アニメーション:不可 

hanging = "<number>" 

水平方向の字形のレイアウトについて,ぶら下がりのある字のベースラインを整列するための字形の整

列座標を示す。その値はフォント座標系におけるオフセットである。この属性が提供されている場合,

'units-per-em'属性も指定しなければならない。 

アニメーション:不可 

underline-position = "<number>" 

フォント座標系における下線の理想的な位置。この属性が提供されている場合,'units-per-em'属性も指定

しなければならない。 

アニメーション:不可 

underline-thickness = "<number>" 

フォント座標系における長さとして表される下線の理想的な太さ。この属性が提供されている場合,

'units-per-em'属性も指定しなければならない。 

アニメーション:不可 

strikethrough-position = "<number>" 

フォント座標系における取消し線の理想的な位置。この属性が提供されている場合,'units-per-em'属性も

指定しなければならない。 

アニメーション:不可 

strikethrough-thickness = "<number>" 

フォント座標系における長さとして表される取消し線の理想的な太さ。この属性が提供されている場合,

'units-per-em'属性も指定しなければならない。 

アニメーション:不可 

overline-position = "<number>" 

フォント座標系における上線の理想的な位置。この属性が提供されている場合,'units-per-em'属性も指定

しなければならない。 

アニメーション:不可 

overline-thickness = "<number>" 

フォント座標系における長さとして表される上線の理想的な太さ。この属性が提供されている場合,

'units-per-em'属性も指定しなければならない。 

アニメーション:不可 

17.8.3 'font-face-src'要素 

'font-face-src'要素は,'font-face-uri'要素(下で説明している)とともに,@font-face規則における'src'記述

子に対応している[CSS 2仕様書([CSS2]の15.3.1及び15.3.5)における@font-face規則及び'src'記述子の

説明を参照]。 

'font-face-src'要素は'font-face-uri'要素を含んでいる。'font-face-src'要素は,他の場所で定義されたフォント

を参照するために使われる。 

background image

334 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

スキーマ: font-face-src 

    <define name='font-face-src'> 

      <element name='font-face-src'> 

        <ref name='font-face-src.AT'/> 

        <ref name='font-face-src.CM'/> 

      </element> 

    </define> 

    <define name='font-face-src.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

    </define> 

    <define name='font-face-src.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='font-face-uri'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

17.8.4 'font-face-uri'要素 

'font-face-uri'要素は,現在のSVG文書の内外で定義されたフォントを参照するために,'font-face-src'要素

において使用される。 

'font-face-uri'がSVGフォントを参照する場合,その参照はSVGの'font'要素に対して行われなければなら

ず,したがって,断片識別子を使用しなければならない([IRI]を参照)。その参照される'font'要素は,ロー

カル(すなわち,'font-face-uri'要素と同じ文書の中)に存在することもできるし,リモート(すなわち,別

の文書の中)に存在することもできる。 

スキーマ: font-face-uri  

    <define name='font-face-uri'> 

      <element name='font-face-uri'> 

        <ref name='font-face-uri.AT'/> 

        <ref name='font-face-uri.CM'/> 

      </element> 

    </define> 

    <define name='font-face-uri.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.XLinkRequired.attr'/> 

      <ref name='svg.External.attr'/> 

background image

335 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    </define> 

    <define name='font-face-uri.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

xlink:href = "<IRI>" 

そのフォントへのIRI参照。 

アニメーション:不可 

例font03.svgは外部のSVGフォント(例font01.svgで定義)を参照している。 

例: font03.svg 

<?xml version="1.0" encoding="UTF-8"?> 

<svg 

version="1.2" 

baseProfile="tiny" 

viewBox="0 

110 

70" 

xmlns="http://www.w3.org/2000/svg" 

    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <title>Font example</title> 

    <defs> 

        <font-face font-family="larabie-anglepoise"> 

            <font-face-src> 

                <font-face-uri xlink:href="font01.svg#la"/> 

            </font-face-src> 

        </font-face> 

    </defs> 

    <rect x="00" y="00" width="110" height="70" stroke="#777" fill="none"/> 

    <text x="10" y="50" font-family="larabie-anglepoise" font-size="70" fill="#FDD" 

stroke="#533" 

        stroke-width="1.6">SVG</text> 

</svg> 

background image

336 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

18 メタデータ 

18.1 概説 

メタデータとは,データに関する構造化データである。 

コンピュータ業界では,業界における相互運用性と効率性とを促進するために,メタデータの標準化作

業が進められているところである。内容制作者はその動向を追い,様々なメタデータ標準規格が公開され

たときにはそれらに適合した適切なメタデータをSVG内容に入れることが望ましい。 

W3Cはセマンティックウェブに関する活動を行っている。これは,様々なアプリケーションにおいて横

断的なデータの自動化,インテグレーション及び再利用をサポートする技術の開かれた開発の連携,並び

に実現できる仕様書の設計において,リーダーシップの役割を担うために設立された。セマンティックウ

ェブに関する活動は,RDF(Resource Description Framework)の定義も含め,それより前のW3Cメタデー

タ活動の上に築かれている。RDFには六つの仕様書がある。そのうちの一つとしては,Resource Description 

Framework Primer [RDF]を参照。 

大半のメタデータ応用に関連するまた別の活動としては,Dublin Core [DCORE]がある。これは,一般的

に適用することができるコアメタデータプロパティの集合(例 表題,制作者・著者,題名,説明など)

である。 

SVGのコミュニティにおけるRDFメタデータの一般的な使い方は,Creative Commons [CC]ライセンス

フレームワークを用いてライセンス条項を包含する方法である。有名なオープンソースのSVG制作者用ツ

ールであるInkscapeを用いることによって,このライセンス情報を自動的に含めることができる。多くの

連携しているウェブサイトでは,そのようなライセンスの包含が必ず行われなければならない。メタデー

タの可能性及び影響力がこのことからも分かる。 

各業界又は個人の内容制作者は,独自のメタデータスキーマを自由に定義することができるが,流通性

及び相互運用性を高めるために,可能な限り既存のメタデータ標準規格に従って標準的メタデータスキー

マを使用することが望ましい。特定の標準メタデータスキーマが利用者のニーズには合わない場合は,標

準スキーマを完全に無視するのではなく,RDFのような既存フレームワークにおいて追加的なメタデータ

スキーマを定義し,標準のメタデータスキーマと組み合わせてカスタムのメタデータスキーマを使用した

方が通常はよい。 

SVGでは,文書に直接メタデータを追加するための二つのメカニズムが提供されている。'metadata'要素

及び幾つかのメタデータ属性である。これらのメカニズムは個別に使用してもよいし,一緒に使用しても

background image

337 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

よい。それらが共にRDF(すなわち,RDF及びRDFa)のために使用されている場合は,RDFプロセッサ

はそれらを同じグラフに結合することが望ましい。 

注記 メタデータ属性はRDF要素で直接使用しないほうがよい。 

18.2 'metadata'要素 

SVG内容に包含するメタデータは,'metadata'要素の中に指定するのがよい。'metadata'の内容は,

Namespaces in XML 1.0勧告又はNamespaces in XML 1.1勧告 [XML-NS10,XML-NS]に適合して表現され

た名前空間の要素のような他のXML名前空間の要素であることが望ましい。 

制作者は,独立のSVG文書において,'svg'要素に'metadata'子要素を提供するのがよい。'svg'要素に

'metadata'子要素が提供されることによって,文書レベルのメタデータを特定する目的が果たされる。 

'metadata'要素が非ルート要素の子として置かれている(その要素に直接適用するため)場合には,制作

者はその'metadata'要素の内容においてそれを明示的に示す(その内容においてその方法があれば)ことが

望ましい。例えば,RDFを使用しているときには,その対象要素に'id'属性を与え,RDFの'about'属性がそ

の'id'を参照するのがよい。 

スキーマ: metadata 

    <define name='metadata'> 

      <element name='metadata'> 

        <ref name='DTM.AT'/> 

        <ref name='DTM.CM'/> 

      </element> 

    </define> 

18.2.1 'metadata'要素の例 

どのようにしてSVG文書にメタデータを包含することができるのかを次の例に示す。この例では,作品

の使用ライセンスを示すためにCreative Commonsスキーマを使用している(その他のXML適合のメタデ

ータ言語も使用することができる。RDFに基づいていなくてもよい。)。 

例: metadata-license.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     version="1.2" baseProfile="tiny" 

     width="8in" height="7in"> 

  <title>Shiny Donkey</title> 

  <desc> 

    A drawing of a brown donkey with a white nose, sitting on  

    his haunches.  Made with vector paths enhanced with filter  

    effects to add a rounded contour. 

  </desc> 

  <metadata id="license" 

background image

338 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 

            xmlns:dc="http://purl.org/dc/elements/1.1/" 

            xmlns:cc="http://creativecommons.org/ns#"> 

    <rdf:RDF> 

      <cc:Work rdf:about=""> 

        <dc:format>image/svg+xml</dc:format> 

        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 

        <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> 

      </cc:Work> 

      <cc:License rdf:about="http://creativecommons.org/licenses/by-sa/3.0/"> 

        <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction" /> 

        <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution" /> 

        <cc:requires rdf:resource="http://creativecommons.org/ns#Notice" /> 

        <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution" /> 

        <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /> 

        <cc:requires rdf:resource="http://creativecommons.org/ns#ShareAlike" /> 

      </cc:License> 

    </rdf:RDF> 

  </metadata> 

   

  <!-- graphical elements --> 

</svg> 

18.3 拡張可能なメタデータ属性 

SVGでは,他の名前空間からメタデータ文書片を直接包含することができる'metadata'要素に加え,どの

ような要素に置いてもよい属性が提供されていて,属性に基づくメタデータ形式を利用することができる。

これらの属性には,'class','role','rel','rev','about','content','datatype','property','resource','typeof'など

がある。SVGではこれらの属性の値について,特定の値のデータ型(例 文字列,文字列の空白区切りの

リスト)を与えることを除けば,一切特定の条件を課していない。RDFa [RDFA],Microformatsパターン[MF],

又はARIAオントロジー[ARIA]のようなその他の仕様書では,それらの言語に適合させるためによって厳

しい条件を課している可能性があり,これは妥当性検証のために追加的なスキーマとして表現されること

が望ましい。そのような制限の例を次に参考として示す。 

• 

'class'属性がCSSセレクタ名に使用される場合,特定の文字だけを利用することができ数値で開始

することができないが,それらの文字の他の全ての組合せは認められ,キーワードの制限も一切な

い。Microformatsに使用される場合は,特定のキーワードだけが認識される。その他の目的におい

ては,これらの制限のどちらも適用されない。 

• 

'role'属性は,WAI-ARIA [ARIA]で使用される場合,その仕様書で役割名として指定されている一つ

以上の値にマッチしていなければならない。この場合,WAI-ARIAではこれらの'role'値をもつ要素

のための追加的な処理が定義される(指定された役割に関する値をもつWAI-ARIAが追加定義した

background image

339 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性を使用する場合の条件など)。この処理はホスト言語の処理を妨げているのではなく,内容から

アクセシビリティAPIへのマッピングに関してそれを補助していることに注意する。 

• 

'rel'及び'rev'属性については,RDFa及びMicroformatsの両方において,事前に定義された予約語の

集合の一つをその値が含んでいなければならない(それらのキーワードは異なるオントロジーにお

いて定義される。)。RDFaは,それぞれの値の文字列がCURIE[すなわち,Creative Commonsライ

センスを示す'cc:license'のような接頭辞付き文字列である(ではない)予約語:[RDFA]箇条7]でな

ければならないという追加的な条件を課している。一方,MicroformatsではCURIE又は名前空間の

接頭辞付きの値は使用していない。SVGでは属性値を空白で区切られた文字列のリストにしなけれ

ばならないだけなので,これらのどちらの形式とも一切競合がない。キーワードが衝突せずプロセ

ッサが未知の値を無視することができるのであれば,それらを個別に,又は組み合わせて使用して

もよい。 

• 

非公式の言語又は形式の一部である特定のキーワード(例 検索エンジンによる処理が意図されて

いる'rel'値の'nofollow')では,そのキーワードを含めることだけが必須とされる。 

SVGはこれらの言語,形式,又はオントロジーのサポートを義務付けないが,制作者の希望に沿ってそ

れらの使用を可能にするメタデータ属性を含んでいる。この規格におけるこれらの補足的な形式に関する

記述は,説明目的で記載されているだけであり,それらの形式に追加的な制限を加えるものではないこと

に注意する。 

実装の一貫性及び簡潔性を維持し,使用上の不一致又は曖昧さを省くために,制作者が(又は非RDFa

形式において)属性'about','content','datatype','property','resource',及び'typeof'を再利用する場合には,

RDFa Syntax Processing規則[RDFA]に適合した方法でそれを実施することが望ましい。 

現在,多くのSVG文書には,Dublin Core [DCORE]名前空間におけるタイトルを提供するRDFメタデー

タが含まれている。これはあるタイプの処理においては役に立つが,多くの利用者エージェントでは文書

のタイトルとして処理されない。タイトルを含むRDFメタデータを埋め込む制作者用ツールにおいて,少

なくとも文書レベルの'title'要素も提供されることが望ましい。次の例では,RDFaの方式によって人及び

機械に可読的なタイトルを提供するために'property'属性を記述要素と結合させる方法を示している。 

例: metadata-dc-title.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:dc="http://purl.org/dc/elements/1.1/"> 

  <title property="dc:title">Metamorphosis I-IV</title> 

  <desc property="dc:creator">M.C. Escher</desc> 

  <!-- graphical elements --> 

   

</svg> 

19 拡張性 

19.1 外部の名前空間及びプライベートデータ 

SVGでは,SVG内容内のあらゆる場所において外部の名前空間から要素を包含することができる。一般

background image

340 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

的に,SVG利用者エージェントは未知の要素をDOMに包含するが,そうでない場合未知の要素は無視す

る(注意することが望ましい例外については,19.2を参照。)。 

SVG名前空間における拡張要素を使用してはならない。 

また,SVGでは,どのSVG要素においても外部の名前空間から属性を包含することができる。SVG利

用者エージェントは未知の属性をDOMに包含するが,そうでない場合未知の属性は無視する。SVG名前

空間における要素の接頭辞のない属性を拡張のために使用してはならない。 

外部の名前空間を包含するSVG機能を次の目的において利用することができる。 

• 

アプリケーション特有の情報。これによって,オーサリングアプリケーションはSVG内容における

モデルレベルのデータを包含し,“ラウンドトリッピング”(すなわち,よりハイレベルの情報を失

わずにファイルを書き,次に読む能力)の目的に使うことができる。 

• 

拡張性のための補助データ。例えば,どのような2次元図形でも3次元にして押し出されるような,

押出し拡張を実施する場合を考える。押出し拡張を適用するときには,おそらく幾つかのパラメタ

を設定する必要がある。押出し拡張の名前空間から要素を挿入することによって,そのSVG内容に

パラメタを包含させることができる。 

次の例では,事務用図形のオーサリングアプリケーションにおいて,SVG文書の中にあるプライベート

データを包含することによって,それを読み直せば図表(この事例では円グラフ)を適切に再構成するこ

とができる。 

例: 23̲01.svg 

<?xml version="1.0"?> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" 

     width="4in" height="3in"> 

  <defs> 

    <myapp:piechart xmlns:myapp="http://example.org/myapp" 

                    title="Sales by Region"> 

      <myapp:pieslice label="Northern Region" value="1.23"/> 

      <myapp:pieslice label="Eastern Region" value="2.53"/> 

      <myapp:pieslice label="Southern Region" value="3.89"/> 

      <myapp:pieslice label="Western Region" value="2.04"/> 

      <!-- Other private data goes here --> 

    </myapp:piechart> 

  </defs> 

  <desc>This chart includes private data in another namespace</desc> 

  <!-- In here would be the actual SVG graphics elements which 

       draw the pie chart --> 

</svg> 

19.2 外部オブジェクト型の埋込み 

background image

341 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVGの目標の一つは,他のXML言語プロセッサが,そのSVG内容ツリー内の点において現在活性化し

ている合成パラメタ及び様々な変換の対象となる描画をSVG描画の中の領域に実施することができるメ

カニズムを提供することである。例えば,CSS又はXSLでスタイル付けされたXML内容にフレームを提

供することによって,動的なリフロー処理を備えたテキスト(SVG変換又は合成に依存する。)をSVG内

容の中に挿入することができる。また,別の例として,MathML表現をSVG描画の中に挿入することもで

きる[MATHML]。 

19.2.1 'foreignObject'要素 

'foreignObject'要素とは,この規格で定義されている範囲を超えた図形描画機能を利用者エージェントが

提供できるようにするための拡張点である。 

'foreignObject'要素によって,異なる利用者エージェントに図形内容を描画させている外部の名前空間を

包含することができる。そこに含まれる外部の図形内容は,SVGの変換又は合成の対象となる。 

利用者エージェントは,'foreignObject'における全内容を外部内容として処理し,それを描画のために適

切な内容ハンドラに渡さなければならない。利用者エージェントは,'foreignObject'を介した全ての特定の

内容型をサポートしなくてもよい。特に,'foreignObject'に埋め込まれているSVG内容,又はそれが参照し

ているSVG内容を利用者エージェントはサポートしなくてもよい。'foreignObject'の中のSVG内容は,他

の全ての内容のタイプと全く同じように拡張を表現する。 

'foreignObject'は,通常'switch'要素及び'requiredExtensions'属性と一緒に使用される。これらは,利用者エ

ージェントにおけるサポートに関する適切な確認を実施し,利用者エージェントのサポートを受けられな

い場合には代替的な描画を提供する。 

適合SVG利用者エージェントは,'foreignObject'それ自体における特定の外部名前空間の内容を一切サポ

ートしている必要がなく,埋め込まれた特定の外部オブジェクト型を処理するその他の利用者エージェン

トを呼び出す必要もない。究極的には,ウェブブラウザにおいて,内容の書式付けにCSS,又はXSLを用

いるその他のXML文法の内容を埋め込み,結果としてのCSS又はXSLでフォーマットされた内容をSVG

変換及び合成の対象とすることができるようなSVG機能がサポートされるようになるだろう。現在のとこ

ろは,そのような機能は必要条件ではない。CDF Working Groupがこの機能性を提供するようになると予

想される。 

foreignObjectについて描画された内容は,SVG合成及び変換の観点において,あたかもそれが交換され

た単一要素であるかのように不可分なものとして扱われなければならない。 

'foreignObject'要素には,外部内容を包含するための二つの方法がある。一つは'xlink:href'属性を用いて外

部内容を参照する方法である。もう一つは,'foreignObject'要素の子内容を含む方法である。'xlink:href'属性

を指定する場合には,'foreignObject'要素の子内容を表示してはならない。 

'foreignObject'要素にディスパッチされる全てのマウスイベント[例 埋め込まれた内容から伝ぱ(播)

(bubbling)するマウスイベント]は,そのclientX及びclientY属性を調整することによって,初期ビュー

ポート座標系における値を表さなければならない。 

スキーマ: foreignObject  

    <define name='foreignObject'> 

      <element name='foreignObject'> 

        <ref name='foreignObject.AT'/> 

        <ref name='foreignObject.CM'/> 

background image

342 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      </element> 

    </define> 

    <define name='foreignObject.AT' combine='interleave'> 

      <ref name='svg.Core.attr'/> 

      <ref name='svg.Conditional.attr'/> 

      <ref name='svg.XLinkEmbed.attr'/> 

      <ref name='svg.Focus.attr'/> 

      <ref name='svg.External.attr'/> 

      <ref name='svg.Properties.attr'/> 

      <ref name='svg.FocusHighlight.attr'/> 

      <ref name='svg.Transform.attr'/> 

      <ref name='svg.XYWH.attr'/> 

    </define> 

    <define name='foreignObject.CM'> 

      <zeroOrMore> 

        <choice> 

          <ref name='svg.Desc.group'/> 

          <ref name='svg'/> 

        </choice> 

      </zeroOrMore> 

    </define> 

属性の定義: 

x = "<coordinate>" 

'foreignObject'の内容に関連した図形が描画される長方形領域の一角のx座標。 

省略値:'0' 

アニメーション:可 

y = "<coordinate>" 

参照される文書が置かれる長方形領域の一角のy座標。 

省略値:'0' 

アニメーション:可 

width = "<length>" 

参照される文書が置かれる長方形領域の幅。 

負の値はサポート外である。値が0の場合,その要素の視覚的な描画はできない。省略値:'0' 

アニメーション:可 

height = "<length>" 

参照される文書が置かれる長方形領域の高さ。 

負の値はサポート外である。値が0の場合,その要素の視覚的な描画はできない。省略値:'0' 

background image

343 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

アニメーション:可 

xlink:href = "<IRI>" 

IRI参照。この属性が存在する場合,外部内容をこのリソースからロードしなければならない。また,

その'foreignObject'要素がもつ子内容は表示してはならない。この属性が存在しない場合,'foreignObject'の

子内容は,利用者エージェントがそれを扱うことができるのであれば,表示されなければならない。 

アニメーション:可 

focusable = "true" | "false" | "auto" 

13.12.1を参照。 

アニメーション:可 

ナビゲーション属性 

13.13.2を参照。 

19.2.2 'foreignObject'の例 

Switch及び'foreignObject'要素を用いた幾つかの例を次に示す。 

これは任意のXML言語の例である。それぞれのステップで起きていることに対するコメントが添えら

れている。 

例: requiredExtensions-foreignObject.svg 

<svg xmlns="http://www.w3.org/2000/svg"  

     width="4in" height="3in"> 

   

  <desc> 

    This example uses the 'switch' element to provide a fallback  

    graphical representation of the text, if weirdML is not supported. 

  </desc> 

   

  <!-- The 'switch' element will process the first child element 

  whose testing attributes evaluate to true.--> 

  <switch> 

     

    <!-- Process the embedded weirdML if the requiredExtensions  

    attribute evaluates to true (i.e., the user agent supports  

    weirdML embedded within SVG). --> 

    <foreignObject x="50" y="20" width="100" height="50"  

                   requiredExtensions="http://example.com/weirdMLplusSVG"> 

     

      <!-- weirdML content goes here --> 

      <FreakyText xmlns="http://example.com/weirdML"> 

        <sparklies q="42"/> 

        <throbber seed="1234"/> 

        <swirl twist="yeah, baby"/> 

background image

344 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        <txt>This is throbbing, swirly text with sparkly bits</txt> 

      </FreakyText> 

    </foreignObject> 

     

    <!-- Else, process the following alternate SVG. 

    Note that there are no testing attributes on the 'textArea'  

    element.  If no testing attributes are provided, it is as  

    if there were testing attributes and they evaluated to true.--> 

    <textArea x="50" y="20" width="100" height="50"  

              font-size="10" font-family="Verdana"> 

      This is plain, conservative SVGT 1.2 text in a 

      textArea.  The text wraps within the confines 

      of the element's dimensions. 

    </textArea> 

     

  </switch> 

</svg> 

これはSVGにおけるMathMLの例である。 

例: requiredExtensions-MathML.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     width="100%" height="100%" viewBox="0 0 600 500"> 

  <title>Quadratic Equation</title> 

  <desc> 

    A sample of MathML in SVG, using the 'foreignObject' element  

    to represent a quadratic equation, with a graphical SVG  

    representation for fallback. 

  </desc> 

   

  <switch> 

    <foreignObject x="20" y="20" width="600" height="500" 

                   requiredExtensions="http://www.w3.org/1998/Math/MathML"> 

      <math xmlns="http://www.w3.org/1998/Math/MathML"> 

        <mrow> 

          <mrow> 

            <mi>f</mi> 

            <mfenced> 

                <mi>x</mi> 

            </mfenced> 

background image

345 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

          </mrow> 

          <mo>=</mo> 

          <mrow> 

            <msup> 

              <mi>x</mi> 

              <mn>2</mn> 

            </msup> 

            <mo>+</mo> 

            <mrow> 

              <mn>4</mn> 

              <mi>x</mi> 

            </mrow> 

            <mo>-</mo> 

            <mrow> 

              <mn>3</mn> 

            </mrow> 

          </mrow> 

        </mrow> 

      </math> 

    </foreignObject> 

     

    <g fill="gray" transform="translate(300,250)"> 

      <rect x="-300" y="-250" width="600" height="500" fill="white" stroke="gray" /> 

      <g id="axes" font-family="monospace" text-anchor="middle"> 

        <line id="x-axis" x1="-300" y1="0" x2="300" y2="0" stroke="gray"/> 

        <line id="x-axis-markers" x1="-300" y1="0" x2="300" y2="0"  

              stroke="gray" stroke-width="7" stroke-dasharray="1,99"/> 

         

        <line id="y-axis" x1="0" y1="-250" x2="0" y2="250" stroke="gray"/> 

        <line id="y-axis-markers" x1="0" y1="-200" x2="0" y2="250" 

              stroke="gray" stroke-width="7" stroke-dasharray="1,99"/> 

        <text x="-200" y="20" font-size="10">-4</text> 

        <text x="-100" y="20" font-size="10">-2</text> 

        <text x="100" y="20" font-size="10">2</text> 

        <text x="200" y="20" font-size="10">4</text> 

        <text x="15" y="-198" font-size="10">4</text> 

        <text x="15" y="-98" font-size="10">2</text> 

background image

346 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        <text x="15" y="102" font-size="10">-2</text> 

        <text x="15" y="202" font-size="10">-4</text> 

      </g> 

      <path id="graph" stroke-width="1" stroke="blue" fill="none" 

            d="M-200,-250 Q-50,650 100,-250"/> 

      <circle id="vertex" cx="-50" cy="200" r="2" fill="blue" /> 

      <circle id="y-intercept-1" cx="0" cy="150" r="2" fill="red" /> 

      <circle id="x-intercept-1" cx="-150" cy="0" r="2" fill="red" /> 

      <circle id="x-intercept-2" cx="50" cy="0" r="2" fill="red" />        

    </g> 

  </switch> 

</svg> 

これはSVGにおけるXHTMLの例である。 

例: requiredExtensions-XHTML.svg 

<svg xmlns="http://www.w3.org/2000/svg" 

     width="100%" height="100%" viewBox="0 0 300 140"> 

  <title>Chinese-English Unicode Table</title> 

  <desc> 

    A sample of XHTML in SVG, using the 'foreignObject' element  

    to include an XHTML 'table' with some Chinese-to-English  

    correspondances, with an ad-hoc SVG representation for  

    fallback. 

  </desc> 

  <switch> 

    <foreignObject width="300" height="140" 

                   requiredExtensions="http://www.w3.org/1999/xhtml"> 

      <table xmlns="http://www.w3.org/1999/xhtml"> 

         <caption>Using Chinese Characters in SVG</caption> 

         <tr> 

           <th>English</th> 

           <th>Chinese</th> 

         </tr> 

         <tr y="75"> 

           <td>moon</td> 

           <td>&#x6708;</td> 

background image

347 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

           <td>6708</td> 

         </tr> 

         <tr y="100"> 

           <td>tree</td> 

           <td>&#x6728;</td> 

           <td>6728</td> 

         </tr> 

         <tr y="125"> 

           <td>water</td> 

           <td>&#x6c34;</td> 

           <td>6c34</td> 

         </tr> 

       </table> 

    </foreignObject> 

    <text font-size="18" fill="crimson" text-anchor="middle"> 

      <tspan x="150" y="25" font-weight="bold">Using Chinese Characters in SVG</tspan> 

      <tspan y="50"> 

        <tspan x="50">English</tspan> 

        <tspan x="150">Chinese</tspan> 

        <tspan x="250">Unicode</tspan> 

      </tspan> 

      <tspan y="75"> 

        <tspan x="50">moon</tspan> 

        <tspan x="150">&#x6708;</tspan> 

        <tspan x="250">6708</tspan> 

      </tspan> 

      <tspan y="100"> 

        <tspan x="50">tree</tspan> 

        <tspan x="150">&#x6728;</tspan> 

        <tspan x="250">6728</tspan> 

      </tspan> 

      <tspan y="125"> 

        <tspan x="50">water</tspan> 

        <tspan x="150">&#x6c34;</tspan> 

        <tspan x="250">6c34</tspan> 

      </tspan> 

    </text> 

  </switch> 

background image

348 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

</svg> 

349 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書A 

(規定) 

SVG Micro DOM(uDOM) 

A.1 概説 

SVG Mobile 1.1仕様書 [SVGM11] 開発の後期において,SVG及びXML DOMを部分集合化し,実装に

おける負担を軽減させることの必要性が明らかになった。この規格では,できるだけ多くの必要とされる

機能性を考慮しつつSVG Tinyの実装に適するよう,uDOMに新しい機能を加えた。 

また,SVG Tiny 1.1に対応する装置でもuDOMを実装できるようにするのがよい(ただし,SVG Tiny 1.1

は埋込みのスクリプトに対応していないので,この場合そのスクリプトはSVG文書の外部になる。)。 

uDOM定義の最終目標は,最初に計算される属性値及びプロパティ値へのアクセスを認めるAPIを提供

し,伝統的なSVG DOMよりもインタフェースの数を減少させ,そして,最も有用なSVG機能(変換行

列など)及びコアXML DOMで必要とされる機能を用いてランタイムメモリの領域を減少させることにあ

る。uDOMの部分集合(SVG Tiny 1.1に対応)は,JSR 226: Scalable 2D Vector Graphics API for J2ME [JSR226] 

において既に多く実装され,それとの互換性はuDOMのまた別の目標である。 

uDOMは,その規定(normative)としてDOM Level 2 Events [DOM2EVENTS] を引用し,その参考

(informative)としてDOM Level 3 Events [DOM3EVENTS] を参照。DOM Level 3 Eventsの最小の部分集合

が,現在モバイル機器に実装されている機能を指定するためにuDOMに含まれた(これは,公開の時点で

DOM Level 3 Eventsは勧告になっていなかったからである。)。DOM Level 3 Eventsには,現在のウェブ環

境における必要性を反映することができるよう変更が加えられることが予想され,そのような変更との衝

突が発生した場合には,ここに指定される機能よりも後から発表されたSVG仕様書のほうを優先させる。 

uDOMのためのIDL定義が提供されている。 

この附属書は次のような部分から構成されている。 

・ SVG uDOMの概要 ― uDOMに関する参考情報。対応されている機能をまとめ,その重要な機能,

制約,例を題目ごとに説明している。 

・ SVG uDOMへの適合 ― SVG uDOMへの適合性基準,及び重要機能の説明を含む規定の箇条。 

・ SVG uDOMにおける全インタフェースの規定の定義(DOM Core API,DOM Views API,SMIL DOM 

API,DOM Events API,及びSVG DOM API) 

A.2 SVG uDOMの概説 

このA.2では,SVG uDOMの重要な機能及び制約の概説を示す。 

注記 他のW3C DOM定義と同様に,SVG uDOMはプログラム言語から独立している。この附属書に

はECMAScript及びJava言語の例しか挙げられていないが,SVG uDOMは他のプログラム言語

とも互換性がある。 

A.2.1 文書アクセス 

SVG uDOMは,他の機能にアクセスするためのルートであるDocumentオブジェクトへのアクセスを提

供する。Documentオブジェクトを利用可能にする方法は,使用上の文脈に依存する。EventListenerInitializer2

インタフェースを実装することによって,Documentオブジェクトを入手することができる言語がある(例 

Java)。SVG利用者エージェントは,スクリプトを読み込んで文書に結合する準備ができたとき,その実

background image

350 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

装のinitializeEventListenersメソッドを呼び出す。Documentオブジェクトには,その他の手段でアクセスす

ることができる場合もある(例 ECMAScriptのグローバルオブジェクトで利用できる

AbstractView::documentメンバの利用)。 

A.2.2 ツリーナビゲーション 

SVG uDOMでは,DOMツリーにおける文書ノード及び要素ノードのナビゲーションだけが認められて

いる。要素の階層のナビゲーションには,次の二つの方法がある。 

・ ID値をもつ個別の要素ノードは,DocumentインタフェースのgetElementByIdメソッドを介して直

接アクセスすることができる。 

・ 要素ノードの階層は,NodeインタフェースのparentNode属性とともにElementTraversalインタフェ

ースの機能を用いてたど(辿)ることができる。 

ElementTraversalインタフェースは,特に制約のある装置に適したfirstElementChild,lastElementChild,

previousElementSibling及びnextElementSiblingを提供する[ET]。これらのたど(辿)りのメカニズムでは,

要素ノードの間に介在しているノードは飛ばされる(例 空白だけを含むテキストノード)。 

A.2.3 要素の作成 

SVG uDOMは,DocumentインタフェースのcreateElementNSメソッドを用いた新しい要素の作成を認め

ている。 

例:要素の作成(Java) 

String svgNS = "http://www.w3.org/2000/svg"; 

Element myRect = document.createElementNS(svgNS, "rect"); 

A.2.4 要素の挿入 

親になるNodeにappendChild又はinsertBeforeメソッドを呼び出すことによって,文書ツリーに要素を

挿入することができる。 

例:要素の挿入(ECMAScript)  

var svgNS = "http://www.w3.org/2000/svg"; 

// Create a new <rect> element 

var myRect = document.createElementNS(svgNS, "rect"); 

// Set the various <rect> properties before appending 

... 

// Add element to the root of the document 

var svgRoot = document.documentElement; 

svgRoot.appendChild(myRect); 

// Create a new <ellipse> element 

var myEllipse = document.createElementNS(svgNS, "ellipse"); 

// Set the various <ellipse> properties before insertion 

... 

// Insert the ellipse before the rectangle 

background image

351 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

svgRoot.insertBefore(myEllipse, myRect); 

A.2.5 要素の削除 

親NodeにremoveChildメソッドを呼び出すことによって,その文書ツリーから要素を取り除くことがで

きる。 

例:要素の削除(ECMAScript)  

var myRect = ...; 

var myGroup = document.getElementById("myGroup"); 

myGroup.appendChild(myRect); 

... 

myGroup.removeChild(myRect); 

A.2.6 属性及びプロパティへのアクセス 

この規格のuDOMでは,XML属性及びCSSプロパティにアクセスするための二つの方法に対応してい

る。ElementインタフェースにおいてgetAttributeNS及びsetAttributeNSを用いる標準的な方法と,traitと

呼ばれる新しい概念を用いる方法とである。 

traitとは,XML属性又はCSSプロパティによって要素に関連付けられた,型付き値(例 文字列だけ

ではなく数値も)である。SVG uDOMのtrait機能によって,属性及びプロパティ値への強く型付けされた

アクセスが可能になる。例えば,属性又はプロパティ値をfloatとして直接得るためのgetFloatTraitメソッ

ドがあり,また,それとは対照的に,常に文字列を返すgetAttributeNSメソッドもある。SVG uDOMのtrait

機能は,TraitAccessインタフェースで利用することができる(これは,SVG要素を表す全てのDOMオブ

ジェクトによって実装される。)。 

例:traitアクセス(Java)  

float width = myRect.getFloatTrait("width"); 

width += 10; 

myRect.setFloatTrait("width", width); 

getTraitNS(他の全てのtrait取得メソッドも併せて)とgetAttributeNSとの重要な違いとして,getTraitNS

は計算された属性値を返すが,getAttributeNSは指定された属性値を返す(この値は,利用者エージェント

の値の正規化によって,元の指定値とマッチしない可能性がある。これについてはA.3.2を参照。)ことが

ある。 

例:getTraitNSとgetAttributeNSとの違い  

<g fill="red"> 

  <rect id="r1" x="1" y="1" width="5" height="5"/> 

  <rect id="r2" fill="inherit" x="1" y="1" width="5" height="5"/> 

</g> 

上記の例では 

・ r1.getTraitNS(null, "fill")は"red"を返す(又は,等価な正規化された形式を返す。A.3.2を参照。)。 

・ r2.getTraitNS(null, "fill")は"red"を返す(又は,等価な正規化された形式を返す。A.3.2を参照。)。 

・ r1.getAttributeNS(null, "fill")は""を返す。 

background image

352 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

・ r2.getAttributeNS(null, "fill")は"inherit"を返す。 

基本的なXML属性又はプロパティのアニメーション化によって,traitをアニメーション化してもよい。

traitのアニメーション値へのアクセスのために,getPresentationTraitを(TraitAccessインタフェースにおけ

る他の類似した名前をもつpresentation trait取得メソッドと併せて)利用することができる。 

A.2.7 イベントリスナの登録及び削除 

SVG uDOMではDOM Level 2 Eventsを活用し(EventTargetインタフェースを使用),文書内のノードに

対するイベントリスナの追加及び削除に対応している。 

例:イベントリスナ(Java)  

class MyEventListener implements EventListener { 

    public void handleEvent(Event evt) { 

        // Do whatever is needed here 

    } 

... 

// Create a listener 

EventListener listen1 = new MyEventListener(); 

// Listen to click events, during the bubbling phase 

SVGElement myRect = (SVGElement)document.getElementById("myRect"); 

myRect.addEventListener("click", listen1, false); 

... 

// Remove the click listener 

myRect.removeEventListener("click", listen1, false); 

A.2.8 アニメーション 

アニメーション要素は,ElementTimeControlインタフェースで利用できるメソッドを用いて,開始及び

終了することができる。 

例:アニメーション(ECMAScript)  

var animateColor = document.getElementById("myAnimation"); 

// Start the animation 2.5 seconds from now. 

animateColor.beginElementAt(2.5); 

A.2.9 マルチメディアコントロール 

'audio','video'及び'animation'要素のようなマルチメディア要素の管理は,ElementTimeControl及び

SVGTimedElementインタフェースの組合せによって実施することができる。共通的な制御の一部,及びそ

れらにアクセスするためのインタフェース メソッドを次に示す。 

・ 再生:ElementTimeControlインタフェースのbeginElementメソッド 

353 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

・ 停止:ElementTimeControlインタフェースのendElementメソッド 

・ 一時停止:SVGTimedElementインタフェースのpauseElementメソッド 

・ 再開:SVGTimedElementインタフェースのresumeElementメソッド 

・ 探索:ElementTimeControlインタフェースのbeginElementAtメソッド(例 線図形を利用してビデ

オ時間軸を表現し,その線上の一点へのクリック処理要求が,ビデオの新しい開始時間と相殺され

る。) 

この規格では,時間コンテナ要素のための再生レート(例 早送り,逆再生)の制御は定義されていな

いことに注意する。このような機能は,将来の規格には含まれる可能性がある。 

A.2.10 Javaパッケージネーミング 

SVG uDOMでは,これから発表されるSVG 1.2 Full DOMと同じJavaパッケージ名を使用している(例 

org.w3c.dom,org.w3c.dom.events,org.w3c.dom.svg)。これによって,SVG uDOMの機能に制限されたJava

アプリケーションが,SVG 1.2 Full DOMに対応する実装においても実行可能になる。 

A.3 SVG uDOMへの適合 

このA.3から後は規定(normative)である。適合SVGビューアは,そのインタフェースにおいてこの

規則への例外が明示的に認められている場合を除き,SVG uDOMで定義される全てのインタフェースの全

ての定数,属性及びメソッドに対応していなければならない。 

A.3.1 浮動小数点値 

SVG uDOMでは,IDLにおけるfloat値を表すためにIEEE-754の単精度浮動小数点値を使用している

[IEEE-754]。そのような値は多くの非有限値―NaN(Not a Number)値のセット及び正・負の無限―に対応

しているが,これらの値はuDOMでは一切使用されていない。したがって,(操作又は属性に関して別に

指定されていない限り)非有限値が操作引数として渡されfloat型の属性に割り当てられたり,又は非有限

値を含む浮動小数点値のリストが操作引数として渡されsequence<float>型の属性に割り当てられたりした

場合には,エラーコードNOT̲SUPPORTED̲ERRをもつDOMExceptionが処理されなければならない。 

さらに,uDOMにおける操作又は属性は,どちらも正及び負のゼロを区別しない。負のゼロは,操作引

数として渡されたりfloat又はsequence<float>型の属性に割り当てられたりしたとき,正のゼロとして扱わ

なければならない。 

uDOMにおける操作及び属性は,操作又は属性から負のゼロ値又は非有限値を返してはならない。 

A.3.2 属性及びプロパティの正規化 

uDOMを実装するビューアは,getAttributeNS,様々なtrait取得メソッド(getTrait,getTraitNS,getFloatTrait

など),及びtrait presentation値取得メソッド(getPresentationTrait,getPresentationTraitNS,

getFloatPresentationTraitなど)から正規化された属性値([DOM3]の1.4)を返すことができる。次に可能な

属性正規化の一覧を示す。 

色の正規化 

"red"は,"rgb(255,0,0)","#ff0000"又はその他の同一の意味をもつ形式として返してもよい。 

範囲外の値の正規化 

ある範囲においてだけ有効な値は,その範囲に固定した値として返してもよい。例えば,

fill-opacity="1.3"は,"1"として返してもよい。 

数値の精度 

"3.0"は,"3","3.00"又はその他の同一の意味をもつ形式として返してもよい。 

354 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

空白の正規化 

" 3.0 "は,"3.0"として返してもよい。空白の正規化には,'font-family'プロパティにおいて引用符

で囲まれていないフォント名も含まれる。空白を含むフォントファミリー名は,引用符で囲むこと

が望ましい。引用符が省略された場合には,そのフォント名の前後における全ての空白文字を無視

し,フォント名における空白文字の列を全てシングルスペースに変換してもよい。 

フォントウェイトの正規化 

"normal"は"400"として,"bold"は"700"として返してもよい。 

変換の正規化 

全ての変換値は,対応する行列として返してもよい。例えば,"scale(2,2)"は"matrix(2,0,0,2,0,0)",

"scale(2,2) translate(10,5) rotate(45)"は"matrix(1.4142, 1.4142, -2.5857, 1.4142, 20, 10)"として返してもよ

い。 

パスの正規化 

'd'及び'path'が使用する完全なパスデータ命令のセットは,より小さな命令にマップしてもよい。 

・ 相対命令(c,h,l,m,q,s,t,v及びz)は,絶対命令に変換される。 

・ 水平線及び垂直線(H,h,V及びv)は,一般線(L及びl)に変換される。 

・ 命令Sは命令Cに転換する。 

・ 命令Tは命令Cに転換する。 

・ 命令Zは,(パスが接合される前に暗黙的linetoが追加された場合でも)常に命令Zに正規化さ

れる。 

表示の正規化 

全ての可能な'display'値は,'none','inline'又は'inherit'にマップしてもよい(それらによって純粋な

SVG Tiny 1.2ビューアのための全ての'display'出力に対応できるので)。例えば,"block"は"inline"と

して返してもよい。複数の名前空間におけるビューア(例 CDFビューア)では異なる'display'プロ

パティが重要であり,したがって複数の名前空間がある環境において使われるSVG Tiny 1.2ビュー

アでは,最大限の'display'値を維持することが強く推奨される。 

A.3.3 テキスト内容へのアクセス 

SVG uDOMには,要素のテキスト内容にアクセスするための二つの方法がある。TraitAccessインタフェ

ースを介したテキストアクセスは,全てのSVGElementで利用することができる。これはSVG Tiny 1.1の

uDOMで利用していたもので(JSR 226仕様書 [JSR226] で利用),後方互換性を保つために今でも利用す

ることができる。この規格のuDOM仕様では,より汎用的なテキストアクセスのメカニズムとして,Node

インタフェースにtextContent属性を導入している。 

traitを用いて要素にテキスト文字列値を設定又はアクセスする場合,その要素においてgetTrait()又は

setTrait()を呼び出し,取得又は設定したいtraitの名前として#textを渡す[例 MyTextElement.setTrait("#text", 

"Hello")]。テキスト内容要素,'desc','title'及び'metadata'要素では,#textメカニズムを用いたテキストアク

セスが対応されていなければならない。この規格で定義される他の要素(要素一覧を参照)へのテキスト

アクセスは対応されず,実装ではこれらの要素における全てのテキストを無視することが望ましい。 

#textメカニズムによってテキスト内容を取得及び設定した結果は,textContent属性を使用した場合と全

く同じである。したがって,テキスト文字列を要素から取得して再度設定した場合,子の'tspan'要素(すな

わち,テキスト内容が取得される要素の子である'tspan'要素)によるスタイル付けが失われてしまうことを

利用者は認識することが望ましい。 

355 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

#text traitは,JSR 226仕様書 [JSR226] との互換性のために含まれている。JSR 226実装との互換性がな

くてもよい場合には,内容製作者はその代わりにtextContentを使用することが望ましい(そのほうがより

汎用的に適用でき,DOM Level 3 Core [DOM3] との互換性も優れている。)。 

A.4 Module: dom 

A.4.1 DOMException 

DOM Level 3 CoreのFundamental Interfaces: Core Module([DOM3]の1.4)において定義される,DOM操

作によって発生する例外。SVG uDOMはDOM Level 3 Coreの部分集合なので,この例外のために定義さ

れている例外コードには決して発生しないものもある(例 INUSE̲ATTRIBUTE̲ERR,

VALIDATION̲ERR)ことに注意する。しかしながら,uDOM及び完全なDOM Level 3 Coreの両方に対応

した実装を促進するため,どの例外コードも削除していない。 

IDL定義 

exception DOMException 

 unsigned short code; 

}; 

// ExceptionCode 

const unsigned shortINDEX̲SIZE̲ERR 

= 1; 

const unsigned shortDOMSTRING̲SIZE̲ERR 

= 2; 

const unsigned shortHIERARCHY̲REQUEST̲ERR 

= 3; 

const unsigned shortWRONG̲DOCUMENT̲ERR 

= 4; 

const unsigned shortINVALID̲CHARACTER̲ERR 

= 5; 

const unsigned shortNO̲DATA̲ALLOWED̲ERR 

= 6; 

const unsigned shortNO̲MODIFICATION̲ALLOWED̲ERR 

= 7; 

const unsigned shortNOT̲FOUND̲ERR 

= 8; 

const unsigned shortNOT̲SUPPORTED̲ERR 

= 9; 

const unsigned shortINUSE̲ATTRIBUTE̲ERR 

= 10; 

const unsigned shortINVALID̲STATE̲ERR 

= 11; 

const unsigned shortSYNTAX̲ERR 

= 12; 

const unsigned shortINVALID̲MODIFICATION̲ERR 

= 13; 

const unsigned shortNAMESPACE̲ERR 

= 14; 

const unsigned shortINVALID̲ACCESS̲ERR 

= 15; 

const unsigned shortVALIDATION̲ERR 

= 16; 

const unsigned shortTYPE̲MISMATCH̲ERR 

= 17; 

定数 

INDEX̲SIZE̲ERR  

INDEX̲SIZE̲ERRを参照 

DOMSTRING̲SIZE̲ERR  

356 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

DOMSTRING̲SIZE̲ERRを参照 

HIERARCHY̲REQUEST̲ERR  

HIERARCHY̲REQUEST̲ERRを参照 

WRONG̲DOCUMENT̲ERR  

WRONG̲DOCUMENT̲ERRを参照 

INVALID̲CHARACTER̲ERR  

INVALID̲CHARACTER̲ERRを参照 

NO̲DATA̲ALLOWED̲ERR  

NO̲DATA̲ALLOWED̲ERRを参照 

NO̲MODIFICATION̲ALLOWED̲ERR  

NO̲MODIFICATION̲ALLOWED̲ERRを参照 

NOT̲FOUND̲ERR  

NOT̲FOUND̲ERRを参照 

NOT̲SUPPORTED̲ERR  

NOT̲SUPPORTED̲ERRを参照 

INUSE̲ATTRIBUTE̲ERR  

INUSE̲ATTRIBUTE̲ERRを参照 

INVALID̲STATE̲ERR  

INVALID̲STATE̲ERRを参照 

SYNTAX̲ERR  

SYNTAX̲ERRを参照 

INVALID̲MODIFICATION̲ERR  

INVALID̲MODIFICATION̲ERRを参照 

NAMESPACE̲ERR  

NAMESPACE̲ERRを参照 

INVALID̲ACCESS̲ERR  

INVALID̲ACCESS̲ERRを参照 

VALIDATION̲ERR  

VALIDATION̲ERRを参照 

TYPE̲MISMATCH̲ERR  

TYPE̲MISMATCH̲ERRを参照 

属性は定義されない。 

メソッドは定義されない。 

A.4.2 Node 

Nodeインタフェースは,SVG文書ツリーにおける一般的なノードについて記述する。 

このインタフェースは,DOM Level 3 Core([DOM3]の1.4)で定義されるNodeインタフェースの部分集

合である。uDOMで対応しなければならないノード型は,Elementノード及びDocumentノードである。 

この部分集合は,NodeType及びDocumentPosition定義グループに対応しない(なぜならば,nodeType

フィールド及びcompareDocumentPositionメソッドは部分集合化されたインタフェースのメンバではない

からである。)。 

357 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

textContentについて,この部分集合にはTextノードを表すインタフェースがないので,設定時にText

ノードを作成しなくてもよい。しかしながら,textContentは,textContentの定義で示されているTextノー

ドが作成されているかのような振る舞いをしなければならない。 

SVG仕様で定義された要素のテキスト内容にアクセスする代替的な方法として,#text traitを用いること

ができる。 

IDL定義 

interface Node 

 readonly attribute DOMString namespaceURI; 

 readonly attribute DOMString localName; 

 readonly attribute Node parentNode; 

 readonly attribute Document ownerDocument; 

 attribute DOMString textContent; 

 Node appendChild(in Node newChild)  

  

raises(DOMException); 

 Node insertBefore(in Node newChild, in Node refChild)  

  

raises(DOMException); 

 Node removeChild(in Node oldChild)  

  

raises(DOMException); 

 Node cloneNode(in boolean deep); 

}; 

定数は定義されない。 

属性 

namespaceURI  

namespaceURIを参照 

localName  

localNameを参照 

parentNode  

parentNodeを参照 

ownerDocument  

ownerDocumentを参照 

textContent  

textContentを参照 

メソッド 

appendChild  

appendChildを参照 

insertBefore  

insertBeforeを参照 

removeChild  

358 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

removeChildを参照 

cloneNode  

cloneNodeを参照 

A.4.3 Element 

Elementインタフェースは,SVG文書ツリーにおける一般的な要素について記述する。 

このインタフェースは,DOM Level 3 Core([DOM3]の1.4)で定義されるElementインタフェースの部

分集合である。 

setAttributeNSでは,prefixフィールドもAttrインタフェースも対応されていないので,prefixを考慮に

入れなくてもよい。 

IDL定義 

interface Element : Node, ElementTraversal 

 DOMString getAttributeNS(in DOMString namespaceURI, in DOMString localName)  

  

raises(DOMException); 

 void setAttributeNS(in DOMString namespaceURI, in DOMString qualifiedName, in 

DOMString value)  

  

raises(DOMException); 

 DOMString getAttribute(in DOMString name); 

 void setAttribute(in DOMString name, in DOMString value)  

  

raises(DOMException); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

getAttributeNS  

getAttributeNSを参照 

setAttributeNS  

setAttributeNSを参照 

getAttribute  

getAttributeを参照 

setAttribute  

setAttributeを参照 

A.4.4 Document 

DocumentインタフェースはXML文書を表現する。 

このインタフェースは,DOM Level 3 Core([DOM3]の1.4)で定義されるDocumentインタフェースの部

分集合である。 

IDL定義 

interface Document : Node 

359 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

 Element createElementNS(in DOMString namespaceURI, in DOMString qualifiedName)  

  

raises(DOMException); 

 readonly attribute Element documentElement; 

 Element getElementById(in DOMString elementId); 

}; 

定数は定義されない。 

属性 

documentElement  

documentElementを参照 

メソッド 

createElementNS  

createElementNSを参照 

getElementById  

getElementByIdを参照 

A.4.5 ElementTraversal 

このインタフェースは,uDOMツリーにおいて要素をたど(辿)る手段を提供する。これが必要な主な

理由として,SVG Tiny uDOMでは文字データのノードを公にしない。SVG Tiny文書ツリーの各要素は,

このインタフェースを実装する(外部名前空間の要素を含む。)。このインタフェースの規定の定義につい

ては,ElementTraversal specification [ET] を参照。参考として次にも示す。 

IDL定義 

interface ElementTraversal 

 readonly attribute Element firstElementChild; 

 readonly attribute Element lastElementChild; 

 readonly attribute Element nextElementSibling; 

 readonly attribute Element previousElementSibling; 

 readonly attribute unsigned long childElementCount; 

}; 

定数は定義されない。 

属性 

firstElementChild  

firstElementChildを参照 

lastElementChild  

lastElementChildを参照 

nextElementSibling  

nextElementSiblingを参照 

previousElementSibling  

previousElementSiblingを参照 

360 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

childElementCount  

childElementCountを参照 

メソッドは定義されない。 

A.4.6 Location 

Locationオブジェクトは,文書のアドレスを表現する。 

IDL定義 

interface Location 

 void assign(in DOMString iri); 

 void reload(); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

assign  

このメソッドが呼び出されると,利用者エージェントは与えられたIRIへナビゲートしなければな

らない。そのたど(辿)りの結果は,'target'属性を'̲replace'に設定したハイパーリンク'a'によるたど(辿)

りと同じでなければならない。それらの違いとして,ハイパーリンク'a'は利用者の相互作用によって

活性化されるが,assignはスクリプトによって活性状態になる。現在の文書位置は,

AbstractView.documentフィールドが指し示すDocumentオブジェクトのIRIである。相対IRI参照は,

現在の文書のベースIRIに基づいて解決される。そのベースIRIが現在の文書のそれと異なる場合に

は現在の文書は破棄され,指定されたIRIにおける文書の読込み及び構文解析が開始される。上記の

段階において新しい文書の読込みが行われた場合,時間軸が再開され,新しいload処理要求が発生さ

れる。 

注記 HTTPではpragma:no-cache([RFC2616]の14.32)は一切発行されないので,キャッシュがある

場合にはサーバから新しい複写を取得することを強制されない。 

パラメタ 

in DOMString iri 

たど(辿)られるIRI 

戻り値なし 

例外なし 

reload  

このメソッドが呼び出されると,利用者エージェントはLocationによって特定された資源を再読込

みしなければならない。現在の文書位置は,AbstractView.documentフィールドが指し示すDocument

オブジェクトのIRIである。 

パラメタなし 

戻り値なし 

例外なし 

A.4.7 Window 

361 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

これは,多くのブラウザにおいて実装されている,デファクト標準Windowインタフェースの部分集合

である。[WINDOW, HTML5] が執筆された時点におけるこの分野で進行中の標準化活動については,

Window Object 1.0及びHTML 5のThe default viewを参照。 

文書の既定画面([DOM2VIEWS]の1.1)を表現するオブジェクトは,Windowインタフェースを実装し

ていなければならない。このオブジェクトは,AbstractViewも実装する。したがって,ECMAScript言語結

合では,グローバルなスクリプトオブジェクトはWindowを実装する。また,DocumentView::defaultView

を通して文書のWindowオブジェクトを取得することもできる。 

IDL定義 

interface Window 

 readonly attribute Window parent; 

 readonly attribute Location location; 

}; 

定数は定義されない。 

属性 

parent  

この文書の既定図形の親ビューであるWindowオブジェクト。Windowに親の概念がない場合(例 

その文書がビューアにおける最上位の文書として表示されている場合),この属性の値はnullである。 

location  

Windowオブジェクトの活性状態にある文書のためのLocationオブジェクト。 

メソッドは定義されない。 

A.5 Module: views 

この規格では,AbstractView及びDocumentViewインタフェースを含むDOM Level 2 Viewsが完全に対応

されていなければならない[DOM2VIEWS]。 

SVG Tiny 1.2 uDOMでは,文書の既定図形以外のビューへのアクセスは一切提供しない。既定図形には

DocumentView::defaultViewをとおしてアクセスすることができる。また,既定図形では,SVGGlobalイン

タフェースも実装していなければならないことに注意する。ECMAScript言語結合では,グローバルなス

クリプトオブジェクトは,既定図形を表すオブジェクトでもなければならない。 

A.5.1 AbstractView 

このインタフェースは,DOM Level 2 Views([DOM2VIEWS]の1.2)におけるAbstractViewインタフェー

スの複写であり,文書の既定図形を表すオブジェクトで実装しなければならない。ECMAScript言語結合

では,グローバルなスクリプトオブジェクトはこのインタフェースを実装しなければならない。 

IDL定義 

interface AbstractView 

 readonly attribute DocumentView document; 

}; 

362 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

定数は定義されない。 

属性 

document  

このSVGGlobalがDocumentViewとして関連する文書。このオブジェクトはDocumentでもあるこ

とに注意する。DOM Level 2 ViewsのAbstractView::document([DOM2VIEWS]の1.2)を参照。 

メソッドは定義されない。 

A.5.2 DocumentView 

このインタフェースは,DOM Level 2 Views([DOM2VIEWS]の1.2)におけるDocumentViewインタフェ

ースの複写であり,全てのDocumentオブジェクトで実装しなければならない。 

IDL定義 

interface DocumentView 

 readonly attribute AbstractView defaultView; 

}; 

定数は定義されない。 

属性 

defaultView  

このDocumentのための既定のAbstractView。又は,何もない場合null。この属性の値は,その文書

に関連しているSVGGlobalオブジェクトである。DOM Level 2 ViewsのDocumentView::defaultView

([DOM2VIEWS]の1.2)を参照。 

メソッドは定義されない。 

A.6 Module: events 

A.6.1 EventTarget 

EventTargetインタフェースは,処理要求に関してリスナーに通知することができるオブジェクトによっ

て実装され,EventListenerオブジェクトの登録及び削除を可能にする。 

このインタフェースは,DOM Level 2 Events([DOM2EVENTS]の1.3.1)で定義されるEventTargetイン

タフェースの部分集合である。 

SVG Tiny 1.2利用者エージェントは捕捉段階(capture phase)に対応しなくてもよく,適合SVG Tiny 1.2

内容はそれを利用してはならないことに注意する。捕捉段階(capture phase)で処理要求操作が指定された

場合,それに対応していないSVG Tiny利用者エージェントは,addEventListenerを呼び出していないかの

ようにそれを無視しなければならない(詳細については13.7を参照。)。 

EventTargetに関するDOM Level 2 Eventsの定義にもあるように,このインタフェースは全てのNodeに

よって実装される。 

SVG処理要求フローの解説,処理要求対象,処理要求の現在の対象,処理要求の伝ぱ(播)(bubbling),

及びキャプチャの意味については,DOM Events Level 2仕様書 [DOM2EVENTS]又はXML Events 

[XML-EVENTS] 仕様書の概要を参照。 

IDL定義 

interface EventTarget 

363 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

 void addEventListener(in DOMString type, in EventListener listener, in boolean 

useCapture); 

 void removeEventListener(in DOMString type, in EventListener listener, in boolean 

useCapture); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

addEventListener  

addEventListenerを参照 

removeEventListener  

removeEventListenerを参照 

A.6.2 EventListener 

EventListenerインタフェースは,処理要求のためにスクリプトで実装される。このインタフェースは,

Functionオブジェクトを用いて(又はhandleEventプロパティをもつオブジェクトを用いて)ECMAScript

で実装することができる。又は,Javaでそのインタフェースを直接実装することもできる。次に,リスナ

ーとしてEventTarget::addEventListenerを用いてEventListenerオブジェクトを登録することができる。 

このインタフェースは,DOM Level 2 Events([DOM2EVENTS]の1.3.1)で定義されるEventListenerイン

タフェースと同じである。 

IDL定義 

interface EventListener 

 void handleEvent(in Event evt); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

handleEvent  

handleEventを参照 

A.6.3 Event 

Eventインタフェースは,ある処理要求に関する文脈情報を処理要求ハンドラに供給するために利用さ

れる。 

このインタフェースは,DOM Level 2 Events([DOM2EVENTS]の1.4)で定義されるEventインタフェー

スの部分集合にdefaultPrevented属性を追加したものである。この部分集合はPhaseType定義グループに対

応していない。 

対応される処理要求型の一覧については,13.2の対応される処理要求一覧を参照。 

IDL定義 

364 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

interface Event 

 readonly attribute EventTarget target; 

 readonly attribute EventTarget currentTarget; 

 readonly attribute DOMString type; 

 readonly attribute boolean cancelable; 

 readonly attribute boolean defaultPrevented; 

 void stopPropagation(); 

 void preventDefault(); 

}; 

定数は定義されない。 

属性 

target  

targetを参照 

currentTarget  

currentTargetを参照 

type  

typeを参照 

cancelable  

cancelableを参照 

defaultPrevented  

この処理要求に対してEvent.preventDefault()が呼び出されたかどうかを示すために利用する。 

メソッド 

stopPropagation  

stopPropagationを参照 

preventDefault  

preventDefaultを参照 

A.6.4 MouseEvent 

ポインティング装置の処理要求に関連した特定の文脈情報を提供するEvent。 

MouseEventであるEvent型:click,mousedown,mouseup,mouseover,mousemove,mouseout 

このインタフェースは,DOM Level 2 Events([DOM2EVENTS]の1.6.2)で定義されるMouseEventイン

タフェースの部分集合である。 

IDL定義 

interface MouseEvent : UIEvent 

 readonly attribute long screenX; 

 readonly attribute long screenY; 

 readonly attribute long clientX; 

 readonly attribute long clientY; 

365 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

 readonly attribute unsigned short button; 

}; 

定数は定義されない。 

属性 

screenX  

screenXを参照 

screenY  

screenYを参照 

clientX  

clientXを参照 

clientY  

clientYを参照 

button  

buttonを参照 

メソッドは定義されない。 

A.6.5 MouseWheelEvent 

マウスホイール(mouse wheel)の処理要求に関連した特定の文脈情報を提供するEvent。 

MouseWheelEventであるEvent型:mousewheel 

このインタフェースは,DOM Level 3 Events([DOM3EVENTS]の1.7.6)で定義されるMouseWheelEvent

インタフェースの部分集合であり,DOM Level 2 Events([DOM2EVENTS]の1.6.2)で定義されるMouseEvent

インタフェースの属性を継承している。 

IDL定義 

interface MouseWheelEvent : MouseEvent 

 readonly attribute long wheelDelta; 

}; 

定数は定義されない。 

属性 

wheelDelta  

ホイールがY軸の周りを回転した距離。その正の値は,縦方向の装置では利用者から離れる方向(横

方向の装置では左方向)にホイールが回転したことを示さなければならない。その負の値は,縦方向

の装置では利用者に向かう方向(横方向の装置では右方向)にホイールが回転したことを示さなけれ

ばならない。 

メソッドは定義されない。 

A.6.6 TextEvent 

TextEventであるEvent型:textInput 

このインタフェースは,DOM Level 3 Events([DOM3EVENTS]の1.7.2)で定義されるTextEventインタ

フェースの部分集合である。 

366 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

IDL定義 

interface TextEvent : UIEvent 

 readonly attribute DOMString data; 

}; 

定数は定義されない。 

属性 

data  

dataは,文字装置が生成した文字値を保持する。これは,単一のUnicode文字,又は空ではないUnicode

文字の列 [UNICODE] であってもよい。それらの文字は,Unicode Normalization Forms [UAX15] に定

義されているUnicode正規化形式NFCに沿って正規化することが望ましい。この属性はnullにはなら

ず,また,空の文字列も含まない。 

メソッドは定義されない。 

A.6.7 KeyboardEvent 

キーボード装置に関連した特定の文脈情報を提供する。それぞれのKeyboardEventは,識別子を用いて

キーを参照。 

KeyboardEventsであるEvent型:keydown及びkeyup 

このインタフェースは,DOM Level 3 Events([DOM3EVENTS]の1.7.3)で定義されるKeyboardEventイ

ンタフェースの部分集合である。 

IDL定義 

interface KeyboardEvent : UIEvent 

 readonly attribute DOMString keyIdentifier; 

}; 

定数は定義されない。 

属性 

keyIdentifier  

keyIdentifierは,そのキーの識別子をもつ。キーの識別子は,次に示すキー識別子セットにおいて定

義される。実装においてキーを識別することができない場合には,キー識別子を"Unidentified"としな

ければならない。 

メソッドは定義されない。 

キー識別子セット 

これは,DOM Level 3 Events([DOM3EVENTS]のA.2)で定義されるキー識別子の部分集合であり,現

在モバイル機器で実装されている機能性の内容出力を定義する。 

このA.6.7におけるキー識別子一覧は完全なものではなく,入力装置では独自のキー識別子を定義しな

ければならない可能性がある。将来DOM Level 3 Eventsにおいて,どのキー識別子を使用すればよいかを

決定するアルゴリズムが定義されると予想される。将来のSVG仕様は,キーボード処理要求及びキー識別

子の明確な処理のためにDOM Level 3 Eventsに適合することになるだろう。 

367 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"U+0000", "U+0001", ..., "U+10FFFF"はUnicodeに基づくキー識別子である[UNICODE]。利用者エージェ

ントは,キーの識別のために,内容における文字列リテラル文字をUnicodeコードポイントとして処理し

てもよい。 

"Accept" 

承認(受諾,OK)キー 

"Again" 

再開キー 

"AllCandidates" 

全候補キー 

"Alphanumeric" 

英数字キー 

"Alt" 

Alt(Menu)キー 

"AltGraph" 

Alt-Graphキー 

"Apps" 

Applicationキー 

"Attn" 

ATTNキー 

"BrowserBack" 

ブラウザ後退キー 

"BrowserFavorites" 

ブラウザお気に入りキー 

"BrowserForward" 

ブラウザ前進キー 

"BrowserHome" 

ブラウザホームキー 

"BrowserRefresh" 

ブラウザ更新キー 

"BrowserSearch" 

ブラウザ検索キー 

"BrowserStop" 

ブラウザ停止キー 

"CapsLock" 

Caps Lock(Capital)キー 

"Clear" 

クリアキー 

"CodeInput" 

コード入力キー 

"Compose" 

368 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Composeキー 

"Control" 

Control(Ctrl)キー 

"Crsel" 

Crselキー 

"Convert" 

変換キー 

"Copy" 

複写キー 

"Cut" 

切取りキー 

"Down" 

下矢印キー 

"DownLeft" 

斜め左下矢印キー 

"DownRight" 

斜め右下矢印キー 

"End" 

Endキー 

"Enter" 

Enterキー 

注記 このキー識別子は,Returnキー(マッキントッシュテンキー)にも使用される。 

"EraseEof" 

Erase EOFキー 

"Execute" 

Executeキー 

"Exsel" 

Exselキー 

"F1" 

F1キー 

"F2" 

F2キー 

"F3" 

F3キー 

"F4" 

F4キー 

"F5" 

F5キー 

"F6" 

F6キー 

369 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"F7" 

F7キー 

"F8" 

F8キー 

"F9" 

F9キー 

"F10" 

F10キー 

"F11" 

F11キー 

"F12" 

F12キー 

"F13" 

F13キー 

"F14" 

F14キー 

"F15" 

F15キー 

"F16" 

F16キー 

"F17" 

F17キー 

"F18" 

F18キー 

"F19" 

F19キー 

"F20" 

F20キー 

"F21" 

F21キー 

"F22" 

F22キー 

"F23" 

F23キー 

"F24" 

F24キー 

"FinalMode" 

一部のアジア圏キーボードで使用されるFinal Mode(Final)キー 

"Find" 

Findキー 

370 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"FullWidth" 

全角文字キー 

"HalfWidth" 

半角文字キー 

"HangulMode" 

ハングル(韓国文字)モードキー 

"HanjaMode" 

ハンジャ(韓国文字)モードキー 

"Help" 

Helpキー 

"Hiragana" 

平仮名(日本の仮名文字)キー 

"Home" 

ホームキー 

"Insert" 

Insert(Ins)キー 

"JapaneseHiragana" 

日本語平仮名キー 

"JapaneseKatakana" 

日本語片仮名キー 

"JapaneseRomaji" 

日本語ローマ字キー 

"JunjaMode" 

Junjaモードキー 

"KanaMode" 

仮名モード(Kana Lock)キー 

"KanjiMode" 

漢字(中国に由来する表意文字の日本語名)モードキー 

"Katakana" 

片仮名(日本の仮名文字)キー 

"LaunchApplication1" 

Application 1開始キー 

"LaunchApplication2" 

Application 2開始キー 

"LaunchMail" 

メール開始キー 

"Left" 

左矢印キー 

"Menu" 

Menuキー 

371 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"Meta" 

Metaキー 

"MediaNextTrack" 

メディア次トラックキー 

"MediaPlayPause" 

メディア再生・一時停止キー 

"MediaPreviousTrack" 

メディア前トラックキー 

"MediaStop" 

メディア停止キー 

"ModeChange" 

モード変更キー 

"Nonconvert" 

無変換(Don't Convert)キー 

"NumLock" 

Number Lockキー 

"PageDown" 

Page Down(Next)キー 

"PageUp" 

Page Upキー 

"Paste" 

貼付けキー 

"Pause" 

一時停止キー 

"Play" 

再生キー 

"PreviousCandidate" 

前候補ファンクションキー 

"PrintScreen" 

Print Screen(PrintScrn,SnapShot)キー 

"Process" 

Processキー 

"Props" 

Propsキー 

"Right" 

右矢印キー 

"RomanCharacters" 

ローマ文字ファンクションキー 

"Scroll" 

Scroll Lockキー 

372 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"Select" 

選択キー 

"SelectMedia" 

メディア選択キー 

"Shift" 

Shiftキー 

"Soft1" 

Soft1キー 

"Soft2" 

Soft2キー 

"Soft3" 

Soft3キー 

"Soft4" 

Soft4キー 

"Stop" 

停止キー 

"Up" 

上矢印キー 

"UpLeft" 

斜め左上矢印キー 

"UpRight" 

斜め右上矢印キー 

"Undo" 

取消しキー 

"VolumeDown" 

ボリュームダウンキー 

"VolumeMute" 

消音キー 

"VolumeUp" 

ボリュームアップキー 

"Win" 

Windowsロゴキー 

"Zoom" 

ズームキー 

"U+0008" 

Backspace(Back)キー 

"U+0009" 

水平タブ(Tab)キー 

"U+0018" 

Cancelキー 

373 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"U+001B" 

エスケープ(Esc)キー 

"U+0020" 

Space(スペースバー)キー 

"U+0021" 

感嘆符(Factorial,Bang)キー(!) 

"U+0022" 

引用符(二重引用符)キー(") 

"U+0023" 

番号記号(ナンバー記号,ハッシュ,クロスハッチ,シャープ記号)キー(#) 

"U+0024" 

ドル記号(ミルレイス,エスクード)キー($) 

"U+0026" 

アンパサンドキー(&) 

"U+0027" 

アポストロフィ(Apostrophe-Quote,APL Quote)キー(') 

"U+0028" 

左丸括弧(Opening Parenthesis)キー(() 

"U+0029" 

右丸括弧(Closing Parenthesis)キー()) 

"U+002A" 

アスタリスク(スター)キー(*) 

"U+002B" 

正符号(プラス)キー(+) 

"U+0025" 

パーセント記号(パーセント)キー(+) 

"U+002C" 

コンマ記号(小数点記号)キー(,) 

"U+002D" 

ハイフン(ハイフン又はマイナス記号)キー(-) 

"U+002E" 

終止符(ピリオド,ドット,小数点)キー(.) 

"U+002F" 

斜線(slash,virgule,shilling)キー(/) 

"U+0030" 

数字0キー(0) 

"U+0031" 

数字1キー(1) 

"U+0032" 

数字2キー(2) 

374 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"U+0033" 

数字3キー(3) 

"U+0034" 

数字4キー(4) 

"U+0035" 

数字5キー(5) 

"U+0036" 

数字6キー(6) 

"U+0037" 

数字7キー(7) 

"U+0038" 

数字8キー(8) 

"U+0039" 

数字9キー(9) 

"U+003A" 

コロンキー(:) 

"U+003B" 

セミコロンキー(;) 

"U+003C" 

小なり記号キー(<) 

"U+003D" 

等号キー(=) 

"U+003E" 

大なり記号キー(>) 

"U+003F" 

疑問符キー(?) 

"U+0040" 

アットマークキー(@) 

"U+0041" 

ラテン語大文字Aキー(A) 

"U+0042" 

ラテン語大文字Bキー(B) 

"U+0043" 

ラテン語大文字Cキー(C) 

"U+0044" 

ラテン語大文字Dキー(D) 

"U+0045" 

ラテン語大文字Eキー(E) 

"U+0046" 

ラテン語大文字Fキー(F) 

375 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"U+0047" 

ラテン語大文字Gキー(G) 

"U+0048" 

ラテン語大文字Hキー(H) 

"U+0049" 

ラテン語大文字Iキー(I) 

"U+004A" 

ラテン語大文字Jキー(J) 

"U+004B" 

ラテン語大文字Kキー(K) 

"U+004C" 

ラテン語大文字Lキー(L) 

"U+004D" 

ラテン語大文字Mキー(M) 

"U+004E" 

ラテン語大文字Nキー(N) 

"U+004F" 

ラテン語大文字Oキー(O) 

"U+0050" 

ラテン語大文字Pキー(P) 

"U+0051" 

ラテン語大文字Qキー(Q) 

"U+0052" 

ラテン語大文字Rキー(R) 

"U+0053" 

ラテン語大文字Sキー(S) 

"U+0054" 

ラテン語大文字Tキー(T) 

"U+0055" 

ラテン語大文字Uキー(U) 

"U+0056" 

ラテン語大文字Vキー(V) 

"U+0057" 

ラテン語大文字Wキー(W) 

"U+0058" 

ラテン語大文字Xキー(X) 

"U+0059" 

ラテン語大文字Yキー(Y) 

"U+005A" 

ラテン語大文字Zキー(Z) 

376 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

"U+005B" 

左角括弧(Opening Square Bracket)キー([) 

"U+005C" 

逆斜線(Backslash)キー(¥) 

"U+005D" 

右角括弧(Closing Square Bracket)キー(]) 

"U+005E" 

曲折アクセントキー(^) 

"U+005F" 

下線記号(Spacing Underscore,Underscore)キー(̲) 

"U+0060" 

抑音アクセント符号(Back Quote)キー(̀) 

"U+007B" 

左中括弧(Opening Curly Bracket,Opening Brace,Brace Left)キー({) 

"U+007C" 

縦線(縦棒,パイプ)キー(|) 

"U+007D" 

右中括弧(Closing Curly Bracket,Closing Brace,Brace Right)キー(}) 

"U+007F" 

Delete(Del)キー 

"U+00A1" 

逆感嘆符キー(¡) 

"U+0300" 

統合抑音アクセント符号(Greek Varia,Dead Grave)キー 

"U+0301" 

統合揚音アクセント符号(強勢符号,Greek Oxia,Tonos,Dead Eacute)キー 

"U+0302" 

統合曲折アクセント(Hat,Dead Circumflex)キー 

"U+0303" 

統合波形ダッシュ(Dead Tilde)キー 

"U+0304" 

統合長音符号(Long,Dead Macron)キー 

"U+0306" 

統合短音符号(Short,Dead Breve)キー 

"U+0307" 

統合ドットアバブ(Derivative,Dead Above Dot)キー 

"U+0308" 

統合分音符号(二重ドットアバブ,ウムラウト記号,Greek Dialytika,Double Derivative,Dead 

Diaeresis)キー 

"U+030A" 

377 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

統合リングアバブ(Dead Above Ring)キー 

"U+030B" 

統合二重揚音アクセント符号(Dead Doubleacute)キー 

"U+030C" 

統合キャロン(ハチェック,V Above,Dead Caron)キー 

"U+0327" 

統合セディーユ(Dead Cedilla)キー 

"U+0328" 

統合オゴネク(Nasal Hook,Dead Ogonek)キー 

"U+0345" 

統合Greek Ypogegrammeni(Greek Non-Spacing Iota Below,Iota Subscript,Dead Iota)キー 

"U+20AC" 

ユーロ通貨記号キー(€) 

"U+3099" 

統合片仮名・平仮名濁点(Dead Voiced Sound)キー 

"U+309A" 

統合片仮名・平仮名半濁点(Dead Semivoiced Sound)キー 

A.6.8 UIEvent 

UIEventインタフェースは,利用者インタフェースの処理要求に関連した特定の文脈情報を提供する。 

UIEventであるEvent型:DOMFocusIn, DOMFocusOut, DOMActivate, MouseEvent, TextEvent, KeyboardEvent 

このインタフェースは,DOM Level 2 Events([DOM2EVENTS]の1.6.1)で定義されるUIEventインタフ

ェースの部分集合である。 

IDL定義 

interface UIEvent : Event 

 readonly attribute long detail; 

}; 

定数は定義されない。 

属性 

detail  

detailを参照 

メソッドは定義されない。 

A.6.9 ProgressEvent 

ここで定義されるprogress処理要求は,Progress Events 1.0 [PROGRESSEVENTS] で定義されているそれ

の部分集合となることが意図されている。 

ラスタ画像,映画及び複雑なSVG内容のような多くの資源は,ダウンロードするためにかなりの時間を

要することがある。ファイル全体がダウンロードされるまで,その内容の表示又はアニメーションの開始

を遅らせることを作者が求める場合もあるだろう。また,そのダウンロードが進行中であることについて,

ビューアへの何らかのフィードバック(例 読込み進捗画面)を与えることを作者が求める場合もある。 

background image

378 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

利用者エージェントが'xlink:href'属性で参照される(外部)資源を読み込んでいる途中において

ProgressEventは発生する。 

利用者エージェントは,読込み操作の最初(すなわち,資源へのアクセスを開始する直前)にProgressEvent

を実行しなければならない。この処理要求はloadstart型である。 

利用者エージェントは,読込み操作の最後(すなわち,読込みが完了して,利用者エージェントが対応

する資源を描画する準備ができた後)にProgressEventを実行しなければならない。この処理要求はloadend

型である。 

利用者エージェントは,loadstart処理要求とloadend処理要求との間にProgressEventを実行してもよい。

そのような処理要求はprogress型である。 

ProgressEventであるEvent型:progress, loadstart, loadend 

IDL定義 

interface ProgressEvent : Event 

 readonly attribute boolean lengthComputable; 

 readonly attribute unsigned long loaded; 

 readonly attribute unsigned long total; 

}; 

定数は定義されない。 

属性 

lengthComputable  

falseの場合にはバイトの総量を一切計算することができず,total値を無視することが望ましい。ダ

ウンロードされた資源のサイズが未知であったり,そのデータが既に到着していたりする場合にこれ

が発生する可能性がある。 

loaded  

ダウンロードの開始後にダウンロードされたバイト数を指定する。この値は,loadstart又はloadend

処理要求については無視される。 

total  

読込み操作で予想される総バイト数を指定する。progress処理要求では,それが予想される総バイ

ト数を指定していることが望ましい。 

メソッドは定義されない。 

例: ProgressEvent  

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     version="1.2" baseProfile="tiny" width="300" height="430"> 

  <script><![CDATA[ 

    function showImage(imageHref) { 

background image

379 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

      var image = document.getElementById('myImage'); 

      image.setTraitNS("http://www.w3.org/1999/xlink", "href", imageHref); 

    } 

    function imageLoadStart(evt) { 

      var progressBar = document.getElementById('progressBar'); 

      var loadingAnimation = document.getElementById('loadingAnimation'); 

      progressBar.setFloatTrait("width", 0); 

      loadingAnimation.beginElement(); 

    } 

    function imageLoadProgress(evt) { 

      if (evt.lengthComputable) { 

        var progressBar = document.getElementById('progressBar'); 

        progressBar.setFloatTrait("width", 100 * (evt.loaded / evt.total)); 

        progressBar.setTrait("display", "inline"); 

      } 

    } 

    function imageLoadComplete(evt) { 

      var progressBar = document.getElementById('progressBar'); 

      var loadingAnimation = document.getElementById('loadingAnimation'); 

      progressBar.setTrait("display", "none"); 

      loadingAnimation.endElement(); 

    } 

  ]]></script> 

  <image xml:id="myImage" xlink:href="imageA.png" width="300" height="400"> 

    <handler ev:event="loadstart"> 

      imageLoadStart(evt); 

    </handler> 

    <handler ev:event="progress"> 

      imageLoadProgress(evt); 

    </handler> 

    <handler ev:event="loadend"> 

      imageLoadComplete(evt); 

    </handler> 

background image

380 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  </image> 

  <rect rx="4" x="50" y="400" width="200" height="30" cursor="pointer"> 

    <handler ev:event="click"> 

      showImage('imageB.png'); 

    </handler> 

  </rect> 

  <text x="150" y="420" font-size="15" fill="white" text-anchor="middle" 

        text-decoration="underline" pointer-events="none"> 

    Load other image 

  </text> 

  <g display="none"> 

    <rect x="100" y="300" height="10" width="100" fill="black"/> 

    <rect xml:id="progressBar" x="100" y="300" width="50" height="10" fill="lime"/> 

  </g> 

  <text x="150" y="330" font-size="15" text-anchor="middle" display="none"> 

    Loading... 

    <animate xml:id="loadingAnimation" attributeName="display" 

             begin="indefinite" dur="2s" repeatDur="indefinite" 

             calcMode="discrete" values="inline; none"/> 

  </text> 

</svg> 

A.7 Module: smil 

SMIL APIから単一の部分集合化されたインタフェースが含まれる。 

A.7.1 ElementTimeControl 

このインタフェースは,SMIL(時間付け要素及び'svg'要素)と互換性のあるアニメーションの振る舞い

を定義する要素のために共通メソッドを定義する。 

このインタフェースは,SMIL Animation [SMILANIM] で定義されるElementTimeControlインタフェース

の部分集合である。 

注記 一時停止機能については,SVGTimedElementインタフェースを参照。 

IDL定義 

interface ElementTimeControl 

 void beginElementAt(in float offset); 

 void beginElement(); 

 void endElementAt(in float offset); 

 void endElement(); 

381 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

beginElementAt  

現在の時刻に指定された時間差をプラス(又はマイナス)された開始instance時間を作成する。新

しいinstance時間は,begin instance times listに追加される。 

パラメタ 

in float offset 

要素を開始する秒のオフセット 

戻り値なし 

例外なし 

beginElement  

現在時刻のための開始instance時間を作成する。新しいinstance時間は,begin instance times listに追

加される。これは,beginElementAt(0)と同等である。 

パラメタなし 

戻り値なし 

例外なし 

endElementAt  

指定されたオフセットをプラス(又はマイナス)する現在時刻のための終了instance時間を作成す

る。新しいinstance時間は,end instance times listに追加される。 

パラメタ 

in float offset 

要素を終了する秒のオフセット 

戻り値なし 

例外なし 

endElement  

現在時刻のための終了instance時間を作成する。新しいinstance時間は,end instance times listに追

加される。これは,endElementAt(0)と同等である。 

パラメタなし 

戻り値なし 

例外なし 

A.7.2 TimeEvent 

TimeEventインタフェースは,文書のアニメーションによって発生する処理要求に関する文脈情報を提

供する。これは,SMIL Animation([SMILANIM]の6.2)で定義されるTimeEventインタフェースの部分集

合である。 

全ての時間付け要素によって発生させられる処理要求。 

TimeEventであるEvent型:beginEvent, endEvent, repeatEvent 

IDL定義 

interface TimeEvent : Event 

382 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

 readonly attribute long detail; 

}; 

定数は定義されない。 

属性 

detail  

TimeEventの詳細情報(その処理要求の型に依存する情報)を指定する。beginEvent及びendEvent

については,detailフィールドを使用しない。repeatEventについては,detailフィールドは現在の反復

を含む。 

メソッドは定義されない。 

A.8 Module: svg 

A.8.1 SVGException 

SVG特有のエラーに処理される例外。 

このインタフェースは,SVG 1.1([SVG11]のB.3)で定義されるSVGExceptionインタフェースと同じで

ある。 

IDL定義 

exception SVGException 

 unsigned short code; 

}; 

// ExceptionCode 

const unsigned short SVG̲WRONG̲TYPE̲ERR 

= 0; 

const unsigned short SVG̲INVALID̲VALUE̲ERR 

= 1; 

const unsigned short SVG̲MATRIX̲NOT̲INVERTABLE = 2; 

定数 

SVG̲WRONG̲TYPE̲ERR  

B.3を参照。 

SVG̲INVALID̲VALUE̲ERR  

B.3を参照。 

SVG̲MATRIX̲NOT̲INVERTABLE  

B.3を参照。 

属性は定義されない。 

メソッドは定義されない。 

A.8.2 SVGDocument 

IDL定義 

interface SVGDocument : Document, EventTarget 

383 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

}; 

定数は定義されない。 

属性は定義されない。 

メソッドは定義されない。 

A.8.3 SVGUseElement 

このインタフェースは'use'要素を表す。この規格では,このインタフェースはそれが継承するもの以外

には追加的なメソッドは一切もっていない。それは,他のSVGプロファイルとのアーキテクチャの一貫性

のために含まれる。 

IDL定義 

interface SVGUseElement : SVGLocatableElement 

}; 

定数は定義されない。 

属性は定義されない。 

メソッドは定義されない。 

A.8.4 SVGElementInstance 

各'use'要素について,uDOMはSVGElementInstanceオブジェクトの複製ツリーで参照される内容を表現

する。 

このインタフェースは,SVG 1.1([SVG11]の5.17)で定義されるSVGElementInstanceインタフェースの

部分集合である。 

IDL定義 

interface SVGElementInstance : EventTarget 

 readonly attribute SVGElement correspondingElement; 

 readonly attribute SVGUseElement correspondingUseElement; 

}; 

定数は定義されない。 

属性 

correspondingElement  

correspondingElementを参照 

correspondingUseElement  

correspondingUseElementを参照 

メソッドは定義されない。 

次の例では,三つの'use'要素が同一の'rect'要素を使用している。各'use'は,使用される'rect'まで継承され

る異なった'fill'プロパティをもつ。その結果,異なった'fill'色をもつ三つの'rect'要素ができる。これら三つ

の'rect'要素のうちの一つをクリックすると,四番目の'rect'の色がクリックされたものの色になる。元の'rect'

が'defs'要素にない場合,元の'rect'がクリックされるとスクリプトが例外を処理されることに注意する。こ

background image

384 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

れはcurrentTarget属性がcorrespondingUseElement属性をもっていないSVGElementを返すからである。 

例:SVGElementInstanceインタフェースの使用(ECMAScript)  

<svg xmlns="http://www.w3.org/2000/svg" 

     xmlns:xlink="http://www.w3.org/1999/xlink" 

     xmlns:ev="http://www.w3.org/2001/xml-events" 

     version="1.2" baseProfile="tiny" width="640" height="480" viewBox="0 0 640 480"> 

  <defs> 

    <rect xml:id="r1" width="90" height="65"/> 

  </defs> 

  <use xlink:href="#r1" x="50" y="200" fill="red"/> 

  <use xlink:href="#r1" x="250" y="200" fill="blue"/> 

  <use xlink:href="#r1" x="450" y="200" fill="green"/> 

  <rect xml:id="r2" x="250" y="50" width="90" height="65"/> 

  <ev:listener observer="r1" event="ev:click" handler="#handler"/> 

  <handler 

xml:id="handler" 

type="application/ecmascript">changeColor(evt);</handler> 

  <script type="application/ecmascript"> 

    var target = document.getElementById("r2"); 

    function changeColor(evt) { 

      var useElement = evt.currentTarget.correspondingUseElement; 

      target.setRGBColorTrait("fill", useElement.getRGBColorTrait("fill")); 

    } 

  </script> 

</svg> 

A.8.5 SVGSVGElement 

このインタフェースは,SVG文書ツリーにおける'svg'要素を表す。 

利用者エージェント変換 

uDOM属性currentScale,currentRotate及びcurrentTranslateは,SVG文書の一番外の水準(すなわち,'svg'

要素の外)に適用される利用者エージェント変換を形成するために結合される。“拡大”が認められている

場合(すなわち,'zoomAndPan'属性がmagnifyに設定されている場合),利用者エージェントの特定のUI

を通して,潜在的にそれらの値を変更することができる。行列を乗じることによって利用者エージェント

変換を達成することができる。 

385 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

[currentScale         0         currentTranslate.x]      [cos(currentRotate)   -sin(currentRotate)     0] 

[     0        currentScale     currentTranslate.y]  by  [sin(currentRotate)    cos(currentRotate)     0] 

[     0             0                1       ]      [     0                   0            1] 

つまり,座標系を移動し,その次に拡大縮小し,その次に回転させている。拡大縮小及び回転操作のた

めの参照点は原点(0, 0)である。 

IDL定義 

interface SVGSVGElement : SVGLocatableElement, SVGTimedElement 

 const unsigned short NAV̲AUTO  

= 1; 

 const unsigned short NAV̲NEXT  

= 2; 

 const unsigned short NAV̲PREV  

= 3; 

 const unsigned short NAV̲UP 

= 4; 

 const unsigned short NAV̲UP̲RIGHT 

= 5; 

 const unsigned short NAV̲RIGHT  

= 6; 

 const unsigned short NAV̲DOWN̲RIGHT 

= 7; 

 const unsigned short NAV̲DOWN  

= 8; 

 const unsigned short NAV̲DOWN̲LEFT 

= 9; 

 const unsigned short NAV̲LEFT  

= 10; 

 const unsigned short NAV̲UP̲LEFT 

= 11; 

 attribute float currentScale; 

 attribute float currentRotate; 

 readonly attribute SVGPoint currentTranslate; 

 readonly attribute SVGRect viewport; 

 float getCurrentTime(); 

 void setCurrentTime(in float seconds); 

 SVGMatrix createSVGMatrixComponents(in float a, in float b, in float c, in float 

d, in float e, in float f); 

 SVGRect createSVGRect(); 

 SVGPoint createSVGPoint(); 

 SVGPath createSVGPath(); 

 SVGRGBColor createSVGRGBColor(in float red, in float green, in float blue)  

  

raises(SVGException); 

 void moveFocus(in unsigned short motionType)  

  

raises(DOMException); 

 void setFocus(in EventTarget theObject)  

  

raises(DOMException); 

 EventTarget getCurrentFocusedObject(); 

}; 

386 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

定数 

NAV̲AUTO  

利用者エージェント自体のアルゴリズムに基づき,フォーカス(focus)を次のフォーカス(focus)

可能なオブジェクトに移動させなければならないことを示す。 

NAV̲NEXT  

現在の'nav-next'の値に基づき,フォーカス(focus)を次のフォーカス(focus)可能なオブジェクト

に移動させなければならないことを示す。 

NAV̲PREV  

現在のnav-prevの値に基づき,フォーカス(focus)を前のフォーカス(focus)可能なオブジェクト

に移動させなければならないことを示す。 

NAV̲UP  

フォーカス(focus)を上に移動させる要求を示す。 

NAV̲UP̲RIGHT  

フォーカス(focus)を右上に移動させる要求を示す。 

NAV̲RIGHT  

フォーカス(focus)を右に移動させる要求を示す。 

NAV̲DOWN̲RIGHT  

フォーカス(focus)を右下に移動させる要求を示す。 

NAV̲DOWN  

フォーカス(focus)を下に移動させる要求を示す。 

NAV̲DOWN̲LEFT  

フォーカス(focus)を左下に移動させる要求を示す。 

NAV̲LEFT  

フォーカス(focus)を左に移動させる要求を示す。 

NAV̲UP̲LEFT  

フォーカス(focus)を左上に移動させる要求を示す。 

属性 

currentScale  

現在の利用者エージェントの拡大縮小(ズーム)係数。currentScaleの初期値は1である。 

currentRotate  

現在の利用者エージェントのローテーション角(度)。currentRotateの初期値は0である。 

currentTranslate  

現在の利用者エージェントの移動(スクロール又はパンに利用される。)。返されるSVGPointオブ

ジェクトは“生きて”いて,x及びyコンポーネントを設定すると,利用者エージェントの移動が変

更される。currentTranslateの初期値は,値(0, 0)のSVGPointオブジェクトである。 

viewport  

この'svg'要素に対応するビューポート(暗黙的又は明示的)の位置及びサイズ。実際に利用者エー

ジェントが内容を描画するときには,その位置及びサイズ値は描画時の実際値を表す。 

このSVG文書が別の文書の一部として埋め込まれる場合には(例 HTML 'object'要素の利用),そ

の位置及びサイズは親文書の座標系における単位のない値となる(CSS 2仕様書で説明されているよ

background image

387 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

うに,親がCSS又はXSLレイアウトを使用している場合,その単位のない値は現在のCSS又はXSL

ビューポートのためにピクセル単位を表現する。)。親要素に座標系がない場合には,利用者エージェ

ントはこの属性に妥当な初期値を与えることが望ましい。 

独立SVG文書に対しては,'x'及び'y'は両方とも0,'width'はホスト環境が(その内容を描画するこ

とができる)SVG利用者エージェントに提供するビューポートの幅,及び'height'は(ホスト環境から

のピクセル座標系で表現された全ての値をもつ)ビューポートの高さでなければならない。ここでは,

そのピクセル座標系はHTMLに提示された同一のピクセル座標系に適合し,また,CSS 2仕様書で説

明されるピクセル座標系モデルにも適合していることが望ましい。“ピクセル座標系”は,ホスト固有

であることに注意する。ホストがピクセル座標系に使用することができる二つの方法として,実際の

装置のピクセル,又は(特に高解像度の装置のために)SVG及びCSSの"px"座標にぴったり適合する

疑似装置ピクセルがある。 

オブジェクト自体及びその内容は,共に読取り専用である。それを変更しようとすると,エラーコ

ードNO̲MODIFICATION̲ALLOWED̲ERRをもつDOMExceptionが生じる。返されるSVGRectオブ

ジェクトは“生きて”いる。つまり,ビューポートのサイズ又は位置が変化すると,x,y,width及

びheight属性が自動的に更新される。 

メソッド 

getCurrentTime  

文書時間(秒)を返す。 

文書時間軸が始まる前にgetCurrentTimeが呼び出されると(例 'playbackOrder'が'onLoad'に設定さ

れていて,最上位の'svg'要素のload処理要求が実行される前に'script'要素で実行されるスクリプト),

0が返される。 

戻り値 

float 

現在の文書時間(秒),又は文書時間軸が開始していない場合には0。 

パラメタなし 

例外なし 

setCurrentTime  

文書時間(秒)を設定する。このAPIは,時間軸における前方及び後方への探索に対応する。探索

後,アニメーションは引き続き新しい時間から(前方に)再生される。secondsが負の場合,文書は時

間0秒まで探索する。 

文書時間軸が始まる前にsetCurrentTimeが呼び出された場合(例 'playbackOrder'が'onLoad'に設定さ

れていて,最上位の'svg'要素のload処理要求が実行される前に'script'要素で実行されるスクリプト),

一度文書時間軸が開始されれば,一番新しいメソッドの呼出しにおけるseconds値は,文書時間が探

索される時間を与える。 

パラメタ 

in float seconds 

探索する文書時間(秒)を設定する。 

戻り値なし 

例外なし 

createSVGMatrixComponents  

新しいSVGMatrixオブジェクトを作成する。このオブジェクトは,setMatrixTraitメソッドを使用し

background image

388 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

てSVGMatrix型と互換性があるtraitの値を変更するために利用することができる。行列の内部表現は

次のとおりである。 

  [  a  c  e  ] 

  [  b  d  f  ] 

  [  0  0  1  ] 

  

パラメタ 

in float a 

設定される行列のa成分 

in float b 

設定される行列のb成分 

in float c 

設定される行列のc成分 

in float d 

設定される行列のd成分 

in float e 

設定される行列のe成分 

in float f 

設定される行列のf成分 

戻り値 

SVGMatrix 

作成されるSVGMatrixオブジェクト 

例外なし 

createSVGRect  

新しいSVGRectオブジェクトを作成する。このオブジェクトは,setRectTraitメソッドを使用して

SVGRect型と互換性があるtraitの値を変更するために利用することができる。この新しいSVGRect

のx,y,width及びheightの初期値は0である。 

パラメタなし 

戻り値 

SVGRect 

作成されるSVGRect 

例外なし 

createSVGPoint  

新しいSVGPointオブジェクトを作成する。この新しいSVGPointのx及びyの初期値は0である。 

パラメタなし 

戻り値 

SVGPoint 

作成されるSVGPoint 

例外なし 

createSVGPath  

新しいSVGPathオブジェクトを作成する。このオブジェクトは,setPathTraitメソッドを使用して

SVGPath型と互換性があるtraitの値を変更するために利用することができる。 

パラメタなし 

戻り値 

SVGPath 

作成されるSVGPath 

例外なし 

createSVGRGBColor  

新しいSVGRGBColorオブジェクトを作成する。このオブジェクトは,setRGBColorTraitメソッドを

使用してSVGRGBColor型と互換性があるtraitの値を変更するために利用することができる。このパ

background image

389 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ラメタは,色成分ごとに一つの浮動小数点数である。0.0は与えられた色成分の明度が0,また,255.0

は最高明度であることを示す。元はrgb(%,%,%)構文による色は,断片的な成分をもつ可能性がある。

範囲外の色は,0.0よりも小さい(又は255.0よりも大きい)成分値をもってもよい。 

パラメタ 

in float red 

SVGRGBColorの赤成分 

in float green 

SVGRGBColorの緑成分 

in float blue 

SVGRGBColorの青成分 

戻り値 

SVGRGBColor 

作成されるSVGRGBColor 

例外なし 

moveFocus  

パラメタの値に基づいて異なるオブジェクトに現在のフォーカス(focus)を移動させる。利用者エ

ージェントは,その文書で現在フォーカス(focus)しているオブジェクトを考慮に入れ,新たにフォ

ーカス(focus)するオブジェクトを見つけなければならない。 

このメソッドが成功した場合は次のとおり。 

・ 処理要求対象として前にフォーカス(focus)されていたオブジェクトをもつDOMFocusOut処理

要求を実行しなければならない。 

・ 続いて,処理要求対象として新たにフォーカス(focus)されるオブジェクトをもつDOMFocusIn

処理要求を実行しなければならない。 

新たにフォーカス(focus)するオブジェクトへの参照は,生成したDOMFocusIn処理要求の

EventTargetインタフェースを用いて得ることができる。 

ナビゲーション管理の方法については,13.13を参照。このメソッドのための振る舞いは,エンド利

用者が(スクリプトではない)同様の移動を行ったとき(例 ジョイスティックの使用,Tabキーの

押下)と同じでなければならない。 

そのメソッドが失敗した場合(すなわち,DOMExceptionが生じた場合),フォーカス(focus)は常

に現在フォーカス(focus)しているオブジェクトの上になければならず,DOMFocusOut又は

DOMFocusIn処理要求は実行されない。 

注記 独立のSVG文書については,利用者エージェントは現在フォーカス(focus)しているオブ

ジェクトを常にもっていなければならない。最初は,SVGDocumentがフォーカス(focus)

されている。 

パラメタ 

in short motionType 

モーションの型 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたモーションの型が対応されて

いない(すなわち,そのインタフェースの定数の一つではない)

場合に生じる。 

DOMException 

INVALID̲ACCESS̲ERR:現在フォーカス(focus)しているオブジ

ェクトが,要求されたモーションの型に対応するナビゲーション

background image

390 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性値をもっていない場合に生じる。例えば,'nav-up'属性をもた

ない要素にmoveFocus(NAV̲UP)が呼び出された場合。 

DOMException 

INVALID̲STATE̲ERR:現在フォーカス(focus)しているオブジェ

クトが,要求されたモーションの型に対応するナビゲーション属

性値をもってはいるが,この属性に示される対象を発見すること

ができない場合,又はそれがフォーカス(focus)可能なオブジェ

クトではない場合に生じる。例えば,'nav-up'属性をもつオブジェ

クトにmoveFocus(NAV̲UP)が呼び出されたものの,その属性値が

フォーカス(focus)することができない要素を参照している場合。 

setFocus  

与えられたオブジェクトにフォーカス(focus)を置く要求。 

このメソッドが成功した場合は次のとおり。 

・ 処理要求対象として前にフォーカス(focus)されていたオブジェクトをもつDOMFocusOut処理

要求を実行しなければならない。 

・ 続いて,処理要求対象として新たにフォーカス(focus)されるオブジェクトをもつDOMFocusIn

処理要求を実行しなければならない。 

新たにフォーカス(focus)するオブジェクトへの参照は,生成したDOMFocusIn処理要求の

EventTargetインタフェースを用いて得ることができる。 

そのメソッドが失敗した場合(すなわち,DOMExceptionが生じた場合),フォーカス(focus)は常

に現在フォーカス(focus)しているオブジェクトの上になければならず,DOMFocusOut又は

DOMFocusIn処理要求は実行されない。 

注記 独立のSVG文書については,利用者エージェントは現在フォーカス(focus)しているオブ

ジェクトを常にもっていなければならない。最初は,SVGDocumentがフォーカス(focus)

されている。 

パラメタ 

in EventTarget theObject 

フォーカス(focus)を受けることが望ましいオブジェクト 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:パラメタ

in

Node

又は

SVGElementInstanceではない,又は要求された要素がフォーカ

ス(focus)可能ではない(すなわち,その要素がフォーカス

(focus)可能ではないことが'focusable'属性によって示される。)

場合に生じる。 

getCurrentFocusedObject  

フォーカス(focus)されるオブジェクトへの参照を返す。これはEventTargetを返す。 

パラメタなし 

戻り値 

EventTarget 

object 

現在フォーカス(focus)されているオブジェクト 

例外なし 

391 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

A.8.6 SVGRGBColor 

このインタフェースは,赤,緑及び青成分による色値を表す。'fill','stroke'及び'color'のような色値を保

存するtraitの読み書きにそれを利用することができる(getRGBColorTraitを使用する。)。 

IDL定義 

interface SVGRGBColor 

 attribute unsigned long red; 

 attribute unsigned long green; 

 attribute unsigned long blue; 

}; 

定数は定義されない。 

属性 

red  

SVGRGBColorの赤成分を返す。 

green  

SVGRGBColorの緑成分を返す。 

blue  

SVGRGBColorの青成分を返す。 

メソッドは定義されない。 

A.8.7 SVGRect 

このインタフェースは,x最小値,y最小値,幅及び高さの値からなるSVGRectデータ型を表す。 

このインタフェースは,SVG 1.1([SVG11]の4.3)で定義されるSVGRectインタフェースと同じである。 

IDL定義 

interface SVGRect 

 attribute float x; 

 attribute float y; 

 attribute float width; 

 attribute float height; 

}; 

定数は定義されない。 

属性 

x  

xを参照 

y  

yを参照 

width  

widthを参照 

392 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

height  

heightを参照 

メソッドは定義されない。 

A.8.8 SVGPoint 

x及びy成分によって特定されるSVGPointデータ型を表す。 

このインタフェースは,SVG 1.1([SVG11]の4.3)で定義されるSVGPointインタフェースと同じである。 

IDL定義 

interface SVGPoint 

 attribute float x; 

 attribute float y; 

 SVGPoint matrixTransform(in SVGMatrix matrix); 

}; 

定数は定義されない。 

属性 

x  

xを参照 

y  

yを参照 

メソッド 

matrixTransform  

matrixTransformを参照 

A.8.9 SVGPath 

このインタフェースは,パスの幾何を定義するために使用されるSVGPathデータ型を表す。 

このインタフェースを用いて作成又は変更されるパスデータは,パスの正規化に示される規則に従って

正規化しなければならない。問合せのためだけのパスデータについては正規化しなくてもよい。 

IDL定義 

interface SVGPath 

 const unsigned short MOVE̲TO = 77; 

 const unsigned short LINE̲TO = 76; 

 const unsigned short CURVE̲TO = 67; 

 const unsigned short QUAD̲TO = 81; 

 const unsigned short CLOSE = 90; 

 readonly attribute unsigned long numberOfSegments; 

 unsigned short getSegment(in unsigned long cmdIndex)  

  

raises(DOMException); 

 float getSegmentParam(in unsigned long cmdIndex, in unsigned long paramIndex)  

  

raises(DOMException); 

background image

393 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

 void moveTo(in float x, in float y); 

 void lineTo(in float x, in float y); 

 void quadTo(in float x1, in float y1, in float x2, in float y2); 

 void curveTo(in float x1, in float y1, in float x2, in float y2, in float x3, in 

float y3); 

 void close(); 

}; 

定数 

MOVE̲TO  

"move to"命令を表す。数値は,文字"M"のUnicodeコードポイントである。 

LINE̲TO  

"line to"命令を表す。数値は,文字"L"のUnicodeコードポイントである。 

CURVE̲TO  

"cubic Bézier curve to"命令を表す。数値は,文字"C"のUnicodeコードポイントである。 

QUAD̲TO  

"quadrative Bézier curve to"命令を表す。数値は,文字"Q"のUnicodeコードポイントである。 

CLOSE  

"close"命令を表す。数値は,文字"Z"のUnicodeコードポイントである。 

属性 

numberOfSegments  

このパス部分の数を返す。 

メソッド 

getSegment  

ゼロベースの命令インデックスによる部分の命令を返す。 

パラメタ 

in unsigned long cmdIndex その部分の命令が取得する命令インデックス 

戻り値 

unsigned short 

部分の命令。MOVE̲TO,LINE̲TO,CURVE̲TO,QUAD̲TO,

又はCLOSEのうちの一つ。 

例外 

DOMException 

INDEX̲SIZE̲ERR:その部分のインデックスが範囲外の場合に

生じる。 

getSegmentParam  

ゼロベースの命令インデックス及びゼロベースのパラメタインデックスによる部分のパラメタを返

す。 

パラメタ 

in unsigned long cmdIndex 

その部分の命令のための命令インデックス 

in unsigned long paramIndex 

取得するパラメタインデックス 

background image

394 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

戻り値 

float 

部分のパラメタ 

例外 

DOMException 

INDEX̲SIZE̲ERR:部分のインデックスが範囲外,又はパラメタ

のインデックスが特定の部分型について範囲外の場合に生じ

る。 

moveTo  

指定された座標と一緒にパスに'M'(絶対move)部分を追加する。 

パラメタ 

in float x 

指定された点のx軸座標 

in float y 

指定された点のy軸座標 

戻り値なし 

例外なし 

lineTo  

指定された座標と一緒にパスに'L'(絶対line)部分を追加する。 

パラメタ 

in float x 

指定された点のx軸座標 

in float y 

指定された点のy軸座標 

戻り値なし 

例外なし 

quadTo  

パスに'Q'(絶対quadratic curve)部分を追加する。 

パラメタ 

in float x1 

最初の制御点のx軸座標 

in float y1 

最初の制御点のy軸座標 

in float x2 

最後の終点のx軸座標 

in float y2 

最後の終点のy軸座標 

戻り値なし 

例外なし 

curveTo  

パスに'C'(絶対cubic curve)部分を追加する。 

パラメタ 

in float x1 

最初の制御点のx軸座標 

in float y1 

最初の制御点のy軸座標 

in float x2 

二番目の終点のx軸座標 

in float y2 

二番目の終点のy軸座標 

in float x3 

最後の終点のx軸座標 

in float y3 

最後の終点のy軸座標 

戻り値なし 

background image

395 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

例外なし 

close  

パスに'z'(close path)部分を追加する。 

A.8.10 SVGMatrix 

このインタフェースは,アフィン変換を表現する行列である。'transform'属性の値を読み,変更するため

にそれを使用することができる。 

注記 このインタフェースのmTranslate,inverse,mMultiply,mScale及びmRotateメソッドは,

SVGMatrixオブジェクトを変化させ,必要な行列演算の実行後SVGMatrixインスタンス自体へ

の参照を返す。 

この行列は,座標を列ベクトルとして,次のような手順で座標ベクトルを行列に乗じることによって,

元の座標(x, y)を行き先の座標(x', y')に変換する。 

    [ x' ]    [  a  c  e  ]   [ x ]   [ a.x + c.y + e ] 

    [ y' ] =  [  b  d  f  ]   [ y ] =  [ b.x + d.y + f ] 

    [ 1 ]    [  0  0  1  ]   [ 1 ]   [     1     ] 

  

IDL定義 

interface SVGMatrix 

 float getComponent(in unsigned long index)  

  

raises(DOMException); 

 SVGMatrix mMultiply(in SVGMatrix secondMatrix); 

 SVGMatrix inverse()  

  

raises(SVGException); 

 SVGMatrix mTranslate(in float x, in float y); 

 SVGMatrix mScale(in float scaleFactor); 

 SVGMatrix mRotate(in float angle); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

getComponent  

その成分のゼロベースのインデックスによって,行列の成分を返す。例えばgetComponent(0)はa,

getComponent(1)はbなど 

パラメタ 

in unsigned long index 

取得する行列成分のインデックス 

戻り値 

float 

行列成分 

例外 

background image

396 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

DOMException 

INDEX̲SIZE̲ERR:indexが不当な場合(例 範囲[0, 5]の外)に

生じる。 

mMultiply  

行列積を実行する。この行列に別の行列を右から乗じ,結果として現在の行列が返される。 

パラメタ 

in SVGMatrix secondMatrix 

右から乗じる行列 

戻り値 

SVGMatrix 

結果としての現在の行列 

例外なし 

inverse  

現在の行列の逆行列を含むSVGMatrixの新しいインスタンスを返す。 

パラメタなし 

戻り値 

SVGMatrix 

現在の行列の逆行列 

例外 

SVGException 

SVG̲MATRIX̲NOT̲INVERTABLE:この行列の行列式が0の

場合に生じる。 

mTranslate  

現在の行列に移動変換を右から乗じ,結果として現在の行列を返す。これは,次のような行列によ

って表されるSVGMatrixオブジェクトをTとしたときのmMultiply(T)の呼出しと同等である。 

        [   1    0    x  ] 

        [   0    1    y  ] 

        [   0    0    1  ] 

パラメタ 

in float x 

x軸方向に座標を移動させる距離 

in float y 

y軸方向に座標を移動させる距離 

戻り値 

SVGMatrix 

結果としての現在の行列 

例外なし 

mScale  

現在の行列に一様なスケール変換を右から乗じ,結果として現在の行列を返す。これは,次のよう

な行列によって表されるSVGMatrixオブジェクトをSとしたときのmMultiply(S)の呼出しと同等であ

る。 

        [   scaleFactor      0          0   ] 

        [       0      scaleFactor      0   ] 

        [       0          0          1   ] 

パラメタ 

in float scaleFactor 

x軸及びy軸に沿って座標を拡大縮小する係数 

戻り値 

background image

397 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVGMatrix 

結果としての現在の行列 

例外なし 

mRotate  

現在の行列に回転変換を右から乗じ,結果として現在の行列を返す。これは,次のような行列によ

って表されるSVGMatrixオブジェクトをRとしたときのmMultiply(R)の呼出しと同等である。 

    [ cos(angle)  -sin(angle)  0 ] 

    [ sin(angle)  cos(angle)   0 ] 

    [   0         0        1 ] 

パラメタ 

in float angle 

回転の角度(度) 

戻り値 

SVGMatrix 

結果としての現在の行列 

例外なし 

A.8.11 SVGLocatable 

要素の位置に関する情報を得るためのインタフェース。 

IDL定義 

interface SVGLocatable 

 SVGRect   getBBox(); 

 SVGMatrix getScreenCTM(); 

 SVGRect   getScreenBBox(); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

getBBox  

要素の包含ボックスを返す。 

パラメタなし 

戻り値 

SVGRect 

包含ボックス。返されるオブジェクトは現在の包含ボックスの値の複写

であり,対応する包含ボックスが変化しても変わらない。 

例外なし 

getScreenCTM  

現在の利用者単位から初期ビューポート座標系への変換行列を返す。MouseEventのclientX及び

clientY座標が初期ビューポート座標系に存在する。文書ツリーがこの要素に接続されない場合,null

が返されることに注意する。このメソッドは,より適切にgetClientCTMと名づけることもできたが,

歴史的な理由によってgetScreenCTMという名前が維持された。getScreenCTMは現在のアニメーショ

ン化の状態の内容出力を反映する(すなわち,getScreenCTMを呼び出す要素に影響する一つ以上の変

background image

398 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

換がアニメーション化されている場合,返される変換行列は,その計算時にアニメーション化された

各変換の現在の状態を反映している。)ことにも注意する。 

パラメタなし 

戻り値 

SVGMatrix 

変換行列。返されるオブジェクトは現在のscreen CTMの値の複写であ

り,対応するscreen CTMが変化しても変わらない。 

例外なし 

getScreenBBox  

スクリーン座標空間における要素の包含ボックスを返す。そのボックスの座標は,

SVGLocatable::getScreenCTMメソッドによって返される行列で現在の利用者座標空間に関連付けられ

る,初期ビューポート座標系にある。 

パラメタなし 

戻り値 

SVGRect 

スクリーン座標空間における包含ボックス。返されるオブジェクトは現

在のスクリーン包含ボックスの値の複写であり,対応するスクリーン包

含ボックスが変化しても変わらない。 

例外なし 

次の例では,getBBox()メソッドの振る舞いを示している。それぞれの例には注釈及びSVGフラグメン

トが与えられている。また,それらの後には次の形式による包含ボックスの値が与えられている。 

[elementId] : {x, y, width, height} | {null} 

これらのx,y,width及びheightは,(指定されたIDをもつ要素へのgetBBoxの呼出しによって返され

る。)SVGRectオブジェクトの値を定義する。包含ボックスがnullになるケースもある(例6を参照)。 

例1:単純グループ及び範囲 

この最初の例には,簡単な基本図形及びグループのためにgetBBoxメソッドによって返された値が示さ

れている。要素を変換してもその利用者空間包含ボックスの値は変わらない。 

<g xml:id="group1" transform="translate(10, 20)" fill="red"> 

    <rect xml:id="rect1" transform="scale(2)" x="10" y="10" width="50" height="50"/> 

    <rect xml:id="rect2" x="10" y="10" width="100" height="100"/> 

    <g xml:id="group2" transform="translate(10, 20)"> 

        <rect xml:id="rect3" x="0" y="10" width="150" height="50"/> 

        <circle xml:id="circle1" cx="20" cy="20" r="100" /> 

    </g> 

</g> 

結果: 

[group1] : {-70.0, -60.0, 230.0, 200.0} 

[rect1] : {10.0, 10.0, 50.0, 50.0} 

[rect2] : {10.0, 10.0, 100.0, 100.0} 

background image

399 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

[group2] : {-80.0, -80.0, 230.0, 200.0} 

[rect3] : {0.0, 10.0, 150.0, 50.0} 

[circle1] : {-80.0, -80.0, 200.0, 200.0}  

例2:width又はheightが0の長方形の包含ボックス 

この例では,要素の包含ボックスはその要素の幾何座標に基づいていることが示されている。例えば,

widthが0の長方形における包含ボックスは,その長方形は描画されないものの,定義することはできる

(次を参照)。 

<g xml:id="group1" transform="translate(10, 20)" fill="red"> 

    <rect xml:id="rect2" x="10" y="10" width="400" height="0"/> 

    <g xml:id="group2" transform="translate(10, 20)"> 

        <rect xml:id="rect3" x="0" y="10" width="150" height="50"/> 

    </g> 

</g> 

結果: 

[group1] : {10.0, 10.0, 400.0, 70.0} 

[rect2] : {10.0, 10.0, 400.0, 0.0} 

[group2] : {0.0, 10.0, 150.0, 50.0} 

[rect3] : {0.0, 10.0, 150.0, 50.0}  

例3:半径0のだ円の包含ボックス 

これは,どのように包含ボックスが要素の幾何に基づいているのかを示した別の例である。x軸半径が

0のだ円の包含ボックスは,(そのだ円は描画されないが)定義することはできる。 

<svg xml:id="mySVG" version="1.2" baseProfile="tiny" width="10" height="20"> 

    <g xml:id="group1" transform="translate(10, 20)" fill="red"> 

        <rect xml:id="rect1" x="10" y="10" width="100" height="100"/> 

        <ellipse xml:id="ellipse1" cx="20" cy="20" rx="0" ry="70" /> 

    </g> 

</svg> 

結果: 

[mySVG] : {20.0, -30.0, 100.0, 160.0} 

[group1] : {10.0, -50.0, 100.0, 160.0} 

[rect1] : {10.0, 10.0, 100.0, 100.0} 

[ellipse1] : {20.0, -50.0, 0.0, 140.0}  

例4:ビューポートが包含ボックスをクリッピングしない。 

この例では,最上位の'svg'要素のビューポートが何かにかかわらず,包含ボックスは幾何に基づいて定

義される。ここでは,その最上位の'svg'要素は幅が0だが,ルート自体とその子のための包含ボックスは

正確に定義される。 

background image

400 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

<svg xml:id="mySVG" version="1.2" baseProfile="tiny" width="0" height="50"> 

    <g xml:id="group1" transform="translate(10, 20)" fill="red" > 

        <rect xml:id="rect1" x="10" y="10" width="50" height="50"/> 

        <g xml:id="group2" transform="translate(10, 20)"> 

            <rect xml:id="rect2" x="0" y="10" width="150" height="0"/> 

            <circle xml:id="circle1" cx="20" cy="20" r="500"/> 

        </g> 

    </g> 

</svg> 

結果: 

[mySVG] : {-460.0, -440.0, 1000.0, 1000.0} 

[group1] : {-470.0, -460.0, 1000.0, 1000.0} 

[rect1] : {10.0, 10.0, 50.0, 50.0} 

[group2] : {-480.0, -480.0, 1000.0, 1000.0} 

[rect2] : {0.0, 10.0, 150.0, 0.0} 

[circle1] : {-480.0, -480.0, 1000.0, 1000.0}  

例5:<use>に対するgetBBox 

この例では,'use'要素のための包含ボックスが,その要素で定義した'x'及び'y'属性を明らかにしている。

このことは,'x'及び'y'属性が,'rect'又は'image'要素において包含ボックスの計算に影響を与えることと全く

同じである。 

<svg version="1.2" baseProfile="tiny"> 

    <defs> 

        <rect xml:id="myRect" x="0" y="0" width="60" height="40"/> 

    </defs> 

    <use xml:id="myUse" xlink:href="#myRect" x="-30" y="-20"/> 

</svg> 

結果: 

[myRect] : {0.0, 0.0, 60.0, 40.0} 

[myUse] : {-30.0, -20.0, 60.0, 40.0}  

例6:空のグループ 

この例では,空のグループのための包含ボックスがnullであることが示される。同様に,空のSVGPath

をもつ'path'の包含ボックス(すなわち,createElementNS呼出しで新しい'path'要素を作成した後に起こり

得るパス命令のないもの)もnullである。 

<g xml:id="emptyG"/> 

結果: 

[emptyG] : {null}  

background image

401 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

例7:display="none"及びvisibility="hidden"による影響 

この例では,display="none"をもつ子の包含ボックスは,それらの親の包含ボックス計算において明らか

にされていない。これは,'display'プロパティの定義,描画及び包含ボックス計算へのその影響を反映した

ものである。また,この例では,'visibility'がhiddenに設定されている要素も,それらの親の包含ボックス

計算に寄与している。 

<g xml:id="g1"> 

    <g xml:id="g1.1.display.none" display="none"> 

        <rect xml:id="rect1" x="10" y="10" width="40" height="40"/> 

    </g> 

    <rect xml:id="rect2.visibility.hidden" visibility="hidden" x="30" y="60" width="10" 

height="20"/> 

</g> 

結果: 

[g1] : {30.0, 60.0, 10.0, 20.0}  

[g1.1.display.none] : {10.0, 10.0, 40.0, 40.0} 

[rect1] : {10.0, 10.0, 40.0, 40.0} 

[rect2.visibility.hidden] : {30.0, 60.0, 10.0, 20.0}  

例8:コンテナの利用者空間における包含ボックスの連結 

この例では,コンテナ要素のための包含ボックスの連結及び計算がコンテナの利用者空間において行わ

れている。 

<g xml:id="g1"> 

    <line xml:id="line1" x2="100" y2="100" transform="rotate(-45)"/> 

</g> 

結果: 

[g1] : {0.0, 0.0, 141.42136, 0} 

[line1] : {0.0, 0.0, 100.0, 100.0}  

例9:stroke-widthの影響がない。 

この例では,ストロークが包含ボックスの計算に一切影響を与えないことを示す。 

<g> 

    <line xml:id="thickLine" stroke-width="10" x2="100" y2="0"/> 

</g> 

結果: 

[thickLine] : {0.0, 0.0, 100.0, 0.0}  

例10:viewBoxの影響がない。 

この例では,viewBoxが包含ボックスの計算に一切影響を与えないことを示す。 

<svg xml:id="rootSvg" version="1.2" baseProfile="tiny" width="500" height="300" 

background image

402 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

viewBox="0 0 200 100"> 

    <rect x="-100" y="-200" width="500" height="100"/> 

</svg> 

結果: 

[rootSVG] : {-100, -200, 500, 100}  

例11:描画ツリーに存在しない要素の影響 

この例では,描画ツリーに存在しない要素は包含ボックスの計算に一切影響を与えないことを示す。 

        <g xml:id="g1"> 

          <linearGradient xml:id="MyGradient"/> 

            <stop offset="0.05" stop-color="#F60"/> 

            <stop offset="0.95" stop-color="#FF6"/> 

          </linearGradient> 

        </g> 

結果: 

[g1] : {null}  

A.8.12 SVGLocatableElement 

このインタフェースは,スクリーン上に物理的な位置をもつ要素を表す。 

このインタフェースは,次によって実装される。'rect','circle','ellipse','line','path','use','image','text',

'textArea','tspan','svg','a','video','animation','switch','foreignObject','polygon','polyline'及び'g' 

IDL定義 

interface SVGLocatableElement : SVGElement, SVGLocatable 

}; 

定数は定義されない。 

属性は定義されない。 

メソッドは定義されない。 

A.8.13 TraitAccess 

trait操作のためのインタフェース。このインタフェースは,SVGElementに関連する"trait"値を読み,操

作するために使用される。各traitは属性又はプロパティに対応し,構文解析を経てその要素に理解され,

多くの場合アニメーション化可能である。各要素は(属性とは異なり)きちんと定義された一連のtraitを

もつ。対応されていないtraitへのアクセスが行われた場合には,例外が処理されなければならない。また,

属性とは異なって,traitは型付けられ,それらの値は正規化される。例えば,'path'要素で指定されたパス

データは,構文解析され,全てのパス命令がそれらの絶対的な異型に変換され,traitの値からパス命令が

絶対又は相対のどちらであったのかを決定することができない。trait値を取得及び設定する場合には正し

い型のアクセス関数が使用されなければならず,そうでない場合,例外が処理される。 

あるプロパティに対応するtraitでは,算出値が使用される。与えられたプロパティの値がその要素で指

403 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

定されていない場合,継承されるプロパティでは親の値が使用される。継承されない値,又はルート要素

上では,プロパティの初期値が使用される。 

非プロパティ属性に対応するtraitでは,その属性が継承される場合には('xml:lang'など),親の値が使

用される。その属性が継承されない,又はルート要素上にある場合には,その属性のための省略値が既知

の場合にはそれが使用される。未知の場合には(例 未知の属性,指定された既定をもたない既知の属性)

nullが返される。 

ツリーの外で要素のtraitを得るためのTraitAccessインタフェースを使用(例 作成又は削除されたばか

りの要素に対して)した場合,返される値は利用者エージェントに依存することに注意する。 

trait取得メソッド(getTrait, getTraitNS, getFloatTraitなど)はベース値(すなわち,アニメーションの適

用前)を返し,このことは静的内容及びアニメーション化内容のどちらについても同様である。しかし,

属性がアニメーションの親の値から継承された場合には,それはアニメーションの値を継承することに注

意する。traitプレゼンテーション値の取得メソッド(getPresentationTrait,getPresentationTraitNS,

getFloatPresentationTraitなど)は,(与えられたtraitが現在アニメーション化されている場合)現在のアニ

メーション値を返し,(与えられたtraitが現在アニメーション化されていない場合)ベース値を返す。trait

で全ての属性にアクセスすることができるわけではない。この詳細については対応される属性の一覧を参

照。 

trait値を設定することは,対応する属性を変更することと同じ効果を与えるが,trait設定は型付けられ

た値に対して操作することができる。変更された値は常にベース値である。プロパティに対応する継承可

能なtraitでは,trait値は常にinheritに設定することができる(しかし,既に説明したように,その値への

問い合わせは常に実際の継承値を返す。)。 

無効又は対応外のtrait値に関する注意 trait設定メソッド(setTrait,setFloatTrait,setPathTraitメソッド

など)が値を無効とし,INVALID̲ACCESS̲ERRコードによってDOMExceptionが処理される場合には,

二つのケースがある。一つ目は,trait値がその定義によって無効になる場合である(例えば,'stroke-linejoin' 

traitを'foo'に設定しようとすると,この例外が処理される。)。traitメソッドは,それが対応外の値の場合,

値を無効とする。設定されるtrait値がIRI参照であり(例 'fill'プロパティへの<FuncIRI>値の設定,'image'

要素への'xlink:href'属性の設定),その値が構文上は正しい場合(そうでなければ不正なIRI参照になる。),

SVG利用者エージェントはそのtrait値を無効としてはならない。したがって,この場合コード

INVALID̲ACCESS̲ERRのDOMExceptionを処理してはならない。したがって,SVG利用者エージェン

トは,traitの設定時に,それが不正なIRI参照であるのかどうか決定するためだけにIRIをとってくる

必要がない。 

二つ目は,現在そのtraitに適用されているアニメーションによってtrait値が無効になる場合である。ア

ニメーションを(したがって文書を)エラーにすることがあるので,その値は無効とされる。例えば'path'

要素がその'd'属性にアニメーションをもっている場合,'d'属性を変更してそのアニメーションと互換性

のない値にしようとすると,例外が生じる。 

IDL定義 

interface TraitAccess 

 DOMString getTrait(in DOMString name)  

  

raises(DOMException); 

 DOMString getTraitNS(in DOMString namespaceURI, in DOMString name)  

404 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  

raises(DOMException); 

 float getFloatTrait(in DOMString name)  

  

raises(DOMException); 

 sequence<float> getFloatListTrait(in DOMString name)  

  

raises(DOMException); 

 SVGMatrix getMatrixTrait(in DOMString name)  

  

raises(DOMException); 

 SVGRect getRectTrait(in DOMString name)  

  

raises(DOMException); 

 SVGPath getPathTrait(in DOMString name)  

  

raises(DOMException); 

 SVGRGBColor getRGBColorTrait(in DOMString name)  

  

raises(DOMException); 

 DOMString getPresentationTrait(in DOMString name)  

  

raises(DOMException); 

 DOMString getPresentationTraitNS(in DOMString namespaceURI, in DOMString name)  

  

raises(DOMException); 

 float getFloatPresentationTrait(in DOMString name)  

  

raises(DOMException); 

 sequence<float> getFloatListPresentationTrait(in DOMString name)  

  

raises(DOMException); 

 SVGMatrix getMatrixPresentationTrait(in DOMString name)  

  

raises(DOMException); 

 SVGRect getRectPresentationTrait(in DOMString name)  

  

raises(DOMException); 

 SVGPath getPathPresentationTrait(in DOMString name)  

  

raises(DOMException); 

 SVGRGBColor getRGBColorPresentationTrait(in DOMString name)  

  

raises(DOMException); 

 void setTrait(in DOMString name, in DOMString value)  

  

raises(DOMException); 

 void setTraitNS(in DOMString namespaceURI, in DOMString name, in DOMString value)  

  

raises(DOMException); 

 void setFloatTrait(in DOMString name, in float value)  

  

raises(DOMException); 

 void setFloatListTrait(in DOMString name, in sequence<float> value)  

  

raises(DOMException); 

 void setMatrixTrait(in DOMString name, in SVGMatrix matrix)  

  

raises(DOMException); 

 void setRectTrait(in DOMString name, in SVGRect rect)  

background image

405 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

  

raises(DOMException); 

 void setPathTrait(in DOMString name, in SVGPath path)  

  

raises(DOMException); 

 void setRGBColorTrait(in DOMString name, in SVGRGBColor color)  

  

raises(DOMException); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

getTrait  

trait値(正規化可能)をDOMStringとして返す。SVG Tinyでは,一部のtraitだけをDOMString値

として取得することができる。返されるDOMStringの構文は,対応する属性の構文に適合する。この

メソッドは,nullに設定されたnamespaceURIをもつgetTraitNSと全く同等である。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

DOMString 

trait値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をDOMStringに

変換することができない場合に生じる(SVG Tinyだけ)。 

getTraitNS  

getTraitと同じ。ただし,名前空間のあるtrait。パラメタ名は,ノンクォリファイド(つまり,接頭

辞のない)trait名でなければならない。 

パラメタ 

in DOMString namespaceURI 

取得するtraitの名前空間 

in DOMString name 

取得するtrait名 

戻り値 

DOMString 

trait値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をDOMStringに

変換することができない場合に生じる(SVG Tinyだけ)。 

getFloatTrait  

trait値をfloatとして取得する。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait

名でなければならない。 

background image

406 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

float 

floatとしてのtrait値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値が非数値のfloat

である場合[例 width属性がパーセントを用いている最上位の

'svg'要素においてgetFloatTrait("width")を呼び出した場合]に生じ

る。 

getFloatListTrait  

trait値をsequence<float>として取得する。パラメタ名は,ノンクォリファイド(つまり,接頭辞の

ない)trait名でなければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

sequence<float> 

sequence<float>としてのtrait値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求された

trait

の算出値を

sequence<float>に変換することができない場合に生じる。 

getMatrixTrait  

trait値をSVGMatrixとして返す。返されるオブジェクトは実際のtrait値の複写であり,対応するtrait

が変化しても変わらない。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait名でな

ければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

SVGMatrix 

SVGMatrixとしてのtrait値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をSVGMatrixに

変換することができない場合に生じる。 

getRectTrait  

trait値をSVGRectとして返す。返されるオブジェクトは実際のtrait値の複写であり,対応するtrait

が変化しても変わらない。実際のtrait値がSVGRectではない場合(例 'viewBox'属性の'none'値),こ

background image

407 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

のメソッドはnullを返す。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait名でな

ければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

SVGRect 

SVGRectとしてのtrait値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をSVGRectに変

換することができない場合に生じる。 

getPathTrait  

trait値をSVGPathとして返す。返されるオブジェクトは実際のtrait値の複写であり,対応するtrait

が変化しても変わらない。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait名でな

ければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

SVGPath 

SVGPathとしてのtrait値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をSVGPathに変

換することができない場合に生じる。 

getRGBColortrait  

trait値をSVGRGBColorとして返す。返されるオブジェクトはtrait値の複写であり,対応するtrait

が変化しても変わらない。実際のtrait値がSVGRGBColorではない(つまり'none'),又はペイントサ

ーバへのリンクではない(例 グラデーション又は'solidColor'へのリンク)場合,このメソッドはnull

を返さなければならない。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait名でな

ければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

SVGRGBColor 

SVGRGBColorとしてのtrait値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をSVGRGBColor

に変換することができない場合に生じる。 

background image

408 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

getPresentationTrait  

traitプレゼンテーション値をDOMStringとして返す。SVG Tinyでは,一部のtraitだけをDOMString

値として取得することができる。返されるDOMStringの構文は,対応する属性の構文に適合する。こ

のメソッドは,nullに設定されたnamespaceURIをもつgetPresentationTraitNSと全く同等である。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

DOMString 

traitプレゼンテーション値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をDOMStringに

変換することができない場合に生じる(SVG Tinyだけ)。 

getPresentationTraitNS  

getPresentationTraitと同じ。ただし,名前空間のあるtrait。パラメタ名は,ノンクォリファイド(つ

まり,接頭辞のない)trait名でなければならない。 

パラメタ 

in DOMString namespaceURI 

取得するtraitの名前空間 

in DOMString name 

取得するtrait名 

戻り値 

DOMString 

traitプレゼンテーション値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をDOMStringに

変換することができない場合に生じる(SVG Tinyだけ)。 

getFloatPresentationTrait  

traitプレゼンテーション値をfloatとして取得する。パラメタ名は,ノンクォリファイド(つまり,

接頭辞のない)trait名でなければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

float 

floatとしてのtraitプレゼンテーション値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値が非数値のfloat

である場合[例 width属性がパーセントを用いている最上位の

'svg'要素においてgetFloatTrait("width")を呼び出した場合]に生じ

background image

409 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

る。 

getFloatListPresentationTrait  

traitプレゼンテーション値をsequence<float>として取得する。パラメタ名は,ノンクォリファイド

(つまり,接頭辞のない)trait名でなければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

sequence<float> 

sequence<float>としてのtraitプレゼンテーション値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求された

trait

の算出値を

sequence<float>に変換することができない場合に生じる。 

getMatrixPresentationTrait  

traitプレゼンテーション値をSVGMatrixとして返す。返されるオブジェクトは実際のtrait値の複写

であり,対応するtraitが変化したり,アニメーションがtraitプレゼンテーション値に影響を与え続け

たりしても,変わらない。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait名でな

ければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

SVGMatrix 

SVGMatrixとしてのtraitプレゼンテーション値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をSVGMatrixに

変換することができない場合に生じる。 

getRectPresentationTrait  

traitプレゼンテーション値をSVGRectとして返す。返されるオブジェクトは実際のtrait値の複写で

あり,対応するtraitが変化したり,アニメーションがtraitプレゼンテーション値に影響を与え続けた

りしても,変わらない。実際のtrait値がSVGRectではない場合(例 'viewBox'属性の'none'値),この

メソッドはnullを返す。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait名でなけ

ればならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

SVGRect 

SVGRectとしてのtraitプレゼンテーション値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

background image

410 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をSVGRectに変

換することができない場合に生じる。 

getPathPresentationTrait  

traitプレゼンテーション値をSVGPathとして返す。返されるオブジェクトは実際のtrait値の複写で

あり,対応するtraitが変化したり,アニメーションがtraitプレゼンテーション値に影響を与え続けた

りしても,変わらない。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait名でなけ

ればならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

SVGPath 

SVGPathとしてのtraitプレゼンテーション値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をSVGPathに変

換することができない場合に生じる。 

getRGBColorPresentationTrait  

traitプレゼンテーション値をSVGRGBColorとして返す。返されるオブジェクトはtrait値の複写で

あり,対応するtraitが変化したり,アニメーションがtraitプレゼンテーション値に影響を与え続けた

りしても,変わらない。実際のtrait値がSVGRGBColorではない(つまり'none'),又はペイントサー

バへのリンクではない(例 グラデーション又は'solidColor'へのリンク)場合,このメソッドはnull

を返さなければならない。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait名でな

ければならない。 

パラメタ 

in DOMString name 

取得するtrait名 

戻り値 

SVGRGBColor 

SVGRGBColorとしてのtraitプレゼンテーション値 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない,又はnullの場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの算出値をSVGRGBColor

に変換することができない場合に生じる。 

setTrait  

trait値をDOMStringとして設定する。SVG Tinyでは,一部のtraitだけをDOMString値を通して設

定することができる。値として与えられることが望ましいDOMStringの構文は,対応するXML属性

値の構文と同じでなければならない。nullに設定されたnamespaceURI属性をもつsetTraitNSと全く同

等である。 

パラメタ 

background image

411 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

in DOMString name 

設定されるtrait名 

in DOMString value 

trait値 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの値をDOMStringとして

指定することができない場合に生じる。 

DOMException 

INVALID̲ACCESS̲ERR:与えられたtraitのための入力値が無効,

又はnullが指定されている場合に生じる。 

DOMException 

NO̲MODIFICATION̲ALLOWED̲ERR:読取り専用のtraitを変更し

ようとした場合に生じる。 

setTraitNS  

setTraitと同じ。ただし,名前空間のあるtrait。パラメタ名は,ノンクォリファイド(つまり,接頭

辞のない)trait名でなければならない。 

パラメタ 

in DOMString namespaceURI 

設定されるtraitの名前空間 

in DOMString name 

設定されるtrait名 

in DOMString value 

trait値 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの値をDOMStringとして

指定することができない場合に生じる。 

DOMException 

INVALID̲ACCESS̲ERR:与えられたtraitのための入力値が無効,

又はnullが指定されている場合に生じる。 

DOMException 

NO̲MODIFICATION̲ALLOWED̲ERR:読取り専用のtraitを変更し

ようとした場合に生じる。 

setFloatTrait  

trait値をfloatとして設定する。パラメタ名は,ノンクォリファイド(つまり,接頭辞のない)trait

名でなければならない。 

パラメタ 

in DOMString name 

設定されるtrait名 

in DOMString value 

trait値 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない場合に生じる。 

background image

412 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの値をDOMStringとして

指定することができない場合に生じる。 

DOMException 

INVALID̲ACCESS̲ERR:与えられたtraitのための入力値が無効,

又はnullが指定されている場合に生じる。 

setFloatListTrait  

trait値をsequence<float>として設定する。パラメタ名は,ノンクォリファイド(つまり,接頭辞の

ない)trait名でなければならない。 

パラメタ 

in DOMString name 

設定されるtrait名 

in sequence<float> value 

trait値 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの値をsequence<float>と

して指定することができない場合に生じる。 

DOMException 

INVALID̲ACCESS̲ERR:与えられたtraitのための入力値が無効,

又はnullが指定されている場合に生じる。 

setMatrixTrait  

trait値をSVGMatrixとして設定する。SVGMatrixの値はtraitで複写されるので,与えられた

SVGMatrixがその後変化しても,traitの値には影響を与えない。パラメタ名は,ノンクォリファイド

(つまり,接頭辞のない)trait名でなければならない。 

パラメタ 

in DOMString name 

設定されるtrait名 

in SVGMatrix value 

trait値 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの値をSVGMatrixとして

指定することができない場合に生じる。 

DOMException 

INVALID̲ACCESS̲ERR:入力値がnullの場合に生じる。 

setRectTrait  

trait値をSVGRectとして設定する。SVGRectの値はtraitで複写されるので,与えられたSVGRect

がその後変化しても,traitの値には影響を与えない。パラメタ名は,ノンクォリファイド(つまり,

接頭辞のない)trait名でなければならない。 

パラメタ 

in DOMString name 

設定されるtrait名 

in SVGRect value 

trait値 

background image

413 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの値をSVGRectとして指

定することができない場合に生じる。 

DOMException 

INVALID̲ACCESS̲ERR:与えられたtraitのための入力値が無効,

又はnullが指定されている場合に生じる。Width又はheight値が負

に設定されている場合,SVGRectは無効である。 

setPathTrait  

trait値をSVGPathとして設定する。SVGPathの値はtraitで複写されるので,与えられたSVGPath

がその後変化しても,traitの値には影響を与えない。パラメタ名は,ノンクォリファイド(つまり,

接頭辞のない)trait名でなければならない。 

パラメタ 

in DOMString name 

設定されるtrait名 

in SVGPath value 

trait値 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの値をSVGPathとして指

定することができない場合に生じる。 

DOMException 

INVALID̲ACCESS̲ERR:与えられたtraitのための入力値が無効,

又はnullが指定されている場合に生じる。SVGPathは,MOVE̲TO

部分以外の部分で開始している場合には,無効である。 

注記 空のSVGPathは有効な値である。 

setRGBColorTrait  

trait値をSVGRGBColorとして設定する。SVGRGBColorの値はtraitで複写されるので,与えられた

SVGRGBColorがその後変化しても,traitの値には影響を与えない。パラメタ名は,ノンクォリファイ

ド(つまり,接頭辞のない)trait名でなければならない。 

パラメタ 

in DOMString name 

設定されるtrait名 

in SVGRGBColor value 

trait値 

戻り値なし 

例外 

DOMException 

NOT̲SUPPORTED̲ERR:要求されたtraitがこの要素で対応されて

いない場合に生じる。 

DOMException 

TYPE̲MISMATCH̲ERR:要求されたtraitの値をSVGRGBColorとし

て指定することができない場合に生じる。 

background image

414 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

DOMException 

INVALID̲ACCESS̲ERR:入力値がnullの場合に生じる。 

この規格のuDOMで対応されるtrait 

traitアクセスは,この規格の属性及びプロパティの全てで必要というわけではない。次の表は,この規

格のuDOMの実装がtraitアクセスに対応しなければならない属性とプロパティとを示している。それぞれ

の属性の列には,認められている取得及び設定が示されている。“省略値”の列では,各属性又はプロパテ

ィに使用しなければならない省略値が指定されている。“省略値”の列が空の場合,省略値はない。“コメ

ント”の列に明示されていない限り,対応される属性は,それが属することができる全ての要素でアクセ

ス可能である。属性のリスト,また,それらがどの要素に属しているのかについては,附属書Lを参照。 

SVGの複数のバージョンに対応する実装では,最も大規模なセットへのtraitアクセスを容認し,最も大

規模なセットにおいて各traitが対応する型に対応していなければならない。将来のバージョンにおいて利

用できるtrait又はtrait型に依存する内容は,全てのこの規格のuDOM実装において,作動しない可能性

がある。 

利用者エージェントによって対応されないtraitに対してtraitメソッドが使われたときには,利用者エー

ジェントは常にNOT̲SUPPORTED̲ERRを生じさせなければならない。 

一部の属性及びデータ型については,追加規則が適用される。これらの規則についてはA.8.14で定義さ

れている。 

・ この表において,利用者エージェントがgetTraitメソッドに対応していなければならないとされて

いる場合,それは常にgetTraitNS,getPresentationTrait及びgetPresentationTraitNSメソッドにも対応

していなければならない。 

・ この表において,利用者エージェントがgetTraitNSメソッドに対応していなければならないとされ

ている場合,それは常にgetPresentationTraitNSメソッドにも対応していなければならない。 

・ この表において,利用者エージェントが型付けされている(つまり,非文字列の)trait取得メソッ

ドの一つ(例 getFloatTrait)に対応していなければならないとされている場合,それは常に対応す

るtrait presentation取得メソッド(例 getFloatPresentationTrait)にも対応していなければならない。 

・ この表において,利用者エージェントがsetTraitメソッドに対応していなければならないとされてい

る場合,それは常にsetTraitNSメソッドにも対応していなければならない。 

・ traitは,属性及びプロパティ値へのアクセスのためだけに利用することができる。それらをフォン

ト記述子へのアクセスに使用することはできない。 

trait対象 

trait取得 

(戻り値) 

trait設定 

(引数) 

省略値 

コメント 

要素のテキ

スト内容 

getTrait("#text") 

[The element text content] 

setTrait("#text", ...)  

[New element text content] 

A.3.3参照 

accumulate属

性 

getTrait("accumulate")  

[none | sum] 

setTrait("accumulate", ...)  

[none | sum] 

"none" 

additive属性 

getTrait("additive")  

[replace | sum] 

setTrait("additive", ...)  

[replace | sum] 

"replace" 

attributeName

属性 

getTrait("attributeName") 

setTrait("attributeName", ...) 

background image

415 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

trait対象 

trait取得 

(戻り値) 

trait設定 

(引数) 

省略値 

コメント 

audio-levelプ

ロパティ 

getFloatTrait("audio-level")  

[0 ≤ value ≤ 1] 

setFloatTrait("audio-level", ...)  

[0 ≤ value ≤ 1] 

setTrait("audio-level", ...)  

[inherit] 

1.0 

baseProfile属

性 

getTrait("baseProfile") 

setTrait("baseProfile", ...) 

"none" 

begin属性 

N/A 

setTrait("begin", ...) 

calcMode属

性 

getTrait("calcMode")  

[discrete | linear | paced | spline] 

setTrait("calcMode", ...)  

[discrete | linear | paced | spline] 

'animateM
otion'要素
にアクセ
スしたと
きには
"paced",
それ以外

"linear"。 

colorプロパ

ティ 

getRGBColorTrait("color")  

[null, SVGRGBColor] 

setRGBColorTrait("color, ...")  

[SVGRGBColor] 

setTrait("color", ...)  

[inherit | <color>] 

rgb(0,0,0) 

cx属性 

getFloatTrait("cx") 

setFloatTrait("cx", ...) 

'radialGra
dient'要素
にアクセ
スしたと
きには
0.5,それ
以外では
0.0。 

cy属性 

getFloatTrait("cy") 

setFloatTrait("cy", ...) 

'radialGra
dient'要素
にアクセ
スしたと
きには
0.5,それ
以外では
0.0。 

d属性 

getPathTrait("d")  

[SVGPath] 

setPathTrait("d", ...)  

[SVGPath] 

パス部分
をもたな

SVGPath
オブジェ
クト 

A.8.14参照 

displayプロ

パティ 

GetTrait("display")  

[inline | none] 

setTrait("display", ...)  

[inline | none | inherit] 

"inline" 

A.8.14参照 

dur属性 

N/A 

setTrait("dur", ...) 

editable属性 

getTrait("editable")  

[simple | none] 

setTrait("editable, ...)  

[simple | none] 

"none" 

background image

416 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

trait対象 

trait取得 

(戻り値) 

trait設定 

(引数) 

省略値 

コメント 

end属性 

N/A 

setTrait("end", ...) 

fillプロパテ

ィ 

getRGBColorTrait("fill")  

[null, SVGRGBColor] 

getTrait("fill")  

[none | <FuncIRI> | <color> | <system 

paint>] 

setRGBColorTrait("fill", ...)  

[SVGRGBColor] 

setTrait("fill", ...)  

[none | currentColor | <FuncIRI> | 
<color> | <system paint> | inherit] 

rgb(0,0,0) 

アニメーシ
ョン要素の
'fill'属性の
ためのtrait
アクセス関
数はない。 

fill-opacityプ

ロパティ 

getFloatTrait("fill-opacity")  

[0 ≤ value ≤ 1] 

setFloatTrait("fill-opacity", ...)  

[0 ≤ value ≤ 1] 

setTrait("fill-opacity", ...)  

[inherit] 

1.0 

fill-ruleプロ

パティ 

getTrait("fill-rule")  

[nonzero | evenodd] 

setTrait("fill-rule", ...)  

[nonzero | evenodd | inherit] 

"nonzero" 

focusable属

性 

getTrait("focusable")  

[true | false] 

setTrait("focusable", ...)  

[true | false | auto] 

"auto" 

focusHighligh

t属性 

getTrait("focusHighlight")  

[auto | none] 

setTrait("focusHighlight", ...)  

[auto | none] 

"auto" 

font-familyプ

ロパティ 

getTrait("font-family")  

[<font-family-value>] 

setTrait("font-family", ...)  

[<font-family-value> | inherit] 

User agent 

specific 

A.8.14参照 

font-sizeプロ

パティ 

getFloatTrait("font-size")  

[value ≥ 0] 

setFloatTrait("font-size", ...)  

[value ≥ 0] 

setTrait("font-size", ...)  

[xx-small | x-small | small | medium | 

large | x-large | xx-large | larger | smaller 

| inherit] 

User agent 

specific 

font-styleプ

ロパティ 

getTrait("font-style")  

[normal | italic | oblique] 

setTrait("font-style", ...)  

[normal | italic | oblique | inherit] 

"normal" 

A.8.14参照 

font-weight

プロパティ 

getTrait("font-weight")  

[100 | 200 | 300 | 400 | 500 | 600 | 700 | 

800 | 900] 

setTrait("font-weight", ...)  

[normal | bold | bolder | lighter | 100 | 

200 | 300 | 400 | 500 | 600 | 700 | 800 | 

900 | inherit] 

"normal" 

A.8.14参照 

from属性 

N/A 

setTrait("from", ...) 

gradientUnits

属性 

getTrait("gradientUnits")  

[userSpaceOnUse | 

objectBoundingBox] 

setTrait("gradientUnits", ...)  

[userSpaceOnUse | 

objectBoundingBox] 

"objectBo

undingBo

x" 

height属性 

getFloatTrait("height")  

[value ≥ 0] 

getTrait("height")  

["auto"] 

setFloatTrait("height", ...)  

[value ≥ 0] 

setTrait("height", ...)  

["auto"] 

'textArea'
要素にア
クセスし
たときに
は"auto",
それ以外
では0.0。 

A.8.14参照 

id属性 

getTrait("id") 

setTrait("id", ...) 

keyPoints属

性 

N/A 

setTrait("keyPoints", ...) 

keySplines属

性 

N/A 

setTrait("keySplines", ...) 

background image

417 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

trait対象 

trait取得 

(戻り値) 

trait設定 

(引数) 

省略値 

コメント 

keyTimes属

性 

N/A 

setTrait("keyTimes", ...) 

max属性 

N/A 

setTrait("max", ...) 

min属性 

N/A 

setTrait("min", ...) 

nav-right属

性 

getTrait("nav-right")  

[auto | self | <FuncIRI>] 

setTrait("nav-right", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-next属性 

getTrait("nav-next")  

[auto | self | <FuncIRI>] 

setTrait("nav-next", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-up属性 

getTrait("nav-up")  

[auto | self | <FuncIRI>] 

setTrait("nav-up", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-up-right

属性 

getTrait("nav-up-right")  
[auto | self | <FuncIRI>] 

setTrait("nav-up-right", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-up-left属

性 

getTrait("nav-up-left")  

[auto | self | <FuncIRI>] 

setTrait("nav-up-left", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-prev属性 

getTrait("nav-prev")  

[auto | self | <FuncIRI>] 

setTrait("nav-prev", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-down属

性 

getTrait("nav-down")  

[auto | self | <FuncIRI>] 

setTrait("nav-down", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-down-rig

ht属性 

getTrait("nav-down-right")  

[auto | self | <FuncIRI>] 

setTrait("nav-down-right", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-down-left

属性 

getTrait("nav-down-left")  

[auto | self | <FuncIRI>] 

setTrait("nav-down-left", ...)  

[auto | self | <FuncIRI>] 

"auto" 

nav-left属性 

getTrait("nav-left")  

[auto | self | <FuncIRI>] 

setTrait("nav-left", ...)  

[auto | self | <FuncIRI>] 

"auto" 

offset属性 

getFloatTrait("offset")  

[0 ≤ value ≤ 1] 

setFloatTrait("offset", ...)  

[0 ≤ value ≤ 1] 

0.0 

opacityプロ

パティ 

getFloatTrait("opacity")  

[0 ≤ value ≤ 1] 

setFloatTrait("opacity", ...)  

[0 ≤ value ≤ 1] 

setTrait("opacity", ...)  

[inherit] 

1.0 

path属性 

getPathTrait("path")  

[SVGPath] 

setPathTrait("path", ...)  

[SVGPath] 

パス部分
をもたな

SVGPath
オブジェ
クト 

A.8.14参照 

points属性 

getFloatListTrait("points") 

setFloatListTrait("points", ...) 

r属性 

getFloatTrait("r")  

[value ≥ 0] 

setFloatTrait("r", ...)  

[value ≥ 0] 

'radialGra
dient'要素
にアクセ
スしたと
きには
0.5,それ
以外では
0.0。 

repeatCount

属性 

N/A 

setTrait("repeatCount", ...) 

background image

418 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

trait対象 

trait取得 

(戻り値) 

trait設定 

(引数) 

省略値 

コメント 

repeatDur属

性 

N/A 

setTrait("repeatDur", ...) 

restart属性 

getTrait("restart")  

[always | whenNotActive | never] 

setTrait("restart", ...)  

[always | whenNotActive | never] 

"always" 

rx属性 

getFloatTrait("rx")  

[value ≥ 0] 

setFloatTrait("rx", ...)  

[value ≥ 0] 

0.0 

ry属性 

getFloatTrait("ry")  

[value ≥ 0] 

setFloatTrait("ry", ...)  

[value ≥ 0] 

0.0 

snapshotTime

属性 

getFloatTrait("snapshotTime")  

[value ≥ 0] 

setFloatTrait("snapshotTime", ...)  

[value ≥ 0] 

0.0 

solid-colorプ

ロパティ 

getRGBColorTrait("solid-color")  

[null, SVGRGBColor] 

setRGBColorTrait("solid-color", ...)  

[SVGRGBColor] 

setTrait("solid-color", ...)  

[<color> | inherit] 

rgb(0,0,0) 

solid-opacity

プロパティ 

getFloatTrait("solid-opacity")  

[0 ≤ value ≤ 1] 

setFloatTrait("solid-opacity", ...)  

[0 ≤ value ≤ 1] 

setTrait("solid-opacity")  

[inherit] 

1.0 

stop-colorプ

ロパティ 

getRGBColorTrait("stop-color")  

[null, SVGRGBColor] 

getTrait("stop-color")  

[none | <color>] 

setRGBColorTrait("stop-color", ...)  

[SVGRGBColor] 

setTrait("stop-color")  

[none | currentColor | <color> | inherit] 

rgb(0,0,0) 

stop-opacity
プロパティ 

getFloatTrait("stop-opacity")  

[0 ≤ value ≤ 1] 

setFloatTrait("stop-opacity", ...)  

[0 ≤ value ≤ 1] 

setTrait("stop-opacity", ...)  

[inherit] 

1.0 

strokeプロパ

ティ 

getRGBColorTrait("stroke")  

[null, SVGRGBColor] 

getTrait("stroke")  

[none | <FuncIRI> | <color> | <system 

paint>] 

setRGBColorTrait("stroke", ...)  

[SVGRGBColor] 

setTrait("stroke", ...)  

[none | currentColor | <FuncIRI> | 
<color> | <system paint> | inherit] 

"none" 

stroke-dasharr

ayプロパテ

ィ 

getFloatListTrait("stroke-dasharray") 

getTrait("stroke-dasharray")  

[none, inherit] 

setFloatListTrait("stroke-dasharray", ...) 

setTrait("stroke-dasharray", ...)  

[none, inherit] 

"none" 

stroke-dashof

fsetプロパテ

ィ 

getFloatTrait("stroke-dashoffset") 

setFloatTrait("stroke-dashoffset", ...)  

setTrait("stroke-dashoffset", ...)  

[inherit] 

0.0 

stroke-linecap

プロパティ 

getTrait("stroke-linecap")  

[butt | round | square] 

setTrait("stroke-linecap", ...)  

[butt | round | square | inherit] 

"butt" 

stroke-linejoi

nプロパティ 

getTrait("stroke-linejoin")  

[miter | round | bevel] 

setTrait("stroke-linejoin", ...)  

[miter | round | bevel | inherit] 

"miter" 

background image

419 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

trait対象 

trait取得 

(戻り値) 

trait設定 

(引数) 

省略値 

コメント 

stroke-miterli

mitプロパテ

ィ 

getFloatTrait("stroke-miterlimit")  

[value ≥ 1] 

setFloatTrait("stroke-miterlimit")  

[value ≥ 1] 

setTrait("stroke-miterlimit", ...)  

[inherit] 

4.0 

stroke-opacity

プロパティ 

getFloatTrait("stroke-opacity")  

[0 ≤ value ≤ 1] 

setFloatTrait("stroke-opacity", ...)  

[0 ≤ value ≤ 1] 

setTrait("stroke-opacity", ...)  

[inherit] 

1.0 

stroke-width
プロパティ 

getFloatTrait("stroke-width")  

[value ≥ 0] 

setFloatTrait("stroke-width", ...)  

[value ≥ 0] 

setTrait("stroke-width", ...)  

[inherit] 

1.0 

target属性 

getTrait("target") 

setTrait("target", ...) 

"̲self" 

text-anchorプ

ロパティ 

getTrait("text-anchor")  

[start | middle | end] 

setTrait("text-anchor", ...)  

[start | middle | end | inherit] 

"start" 

to属性 

N/A 

setTrait("to", ...) 

transform属

性 

getMatrixTrait("transform")  

[SVGMatrix] 

getTrait("transform")  

[<transform-list> | <transform-ref>] 

setMatrixTrait("transform", ...)  

[SVGMatrix] 

setTrait("transform", ...)  

[<transform-list> | <transform-ref> | 

none] 

恒等行列

(1,0,0,1,0,

0) 

A.8.14参照 

type属性 

getTrait("type")  

[translate | scale | rotate | skewX | 

skewY] 

setTrait("type", ...)  

[translate | scale | rotate | skewX | 

skewY] 

'animateTran
sform'要素
の'type'属性
にはtraitア
クセス関数
がある。
'audio'

'handler',
'image'

'script'及び
'video'要素
の'type'属性
にはtraitア
クセス関数
はない。 

values属性 

N/A 

setTrait("values", ...) 

vector-effect
プロパティ 

getTrait("vector-effect")  

[none | non-scaling-stroke] 

setTrait("vector-effect", ...)  

[none | non-scaling-stroke | inherit] 

"none" 

version属性 

getTrait("version") 

setTrait("version", ...) 

利用者エ
ージェン
トに特有 

background image

420 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

trait対象 

trait取得 

(戻り値) 

trait設定 

(引数) 

省略値 

コメント 

viewBox属性 

getRectTrait("viewBox")  

[null | SVGRect] 

setRectTrait("viewBox", ...)  

[SVGRect] 

setTrait("viewBox", ...)  

[none] 

null 

'viewBox'属

'none'をも
つ場合,
getRectTrait
メソッドは
nullを返す。 

viewport-fill
プロパティ 

getRGBColorTrait("viewport-fill")  

[null, SVGRGBColor] 

getTrait("viewport-fill")  

[none | <color>] 

setRGBColorTrait("viewport-fill", ...)  

[SVGRGBColor] 

setTrait("viewport-fill", ...)  

[none | currentColor | <color> | inherit] 

"none" 

viewport-fill-

opacityプロ

パティ 

getFloatTrait("viewport-fill-opacity")  

[0 ≤ value ≤ 1] 

setFloatTrait("viewport-fill-opacity", ...)  

[0 ≤ value ≤ 1] 

setTrait("viewport-fill-opacity", ...)  

[inherit] 

1.0 

visibilityプロ

パティ 

getTrait("visibility")  

[visible | hidden] 

setTrait("visibility", ...)  

[visible | hidden | inherit] 

"visible" 

width属性 

getFloatTrait("width")  

[value ≥ 0] 

getTrait("width")  

["auto"] 

setFloatTrait("width", ...)  

[value ≥ 0] 

setTrait("width", ...)  

["auto" ] 

'textArea'
要素にア
クセスし
たときに
は"auto",
それ以外
では0.0。 

A.8.14参照 

x属性 

getFloatTrait("x") 

getFloatListTrait("x") 

setFloatTrait("x", ...) 

setFloatListTrait("x", ...) 

0.0 

A.8.14参照 

x1属性 

getFloatTrait("x1") 

setFloatTrait("x1", ...) 

0.0 

x2属性 

getFloatTrait("x2") 

setFloatTrait("x2", ...) 

'linearGra
dient'要素
にアクセ
スしたと
きには
1.0,それ
以外では
0.0。 

xlink:href属

性 

getTraitNS("http://www.w3.org/1999/xl

ink", "href")  

[absolute IRI] 

setTraitNS("http://www.w3.org/1999/xli

nk", "href", ...) 

"" 

y属性 

getFloatTrait("y") 

getFloatListTrait("y") 

setFloatTrait("y", ...) 

setFloatListTrait("y", ...) 

0.0 

A.8.14参照 

y1属性 

getFloatTrait("y1") 

setFloatTrait("y1", ...) 

0.0 

y2属性 

getFloatTrait("y2") 

setFloatTrait("y2", ...) 

0.0 

zoomAndPan

属性 

getTrait("zoomAndPan")  

[disable | magnify] 

setTrait("zoomAndPan", ...)  

[disable | magnify] 

"magnify"  

background image

421 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

A.8.14 追加的なアクセス規則 

'transform'属性へのアクセス規則 

この規格の'transform'属性は,三つの型の値をもつことができる。“通常”変換リスト(例 拡大縮小,

移動,回転,行列など),新たに導入された'ref(svg)'型,又は'none'である。getMatrixTraitは,全ての場合に

おいて現在の評価される行列を返す。'transform'属性の値が'ref'又は'none'のどちらであったかを利用者が知

る必要がある場合には,getTraitを使用しなければならない。利用者は,setTraitを使用して,'transform'属

性を'ref(svg)'又は'none'に設定することができる。 

'display'プロパティへのアクセス規則 

後方互換の理由によって,traitメカニズムをとおしてアクセス可能な'display'の値は,'none'と'inline'とに

制限され,他の全ての値が'none'又は'inline'に移される(全ての'display'値のリストについては,11.9を参照。)。

他の'display'値を利用する場合には(例 利用者がdisplayを'block'に設定したい場合),より汎用的な

getAttributeNS又はsetAttributeNSが使用されなければならない。SVG Tiny 1.2利用者エージェントは,そ

の属性データを正規化することが認められていることに注意する(A.3.2参照)。 

アニメーション関連要素へのアクセス規則 

次の規則がSMILアニメーション要素に適用される('animate', 'animateTransform', 'animateColor', 

'animateMotion', 'set'及び'discard')。 

これらの要素はツリーから挿入及び削除することができるが,一度ツリーに挿入されると,TraitAccess

メソッドを用いてそれらを変更することができない。そうしようとすると,TraitAccessメソッドはコード

NOT̲SUPPORTED̲ERRのDOMExceptionを処理する。ElementインタフェースのsetAttribute及び

setAttributeNSメソッドを用いて要素を変更した場合,その文書は変更されるが,アニメーションには影響

がない。 

この制限が意味することは,作者がスクリプトでアニメーションを追加する場合,アニメーション要素

の属性をツリーに挿入する前に変更しなければならないことである。次の例では,文書にアニメーション

を追加する場合,挿入の前に関連属性を設定している。 

例:uDOMによるアニメーション化  

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xml:id="svg-root" 

      width="100%" height="100%" viewBox="0 0 480 360"> 

    <rect xml:id="myRect" fill="green" x="10" y="10" width="200" height="100" stroke="black" 

stroke-width="2"/> 

</svg> 

次のJavaコードのようなスクリプトは,長方形にアニメーションを追加するために利用することができ

る。 

SVGElement newAnimate = (SVGElement)document.createElementNS(svgNS, "animate"); 

newAnimate.setTrait("attributeName", "fill"); 

newAnimate.setTrait("from", "red"); 

newAnimate.setTrait("to", "blue"); 

newAnimate.setTrait("dur", "5"); 

newAnimate.setTrait("repeatCount", "10"); 

Element myRect = document.getElementById("myRect"); 

422 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

myRect.appendChild(newAnimate); 

     

'x'及び'y'属性へのアクセス規則 

'text'要素の'x'又は'y'属性の値を取得するためにgetFloatTraitが用いられ,このとき属性値に複数の

<coordinate>がある場合には,エラーコードTYPE̲MISMATCH̲ERRのDOMExceptionが生じなければなら

ない。属性値が一つの座標しかもたない場合,これはgetFloatTraitが返す値である。 

getFloatListTrait又はsetFloatListTraitが'text'要素以外の要素で使用された場合,エラーコード

TYPE̲MISMATCH̲ERRのDOMExceptionが生じなければならない。 

'width'及び'height'属性へのアクセス規則 

'svg'要素の'width'又は'height'属性の値を取得するためにgetFloatTraitが用いられ,このときその値にパー

セント又は単位値が指定されている場合には,エラーコードTYPE̲MISMATCH̲ERRのDOMExceptionが

生じなければならない。 

フォントプロパティへのアクセス規則 

'font-face'要素に'font-family','font-style'又は'font-weight'プロパティを,取得又は設定するためにtraitアク

セス関数が使用された場合,エラーコードNOT̲SUPPORTED̲ERRのDOMExceptionが生じなければなら

ない。 

パス属性へのアクセス規則 

SVGPathの取得にgetPathTraitメソッドが利用され,パス属性が何らかの点において構文上無効だった場

合,その戻り値は,エラーポイントまでの全ての有効なパス部分を含んだSVGPathでなければならない。 

マルチメディア要素へのアクセス規則 

次の規則がマルチメディア要素に適用される('audio', 'video'及び'animation')。 

SVGタイミング属性は,一度ツリーに挿入されると,TraitAccessメソッドを用いて変更することができ

ない。そうしようとすると,TraitAccessメソッドはコードNOT̲SUPPORTED̲ERRのDOMExceptionを処

理する。ElementインタフェースのsetAttribute及びsetAttributeNSメソッドを用いてこれらの属性を変更し

た場合,その文書は変更されるが,その要素には影響がない。 

A.8.15 SVGElement 

このインタフェースは,文書ツリーにおけるSVG要素を表す。それはuDOMツリーで要素をたど(辿)

るためのメソッドを提供し,要素の'id'を設定及び取得できるようにする。 

注記 'id'及び'xml:id'の扱いに関する規則については,5.10.1を参照。 

IDL定義 

interface SVGElement : Element, EventTarget, TraitAccess 

 attribute DOMString id; 

}; 

定数は定義されない。 

属性 

id  

読込み時には,5.10.1で定義される規則に適合したこの要素の'xml:id'又は'id'属性を返す。又は,ID

が指定されていなければnullを返す。 

423 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

書込み時には,5.10.1で定義される規則に適合してこの要素の'xml:id'又は'id'属性を設定する。 

メソッドは定義されない。 

A.8.16 SVGTimedElement 

このインタフェースは,時間付け要素及び'svg'要素によって実装されるSVGTimedElementを表す。 

IDL定義 

interface SVGTimedElement : SVGElement, smil::ElementTimeControl 

 void pauseElement(); 

 void resumeElement(); 

 readonly attribute boolean isPaused; 

}; 

定数は定義されない。 

属性 

isPaused  

時間付け要素が一時停止状態の場合true,そうでない場合false。一時停止要素及び活性持続時間

([SMIL21]の10.4.3)を参照。停止している要素(活性持続時間の終端に達している要素)は,一時

停止はしないことに注意する。 

メソッド 

pauseElement  

時間付け要素を一時停止させる。一時停止要素及び活性持続時間([SMIL21]の10.4.3)を参照。 

パラメタなし 

戻り値なし 

例外なし 

resumeElement  

時間付け要素を再開させる。一時停止要素及び活性持続時間([SMIL21]の10.4.3)を参照。 

パラメタなし 

戻り値なし 

例外なし 

A.8.17 SVGAnimationElement 

このインタフェースは,次のようなSMILアニメーション要素によって実装される。'animate',

'animateTransform','animateColor','animateMotion'及び'set'。これは歴史的な理由によって含まれてはいるが,

既に廃止されている。このインタフェースは新しい'animation'要素とは関係がないことに注意する。 

IDL定義 

interface SVGAnimationElement : SVGTimedElement 

}; 

定数は定義されない。 

属性は定義されない。 

424 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

メソッドは定義されない。 

A.8.18 SVGVisualMediaElement 

このインタフェースは,視覚的な(つまり,スクリーン上に物理的な位置をもつ)メディア要素を表す。

これは次によって実装される。'animation'及び'video' 

IDL定義 

interface SVGVisualMediaElement : SVGLocatableElement, SVGTimedElement 

}; 

定数は定義されない。 

属性は定義されない。 

メソッドは定義されない。 

A.8.19 SVGTimer 

SVGTimerインタフェースは,一度だけ又は反復する処理要求のスケジューリングのためのAPIを提供

する。SVGTimerオブジェクトは,常に,実行中(属性runningがtrue)又は待機中(属性runningがfalse)

のいずれかの状態にある。タイマの各間隔の後に,型SVGTimerのEventが誘因される。 

SVGTimer処理要求は,timerがrunningの状態にあるときに限り誘因される。SVGTimer処理要求は,対

象の段階に限定される。SVGTimerはEventTargetなので,処理要求型としてSVGTimerをもつ

addEventListenerを用いてEventListenerをそれに登録することができる。イベントリスナは,処理要求オブ

ジェクトの対象プロパティを通して,対応するSVGTimerオブジェクトにアクセスすることができる。 

SVGTimerインスタンスは,SVGGlobalインタフェースのcreateTimerメソッドを使用することで作成さ

れる。 

IDL定義 

interface SVGTimer : events::EventTarget 

 attribute long delay; 

 attribute long repeatInterval; 

 readonly attribute boolean running; 

 void start(); 

 void stop(); 

}; 

定数は定義されない。 

属性 

delay  

この属性は,次の処理要求が発生するまでの残り時間(ミリ秒)を指定する。SVGTimerが実行中

の状態にあるとき,この属性は現在の間隔における残り時間を反映するよう動的に更新される。

SVGTimerが待機中の場合,delayは,停止時に残っていた時間を反映する。delay属性を取得すると,

現在値(すなわち,残ったdelayの内容出力値)が返される。そのオブジェクトが実行中の状態にお

けるdelay期間の経過後,SVGTimerオブジェクトは型SVGTimerのEventを誘引する。続いてそのdelay

425 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

はrepeatInterval値によって更新され,新しいカウントダウンが開始される。delayの設定によって,現

在の間隔が新しい値にリセットされる。この属性が0のときは,その処理要求は可能な限り早く誘因

されるということである。負の数が割り当てられたときは,stop()メソッドの呼出しと同等である。そ

の初期値は,SVGGlobalインタフェースのcreateTimerメソッドにおけるinitialIntervalパラメタを通し

て設定され,SVGTimerの最初の間隔を定義する。 

repeatInterval  

この属性は,SVGTimerにおける各反復の間隔(すなわち,初期の間隔に続く各タイマの間隔)を

ミリ秒単位で指定する。この属性の初期値は,SVGGlobalインタフェースのcreateTimerメソッドにお

けるrepeatIntervalパラメタを通して設定される。負の値が割り当てられた場合,反復した処理要求の

誘因は無効にされ,delayの後で処理要求を誘引する一度限りのタイマとなる。 

running  

SVGTimerの状態。タイマが実行中のときその値はtrue,タイマが待機中のときはfalse。タイマが

停止している場合には,repeatInterval及びdelayプロパティは負ではない場合があることに注意する

(delayが負である場合にはタイマは停止する。)。 

メソッド 

start  

SVGTimerの状態を実行中に変更する。そのタイマが既に実行中の状態にある場合には,それは一

切影響を与えない。初期にはタイマは待機中であり,このメソッドによって開始されなければならな

い。タイマdelayが開始時に負の値をもつ場合(例 delayを負の値に設定して時間が停止された場合),

delay値はこのメソッドが呼び出されたときにrepeatIntervalにリセットされる。 

パラメタなし 

戻り値なし 

例外なし 

stop  

SVGTimerの状態を待機中に変更する。そのタイマが既に待機中の状態にある場合には,このメソ

ッドを呼び出しても何の影響もない。 

パラメタなし 

戻り値なし 

例外なし 

A.8.20 SVGGlobal 

実在するスクリプトを用いたSVG文書の多くは,ブラウザ特有のWindowインタフェースの機能を利用

している。この規格は,この仕様書における新機能に加えて,一部のデファクト標準機能がそこで定義さ

れるSVGGlobalインタフェースを規定している。文書の既定図形([DOM2VIEWS]の1.1)を表現するオブ

ジェクトは,SVGGlobalインタフェースを実装していなければならない。このオブジェクトは,AbstractView

も実装する。したがって,ECMAScript言語結合では,グローバルなスクリプトオブジェクトはSVGGlobal

を実装する。また,DocumentView::defaultViewを通して文書のSVGGlobalオブジェクトを取得することも

できる。 

IDL定義 

interface SVGGlobal 

background image

426 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

 SVGTimer createTimer(in long initialInterval, in long repeatInterval); 

 void getURL(in DOMString iri, in AsyncStatusCallback callback); 

 void postURL(in DOMString iri, in DOMString data, in AsyncStatusCallback callback,  

              in DOMString type, in DOMString encoding); 

 Node parseXML(in DOMString data, in Document contextDoc); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

createTimer  

与えられた初期及び反復の間隔によってSVGTimerを作成する。初期にはSVGTimerは待機中の状

態にある。 

パラメタ 

in long initialInterval 

反復するSVGTimerのための初期間隔(ミリ秒)を
指定する(すなわち,タイマにおけるdelay属性の
初期値を設定する。)。そのSVGTimerが反復しない
場合,一度限りのタイマのための間隔を指定する。
このパラメタを負の値に設定すると,待機中の状態
にあるSVGTimerが作成される。 

in long repeatInterval 

SVGTimerが初期の間隔に続いて反復する時間間隔
を指定する。負の値は,そのSVGTimerを一度限り
のタイマにする。 

戻り値 

SVGTimer 

作成されるSVGTimer 

例外なし 

getURL  

このメソッドは,コールバック関数を呼び出すAsyncStatusCallbackオブジェクト及びIRIが与えら

れると,そのIRIの資源の取得を試みる。そのIRIにおいてHTTP又はHTTPSスキームが使用されて

いる場合には,HTTP GETメソッドが使用される。実装では他のスキームに対応してもよいが,しな

くてもよい。 

処理における必要条件 

このメソッドの呼出しは,非同期に実施されなければならない。呼出しがあると,すぐに制御が呼

出しの文脈に返され,その要求が一旦終了すると,コールバック関数が呼び出される。このメソッド

への複数回の呼出しは,FIFO順で実行されなければならない。 

利用者エージェントはHTTP要求へのgzip内容コード化に対応していなければならず,そのような

内容をコールバックに渡す前にデコードしなければならない。利用者エージェントは,それらが送信

するgzipコード化内容に対応していなくてもよいが,その対応が推奨される。クッキーに対応し,複

数の要求を通して状態を維持することができるようにすることが望ましい。利用者エージェントは,

要求による相互作用の手段(例 認証情報の入力)を利用者に提供してもよいが,しなくてもよい。 

安全上の理由によって,利用者エージェントはこれらの要求を起源(origin)によって制限するよう強

く推奨されることに注意する。そのような制限を実施するとき,コールバックは,AsyncURLStatusオ

background image

427 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ブジェクトのsuccessフィールドをfalse,他のフィールドをnullに設定して,すぐに呼び出される。

リダイレクト応答(3xx HTTPステータスコード)はAPIを通して露出してはならず,それらはHTTP

仕様書に適合して内部的に処理されなければならない。 

パラメタ 

in DOMString iri 

要求される資源のIRI 

in AsyncStatusCallback callback 

要求の完了時にコールバックが呼び出されるオブジ
ェクト 

戻り値なし 

例外なし 

postURL  

このメソッドは,IRI,転送データ,コールバック関数を呼び出すAsyncStatusCallbackオブジェクト,

メディア型,及び内容コード化が与えられると,要求されたメディア型及び内容コード化を用いて,

指定されたIRIにデータをポストする。利用者エージェントは,HTTP又はHTTPS IRIで呼び出され

るpostURLに対応していなければならないが,HTTPと機能上互換性があるプロトコルを示していれ

ば,他のIRIスキームに対応してもよい。要求が一旦終了すると,AsyncStatusCallbackインタフェー

スに記述されるようにコールバックが呼び出される。内容のポストに対応しないIRI,又はHTTPと

互換性のある方法によって内容をポストしないIRIによってpostURLが呼び出された場合,コード

NOT̲SUPPORTED̲ERRのDOMExceptionが処理されなければならない。 

その処理における必要条件は,次の追加的な注意を除けば,getURLと同じである。 

・ 渡されるデータには,それに適用されるHTML形式の符号化が一切ない。そうすることによって,

HTML形式による転送に対応する内容を転送することを望むアプリケーションは,それ自身で符号

化を生成しなければならない。 

・ content typeのパラメタを設定するときには,その要求のContent-Typeヘッダもそれに合わせて設定

されなければならない。content typeパラメタの構文がメディア型のそれと適合しない場合には,そ

れは無視されなければならない。このパラメタが指定されていない場合は,text又はplainを既定と

しなければならない。 

・ encodingパラメタを設定したとき,利用者エージェントは,そのHTTP内容コード化で提出された

データを符号化し,それに従ってContent-Encodingヘッダを設定しなければならない(それに対応

している場合)。それに対応していない場合には,それを無視し,Content-Encodingヘッダは設定せ

ず,符号化なしでそのデータを転送しなければならない。唯一必須とされる内容コード化は,identity

である。 

パラメタ 

in DOMString iri 

要求される資源のIRI 

in DOMString data 

POST要求のボディーとなるデータ 

in AsyncStatusCallback callback 

要求の完了時にコールバックが呼び出されるオブジ
ェクト 

in DOMString type 

POST要求の内容型 

in DOMString encoding 

POST要求の符号化 

戻り値なし 

例外なし 

parseXML  

background image

428 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

文字列及びDocumentオブジェクトが与えられると,その文字列をXML文書として構文解析し,そ

れを表現するNodeを返す。その文字列のXMLがXML 1.0又はXML 1.1において整形式ではない,

又は,Namespaces in XML 1.0又はNamespaces in XML 1.1によって名前空間が整形式ではない場合に

は,このメソッドはnull値を返さなければならない。 

入力文字列を構文解析する場合,contextDocパラメタは,解析されたノードにおいてownerDocument

フィールドを設定するためだけに使われる。 

構文解析の途中で'script'要素に遭遇した場合は,その時に実行してはならない。それを実行するこ

とができるのは,現在のSVG文書に挿入されているときだけである。 

構文解析を完了するために外部資源(例 外部実体,スタイルシート,スクリプト,ラスタ画像,

ビデオ,オーディオなど)を読み込むことは,必須ではない。XSLスタイルシートを適用してはなら

ない。 

contextDocパラメタを定義する場合,このメソッドは,そのownerDocumentフィールドが提供され

たDocumentオブジェクトに対して設定されなければならないElementオブジェクトを返す。実際に

contextDocパラメタを指定する場合には,その処理は次の順序の適用と同等でなければならない。 

a) XMLをDocumentに解析する。 

b) documentElement要素を取得する。 

c) 前のステップのElementを最初のパラメタに,deepパラメタをtrueに設定し,parseXMLに

渡されたDocumentオブジェクト上のimportNodeを呼び出す(importNodeはDOM 3 Coreの

一部であり,uDOMの一部ではないことに注意する。それについてここで言及したのは,そ

の効果がimportNodeを使用した場合と同様にならなければならないことを示すためであり,

実装における対応を義務付けるためではない。)。 

d) 最後のステップの結果を返す。 

パラメタ 

in DOMString data 

XMLとして構文解析されるデータ 

in Document contextDoc 

その文脈において構文解析が実施されるDocument
オブジェクト 

戻り値 

Node 

構文解析された内容を表すNode(Document又は
Elementのどちらか) 

例外 

DOMException 

INVALID̲CHARACTER̲ERR:構文解析されたXML
名のうちの一つが,contextDoc文書のXMLバージ
ョンに基づくXML名ではない場合に生じる。 

A.8.21 AsyncStatusCallback 

このインタフェースは,getURL又はpostURL(共にパラメタとしてこのインタフェースのインスタンス

をとる。)を通して取得された内容を処理するコードによって実装される。オブジェクトがこのインタフェ

ースを実装するoperationCompleteメソッドは,その要求が完了したときに呼び出される。 

IDL定義 

interface AsyncStatusCallback 

 void operationComplete(in AsyncURLStatus status); 

429 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

operationComplete  

このメソッドは,getURL又はpostURLを用いて資源を取ってきた結果を通知するために,コード

によって実装される。要求が完了したとき,そのメソッドは,要求に関する資源の内容及び情報を保

持するAsyncURLStatusオブジェクトで呼び出される。 

パラメタ 

in AsyncURLStatus status 

HTTP応答を表すオブジェクト 

戻り値なし 

例外なし 

A.8.22 AsyncURLStatus 

このインタフェースは,HTTP要求の完了時にoperationCompleteメソッドに渡す目的で,HTTP応答の

情報を得る。 

IDL定義 

interface AsyncURLStatus 

 readonly attribute boolean success; 

 readonly attribute DOMString contentType; 

 readonly attribute DOMString content; 

}; 

定数は定義されない。 

属性 

success  

その要求が成功したかどうかを示すブール フィールド。 

応答ステータスコードが200番台のHTTP要求では,この属性をtrueに設定し,400番台及び500

番台のステータスコードでは,それをfalseに設定しなければならない。100番台のステータスコード

は無視し,300番台のそれはgetURLの“処理における必要条件”に示される方法によって処理しなけ

ればならない。 

HTTP以外の資源を取ってくるとき,その資源を完全に取得することができた場合,この属性をtrue

に設定し,そうでなければfalseに設定しなければならない。 

contentType  

応答のメディア型を含む文字列。 

HTTP要求では,この属性はContent-Type HTTPヘッダの値に設定されなければならない。

Content-Typeヘッダがない場合,この属性をnullに設定しなければならない。 

HTTP以外の資源を取ってくるとき,この属性はnullに設定しなければならない。 

content  

background image

430 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

取ってきた資源の内容を含む文字列。 

その資源が有効な文字列ではない場合(HTTP要求のための他のヘッダ及びメディア型に従って解

釈されたとき,又はHTTP以外の資源に適切なものとして解釈されたとき),この属性はnullに設定

されなければならない。 

HTTP要求において,応答bodyのメディア型がtext/*階層にあり,charsetパラメタを指定した場合

には,(符号化が対応されている場合)そのテキストをホストプログラム言語のネイティブ形式に変換

しなければならない。符号化が対応されていない場合,このフィールドの値はnullでなければならな

い。必須の符号化は,UTF-8及びUTF-16(BE及びLE)だけである。HTTP応答ボディーがそれに適

用される一つ以上の内容コード化をもっている場合,このフィールドを設定する前にそれを完全にデ

コードしなければならない。HTTP応答ステータスコードがエラーコードであったものの,bodyをも

つ場合,そのbodyの内容は取り出されなければならない。 

メソッドは定義されない。 

A.8.23 EventListenerInitializer2 

EventListenerInitializer2インタフェースは,“グローバルオブジェクト”の概念をもたない言語で書かれ

たスクリプトが,それらのイベントリスナを初期化するための方法を提供する。それは特にJava処理要求

リスナーのために使用されるが,この一般的手法は他の同様のスクリプト言語でも利用することができる。

EventListenerInitializer2を実装したオブジェクトがどのように発見及び使用されるのかの詳細については,

15.2を参照。 

IDL定義 

interface EventListenerInitializer2 

 void initializeEventListeners(in Element scriptElement); 

 EventListener createEventListener(in Element handlerElement); 

}; 

定数は定義されない。 

属性は定義されない。 

メソッド 

initializeEventListeners  

指定した'script'要素によって与えられるスクリプトを実行することが望ましいことを示すために呼

び出される。 

パラメタ 

in Element scriptElement 

実行するスクリプトを示す'script'要素 

戻り値なし 

例外なし 

createEventListener  

指定した'handler'要素に対応するEventListenerを得るために呼び出される。 

パラメタ 

in Element handlerElement 

対応するEventListenerが返される'handler'要素 

戻り値 

431 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

EventListener 

EventListener 

例外なし 

432 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書B 

(規定) 

IDL定義 

B.1 

概説 

この附属書は,SVG uDOMにおけるIDL全体を示す。 

B.2 

SVG uDOM IDL 

SVG uDOM IDLは,SVG UDOMのモデルを定義する。SVG uDOM IDLの定義では,一つ以上のベース

クラスをもつインタフェースもあることに注意する。SVG uDOMのための標準的言語結合では,そのSVG 

uDOM全体を与えられた言語にマッピングする方法を定義する。また,その言語において,どのように一

つ以上のベースクラスをもつインタフェースを実装するのがよいかを示す。 

module dom 

    valuetype DOMString sequence<unsigned short>; 

    typedef Object DOMObject; 

    interface Node; 

    interface Element; 

    interface Document; 

    exception DOMException 

    { 

        unsigned short code; 

    }; 

    const unsigned short      INDEX̲SIZE̲ERR 

= 1; 

    const unsigned short      DOMSTRING̲SIZE̲ERR 

= 2; 

    const unsigned short      HIERARCHY̲REQUEST̲ERR 

= 3; 

    const unsigned short      WRONG̲DOCUMENT̲ERR 

= 4; 

    const unsigned short      INVALID̲CHARACTER̲ERR 

= 5; 

    const unsigned short      NO̲DATA̲ALLOWED̲ERR 

= 6; 

    const unsigned short      NO̲MODIFICATION̲ALLOWED̲ERR 

= 7; 

    const unsigned short      NOT̲FOUND̲ERR 

= 8; 

    const unsigned short      NOT̲SUPPORTED̲ERR 

= 9; 

    const unsigned short      INUSE̲ATTRIBUTE̲ERR 

= 10; 

    const unsigned short      INVALID̲STATE̲ERR 

= 11; 

    const unsigned short      SYNTAX̲ERR 

= 12; 

    const unsigned short      INVALID̲MODIFICATION̲ERR 

= 13; 

    const unsigned short      NAMESPACE̲ERR 

= 14; 

    const unsigned short      INVALID̲ACCESS̲ERR 

= 15; 

433 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    const unsigned short      VALIDATION̲ERR 

= 16; 

    const unsigned short      TYPE̲MISMATCH̲ERR 

= 17; 

    interface Node 

    { 

        readonly attribute DOMString namespaceURI; 

        readonly attribute DOMString localName; 

        readonly attribute Node parentNode; 

        readonly attribute Document ownerDocument; 

        attribute DOMString textContent; 

        Node appendChild(in Node newChild)  

raises(DOMException); 

        Node insertBefore(in Node newChild, in Node refChild)  

raises(DOMException); 

        Node removeChild(in Node oldChild)  

raises(DOMException); 

        Node cloneNode(in boolean deep); 

    }; 

    interface Element : Node, ElementTraversal 

    { 

        DOMString getAttributeNS(in DOMString namespaceURI, in DOMString localName)  

raises(DOMException);   

        void setAttributeNS(in DOMString namespaceURI, in DOMString qualifiedName,  

                            in DOMString value)  

                            raises(DOMException); 

        DOMString getAttribute(in DOMString name); 

        void setAttribute(in DOMString name, in DOMString value)  

raises(DOMException); 

    }; 

    interface Document : Node 

    { 

        Element createElementNS(in DOMString namespaceURI, in DOMString qualifiedName)  

raises(DOMException); 

        readonly attribute Element documentElement; 

        Element getElementById(in DOMString elementId); 

    }; 

    interface ElementTraversal  

434 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    { 

        readonly attribute Element firstElementChild; 

        readonly attribute Element lastElementChild; 

        readonly attribute Element nextElementSibling; 

        readonly attribute Element previousElementSibling; 

        readonly attribute unsigned long childElementCount; 

    }; 

    interface Location 

    {   

        void assign(in DOMString iri); 

        void reload(); 

    }; 

    interface Window 

    { 

        readonly attribute Window parent; 

        readonly attribute Location location; 

    }; 

}; 

module views 

    interface DocumentView; 

    interface AbstractView 

    { 

        readonly attribute DocumentView document; 

    }; 

    interface DocumentView 

    { 

        readonly attribute AbstractView defaultView; 

    }; 

}; 

module events 

435 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    typedef dom::DOMString DOMString; 

    typedef dom::DOMException DOMException; 

    typedef dom::Document Document; 

    typedef dom::Element Element; 

    interface EventTarget; 

    interface EventListener; 

    interface Event;     

    interface EventTarget 

    { 

        void addEventListener(in DOMString type, in EventListener listener, in boolean 

useCapture); 

        void removeEventListener(in DOMString type, in EventListener listener,  

                                 in boolean useCapture); 

    }; 

    interface EventListener 

    { 

        void handleEvent(in Event evt); 

    }; 

    interface Event 

    { 

        readonly attribute EventTarget target; 

        readonly attribute EventTarget currentTarget; 

        readonly attribute DOMString type; 

        readonly attribute boolean cancelable; 

        readonly attribute boolean defaultPrevented; 

        void stopPropagation(); 

        void preventDefault(); 

    };     

    interface MouseEvent : UIEvent 

    {         

        readonly attribute long screenX;         

        readonly attribute long screenY;         

        readonly attribute long clientX;         

        readonly attribute long clientY;         

        readonly attribute unsigned short button;     

    }; 

436 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    interface MouseWheelEvent : MouseEvent      

    {         

        readonly attribute long wheelDelta;     

    }; 

    interface TextEvent : UIEvent     

    {         

        readonly attribute DOMString data;     

    }; 

    interface KeyboardEvent : UIEvent      

    {         

        readonly attribute DOMString keyIdentifier; 

    }; 

    interface UIEvent : Event      

    {         

        readonly attribute long detail;     

    }; 

    interface ProgressEvent : Event      

    {         

        readonly attribute boolean lengthComputable;         

        readonly attribute unsigned long loaded;         

        readonly attribute unsigned long total;     

    }; 

}; 

module smil 

    typedef events::Event Event; 

    interface ElementTimeControl 

    { 

        void beginElementAt(in float offset); 

        void beginElement(); 

        void endElementAt(in float offset); 

        void endElement(); 

437 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    }; 

    interface TimeEvent : Event      

    {         

        readonly attribute long detail;     

    }; 

}; 

module svg 

    typedef dom::DOMString DOMString; 

    typedef dom::DOMException DOMException; 

    typedef dom::DOMObject DOMObject;     

    typedef dom::Document Document; 

    typedef dom::Element Element; 

    typedef dom::Node Node; 

    typedef events::Event Event; 

    typedef events::EventListener EventListener; 

    typedef events::EventTarget EventTarget; 

    interface SVGSVGElement; 

    interface SVGRGBColor; 

    interface SVGRect; 

    interface SVGPoint; 

    interface SVGPath; 

    interface SVGMatrix; 

    interface SVGLocatableElement; 

    interface SVGElement; 

    interface SVGTimedElement; 

    interface SVGAnimationElement; 

    interface SVGDocument; 

    interface SVGGlobal; 

    exception SVGException 

    { 

        unsigned short code; 

    }; 

    const unsigned short SVG̲WRONG̲TYPE̲ERR         = 0; 

    const unsigned short SVG̲INVALID̲VALUE̲ERR       = 1; 

438 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

    const unsigned short SVG̲MATRIX̲NOT̲INVERTABLE  = 2; 

    interface SVGDocument : Document, EventTarget  

    { 

    }; 

    interface SVGUseElement : SVGLocatableElement 

    { 

    }; 

    interface SVGElementInstance : EventTarget  

    { 

        readonly attribute SVGElement correspondingElement; 

        readonly attribute SVGUseElement correspondingUseElement; 

    }; 

    interface SVGSVGElement : SVGLocatableElement, SVGTimedElement 

    { 

        const unsigned short NAV̲AUTO 

= 1;  

        const unsigned short NAV̲NEXT 

= 2;  

        const unsigned short NAV̲PREV 

= 3;  

        const unsigned short NAV̲UP 

= 4;  

        const unsigned short NAV̲UP̲RIGHT 

= 5;  

        const unsigned short NAV̲RIGHT 

= 6;  

        const unsigned short NAV̲DOWN̲RIGHT = 7; 

        const unsigned short NAV̲DOWN 

= 8; 

        const unsigned short NAV̲DOWN̲LEFT 

= 9; 

        const unsigned short NAV̲LEFT 

= 10; 

        const unsigned short NAV̲UP̲LEFT 

= 11; 

        attribute float currentScale; 

        attribute float currentRotate; 

        readonly attribute SVGPoint currentTranslate; 

        readonly attribute SVGRect viewport;  

        float getCurrentTime(); 

        void setCurrentTime(in float seconds); 

        SVGMatrix createSVGMatrixComponents(in float a, in float b, in float c, in float 

d, in float e, in float f); 

        SVGRect createSVGRect(); 

        SVGPoint createSVGPoint(); 

        SVGPath createSVGPath(); 

439 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        SVGRGBColor createSVGRGBColor(in float red, in float green, in float blue)  

raises(SVGException); 

        void moveFocus(in unsigned short motionType)  

raises(DOMException); 

        void setFocus(in EventTarget theObject)  

raises(DOMException); 

        EventTarget getCurrentFocusedObject(); 

    }; 

    interface SVGRGBColor 

    { 

        attribute unsigned long red; 

        attribute unsigned long green; 

        attribute unsigned long blue; 

    }; 

    interface SVGRect 

    { 

        attribute float x; 

        attribute float y; 

        attribute float width; 

        attribute float height; 

    }; 

    interface SVGPoint 

    { 

        attribute float x; 

        attribute float y; 

        SVGPoint matrixTransform(in SVGMatrix matrix); 

    }; 

    interface SVGPath 

    { 

        const unsigned short MOVE̲TO = 77; 

        const unsigned short LINE̲TO = 76; 

        const unsigned short CURVE̲TO = 67; 

        const unsigned short QUAD̲TO = 81; 

        const unsigned short CLOSE = 90; 

        readonly attribute unsigned long numberOfSegments; 

        unsigned short getSegment(in unsigned long cmdIndex)  

440 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

raises(DOMException); 

        float getSegmentParam(in unsigned long cmdIndex, in unsigned long paramIndex)  

raises(DOMException); 

        void moveTo(in float x, in float y); 

        void lineTo(in float x, in float y); 

        void quadTo(in float x1, in float y1, in float x2, in float y2); 

        void curveTo(in float x1, in float y1, in float x2, in float y2, in float x3, 

in float y3); 

        void close(); 

    }; 

    interface SVGMatrix 

    { 

        float getComponent(in unsigned long index)  

raises(DOMException); 

        SVGMatrix mMultiply(in SVGMatrix secondMatrix); 

        SVGMatrix inverse()  

raises(SVGException); 

        SVGMatrix mTranslate(in float x, in float y); 

        SVGMatrix mScale(in float scaleFactor); 

        SVGMatrix mRotate(in float angle); 

    }; 

    interface SVGLocatable 

    {  

        SVGRect    getBBox(); 

        SVGMatrix  getScreenCTM(); 

        SVGRect    getScreenBBox(); 

    }; 

    interface SVGLocatableElement : SVGElement, SVGLocatable 

    { 

    }; 

    interface TraitAccess 

    { 

        DOMString getTrait(in DOMString name)  

raises(DOMException); 

        DOMString getTraitNS(in DOMString namespaceURI, in DOMString name)  

raises(DOMException); 

441 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        float getFloatTrait(in DOMString name)  

raises(DOMException); 

        sequence<float> getFloatListTrait(in DOMString name)  

raises(DOMException); 

        SVGMatrix getMatrixTrait(in DOMString name)  

raises(DOMException); 

        SVGRect getRectTrait(in DOMString name)  

raises(DOMException); 

        SVGPath getPathTrait(in DOMString name)  

raises(DOMException); 

        SVGRGBColor getRGBColorTrait(in DOMString name)  

raises(DOMException); 

        DOMString getPresentationTrait(in DOMString name)  

raises(DOMException); 

        DOMString getPresentationTraitNS(in DOMString namespaceURI, in DOMString name)  

raises(DOMException); 

        float getFloatPresentationTrait(in DOMString name)  

raises(DOMException); 

        sequence<float> getFloatListPresentationTrait(in DOMString name)  

raises(DOMException); 

        SVGMatrix getMatrixPresentationTrait(in DOMString name)  

raises(DOMException); 

        SVGRect getRectPresentationTrait(in DOMString name)  

raises(DOMException); 

        SVGPath getPathPresentationTrait(in DOMString name)  

raises(DOMException); 

        SVGRGBColor getRGBColorPresentationTrait(in DOMString name)  

raises(DOMException); 

        void setTrait(in DOMString name, in DOMString value)  

raises(DOMException); 

        void setTraitNS(in DOMString namespaceURI, in DOMString name, in DOMString value)  

raises(DOMException); 

        void setFloatTrait(in DOMString name, in float value)  

raises(DOMException); 

        void setFloatListTrait(in DOMString name, in sequence<float> value)  

raises(DOMException); 

        void setMatrixTrait(in DOMString name, in SVGMatrix matrix)  

raises(DOMException); 

        void setRectTrait(in DOMString name, in SVGRect rect)  

raises(DOMException); 

442 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

        void setPathTrait(in DOMString name, in SVGPath path)  

raises(DOMException); 

        void setRGBColorTrait(in DOMString name, in SVGRGBColor color)  

raises(DOMException); 

    }; 

    interface SVGElement : Element, EventTarget, TraitAccess 

    { 

        attribute DOMString id; 

    }; 

    interface SVGTimedElement : SVGElement, smil::ElementTimeControl 

    { 

        void pauseElement(); 

        void resumeElement(); 

        readonly attribute boolean isPaused;  

    }; 

    interface SVGAnimationElement : SVGTimedElement 

    { 

    }; 

    interface SVGVisualMediaElement : SVGLocatableElement, SVGTimedElement  

    { 

    }; 

    interface SVGTimer : events::EventTarget 

    { 

       attribute long delay; 

       attribute long repeatInterval; 

       readonly attribute boolean running;     

       void start(); 

       void stop(); 

    }; 

    interface SVGGlobal 

    { 

       SVGTimer createTimer(in long initialInterval, in long repeatInterval); 

       void getURL(in DOMString iri, in AsyncStatusCallback callback); 

       void postURL(in DOMString iri, in DOMString data, in AsyncStatusCallback callback,  

443 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

                    in DOMString type, in DOMString encoding); 

       Node parseXML(in DOMString data, in Document contextDoc); 

    }; 

    interface AsyncStatusCallback  

    { 

        void operationComplete(in AsyncURLStatus status); 

    }; 

    interface AsyncURLStatus  

    { 

        readonly attribute boolean success; 

        readonly attribute DOMString contentType; 

        readonly attribute DOMString content; 

    }; 

    interface EventListenerInitializer2 

    { 

        void initializeEventListeners(in Element scriptElement); 

        EventListener createEventListener(in Element handlerElement); 

    }; 

}; 

background image

444 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書C 
(規定) 

実装における必要条件 

C.1 概説 

SVG言語の様々な機能の実装における必要条件について,次に示す。 

C.2 対応外の要素,属性,プロパティ,属性値及びプロパティ値 

適合SVG利用者エージェントでは,次のような未知の属性,属性値,スタイル付けプロパティ,スタイ

ル付けプロパティ値及び子孫要素を処理することができなければならない。 

・ SVG文書片では,未知の要素(SVG又はXML Events名前空間に存在するものを含む。)をルート

にもつサブツリー,又は予想できない位置にある既知の要素は,一切描画されない。そのサブツリ

ーのノードは,文書ツリーにおける関連DOMオブジェクトを含み,処理されない。しかし,その

場合においても,そのDOMオブジェクトは要素型に合ったDOMインタフェースを実装する。 

・ SVG又はXML Events名前空間の既知の要素では,名前空間をもたない未知の属性及び対応外の値

をもつ既知の属性を描画する場合,それらを指定していないときと同じような処理が行われる。 

・ 全ての要素のSVG名前空間に置かれた属性は,未知の属性として処理される。 

・ XLink若しくはXML Events名前空間における未知の属性,又は対応外の値をもつXLink若しくは

XML Events名前空間における既知の属性については,利用者エージェントはそれらの属性が指定さ

れていないときと同じように各リンク又は処理要求ハンドリングを処理しなければならない。 

・ 利用者エージェントは上記のどのケースにおいても処理又は描画を中止してはならないが,利用者

のオプションによっては,対応外の内容に関する警告,ログ又は通知を提供してもよい。 

次の例ignored-fill.svgでは,'circle'要素の'fill'プロパティは,上記の規則によって無視される。'fill'は継承

プロパティなので,この円は黒ではなく緑色でフィルされる。 

例: ignored-fill.svg 

<g fill="green"> 

  <circle fill="hey baby, like wow" r="50"/> 

</g> 

エラーコンソールへのアクセスを提供するSVG利用者エージェントは,対応外の内容に遭遇した場合,

対応外の内容の発生,その位置及びその他の作者の役に立つメッセージをエラーコンソールに提供するこ

とが望ましい。 

C.3 エラー処理 

適合SVG利用者エージェントは,次の方法によってエラーを処理しなければならない。 

あるSVG文書片を技術的にエラーとする場合には,様々なケースがある。 

・ その内容が,使用しているXMLのバージョン(XML 1.0仕様書 [XML10]又はXML 1.1仕様書 

[XML11])において整形式ではない場合 

・ Namespaces in XML 1.0仕様 [XML-NS10]又はNamespaces in XML 1.1仕様 [XML-NS]において,そ

445 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

の内容の名前空間が適正形式ではない場合(上記で使用されるXMLのバージョンに依存) 

・ この規格においてエラーと示されるその他の状況 

文書は時間の経過に伴ってエラーになったり,エラーでなくなったりする場合がある。例えば,文書の

SVG uDOM又はアニメーションに変更を加えてその文書がエラーになったとしても,更に変更を加えれば

その文書が元通り正しくなることがある。 

文書がエラーになった場合,SVG利用者エージェントはそれがエラーであることをはっきり表示しなけ

ればならない。加えて,エラーコンソールへのアクセスを提供するSVG利用者エージェントは,エラーの

存在,その位置,及びその他の作者の役に立つメッセージをエラーコンソールに提供することが望ましい。 

一連のスクリプトへの変更が特定のSVG文書片をエラーにしたり,エラーから回復させたりする場合が

あるので,エラー処理は,文書の体裁(例 ディスプレイ装置への描画)を更新したときに限り実施する。 

C.4 名前空間,バージョン,baseProfile,requiredFeatures及びrequiredExtensions 

SVG利用者エージェントは,SVG名前空間に明示的にSVG要素として置かれている要素だけを対象と

しなければならない。例えば,文書を構文解析する場合,SVG利用者エージェントはその文書のXML名

前空間宣言で明示的にSVG要素とされている要素だけを対象としなければならない。同様に,

Document::createElementNSのuDOMメソッドを用いて作成した全ての要素は,それがSVG要素になるよ

う,namespaceURIパラメタにSVG名前空間を渡さなければならない。 

SVG内容では,それを正しく描画するために,'requiredFeatures'属性及び'requiredExtensions'属性を使用し

てSVG利用者エージェントが最低限対応していなければならない機能を明示的に示すことができる。また,

SVG内容では,'baseProfile'と合わせて'version'属性を使用することによって,最低限対応していなければな

らない機能を明示的に示すことができる。例えば,'version'が'1.2'で'baseProfile'が'tiny'の場合,その内容に

は最低限この規格に対応しているSVG利用者エージェントが必要であることがこれらの属性によって示

されている。SVG利用者エージェントが最低限必要とされる機能セットに対応していない場合,その利用

者エージェントは,正しく内容を描画することができない可能性について利用者に警告,又ははっきりと

分かる形によって通知をすることが望ましい。 

しかし,SVG内容において特定の値が'version'には与えられていても'baseProfile'には与えられていない場

合には,単にその内容が適合する仕様書の水準(1.0,1.1又は1.2)だけを利用者エージェントに示す。'version'

が指定されていても'baseProfile'が指定されていない場合には,そのSVG内容はその描画に最低限必要とさ

れる機能セットを決定するための十分な情報を利用者エージェントに提供しない。つまり,利用者エージ

ェントは,作者がSVG言語の古いバーションでは定義されていない機能を使用しているかもしれないこと

を知ることができるだけである。したがって,SVG内容において利用者エージェントに未知のSVG言語

のバージョンが指定されている場合には,その利用者エージェントは,正しく内容を描画することができ

ない可能性について利用者に警告,又ははっきりと分かる形によって通知をすることが望ましい。 

SVG内容において,現在インストールされている利用者エージェントでは対応されていないSVG言語

のバージョン,プロファイル,機能又は拡張が指定されている場合,それらの機能に対応している新しい

バージョンが利用できるのであれば,利用者エージェントはその更新の方法について利用者に通知しても

よい。 

バージョン番号が示される目的は,その内容に最低限必要な実装バージョンを示すことであることに注

意する。つまり,SVG利用者エージェントが未知のバージョン番号をもつ内容に遭遇したとしても,それ

が対応している要素又は属性は描画しなければならないが,それが対応していないルート要素をもつ要素

446 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

又は文書片は描画してはならない。 

C.5 色及び不透明値の固定 

このC.5では,SVG利用者エージェントの振る舞いについて規定する。 

数値属性及びプロパティ値には,色成分値のように範囲が制限されている場合がある。範囲外の色又は

不透明値が与えられた場合,利用者エージェントは,プレゼンテーション時間が終了するまで全てのエラ

ーチェックを先延ばしにすることが望ましい。なぜならば,複数の操作が合成されることによって範囲外

の中間値が生成されているだけであり,最終的な値は範囲内におさまる可能性があるからである。 

色値は,それが範囲外であったとしても(プレゼンテーション時における最終的な算出結果が範囲外の

色値であったとしても)エラーにはならない。利用者エージェントは,その色値を最も近い色値に固定し

(単純なクリッピングなどで決定),また,システムによってそれをできる限り遅いタイミングで(例 プ

レゼンテーション時間)処理することが望ましい。しかし,SVG利用者エージェントが構文解析時のよう

な早期に色値を固定することも認められている。したがって,範囲外の色値が用いられている場合には,

実装への依存によってシステムが異なれば振る舞いが異なる可能性がある。 

不透明値は範囲外であってもエラーにはならず,不透明値の処理時(例 プレゼンテーション時又は中

間的なフィルタエフェクト計算を実行することが必要な時)に0〜1の範囲に固定されることが望ましい。 

C.6 'path'要素の実装上の注意 

適合SVG利用者エージェントは,次の方法によってパスの描画を実装しなければならない。 

・ 方向性及び長さ0のパス部分 

・ 線端処理及び線結合処理が使われる場合,パス部分はその始点及び終点において方向性をもって

いなければならない。長さ0のパス部分は方向性をもたない。その場合,次のようなアルゴリズ

ムを用いて方向性を確立しなければならない。長さ0のパス部分の始点における方向性を決定す

るには,現在のサブパスの中で,終点が方向性をもつ部分(例 長さ0ではないパス部分)が見

つかるまでパスデータ指定を後方に調べる。そして,その終点の方向を利用する。そうでなけれ

ば,一時的にその始点が方向性を欠いていなければならない。同様に,長さ0のパス部分の終点

における方向性を決定するには,現在のサブパスの中で,始点が方向性をもつ部分(例 長さ0

ではないパス部分)が見つかるまでパスデータ指定を前方に調べる。そして,その始点の方向を

利用する。そうでなければ,一時的にその終点が方向性を欠いていなければならない。始点には

方向性があっても終点にはない場合には,その始点の方向性を終点に使用する。終点には方向性

があっても始点にはない場合には,その終点の方向性を始点に使用する。そうでない場合,利用

者空間におけるx軸の正方向にそのパス部分の始点及び終点の方向性をそろえる。 

・ 'stroke-linecap'がbuttに設定されていて,与えられたパス部分の長さが0の場合,その部分の線

端を描画してはならない。しかし,'stroke-linecap'がround又はsquareのどちらかに設定されてい

る場合,長さ0のパス部分のための線端を描画しなければならない(円形及び角形のドットをキ

ャンバスに描画することができる。)。 

・ S/s命令では,与えられた3次ベジェ部分の最初の制御点は,現在の点に相対的な,前のパス部分に

おける二番目の制御点の鏡像によって算出される。これは次のように算出しなければならない。現

在の点が(curx, cury)であり,前のパス部分の二番目の制御点が(oldx2, oldy2)の場合,鏡像点[すなわ

ち,現在のパス部分の最初の制御点(newx1, newy1)]は次のとおり。 

447 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

 (newx1, newy1) = (curx − (oldx2 − curx), cury − (oldy2 − cury)) 

               = (2 × curx − oldx2, 2 × cury − oldy2) 

C.7 テキスト選択の実装上の注意 

この規格では,テキスト選択時の視覚的なフィードバックについて,特定の体系を義務付けてはいない。

しかし,適合SVG利用者エージェントでは,一貫したシステム基準に基づくフィードバックが提供される

ことが望ましい。 

次の実装上の注意では,テキスト選択の操作において選択される文字を決定するために用いなければな

らないアルゴリズムについて述べている。適合SVG利用者エージェントは,このアルゴリズムによる振る

舞いを実装していなければならない。 

テキスト選択操作が行われると(例 利用者がマウスをクリック又はドラッグして選択部分を特定),利

用者エージェントは開始選択位置及び終了選択位置を決定する。これらはそれぞれ二つの文字の間のその

テキスト文字列における位置を示す。開始選択位置及び終了選択位置が決定されると,利用者エージェン

トは適切な文字を選択する。テキスト選択の結果は次のいずれかにならなければならない。 

・ 選択部分なし 

・ 開始文字,終了文字(同一の文字も可),及びDOMにおいて論理的にそれらの開始文字と終了文字

との間に位置する同一のテキスト内容要素における全ての文字 

ポインタ装置をもつシステムでは,SVG利用者エージェントは,描画されるグリフに対応した文字間の

どの境界が最も良い対象(例 最も近い)となるかを決めて開始選択位置を決定することが望ましい。こ

れは,その選択操作を開始する処理要求の発生時(例 マウス押下処理要求)における現在のポインタ位

置に基づいて行われることが望ましい。利用者エージェントは,その選択操作の完了まで追跡を行うこと

が望ましい(例 マウスドラッグに続くマウスボタンの開放)。その選択操作の終わりには,利用者エージ

ェントは,文字間のどの境界が終了選択位置の最良の対象(例 最も近い)となるかを決定することが望

ましい。 

双方向性によって文字の再整理が行われない場合は,開始選択位置と終了選択位置との間の全ての文字

が選択されなければならない。例えば,'text'要素に文字列"abcdef"が含まれ,その開始選択位置と終了選択

位置とがそれぞれ0及び3の場合には("a"の左側を位置0とする。),"abc"が選択される。 

利用者エージェントが双方向テキストの選択を実装していて,その選択が論理順序において隣接してい

ない文字の間から開始(又は終了)する場合,選択の部分として複数の文字の組合せが考えられる場合が

ある。潜在的な複数の組合せから選択をするアルゴリズムでは,そのテキスト文字列の視覚的描画順序に

最も適合するものを選択する。 

複数の文字が一つ以上のグリフセットに不可分にマッピングされる場合,利用者エージェントは,その

グリフセットの途中から開始される選択を禁止してもよいし,又はそのグリフセットが占める領域の部分

をそのグリフに対応する文字に割り当ててもよい。 

選択に対応しているシステムのために,利用者エージェントは,その標準として最大限のUI装置(例 

キーボード,マウス,ペン又はその他のポインタ装置)をテキスト選択のメカニズムにおいて利用できる

ようにしなければならない。このことは,与えられたテキストがリンクの一部である場合も同様である。

マウスのようなポインタ装置を介して選択に対応するプラットフォームへの実装の一例として,利用者エ

ージェントは,文字セルの周りに追加的な小さい領域を備え,テキスト選択操作は開始しても処理要求ハ

448 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ンドラ又はリンクは開始しないようにすることもできる。また,利用者エージェントは,全てのテキスト

内容[特に,選択又はフォーカス(focus)されている内容]に対するスクリプト又はプログラムによる

DOMアクセスを常に認めなければならない。 

C.8 印刷の実装上の注意 

ディスプレイ装置におけるズーム及び印刷に対応する適合SVG利用者エージェントでは,既定の印刷オ

プションにおいて,そのディスプレイ装置における現在のSVG文書片の見え方が反映された印刷を出力す

ることが望ましい(そのメディア特有のスタイル付けがなされていない場合)。その場合,利用者の行った

全てのズーム及びパン,アニメーションの現在の状態,並びにDOM及びスクリプトによる文書への変更

が反映されていることが望ましい。したがって,利用者がディスプレイ装置上の地図における特定の領域

をズームし,そのハード複写を得ようとした場合には,そのハード複写はディスプレイ装置上の地図と同

じ見え方をしていることが望ましい。利用者がアニメーション及び印刷を一時停止した場合,そのハード

複写には現在ディスプレイ装置上で停止している図形と同じ図形が表示されることが望ましい。スクリプ

トによって文書に要素が追加又は削除された場合,そのハード複写にはディスプレイに示された変更と同

じ変更が反映されていることが望ましい。 

あるSVG文書が,SVGアニメーション,スクリプト又はその他の機能に対応しないプリンタのような

静的装置に描画される場合は,利用者エージェントはその文書における全てのアニメーション及びスクリ

プトの要素を無視し,この規格の規則に従って残りの図形要素を描画する。 

449 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書D 
(規定) 

適合性基準 

D.1 概説 

この規格では,様々な製品における適合性について定義している。 

・ 内容(完全なSVGファイル及びSVG名前空間にあるXMLファイルの部分) 

・ SVGを読み込むソフトウェア(それを読み込んだ後でSVGを表示するソフトウェアのための追加

的な適合性基準もある。) 

・ SVGを書き込むソフトウェア(オーサリングツール及びサーバを含む。) 

SVGを表示するソフトウェアには,アニメーション又はその他の実行時の変更を表示しないものがある

(例 サーバサイドのラスタライザ,SVG対応プリンタ)。したがって,この規格では,静的及び動的な

SVGビューアについて異なる適合性水準を定めている。 

D.2 語法 

この規格では,"MUST","MUST NOT","REQUIRED","SHALL","SHALL NOT","SHOULD","SHOULD 

NOT","RECOMMENDED","MAY"及び"OPTIONAL"のような言い回しは,RFC 2119 [RFC2119] に示され

る意味において用いられる。しかし,可読性を高めるために,この規格ではこれらの単語を全て大文字で

示してはいない。 

全ての例は参考(informative)であり,規定(normative)ではない。参考と書かれている特定の箇条を

除けば,全ての箇条は規定である。全ての附属書には,それが規定又は参考のどちらなのかを示してある。

この規格の文章とRelaxNGスキーマとの間に衝突があった場合には,前者を正式とする(例えば,規格本

文における属性の説明では,認められている値についてEBNF文法が使用されている場合があり,これは

RelaxNGでは表現できない。)。同様に,DTD(又はW3C XMLスキーマ)とRelaxNGスキーマとの間で衝

突が起こった場合は,RelaxNGを正式とする(RelaxNGでは,W3C XMLスキーマによる表現では問題が

多い内容モデルに対する制約を表現することができる。また,RelaxNGは,DTDよりも自然かつ一般的な

方法によって名前空間を表現することができる。)。 

D.3 SVG内容の適合性 

D.3.1 適合SVG文書片 

あるSVG文書片は,この規格に示された仕様及びSVGスキーマ(RelaxNGスキーマを参照)に適合し,

さらに,次のような条件を満たしている場合,適合SVG文書片とされる。 

・ 使用しているXMLのバージョン(XML 1.0仕様書 [XML10]又はXML 1.1仕様書 [XML11])にお

いて整形式であり,対応するXML仕様書の名前空間(Namespaces in XML 1.0 [XML-NS10]又は

Namespaces in XML 1.1 [XML-NS])に適合している。 

・ Character Model for the World Wide Web 1.0: Fundamentals [CHARMOD] における適用可能な全ての適

合性基準'C'を満たしている。 

・ 次に示すNVDLスクリプトに適合している,又はSVG名前空間に存在しない全ての要素を削除し,

XLink,XML Events又はXML属性のそれではない名前空間におけるSVG名前空間の要素の全ての

450 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性を削除した場合,それをRelax NGスキーマに対して検証する。 

・ この規格において,スキーマでは表現されていない追加的な制約(例 属性値のためのEBNF文法)

が与えられている場合は,それらに適合している。 

NVDLスクリプト 

<rules xmlns='http://purl.oclc.org/dsdl/nvdl/ns/structure/1.0'> 

   <namespace ns='http://www.w3.org/2000/svg'> 

     <validate schema='Tiny-1.2.rng'> 

       <mode> 

         <namespace ns='http://www.w3.org/2000/svg' match='attributes'> 

           <reject/> 

         </namespace> 

         <namespace ns='' match='attributes'> 

           <attach/> 

         </namespace> 

         <namespace ns='http://www.w3.org/XML/1998/namespace' match='attributes'> 

           <attach/> 

         </namespace> 

         <namespace ns='http://www.w3.org/1999/xlink' match='attributes'> 

           <attach/> 

         </namespace> 

         <namespace 

ns='http://www.w3.org/2001/xml-events' 

match='elements 

attributes'> 

           <attach/> 

         </namespace> 

         <anyNamespace match='elements attributes'> 

           <mode> 

             <anyNamespace> 

               <allow/> 

             </anyNamespace> 

           </mode> 

         </anyNamespace> 

       </mode> 

     </validate> 

   </namespace> 

</rules> 

         

SVG言語又はこれらの適合性基準では,SVG内容のどのような側面についてもサイズの制限を設けない。

要素数,文字データ量又は属性値における文字数には,最大値は一切ない。 

D.3.2 適合SVG独立文書 

451 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

文書は,次のような条件を満たしていれば,適合SVG独立文書である。 

・ 適合SVG文書片の基準を満たしている。 

・ そのルート要素はSVG名前空間の'svg'要素である。 

D.3.3 適合SVG被包含文書 

Namespaces in XML 1.0仕様 [XML-NS10]又はNamespaces in XML 1.1仕様 [XML-NS] におけるXML名

前空間の機能を用いて(使用されるXMLのバージョンに依存),親XML文書はSVG文書片を包含するこ

とができる。 

親のXML文書に包含されるSVG文書片は,親のXML文書から取り出しても適合SVG文書片の基準を

満たしている場合,適合SVG被包含文書である。 

特に,SVG名前空間から個別の要素をそれ自体で使用することはできないことに注意する。したがって,

次のような文書のSVG部分は不適合である。 

<ParentXML xmlns="http://ns.example/"> 

   <!-- 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被包含文書にするために,次のような変更を加えることができる。 

<ParentXML xmlns="http://ns.example/"> 

   <!-- 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> 

D.3.4 条件付き適合SVG Tiny 1.2文書片 

大きなプロファイルに適合した内容を作成し,より低いプロファイルにも使えるようにすることが望ま

しい場合がある。例えば,SVG内容にswitch要素があり,適合SVG 1.2 Tinyビューアでは偽と評価される

条件付き処理属性によって保護された分岐でこの規格では利用できない機能(パターンフィル,画像クリ

ッピング及びフィルタエフェクト)を使用していても,また,別の分岐にはSVG Tiny 1.2内容(グラデー

ションフィルなど)が存在することもある。SVG Tiny 1.2ビューアが描画する内容の部分は全てSVG Tiny 

1.2であるが,内容全体としてはこの規格に適合していない。 

SVG文書片は,次のような条件を満たしているとき,条件付き適合SVG Tiny 1.2文書片とされる。 

a) この規格では定義されていない機能を必要とする'requiredFeatures'属性を用いた全ての要素が,偽と

マークされている。 

b) 拡張を必要とする'requiredExtensions'属性を用いた全ての要素が,偽とマークされている。 

452 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

c) 偽とマークされている全ての要素(及びそれらの子)をその文書片から削除する。 

d) その変更を加えられた文書片は,適合SVG文書片である。 

D.4 SVGライタの適合性 

D.4.1 適合SVGジェネレータ 

適合SVGジェネレータとは,次のような条件を満たすプログラムである。 

・ 常に次のいずれかの基準を満たす文書又は文書片を作成する。適合 SVG 文書片,適合 SVG 独立

文書及び適合 SVG 被包含文書 

・ 上記のいずれの種類の不適合 SVG 文書片も作成しない。 

SVGジェネレータでIDを定義する要素を書く場合,SVGビューアを対象とする内容については'xml:id'

属性 [XMLID] よりも'id'属性を使用することが望ましい。また,汎用的XMLプロセッサを対象とする内

容については'id'属性よりも'xml:id'属性を使用することが望ましい。SVGジェネレータでは,SVG名前空

間の要素における同一文書について両方の属性を用いてはならない。 

SVGジェネレータは,国際化に関するW3Cにおける進展(例 Character Model for the World Wide Web 

1.0: Normalization [CHARMOD-NORM])に従うのが望ましい。SVG仕様書の将来版では,適合SVGジェ

ネレータにはその仕様の対応が義務付けられる可能性もある。 

D.4.2 適合SVGオーサリングツール 

適合SVGオーサリングツールは,適合SVGジェネレータにおける全ての必要条件を満たしていなけれ

ばならない。さらに,適合SVGオーサリングツールは,SVG内容のジェネレータに関連する,Authoring Tool 

Accessibility Guidelines 1.0 [ATAG] におけるアクセシビリティガイドラインのプライオリティ1に適合し

ていなければならない(プライオリティ2及び3にも適合することが望ましいが,適合のために必須とい

うわけではない。)。 

D.4.3 適合SVGサーバ 

適合SVGサーバは,適合SVGジェネレータにおける全ての必要条件を満たしていなければならない。

さらに,HTTP又はインターネットメディア型を使用する他のプロトコルを用いる適合SVGサーバは,メ

ディア型"image/svg+xml"のSVG独立ファイルを提供しなければならない。 

また,SVGファイルをgzip又はデフレートで圧縮している場合,適合SVGサーバでは,どのプロトコ

ルに対応しているのか適切なヘッダにこれを示さなければならない。特に,サーバによって転送の直前に

圧縮された内容については,サーバは"Transfer-Encoding: gzip"ヘッダ又は"Transfer-Encoding: deflate"ヘッダ

を適切に使用しなければならない。サーバに圧縮形式で保存された内容(例 ファイル拡張子"svgz")に

ついては,サーバは"Content-Encoding: gzip"ヘッダ又は"Content-Encoding: deflate"ヘッダを適切に使用しな

ければならない。 

注記 保存内容の圧縮(HTTP用語で"entity")は,HTTP/1.1 TE/転送符号化([RFC2616]の14.39及び

14.41)に定義されるように,メッセージボディの自動圧縮とは異なる。 

D.5 SVGリーダの適合性 

D.5.1 適合SVGインタプリタ 

SVGインタプリタとは,SVG文書片を構文解析及び処理することができるプログラムである。SVGイ

ンタプリタには,サーチエンジン(例 テキスト,メタデータ,又は他のSVG内容のためのインデックス 

サービス),サーバ側符号変換ツール(例 SVG内容変換ツール),解析ツール(例 SVG内容からテキス

453 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ト内容を抽出するツール)などがある。また,SVGビューアもSVG文書片を構文解析及び処理(対象の

媒体に対するSVG内容の描画処理)することができるので,SVGインタプリタの必要条件を満たしてい

る。 

適合SVGインタプリタでは,XMLパーサが,全てのXML構造物([XML11]及び[XML-NS]で定義)を

構文解析し,処理することができなければならない。 

適合SVGインタプリタは,適合SVG Tiny 1.1文書片 [SVGM11] を構文解析し,処理することができな

ければならない。 

適合SVGインタプリタは,Character Model for the World Wide Web 1.0: Fundamentals [CHARMOD] におけ

る適用可能な全ての適合性基準'I'を満たしていなければならない。 

適合SVGインタプリタには,次のような二つのサブカテゴリがある。 

・ 適合静的SVGインタプリタは,機能文字列"http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-static"

に対応するSVGの静的な言語機能を構文解析し,処理することができなければならない(附属書J

参照)。 

・ 上記のカテゴリの必要条件に加えて,適合動的SVGインタプリタは,機能文字列

"http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-all"に対応し(附属書J参照),この規格に示され

るSVG DOMに必要な全ての機能に対応するSVGの言語機能を構文解析し,処理することができ

なければならない。 

適合SVGインタプリタは,どのようなSVG文書でも正しく構文解析しなければならない。ただし,全

ての機能の意味を正しく解釈しなくてもよい。実装するプロファイル(この規格)から分かるSVG名前空

間における要素内容モデル及びSVG名前空間の要素の属性値の構文だけをチェックできればよい。 

注記 SVGから別の図形表現へのコード変換(例 SVGからラスタへのコード変換)はビューアなの

で,ビューアの適合基準が適用される(D.5.2参照)。 

SVG内容に索引をつける適合SVGインタプリタ(例 サーチエンジン)は,最低限,全てのテキスト

データを抽出,処理しなければならない(テキスト内容要素及び記述要素の内容を含む。)。その場合,表

示及び転換のために作者が提供した代替言語に注意を払わなければならない。さらに,そのインデクシン

グについて知らせるために,要素型,文書構造,メタデータ,及びリンクデータを処理することが望まし

い。画像に索引をつける適合SVGインタプリタは,SVG内容を画像として分類,表示することが望まし

い。そのようなSVGインタプリタは,SVG文書の幾何学的意味,又は描画された画像(例 形状認識の

実行)に発見的手法を適用して,そのインデクシングを改良してもよい。 

D.5.2 適合SVGビューア 

SVGビューアとは,SVG文書片を構文解析及び処理し,ある種の出力媒体(例 ディスプレイ,プリン

タ)にその文書の内容を描画することができるプログラムである。したがって,SVGビューアもSVGイ

ンタプリタの一種である。 

適合SVGビューアには,次のような二つのサブカテゴリがある。 

・ 適合静的SVGビューアは,機能文字列"http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-static"に対

応するSVGの静的な言語機能に対応する(附属書J参照)。このカテゴリは,静的な文書だけ描画

するプラットフォーム及び環境(プリンタなど)に該当することが多い。 

・ 適合動的SVGビューアは,機能文字列"http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-all"に対応

するSVGの言語機能に対応する(附属書J参照)。このカテゴリは,利用者相互作用及び動的文書

内容(すなわち,時間の経過に伴いその内容を変化させることができる文書)に対応する一般的な

454 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ウェブブラウザのようなプラットフォーム及び環境に該当することが多い。利用者相互作用には,

ハイパーリンク,処理要求(例 マウスクリック),テキスト選択,ズーム及びパンの対応が含まれ

る(箇条13参照)。動的文書内容は,宣言的アニメーション又はSVG DOMを変更するスクリプト

によって実現することができる。 

適合静的SVGビューア及び適合動的SVGビューアの両方に適用される基準は次のとおり。 

・ そのプログラムは,適合SVGインタプリタでもなければならない。 

・ 対話型の利用者環境では,親XML文書に埋め込まれたSVG文書片又は独立SVG文書のズーム及

びパンの機能がなければならない。SVG利用者エージェントは,そのナビゲーションを容易にして

文脈を維持するために,利用者がズーム操作の中心点を指定し,様々なズーム水準を利用できるよ

うにすることが望ましい。 

・ 適切な利用者相互作用機能がある環境では,ビューアはハイパーリンクの活性化に対応していなけ

ればならない。 

・ 印刷機器に対応している場合,ディスプレイに必要な図形機能と同じ機能を用いたプリンタの解像

度によってSVG内容を印刷することができなければならない(例 カラープリンタによって指定さ

れた色を描画することができなければならない。)。 

・ この情報が利用できるシステムでは,親の環境は,物理的な装置解像度の情報をビューアに提供し

なければならない。この情報を決定することができない場合,親の環境は,最も一般的な対象装置

を近似した装置解像度として,適正な値を渡さなければならない。 

・ このビューアでは,JPEG/JFIF [JPEG] [JFIF] 及び PNG [PNG] 画像形式に対応していなければなら

ない。他の画像形式にも対応してもよい。 

・ 画像データの再サンプリングは,'image-rendering'プロパティの指定と一致していなければならない。 

・ ビューアは,対象キャンバスに対するSVG内容画像のアルファチャンネルブレンディング(alpha 

channel blending)に対応しなければならない。 

・ SVGの実装では,どのような内容型(SVG,スクリプトファイル,画像など)についても,gzipコ

ード化 [RFC1952] 及びデフレートコード化 [RFC1951] されたデータストリームを正しく対応す

ることができなければならない。HTTPに対応しているSVGの実装では,HTTP 1.1仕様書 [RFC2616] 

に適合してこれらのコード化に対応しなければならない。特にそのクライアントでは,

"Accept-Encoding:"リクエストヘッダ([RFC2616]の14.3)を用いてそれが認めるコード化(最低で

もgzip及びデフレート)を指定し,サーバからダウンロードしたgzip(及びデフレート)コード化

されたデータストリームを解凍することができなければならない。SVGビューアがHTTPにおいて

圧縮された内容(例 .svgzファイル)を検索する場合,その応答ヘッダ"Content-Encoding"及び

"Transfer-Encoding"がなかったり,又はその内容に適用される圧縮メソッドに適合しない値を指定し

ていたりする場合には,SVGビューアはその内容を描画せず,その文書をエラーとして処理しなけ

ればならない。また,その実装では,圧縮データストリームのプログレッシブ(progressive)描画

が対応されていなければならない。 

・ ビューアは,文書全体(ラスタ画像,SVG文書,フォント,カラープロファイルなど)のIRI参照

がSVG内容で認められている場合には,常にdata: プロトコル [RFC2397] を使用する内容に対応

していなければならない。これには,base64でコード化された内容の利用への対応も含まれなけれ

ばならない。 

注記 SVG文書全体を構成しないSVG内容のフラグメントでは,"data:"プロトコルを利用するこ

455 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

とはできない。 

・ ビューアは,そのSVG内容について,次のようなW3C勧告に対応していなければならない。 

・ XML 1.1仕様書 [XML11] の完全対応 

・ Namespaces in XML 1.1 [XML-NS] の完全対応。SVG内容における非SVG名前空間の包含も

含まれる(非SVG名前空間のデータはDOMには含まれるが,描画及び相互作用の観点から

は無視されることに注意する。)。 

・ 全ての視覚的描画は,最初の1:1ズーム比における数学的に正しい結果に対し,px単位まで正確で

あることが望ましい。ビューアでは,ズームを行う場合,高い精度を保つことができるようにする

ことが望ましい。 

・ 正確なsRGB色 [SRGB] に対応しているシステムでは,全てのsRGB色の計算及び色値の結果は,

1 sRGB色成分値まで正確でなければならない(sRGB色成分値は0から255までの範囲における整

数)。 

アンチエイリアシングの対応は適合SVGビューアの厳密な必要条件ではないが,ディスプレイ装置のた

めに強く推奨される。一般的に,アンチエイリアシングが対応されていない場合,ディスプレイ装置にお

ける処理結果は不十分なものになる。 

適合動的SVGビューアだけに適用される基準は次のとおり。 

・ ウェブブラウザ環境において,ビューアは,SVG内容におけるテキスト文字列を検索及び選択する

ことができなければならない。 

・ 対話型環境において,ビューアは,SVG内容からシステムのクリップボードに対して,テキストを

選択及び複写することができなければならない。 

Web Accessibility Initiative [WAI] において,User Agent Accessibility Guidelines 1.0 [UAAG] が定義された。

適合SVGビューアは,UAAGが定義しているアクセシビリティガイドラインのプライオリティ1に適合

していなければならない。また,プライオリティ2及び3にも適合していることが望ましい。 

適合SVGビューアは,プレゼンテーション属性を用いて,スタイル付けプロパティをSVG内容に適用

することができなければならない。 

D.6 拡張における適合性の必要条件 

仕様及び実装においてこの規格を拡張してもよいが,その適合性を主張するためには,次のような基準

を満たす必要がある。 

・ その拡張では,SVGへの適合について定義しているこの規格の規定が守られていなければならな 

い。 

・ その拡張では,拡張性について説明しているこの規格の規定が守られていなければならない。 

・ その拡張では,条件付き処理について定義しているこの規格の規定が守られていなければならない。 

・ SVG Fullで定義された機能を利用する場合,その拡張では,それらの機能の構文を再定義してはな

らない。 

・ 拡張において,既存のSVG要素又は属性の意味は一切再定義してはならない。 

・ 作者の混乱を避けるために,SVG属性名及び要素名を拡張において再利用してはならない(別個の

名前空間でも不可)。 

D.7 非XML符号化における適合性の必要条件 

456 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

非XML符号化(例 効率的なXML圧縮)を用いて符号化されたSVG文書片,SVG独立文書又はSVG

被包含文書がこの規格に適合している場合とは,その非XML符号化において,XMLとその符号化との間

を往復させても,SVG利用者エージェントの処理結果としての文書が常に元と同じような描画,アニメー

ション化,及び相互作用ができるように戻すことができる場合だけである。このためには,次のような(こ

れらに限定されるわけではない。)高い水準の符号化を厳守しなければならないことに注意する。不適合内

容及び外部の名前空間の内容を損失なく符号化することができる,正規の文書型定義の内部部分集合が提

供するIDタイピングを維持する,そして,'desc','title',又は条件付き処理属性を用いて描画ツリーから

取り除いた描画されない要素を削除しない。 

background image

457 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書E 

(参考) 

QA Framework: Specification Guidelinesへの適合 

E.1 

概説 

次の表は,QA Framework: Specification Guidelines [QAF-SPEC] で定義されている全ての必要条件及び良

き慣行のチェックリストから作成したものである。それぞれの必要条件及び良き慣行について,この規格

でそれらを満たしている部分へのリンクがこの表に与えられている。 

E.2 

チェックリスト表 

ガイドライン 

はい 

いいえ 

該当なし 

備考 

2.1 適合性の指定 

必要条件01:適合性に関する条項がある。 

はい 

良き慣行01:その適合性に関する条項において,規格の適合モデ
ルを定義している。 

はい 

良き慣行02:その適合性に関する条項において,規定(normative)
内容と参考(informative)内容との区別について指定している。 

はい 

良き慣行03:適合性を主張する場合の言い回しを定めている。 

いいえ 

良き慣行04:Implementation Conformance Statement様式を提供して
いる。 

いいえ 

良き慣行05:適合性に関する有効な主張の一部として,
Implementation Conformance Statementを要求している。 

いいえ 

2.2 基本原則の設定 

必要条件02:適用範囲を定めている。 

はい 

良き慣行06:例,ユースケース及び図形を提供している。 

はい 

良き慣行07:サンプルコード又はテストを記載している。 

はい 

必要条件03:その規格を実装する対象者又は対象物について特定
している。 

はい 

必要条件04:規定の引用規格の一覧を提供している。 

はい 

良き慣行08:規定の引用規格に基づく条件を課す場合,適合性の
依存関係について記載している。 

はい 

2.3 用語の定義及び使用 

必要条件05:規格の規定で使われる用語を定義している。 

はい 

必要条件06:適合性モデルの各部分について,適合性ラベルを作
成している。 

はい 

良き慣行09:未知の用語については文中で定義し,それらを用語
集における定義と統合させている。 

はい 

良き慣行10:定義した用語を定義を変えずに使用している。 

はい 

必要条件07:適合性の必要条件について一貫したスタイルを使用
し,それらを区別する方法について説明している。 

はい 

必要条件08:適合性の必要条件について,必須,推奨又は任意の
必要条件の区別を示している。 

はい 

良き慣行11:可能な限り正式な言語を使用している。 

はい 

良き慣行12:テストに関する主張を記載している。 

いいえ 

2.4 多様性の管理 

良き慣行13:正当な場合には,技術を分割している。 

はい 

background image

458 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ガイドライン 

はい 

いいえ 

該当なし 

備考 

必要条件09:技術を分割した場合,どの区分が適合のために必須
なのか示している。 

はい 

必要条件10:技術を分割した場合,その分割における制約につい
て示している。 

はい 

良き慣行14:その技術のプロファイルが行われた場合,新しいプ
ロファイルを作成するための規則を定義している。 

はい 

良き慣行15:正当な場合には,オプションの機能を使用している。 

はい 

良き慣行16:オプションの機能を明確に特定している。 

はい 

良き慣行17:オプションの機能に関する全ての制限又は制約につ
いて示している。 

はい 

必要条件11:拡張性について示している。 

はい 

良き慣行18:その拡張性を行使してもよい場合,拡張のメカニズ
ムについて定義している。 

はい 

良き慣行19:適合性を損なった拡張を行わないよう,拡張の実施
者に警告している。 

はい 

良き慣行20:未知の拡張に対するエラー処理を定義している。 

はい 

必要条件12:廃止予定の機能を特定している。 

はい 

廃止予定の機能
については,そ
のことを明確に
マークしてい
る。 

必要条件13:その製品の各クラスにおいて,それぞれの廃止予定
の機能がどう扱われるのか定義している。 

該当なし 

良き慣行21:廃止予定の機能の使用を回避する方法について説明
している。 

該当なし 

良き慣行22:旧式となった機能を特定している。 

該当なし 

なし 

良き慣行23:エラー処理のメカニズムを定義している。 

はい 

E.3 

廃止予定の機能の一覧 

・ 次の処理要求は廃止予定である。 

・ SVGLoad 

・ SVGResize 

・ SVGScroll 

・ SVGZoom 

・ 'script'要素の'type'属性の値'text/ecmascript'は廃止予定である。 

459 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書F 

(参考) 

アクセシビリティの対応 

F.1 

WAIアクセシビリティガイドライン 

この附属書では,W3CのWeb Accessibility Initiative(WAI)によって公開されているアクセシビリティ

に関するガイドラインをSVGに適用する方法について説明している。 

a) Web Content Accessibility Guidelines 1.0 [WCAG] 及び Web Content Accessibility Guidelines 2.0 

[WCAG2] では,障害をもつ人々が利用できるウェブ内容をどのように作成することができるのか

を説明している。 

b) Authoring Tool Accessibility Guidelines 1.0 [ATAG] では,SVGオーサリングツールのようなアクセス

可能なオーサリングツールをどのように設計することができるのかを説明している。SVGオーサリ

ングツールがSVG仕様書に適合するためには,ATAG(プライオリティ1)に従うことが望ましい。

SVGで対応されている要素のグループ化,再利用,及びナビゲーションは,アクセス可能なSVG

オーサリングツールの設計に関係している。 

c) User Agent Accessibility Guidelines 1.0 [UAAG] では,SVGブラウザのようなアクセス可能な利用者

エージェントをどのように設計することができるのかを説明している。SVG利用者エージェントは,

このSVG仕様書に適合するために,UAAGが定義しているアクセシビリティガイドラインのプラ

イオリティ1に適合していることが望ましい。また,プライオリティ2及び3にも適合しているこ

とが望ましい。SVGで対応されている拡大縮小,DOM,及びメタデータは,アクセス可能なSVG

利用者エージェントの設計に関連している。 

W3CノートAccessibility Features of SVG [SVG-ACCESS] では,この三つのガイドラインの必要条件を

SVGに適用する方法について詳しく説明している。 

注記 JIS X 8341-3:2010では,高齢者・障害者がウェブコンテンツを利用するときに,情報アクセシ

ビリティを確保・向上させるために,ウェブコンテンツを企画,設計,製作・開発,検証及び

保守・運用するときに配慮すべき事項について規定している。 

F.2 

SVG内容のアクセシビリティガイドライン 

このF.2では,どのようにアクセシビリティのあるSVG文書を作成することができるのかについて簡単

に説明している。このF.2の内容は,Accessibility Features of SVG [SVG-ACCESS] を要約したものである。 

図形に対応するテキストを用意する。 

・ 図形のテキスト内容(例 テキスト内容要素において)から機能が分かる場合,対応するテキスト

は必要ない。'title'子要素を使用して,テキスト内容にはその意味が明確に示されていないテキスト

内容要素の機能を説明する。 

・ 図形に説明のためのテキスト内容がない場合,対応するテキストがあることが望ましい。その対応

テキストが複雑である場合,'desc'要素を使用する。そうでなければ,'title'子要素を使用する。 

・ 図形が意味をもつ部分から構成されている場合,その説明文も意味をもつ部分から構成する。 

色だけに頼らない。 

・ 意味情報の伝達において,色だけに頼らないことが望ましい。 

460 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

・ 適切な色のコントラストを維持する。 

正しいマークアップを使用する。 

・ 体裁と構造とを分ける。 

・ 'g'要素及び豊富な記述を用いてSVG文書を構造化する。名前を付けられたオブジェクトは再利用す

る。 

・ 図形表現だけではなく,高度に構造化された文書を公開する。豊かな構造をもつ文書は,図形とし

て描画したり,音声又は点字として表現したりしてもよい。例えば,MathML [MATHML] を用いて

数学的関係を表現し,説明用の図形にSVGを使用することができる。 

・ SVG RelaxNG文法において妥当な文書を作成する。 

テキストにはテキストを使用し,図形には図形を使用する。 

・ テキストは文字データとして表現し,それをグリフ,画像又は曲線として表現しない。 

・ テキストはフォントでスタイル付けする。SVGでは作者が独自のフォントを記述してもよい。 

・ 小さな図形の表現において'pi'フォント又は絵フォントを使用しない。結果として生成される不適切

なテキストは [CHARMOD] に適合せず,音声変換エンジンを混乱させる。 

既定の読み順を提供する。 

・ テキストをボックスの中にラップするためには,スクリプト又は無関係な'text'要素の列は使用せず,

'textArea'要素を用いる。 

自然言語の使用を明示する。 

・ その内容における自然言語及びその変更について明示するためには,'xml:lang'を用いる。このこと

によって,きちんとテキスト内容をスペルチェックにかけ,音声に変換することができる。 

・ 'systemLanguage'条件付き処理属性を用いて,その言語に特有の代替テキスト及び/又は図形を提供

する。 

豊かなナビゲーションを用意する。 

・ 全ての装置にポインタ装置があると仮定しない。キーボードによるナビゲーションも用意する。 

・ リンクには8方向のナビゲーションを提供する。 

動的内容へのアクセシビリティを確保する。 

・ 動的内容に変更が加えられた場合,きちんとその動的内容に対応するテキストを更新する。 

・ ECMAScriptの配列又はXSLTスタイルシート内への動的テキストの保存は避ける。このことによっ

てアクセシビリティが低下し,テキストのローカライズ又は多言語による代替手段の提供も難しく

なる。 

・ スクリプト又はその他のプログラムオブジェクトが切られたり,それらが対応されていなかったり

しても,そのSVG文書をきちんと利用することができるようにする。 

意味・メタデータを提供する。 

・ 適切な値の'role'属性を用いることによって,その要素の機能性を示す。 

・ 拡張可能なメタデータ属性を用いて要素間の関係を示す。 

・ 任意の値を用いるのではなく,アクセシビリティツールが理解できるよく知られた意味を用いた構

造化メタデータを利用する(例 ''btn"ではなく"button"を使用する。)。 

F.3 

SVG利用者エージェントのアクセシビリティガイドライン 

このF.3では,SVG利用者エージェントの実装者が,どのようにソフトウェアのアクセシビリティを高

461 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

めることができるのかを説明する。 

色情報へのアクセスを提供する。 

・ SVG利用者エージェントでは,支援技術が個々の要素の色情報にアクセスすることができるように,

APIを実装し,それを文書化することが望ましい。 

・ SVG利用者エージェントでは,任意の高コントラスト表示ができるようにすることが望ましい。 

テキストだけの表示ができるようにする。 

・ SVG利用者エージェントは,支援技術において便利なテキストだけの表示ができるような仕組みを

提供することが望ましい。例えば,DOMエクスプローラ,連動したテキストだけの表示,テキス

ト内容をXHTMLに変換するXSLTスタイルシートなどである。 

豊かなナビゲーションを用意する。 

・ リンクには8方向のナビゲーションを提供する。 

マルチモーダルなナビゲーション及び相互作用を可能にする。 

・ SVG利用者エージェントは,ポインタ装置以外の方法も利用できる場合,それらによってズーム及

びパンができるようにすることが望ましい。 

・ SVG利用者エージェントは,ポインタ装置以外の方法も利用できる場合,それらを用いてアニメー

ション,オーディオ及びビデオを,開始,終了及び一時停止できるようにすることが望ましい。 

キーボードによるナビゲーションを認める。 

・ キーボードが対応されている場合には,それを用いてズーム及びパンを行い,アニメーション,オ

ーディオ及びビデオを,開始,終了及び一時停止できるようにすることが望ましい。 

462 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書G 
(参考) 

国際化の対応 

G.1 

概説 

この附属書では,SVGにおける国際化の対応に関する概要を示している。特定の題目について詳しく説

明している規格の各箇条へのリンクが与えられている。 

G.2 

国際化とSVG 

SVGとはXML [XML11] の応用であり,したがって,Unicode [UNICODE] に対応している。Unicodeで

はユニバーサル文字セットが定義されている。 

さらに,SVGはテキスト文字列を描くために使用するグリフを正確に制御する仕組みを提供している

(17.2を参照)。これによって,たとえある言語のフォントがクライアントマシンに一切インストールされ

ていなくても,その内容がSVGフォントを供給,又はそれにリンクして国際的なテキストを表示させるこ

とができる。この機能によって次のようなことができる。 

・ どのような文字に対してもグリフを指定することができる。 

・ 任意の文字列に対して合字を指定することができる。 

・ 描かれるグリフを正確に制御することができる一方で,高い相互運用性のために,文字データの正

規化に関するガイドラインに適合することができる([CHARMOD] を参照)。 

この規格は次に対応している。 

・ 横書きの左から右に書かれるテキスト(例 ローマスクリプト) 

・ 双方向テキスト(例 アラビア語,ヘブライ語) 

縦書きテキストはこの規格では対応されていないが,SVG Full 1.2では対応されている。 

SVGフォントは,文脈依存のグリフ選択(例 アラビア語の文脈依存形式),又は言語依存のハン グリ

フに対応している。 

クライアントマシンの言語設定に基づき様々なテキスト文字列又は図形を表示させる'systemLanguage'

属性を用いて,多言語のSVG文書が可能になる。 

G.3 

SVG国際化ガイドライン 

SVGジェネレータは,文字データの正規化に関するW3Cガイドライン [CHARMOD-NORM] に適合す

ることが望ましい。 

G.4 

SVGの国際化及びローカライズのためのマークアップ 

SVG内容が世界中で採用され,簡単にローカライズできるように,この規格のRelaxNGスキーマには,

Internationalization Tag Set (ITS) 1.0 [ITS] の宣言が含まれている。このマークアップ語い(彙)の用法

については,Best Practices for XML Internationalization [XI18N-BP] において詳しく説明されている。19.1 

外部の名前空間及びプライベートデータにおける定義によって,ITS 1.0のマークアップは,この規格の処

理に影響を及ぼさない。 

ITS 1.0 local markup宣言が,テキスト内容要素,記述要素,及び'metadata'要素の内容モデルに加えられ

background image

463 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

た。ITSによって,内容の作者は,SVG文書の部品の一部をローカライズ処理の間に翻訳しないほうがよ

いと表現することができる。この例として,次にITS 1.0マークアップを示す。ここでは,'its:translate'属性

が,'desc'要素の内容は翻訳しないほうがよいことを表現している。 

例: its.svg 

<svg version="1.2" baseProfile="tiny" 

     xmlns="http://www.w3.org/2000/svg" 

     xmlns:its="http://www.w3.org/2005/11/its">  

     <desc its:translate="no">An explanation which should not be translated.</desc> 

     <!-- other content --> 

</svg>  

次のITS規則ファイルits-rules.xmlは,SVG Tiny 1.2マークアップの翻訳可否について既定の指定をして

いる。実装者は,国際的な利用者のために,例えば'metadata'要素の内容としてこれらの規則を提供するこ

とが望ましい。 

例: its-rules.xml 

<its:rules xmlns:its="http://www.w3.org/2005/11/its" version="1.0"  

           xmlns:svg="http://www.w3.org/2000/svg"> 

  <its:translateRule selector="//svg:*" translate="no"/> 

  <its:translateRule selector="//svg:text | //svg:tspan | //svg:textArea |  

                               //svg:title | //svg:desc | //svg:metadata"  

                               translate="yes"/>  

</its:rules>  

上記の'its:translateRule'要素は,SVG名前空間の全要素はその既定として翻訳しない(最初の

'its:translateRule')が,リスト上の特定のSVG要素はその例外である(2番目の'its:translateRule')ことを意

味している。 

464 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書H 
(規定) 

JPEGの対応 

H.1 概説 

この附属書は,この規格の実装に必要なJPEGの対応について定めている。ここでいう対応とは,業界

においてその対応が周知されている水準の機能性を指定することであり,ライセンスの問題が関わるよう

な部分は対象外とする。 

一般に,人がJPEG [JPEG] といったときには,それは実際にはJFIF [JFIF] ファイル形式におけるJPEG

圧縮画像のことである。JFIFは,ファイルに単一のJPEG圧縮画像を保存するためにIndependent JPEG Group

(IJG)によって開発された。 

H.2 必要とされる対応 

SVGビューアは,JFIF [JFIF] ファイルに保存されたJPEG画像に対応していなければならない。他の転

送又はストレージのメカニズムにも対応してもよい。 

JPEG仕様書 [JPEG]の4.11の表1で定義されている次の符号化手順に対応していなければならない。 

・ ベースライン手順 

・ 拡張DCTベース手順(算術符号化を除く。) 

次もまた適用される。 

・ 8-bitのサンプルに対応しなければならない。12-bitのサンプルに対応してもよい([JPEG]の4.7)。 

・ DNL Marker([JPEG]の3.2)の対応はしなくてもよい。 

・ 非整数サンプリング比の対応はしなくてもよい([JPEG]のA.1.1)。 

次の符号化手順はなくてもよいが,対応してもよい。 

・ 完全拡張DCTベース手順 

・ ロスレス手順 

・ 階層的手順 

SVG Tiny 1.2利用者エージェントは,JFIF仕様 [JFIF] で定義されているように,JPEG画像で圧縮され

たY,Cb,Cr値をRGB値に変換することが望ましく,カラープロファイルがない場合そのRGB値はsRGB

値であると仮定してもよい。 

background image

465 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書I 

(参考) 

ファイルサイズの最小化 

SVGファイルのサイズをできるだけ小さくする一方で,XMLの生み出す利益を享受し,他のW3C仕様

書も利用してそれらとの互換性を保つために,様々な取組みが行われてきた。 

ファイルサイズを小さくするためのSVG機能の一部を次に示す。 

・ SVGのパスデータ定義は,ベクタ図形データのコンパクトなデータストリームを生成するために定

義された。全コマンドの長さは1文字である。相対座標を利用することができる。トークンを暗黙

的に特定することができる場合,区切り文字を与えなくてもよい。滑らかな曲線の定式化を利用す

れば(2次及び3次ベジェ),折れ線に合わせなくてもよい。2次及び3次ベジェの部分,水平及び

垂直な直線部分の一般形式については簡略的な定式化があり,その座標の指定は最低限で済む。 

・ テキストはXML内容を使用して指定することができるので,外形に変換する必要は全くない。 

・ SVGでは,一度シンボルを定義すれば,異なる視覚属性,大きさ決定,及び配置を用いてそれらを

何度でも参照することができる。 

さらに,HTTP/1.1では,サーバからクライアントに圧縮データを渡すことができる。これによって,フ

ァイルサイズをかなり減少させることができる [RFC2616]。SVG文書にgzip圧縮 [RFC1952] を適用した

圧縮結果の例を次に示す。 

SVG圧縮前 

gzip圧縮後 

圧縮率 

12 912 

2 463 

81 % 

12 164 

2 553 

79 % 

11 613 

2 617 

77 % 

18 689 

4 077 

78 % 

13 024 

2 041 

84 % 

これに関連するものとして,プログレッシブ(progressive)描画がある。次に対応しているSVGビュー

アもある。 

・ サーバから文書の残りがダウンロードされている間に,そのSVG文書片の最初の部分を表示させる。

したがって,たとえSVGファイルのサイズが大きかったとしても,利用者はすぐにそのSVG描画

の部分を確認し,相互作用を行うことができる。 

・ 画像及びフォントのダウンロードの遅延。(一部のHTMLブラウザと同様に)SVGビューアには,

画像及びウェブフォントのダウンロードを最後にし,その画像及びフォントが利用できるようにな

るまで,代用として一時的な画像及びシステムフォントを利用するものがある。 

SVGファイルのサイズを最小化し,利用者がSVG文書片との相互作用を開始することができるまでの

時間を最も短くするための手法を幾つか示す。 

・ 利用者がクリックすると予想される全てのリンクが,ファイルの最初に含まれているようなSVGフ

ァイルを作成する。 

・ あらゆる属性及びプロパティを明示的に定義するのではなく,可能な限り省略値を利用する。 

・ パスデータの圧縮機能を利用する。相対座標の利用,水平線及び縦線へのh及びvの使用,可能な

場合3次及び2次ベジェの部分へのs又はtの使用,余分な空白及び区切り文字の排除など。 

・ 文書において同じ図形が複数回出現する場合には,シンボルを利用する。 

466 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

・ CSSスタイル付けに対応している利用者エージェントでは,CSSのプロパティ継承及び選択子を利

用して,共通的に用いられるプロパティを名前付きのスタイルに統合するか,そのプロパティを親

の'g'要素に割り当てる。 

background image

467 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書J 

(規定) 

機能文字列 

この附属書は'requiredFeatures'属性のための機能文字列について定義している。機能文字列がSVG要素

及び属性に直接マップされる場合もあれば,それらが利用者エージェントの機能性を表している場合(例 

静的ビューア)もある。 

J.1 

一般機能文字列 

機能文字列に対応していることは,そのSVGビューアが“機能”の列に示されている全ての言語機能を

処理及び描画することができることである。 

機能文字列 

機能 

http://www.w3.org/Graphics/SVG/feat
ure/1.2/#SVG-static 

http://www.w3.org/Graphics/SVG/feature/1.2/#CoreAttribute, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Structure, 
http://www.w3.org/Graphics/SVG/feature/1.2/#ConditionalProcessing, 
http://www.w3.org/Graphics/SVG/feature/1.2/#ConditionalProcessingAttribute, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Image, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Prefetch, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Shape, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Text, 
http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow, 
http://www.w3.org/Graphics/SVG/feature/1.2/#PaintAttribute, 
http://www.w3.org/Graphics/SVG/feature/1.2/#OpacityAttribute, 
http://www.w3.org/Graphics/SVG/feature/1.2/#GraphicsAttribute, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Gradient, 
http://www.w3.org/Graphics/SVG/feature/1.2/#SolidColor, 
http://www.w3.org/Graphics/SVG/feature/1.2/#XlinkAttribute, 
http://www.w3.org/Graphics/SVG/feature/1.2/#ExternalResourcesRequired, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Font, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Hyperlinking, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Extensibility 

http://www.w3.org/Graphics/SVG/feat
ure/1.2/#SVG-static-DOM 

次の対応に加えて,SVG uDOMへの適合によって,uDOMに適合する。 
http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-static, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Scripting, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Handler, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Listener 

http://www.w3.org/Graphics/SVG/feat
ure/1.2/#SVG-animated 

http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-static, 
http://www.w3.org/Graphics/SVG/feature/1.2/#TimedAnimation 

http://www.w3.org/Graphics/SVG/feat
ure/1.2/#SVG-interactive 

http://www.w3.org/Graphics/SVG/feature/1.2/#EditableTextAttribute, 
http://www.w3.org/Graphics/SVG/feature/1.2/#NavigationAttribute 

http://www.w3.org/Graphics/SVG/feat
ure/1.2/#SVG-all 

http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-static-DOM, 
http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-animated, 
http://www.w3.org/Graphics/SVG/feature/1.2/#SVG-interactive, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Audio, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Video, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Animation, 
http://www.w3.org/Graphics/SVG/feature/1.2/#Discard, 
http://www.w3.org/Graphics/SVG/feature/1.2/#MediaAttribute 

background image

468 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

J.2 

特定機能文字列 

機能文字列に対応していることは,そのSVGビューアが“機能”の列に示されている全ての要素,属性,

及び言語機能を処理及び描画することができることである。 

機能文字列 

機能 

http://www.w3.org/Graphics/SVG/feature/1.2/#CoreAttribute 

'about', 
'class', 
'content', 
'datatype', 
'id', 
'property', 
'rel', 
'resource', 
'rev', 
'role', 
'typeof', 
'xml:base', 
'xml:id' 

http://www.w3.org/Graphics/SVG/feature/1.2/#NavigationAttribute 

'focusHighlight', 
'focusable', 
'nav-down', 
'nav-down-left', 
'nav-down-right', 
'nav-left', 
'nav-next', 
'nav-prev', 
'nav-right', 
'nav-up', 
'nav-up-left', 
'nav-up-right', 
'pointer-events' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Structure 

'defs', 
'desc', 
'g', 
'metadata', 
'svg', 
'title', 
'use' 

http://www.w3.org/Graphics/SVG/feature/1.2/#ConditionalProcessing 

'switch' 

http://www.w3.org/Graphics/SVG/feature/1.2/#ConditionalProcessingAttribute 

'requiredExtensions', 
'requiredFeatures', 
'requiredFonts', 
'requiredFormats', 
'systemLanguage' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Image 

'image' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Prefetch 

'prefetch' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Discard 

'discard' 

background image

469 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

機能文字列 

機能 

http://www.w3.org/Graphics/SVG/feature/1.2/#Shape 

'circle', 
'ellipse', 
'line', 
'path', 
'polygon', 
'polyline', 
'rect' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Text 

'text', 
'tspan', 
'font-family', 
'font-size', 
'font-style', 
'font-variant', 
'font-weight', 
'text-anchor' 

http://www.w3.org/Graphics/SVG/feature/1.2/#PaintAttribute 

'color', 
'color-rendering', 
'fill', 
'fill-rule', 
'solid-color', 
'stroke', 
'stroke-dasharray', 
'stroke-dashoffset', 
'stroke-linecap', 
'stroke-linejoin', 
'stroke-miterlimit', 
'stroke-width', 
'viewport-fill' 

http://www.w3.org/Graphics/SVG/feature/1.2/#OpacityAttribute 

'fill-opacity', 
'opacity', 
'solid-opacity', 
'stop-opacity', 
'stroke-opacity', 
'viewport-fill-opacity' 

http://www.w3.org/Graphics/SVG/feature/1.2/#GraphicsAttribute 

'buffered-rendering', 
'display', 
'image-rendering', 
'pointer-events', 
'shape-rendering', 
'text-rendering', 
'vector-effect', 
'visibility' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Gradient 

'linearGradient', 
'radialGradient', 
'stop', 
'stop-color' 

http://www.w3.org/Graphics/SVG/feature/1.2/#SolidColor 

'solidColor' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Hyperlinking 

'a' 

background image

470 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

機能文字列 

機能 

http://www.w3.org/Graphics/SVG/feature/1.2/#XlinkAttribute 

'xlink:actuate', 
'xlink:arcrole', 
'xlink:href', 
'xlink:role', 
'xlink:show', 
'xlink:title', 
'xlink:type' 

http://www.w3.org/Graphics/SVG/feature/1.2/#ExternalResourcesRequired 

'externalResourcesRequired' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Scripting 

'script' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Handler 

'handler' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Listener 

'listener' 

http://www.w3.org/Graphics/SVG/feature/1.2/#TimedAnimation 

'animate', 
'animateColor', 
'animateMotion', 
'animateTransform', 
'mpath', 
'set' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Animation 

'animation' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Audio 

'audio' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Video 

'video' 

http://www.w3.org/Graphics/SVG/feature/1.2/#Font 

'font', 
'font-face', 
'font-face-src', 
'font-face-uri', 
'glyph', 
'hkern', 
'missing-glyph', 

http://www.w3.org/Graphics/SVG/feature/1.2/#Extensibility 

'foreignObject' 

http://www.w3.org/Graphics/SVG/feature/1.2/#MediaAttribute 

'audio-level' 

http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow 

'tbreak', 
'textArea', 
'display-align', 
'line-increment' 

http://www.w3.org/Graphics/SVG/feature/1.2/#TransformedVideo 

ビデオ内容へのあらゆる変換(拡大縮小を
含む。)を実行する能力 

http://www.w3.org/Graphics/SVG/feature/1.2/#ComposedVideo 

ビデオ内容を他の内容と合成させる能力 

http://www.w3.org/Graphics/SVG/feature/1.2/#EditableTextAttribute 

'editable' 

注記 JIS X 7197 地理情報−SVGに基づく地図の表現及びサービスでは,'requiredFeatures'属性のため

のJIS X 7197の機能を示す機能文字列を定義している。'requiredFeatures'属性の値に定義された

機能文字列を指定することで,そのSVG文書がJIS X 7197に基づいて作成され,SVG利用者

エージェントがJIS X 7197の機能を必要とすることを示す。 

background image

471 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書K 

(参考) 
要素一覧 

この附属書では,この規格において定義される要素の一覧を示している。この一覧の凡例は次のとおり。 

要素 

要素名を示す。全ての要素はSVG名前空間に存在する(XML Events名前空間に存在する'listener'を除く。)。 

属性 

各要素上に存在してもよい属性。これらは属性であり,プロパティではないことに注意する。 

プロパティ 

与えられた要素がプロパティを受け入れてもよいかどうかを示す。次のような種類がある。 

この規格で定義されている全てのプロパティは,与えられた要素の属性として設定することができ

る。 

この規格で定義されているどのプロパティも,与えられた要素の属性として設定することはできな

い。 

メディアグループにおけるプロパティだけ,与えられた要素に設定することができる。メディアグ

ループとは,メディア要素において意味をもつプロパティの部分集合であり,'fill'プロパティをSMIL

の'fill'属性と衝突させない。メディアグループは,次のようなプロパティから構成される。'audio-level',

'buffered-rendering','display','image-rendering','pointer-events','shape-rendering','text-rendering',

'viewport-fill','viewport-fill-opacity'及び'visibility'  

可能な子要素 

与えられた要素の子として出現することができる要素。これは,RelaxNGスキーマで定義される要素の

本当の内容ではないことに注意する。 

<text> 

文字データが与えられた要素の子として出現することができることを示す。 

要素 

属性 





可能な子要素 

'a' 

about, class, content, datatype, externalResourcesRequired, 
focusHighlight, focusable, id, nav-down, nav-down-left, 
nav-down-right, nav-left, nav-next, nav-prev, nav-right, 
nav-up, 

nav-up-left, 

nav-up-right, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, target, 
transform, typeof, xlink:actuate, xlink:arcrole, xlink:href, 
xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, 
xml:lang, xml:space 

 'a'要素は,その親が含んで

もよい全ての要素を含ん
でもよい(それ自体を除
く。)。 

background image

472 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

属性 





可能な子要素 

'animate' 

about, accumulate, additive, attributeName, attributeType, 
begin, by, calcMode, class, content, datatype, dur, end, fill, 
from, id, keySplines, keyTimes, max, min, property, rel, 
repeatCount, repeatDur, requiredExtensions, requiredFeatures, 
requiredFonts, requiredFormats, resource, restart, rev, role, 
systemLanguage, 

to, 

typeof, 

values, 

xlink:actuate, 

xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, 
xlink:type, xml:base, xml:id, xml:lang, xml:space 

 desc, handler, metadata, 

switch, title 

'animateColor' 

about, accumulate, additive, attributeName, attributeType, 
begin, by, calcMode, class, content, datatype, dur, end, fill, 
from, id, keySplines, keyTimes, max, min, property, rel, 
repeatCount, repeatDur, requiredExtensions, requiredFeatures, 
requiredFonts, requiredFormats, resource, restart, rev, role, 
systemLanguage, 

to, 

typeof, 

values, 

xlink:actuate, 

xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, 
xlink:type, xml:base, xml:id, xml:lang, xml:space 

 desc, handler, metadata, 

switch, title 

'animateMotion' about, accumulate, additive, begin, by, calcMode, class, 

content, datatype, dur, end, fill, from, id, keyPoints, 
keySplines, keyTimes, max, min, origin, path, property, rel, 
repeatCount, repeatDur, requiredExtensions, requiredFeatures, 
requiredFonts, requiredFormats, resource, restart, rev, role, 
rotate, systemLanguage, to, typeof, values, xlink:actuate, 
xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, 
xlink:type, xml:base, xml:id, xml:lang, xml:space 

 desc, handler, metadata, 

mpath, switch, title 

'animateTransfo
rm' 

about, accumulate, additive, attributeName, attributeType, 
begin, by, calcMode, class, content, datatype, dur, end, fill, 
from, id, keySplines, keyTimes, max, min, property, rel, 
repeatCount, repeatDur, requiredExtensions, requiredFeatures, 
requiredFonts, requiredFormats, resource, restart, rev, role, 
systemLanguage, to, type, typeof, values, xlink:actuate, 
xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, 
xlink:type, xml:base, xml:id, xml:lang, xml:space 

 desc, handler, metadata, 

switch, title 

'animation' 

about, 

begin, 

class, 

content, 

datatype, 

dur, 

end, 

externalResourcesRequired, fill, focusHighlight, focusable, 
height, 

id, 

initialVisibility, 

max, 

min, 

nav-down, 

nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, 
nav-right, 

nav-up, 

nav-up-left, 

nav-up-right, 

preserveAspectRatio, property, rel, repeatCount, repeatDur, 
requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, restart, rev, role, syncBehavior, 
syncMaster, syncTolerance, systemLanguage, transform, 
typeof, width, x, xlink:actuate, xlink:arcrole, xlink:href, 
xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, 
xml:lang, xml:space, y 

M animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

background image

473 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

属性 





可能な子要素 

'audio' 

about, 

begin, 

class, 

content, 

datatype, 

dur, 

end, 

externalResourcesRequired, fill, id, max, min, property, rel, 
repeatCount, repeatDur, requiredExtensions, requiredFeatures, 
requiredFonts, requiredFormats, resource, restart, rev, role, 
syncBehavior, syncMaster, syncTolerance, systemLanguage, 
type, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, 
xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, 
xml:space 

M animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'circle' 

about, class, content, cx, cy, datatype, focusHighlight, 
focusable, id, nav-down, nav-down-left, nav-down-right, 
nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, 
nav-up-right, 

property, 

r, 

rel, 

requiredExtensions, 

requiredFeatures, requiredFonts, requiredFormats, resource, 
rev, role, systemLanguage, transform, typeof, xml:base, 
xml:id, xml:lang, xml:space 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'defs' 

about, class, content, datatype, id, property, rel, resource, rev, 
role, typeof, xml:base, xml:id, xml:lang, xml:space 

 a, animate, animateColor, 

animateMotion, 
animateTransform, 
animation, audio, circle, 
defs, desc, discard, ellipse, 
font, 

font-face, 

foreignObject, g, handler, 
image, line, linearGradient, 
listener, 

metadata, 

path, 

polygon, polyline, prefetch, 
radialGradient, rect, script, 
set, solidColor, switch, text, 
textArea, title, use, video 

'desc' 

about, 

class, 

content, 

datatype, 

id, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, typeof, 
xml:base, xml:id, xml:lang, xml:space 

M <text> 

'discard' 

about, begin, class, content, datatype, id, property, rel, 
requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, typeof, 
xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, 
xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space 

 desc, handler, metadata, 

switch, title 

'ellipse' 

about, class, content, cx, cy, datatype, focusHighlight, 
focusable, id, nav-down, nav-down-left, nav-down-right, 
nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, 
nav-up-right, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, requiredFonts, requiredFormats, resource, 
rev, role, rx, ry, systemLanguage, transform, typeof, xml:base, 
xml:id, xml:lang, xml:space 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'font' 

about, class, content, datatype, externalResourcesRequired, 
horiz-adv-x, horiz-origin-x, id, property, rel, resource, rev, 
role, typeof, xml:base, xml:id, xml:lang, xml:space 

 desc, 

font-face, 

glyph, 

hkern, 

metadata, 

missing-glyph, switch, title 

background image

474 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

属性 





可能な子要素 

'font-face' 

about, accent-height, alphabetic, ascent, bbox, cap-height, 
class, content, datatype, descent, externalResourcesRequired, 
font-family, font-stretch, font-style, font-variant, font-weight, 
hanging, id, ideographic, mathematical, overline-position, 
overline-thickness, panose-1, property, rel, resource, rev, role, 
slope, 

stemh, 

stemv, 

strikethrough-position, 

strikethrough-thickness, 

typeof, 

underline-position, 

underline-thickness, unicode-range, units-per-em, widths, 
x-height, xml:base, xml:id, xml:lang, xml:space 

 desc, 

font-face-src, 

metadata, switch, title 

'font-face-src' 

about, class, content, datatype, id, property, rel, resource, rev, 
role, typeof, xml:base, xml:id, xml:lang, xml:space 

 desc, 

font-face-uri, 

metadata, switch, title 

'font-face-uri' 

about, class, content, datatype, externalResourcesRequired, id, 
property, rel, resource, rev, role, typeof, xlink:actuate, 
xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, 
xlink:type, xml:base, xml:id, xml:lang, xml:space 

 desc, metadata, switch, title 

'foreignObject' 

about, class, content, datatype, externalResourcesRequired, 
focusHighlight, 

focusable, 

height, 

id, 

nav-down, 

nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, 
nav-right, nav-up, nav-up-left, nav-up-right, property, rel, 
requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, 
transform, typeof, width, x, xlink:actuate, xlink:arcrole, 
xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, 
xml:base, xml:id, xml:lang, xml:space, y 

 desc, metadata, svg, switch, 

title 

'g' 

about, class, content, datatype, externalResourcesRequired, 
focusHighlight, focusable, id, nav-down, nav-down-left, 
nav-down-right, nav-left, nav-next, nav-prev, nav-right, 
nav-up, 

nav-up-left, 

nav-up-right, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, 
transform, typeof, xml:base, xml:id, xml:lang, xml:space 

 a, animate, animateColor, 

animateMotion, 
animateTransform, 
animation, audio, circle, 
defs, desc, discard, ellipse, 
font, 

font-face, 

foreignObject, g, handler, 
image, line, linearGradient, 
listener, 

metadata, 

path, 

polygon, polyline, prefetch, 
radialGradient, rect, script, 
set, solidColor, switch, text, 
textArea, title, use, video 

'glyph' 

about, arabic-form, class, content, d, datatype, glyph-name, 
horiz-adv-x, id, lang, property, rel, resource, rev, role, typeof, 
unicode, xml:base, xml:id, xml:lang, xml:space 

 desc, metadata, switch, title 

'handler' 

about, 

class, 

content, 

datatype, 

ev:event, 

externalResourcesRequired, id, property, rel, resource, rev, 
role, type, typeof, xlink:actuate, xlink:arcrole, xlink:href, 
xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, 
xml:lang, xml:space 

 <text>, 

desc, 

metadata, 

switch, title 

background image

475 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

属性 





可能な子要素 

'hkern' 

about, class, content, datatype, g1, g2, id, k, property, rel, 
resource, rev, role, typeof, u1, u2, xml:base, xml:id, xml:lang, 
xml:space 

 desc, metadata, switch, title 

'image' 

about, class, content, datatype, externalResourcesRequired, 
focusHighlight, 

focusable, 

height, 

id, 

nav-down, 

nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, 
nav-right, 

nav-up, 

nav-up-left, 

nav-up-right, 

opacity, 

preserveAspectRatio, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, requiredFonts, requiredFormats, resource, 
rev, role, systemLanguage, transform, type, typeof, width, x, 
xlink:actuate, xlink:arcrole, xlink:href, xlink:role, xlink:show, 
xlink:title, xlink:type, xml:base, xml:id, xml:lang, xml:space, y 

M animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'line' 

about, class, content, datatype, focusHighlight, focusable, id, 
nav-down, nav-down-left, nav-down-right, nav-left, nav-next, 
nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, 
property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, 

resource, 

rev, 

role, 

systemLanguage, transform, typeof, x1, x2, xml:base, xml:id, 
xml:lang, xml:space, y1, y2 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'linearGradient' 

about, class, content, datatype, gradientUnits, id, property, rel, 
resource, rev, role, typeof, x1, x2, xml:base, xml:id, xml:lang, 
xml:space, y1, y2 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, metadata, set, stop, 
switch, title 

'listener' 

about, class, content, datatype, defaultAction, event, handler, 
id, observer, phase, propagate, property, rel, resource, rev, role, 
target, typeof, xml:base, xml:id, xml:lang, xml:space 

  

'metadata' 

about, 

class, 

content, 

datatype, 

id, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, typeof, 
xml:base, xml:id, xml:lang, xml:space 

M <text> 

'missing-glyph' 

about, class, content, d, datatype, horiz-adv-x, id, property, rel, 
resource, rev, role, typeof, xml:base, xml:id, xml:lang, 
xml:space 

 desc, metadata, switch, title 

'mpath' 

about, class, content, datatype, id, property, rel, resource, rev, 
role, typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, 
xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, 
xml:space 

 desc, metadata, switch, title 

'path' 

about, class, content, d, datatype, focusHighlight, focusable, 
id, nav-down, nav-down-left, nav-down-right, nav-left, 
nav-next, 

nav-prev, 

nav-right, 

nav-up, 

nav-up-left, 

nav-up-right, pathLength, property, rel, requiredExtensions, 
requiredFeatures, requiredFonts, requiredFormats, resource, 
rev, role, systemLanguage, transform, typeof, xml:base, 
xml:id, xml:lang, xml:space 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

background image

476 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

属性 





可能な子要素 

'polygon' 

about, class, content, datatype, focusHighlight, focusable, id, 
nav-down, nav-down-left, nav-down-right, nav-left, nav-next, 
nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, points, 
property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, 

resource, 

rev, 

role, 

systemLanguage, transform, typeof, xml:base, xml:id, 
xml:lang, xml:space 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'polyline' 

about, class, content, datatype, focusHighlight, focusable, id, 
nav-down, nav-down-left, nav-down-right, nav-left, nav-next, 
nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, points, 
property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, 

resource, 

rev, 

role, 

systemLanguage, transform, typeof, xml:base, xml:id, 
xml:lang, xml:space 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'prefetch' 

about, 

bandwidth, 

class, 

content, 

datatype, 

id, 

mediaCharacterEncoding, 

mediaContentEncodings, 

mediaSize, mediaTime, property, rel, resource, rev, role, 
typeof, xlink:actuate, xlink:arcrole, xlink:href, xlink:role, 
xlink:show, xlink:title, xlink:type, xml:base, xml:id, xml:lang, 
xml:space 

 desc, metadata, switch, title 

'radialGradient' 

about, class, content, cx, cy, datatype, gradientUnits, id, 
property, r, rel, resource, rev, role, typeof, xml:base, xml:id, 
xml:lang, xml:space 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, metadata, set, stop, 
switch, title 

'rect' 

about, class, content, datatype, focusHighlight, focusable, 
height, id, nav-down, nav-down-left, nav-down-right, nav-left, 
nav-next, 

nav-prev, 

nav-right, 

nav-up, 

nav-up-left, 

nav-up-right, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, requiredFonts, requiredFormats, resource, 
rev, role, rx, ry, systemLanguage, transform, typeof, width, x, 
xml:base, xml:id, xml:lang, xml:space, y 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'script' 

about, class, content, datatype, externalResourcesRequired, id, 
property, rel, resource, rev, role, type, typeof, xlink:actuate, 
xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, 
xlink:type, xml:base, xml:id, xml:lang, xml:space 

 <text>, 

desc, 

metadata, 

switch, title 

'set' 

about, attributeName, attributeType, begin, class, content, 
datatype, dur, end, fill, id, max, min, property, rel, 
repeatCount, repeatDur, requiredExtensions, requiredFeatures, 
requiredFonts, requiredFormats, resource, restart, rev, role, 
systemLanguage, to, typeof, xlink:actuate, xlink:arcrole, 
xlink:href, xlink:role, xlink:show, xlink:title, xlink:type, 
xml:base, xml:id, xml:lang, xml:space 

 desc, handler, metadata, 

switch, title 

background image

477 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

属性 





可能な子要素 

'solidColor' 

about, class, content, datatype, id, property, rel, resource, rev, 
role, typeof, xml:base, xml:id, xml:lang, xml:space 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'stop' 

about, class, content, datatype, id, offset, property, rel, 
resource, rev, role, typeof, xml:base, xml:id, xml:lang, 
xml:space 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, 

metadata, 

set, 

switch, title 

'svg' 

about, baseProfile, class, content, contentScriptType, datatype, 
externalResourcesRequired, focusHighlight, focusable, height, 
id, nav-down, nav-down-left, nav-down-right, nav-left, 
nav-next, 

nav-prev, 

nav-right, 

nav-up, 

nav-up-left, 

nav-up-right, playbackOrder, preserveAspectRatio, property, 
rel, resource, rev, role, snapshotTime, syncBehaviorDefault, 
syncToleranceDefault, 

timelineBegin, 

typeof, 

version, 

viewBox, width, xml:base, xml:id, xml:lang, xml:space, 
zoomAndPan 

 a, animate, animateColor, 

animateMotion, 
animateTransform, 
animation, audio, circle, 
defs, desc, discard, ellipse, 
font, 

font-face, 

foreignObject, g, handler, 
image, line, linearGradient, 
listener, 

metadata, 

path, 

polygon, polyline, prefetch, 
radialGradient, rect, script, 
set, solidColor, switch, text, 
textArea, title, use, video 

'switch' 

about, class, content, datatype, externalResourcesRequired, 
focusHighlight, focusable, id, nav-down, nav-down-left, 
nav-down-right, nav-left, nav-next, nav-prev, nav-right, 
nav-up, 

nav-up-left, 

nav-up-right, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, 
transform, typeof, xml:base, xml:id, xml:lang, xml:space 

 'switch'要素は,その親が含

んでもよい全ての要素を
含んでもよい。 

'tbreak' 

about, 

class, 

content, 

datatype, 

id, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, typeof, 
xml:base, xml:id, xml:lang, xml:space 

  

'text' 

about, class, content, datatype, editable, focusHighlight, 
focusable, id, nav-down, nav-down-left, nav-down-right, 
nav-left, nav-next, nav-prev, nav-right, nav-up, nav-up-left, 
nav-up-right, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, requiredFonts, requiredFormats, resource, 
rev, role, rotate, systemLanguage, transform, typeof, x, 
xml:base, xml:id, xml:lang, xml:space, y 

 <text>, 

a, 

animate, 

animateColor, 
animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title, tspan 

background image

478 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

要素 

属性 





可能な子要素 

'textArea' 

about, class, content, datatype, editable, focusHighlight, 
focusable, 

height, 

id, 

nav-down, 

nav-down-left, 

nav-down-right, nav-left, nav-next, nav-prev, nav-right, 
nav-up, 

nav-up-left, 

nav-up-right, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, 
transform, typeof, width, x, xml:base, xml:id, xml:lang, 
xml:space, y 

 <text>, 

a, 

animate, 

animateColor, 
animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, tbreak, title, 
tspan 

'title' 

about, 

class, 

content, 

datatype, 

id, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, typeof, 
xml:base, xml:id, xml:lang, xml:space 

M <text> 

'tspan' 

about, class, content, datatype, focusHighlight, focusable, id, 
nav-down, nav-down-left, nav-down-right, nav-left, nav-next, 
nav-prev, nav-right, nav-up, nav-up-left, nav-up-right, 
property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, 

resource, 

rev, 

role, 

systemLanguage, typeof, 

xml:base, 

xml:id, 

xml:lang, 

xml:space 

 'tspan'要素は,その親が含

んでもよい全ての要素を
含んでもよい。 

'use' 

about, class, content, datatype, externalResourcesRequired, 
focusHighlight, focusable, id, nav-down, nav-down-left, 
nav-down-right, nav-left, nav-next, nav-prev, nav-right, 
nav-up, 

nav-up-left, 

nav-up-right, 

property, 

rel, 

requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, rev, role, systemLanguage, 
transform, typeof, x, xlink:actuate, xlink:arcrole, xlink:href, 
xlink:role, xlink:show, xlink:title, xlink:type, xml:base, xml:id, 
xml:lang, xml:space, y 

 animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

'video' 

about, 

begin, 

class, 

content, 

datatype, 

dur, 

end, 

externalResourcesRequired, fill, focusHighlight, focusable, 
height, 

id, 

initialVisibility, 

max, 

min, 

nav-down, 

nav-down-left, nav-down-right, nav-left, nav-next, nav-prev, 
nav-right, 

nav-up, 

nav-up-left, 

nav-up-right, 

overlay, 

preserveAspectRatio, property, rel, repeatCount, repeatDur, 
requiredExtensions, 

requiredFeatures, 

requiredFonts, 

requiredFormats, resource, restart, rev, role, syncBehavior, 
syncMaster, syncTolerance, systemLanguage, transform, 
transformBehavior, type, typeof, width, x, xlink:actuate, 
xlink:arcrole, xlink:href, xlink:role, xlink:show, xlink:title, 
xlink:type, xml:base, xml:id, xml:lang, xml:space, y 

M animate, 

animateColor, 

animateMotion, 
animateTransform, 

desc, 

discard, handler, metadata, 
set, switch, title 

479 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書L 

(参考) 

属性及びプロパティ一覧 

この附属書では,この規格において定義される属性及びプロパティの一覧を示している。属性及びプロ

パティは,共にXML属性の構文を用いて要素の上に設定されるが,それらは概念的には異なるものであ

る。したがって,それらは別々に記載されている。属性は,一般的には与えられた要素に特有の情報を得

る単純なXML属性である(例 円の半径,テキスト領域の高さ)。プロパティはそれに加えてCSS情報を

得るので,同等のCSSプロパティがスタイルシートを用いて同じ要素に設定されたかのような振る舞いを

する。この規格ではスタイルシート言語の対応は必須ではないが,利用者エージェントがそれを利用して

いる場合には,これらのプロパティをそのために使用することもできる。 

これら二つの表の凡例は次のとおり。 

プロパティ又は属性 

記述されているプロパティ又は属性の名称 

値 

それぞれのプロパティ又は属性が受け入れる値 

要素 

その上に各属性が存在してもよい要素 

アニメーション 

与えられた属性又は要素をアニメーション化してもよいかどうかを示す。次の二つの種類がある。 

この属性又はプロパティは,アニメーション化してもよい。 

この属性又はプロパティは,アニメーション化してはならない。 

継承 

与えられた属性又はプロパティが継承可能かどうかを示す。次の二つの種類がある。 

この属性又はプロパティは既定で継承される。 

この属性又はプロパティは既定では継承されない。 

<text> 

文字データが与えられた属性の値として出現することができることを示す。 

background image

480 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

L.1 

プロパティ一覧 

プロパティ 

アニメー

ション 

継承 

値 

'audio-level' 

<number> | 'inherit' 

'buffered-rendering' 

'auto' | 'dynamic' | 'static' | 'inherit' 

'color' 

<color> | 'inherit' 

'color-rendering' 

'auto' | 'optimizeSpeed' | 'optimizeQuality' | 'inherit' 

'direction' 

'ltr' | 'rtl' | 'inherit' 

'display' 

'inline' | 'block' | 'list-item' | 'run-in' | 'compact' | 'marker' | 'table' | 'inline-table' | 
'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-row' | 
'table-column-group' | 'table-column' | 'table-cell' | 'table-caption' | 'none' | 'inherit' 

'display-align' 

'auto' | 'before' | 'center' | 'after' | 'inherit' 

'fill' 

<paint> | 'inherit' 

'fill-opacity' 

<number> | 'inherit' 

'fill-rule' 

'nonzero' | 'evenodd' | 'inherit' 

'font-family' 

<font-family-value> | 'inherit' 

'font-size' 

<font-size-value> | 'inherit' 

'font-style' 

'normal' | 'italic' | 'oblique' | 'inherit' 

'font-variant' 

'normal' | 'small-caps' | 'inherit' 

'font-weight' 

'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | 
'800' | '900' | 'inherit' 

'image-rendering' 

'auto' | 'optimizeSpeed' | 'optimizeQuality' | 'inherit' 

'line-increment' 

'auto' | <number> | 'inherit' 

'opacity' 

<number> | 'inherit' 

'pointer-events' 

'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' 
| 'none' | 'inherit' 

'shape-rendering' 

'auto' | 'optimizeSpeed' | 'crispEdges' | 'geometricPrecision' | 'inherit' 

'solid-color' 

<color> | 'inherit' 

'solid-opacity' 

<number> | 'inherit' 

'stop-color' 

<color> | 'inherit' 

'stop-opacity' 

<number> | 'inherit' 

'stroke' 

<paint> | 'inherit' 

'stroke-dasharray' 

'none' | <list-of-lengths> | 'inherit' 

'stroke-dashoffset' 

<length> | 'inherit' 

'stroke-linecap' 

'butt' | 'round' | 'square' | 'inherit' 

'stroke-linejoin' 

'miter' | 'round' | 'bevel' | 'inherit' 

'stroke-miterlimit' 

<number> | 'inherit' 

'stroke-opacity' 

<number> | 'inherit' 

'stroke-width' 

<length> | 'inherit' 

'text-align' 

'start' | 'center' | 'end' | 'inherit' 

'text-anchor' 

'start' | 'middle' | 'end' | 'inherit' 

'text-rendering' 

'auto' | 'optimizeSpeed' | 'optimizeLegibility' | 'geometricPrecision' | 'inherit' 

'unicode-bidi' 

'normal' | 'embed' | 'bidi-override' | 'inherit' 

'vector-effect' 

'none' | 'non-scaling-stroke' | 'inherit' 

'viewport-fill' 

'none' | <color> | 'inherit' 

'viewport-fill-opacity' 

<number> | 'inherit' 

'visibility' 

'visible' | 'hidden' | 'inherit' 

background image

481 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

L.2 

属性一覧 

属性 

アニメー

ション 

継承 

値 

要素 

about 

<list-of-strings> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

accent-height 

<number> 

font-face 

accumulate 

'none' | 'sum' 

animate, 

animateColor, 

animateMotion, 

animateTransform 

additive 

'replace' | 'sum' 

animate, 

animateColor, 

animateMotion, 

animateTransform 

alphabetic 

<number> 

font-face 

arabic-form 

<text> 

glyph 

ascent 

<number> 

font-face 

attributeName 

<QName> 

animate, animateColor, animateTransform, set 

attributeType 

'XML' | 'CSS' | 'auto' 

animate, animateColor, animateTransform, set 

bandwidth 

<number> | 'auto' 

prefetch 

baseProfile 

'none' | 'tiny' | 'basic' | 
'full' 

svg  

bbox 

<text> 

font-face 

begin 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, discard, set, 
video 

by 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform 

calcMode 

'discrete' | 'linear' | 
'paced' | 'spline' 

animate, 

animateColor, 

animateMotion, 

animateTransform 

cap-height 

<number> 

font-face 

class 

<XML-NMTOKENS> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

background image

482 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性 

アニメー

ション 

継承 

値 

要素 

content 

<string> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

contentScriptType 

<content-type> 

svg  

cx 

<coordinate> 

circle, ellipse, radialGradient  

cy 

<coordinate> 

circle, ellipse, radialGradient  

<path-data> 

glyph, missing-glyph, path  

datatype 

<string> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video  

defaultAction 

'perform' | 'cancel' 

listener  

descent 

<number> 

font-face  

dur 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, set, video  

editable 

'none' | 'simple' 

text, textArea  

end 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, set, video  

ev:event 

<XML-NMTOKEN> 

handler  

event 

<XML-NMTOKEN> 

listener  

externalResourcesRequired 

<boolean> 

a, animation, audio, font, font-face, font-face-uri, 
foreignObject, g, handler, image, script, svg, switch, 
use, video  

fill 

'remove' | 'freeze' 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, set, video  

focusHighlight 

'auto' | 'none' 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video  

focusable 

'auto' | <boolean> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video  

font-family 

<text> 

font-face  

font-stretch 

<text> 

font-face  

font-style 

<text> 

font-face  

font-variant 

<text> 

font-face  

font-weight 

<text> 

font-face  

background image

483 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性 

アニメー

ション 

継承 

値 

要素 

from 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform  

g1 

<text> 

hkern  

g2 

<text> 

hkern  

glyph-name 

<text> 

glyph  

gradientUnits 

'userSpaceOnUse' 

'objectBoundingBox' 

linearGradient, radialGradient  

handler 

<IRI> 

listener  

hanging 

<number> 

font-face  

height 

<length> 

animation, foreignObject, image, rect, svg, video  

height 

<length> | 'auto' 

textArea  

horiz-adv-x 

<number> 

font, glyph, missing-glyph  

horiz-origin-x 

<number> 

font  

id 

<ID> | <NCName> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video  

ideographic 

<number> 

font-face  

initialVisibility 

'whenStarted' | 'always' 

animation, video  

<number> 

hkern  

keyPoints 

<text> 

animateMotion  

keySplines 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform  

keyTimes 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform  

lang 

<list-of-language-ids> 

glyph  

mathematical 

<number> 

font-face  

max 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, set, video  

mediaCharacterEncoding 

<text> 

prefetch  

mediaContentEncodings 

<text> 

prefetch  

mediaSize 

<number> 

prefetch  

mediaTime 

<text> 

prefetch  

min 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, set, video  

nav-down 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video 

nav-down-left 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video 

background image

484 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性 

アニメー

ション 

継承 

値 

要素 

nav-down-right 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video 

nav-left 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video 

nav-next 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video 

nav-prev 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video 

nav-right 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video  

nav-up 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video  

nav-up-left 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video  

nav-up-right 

<focus> 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, svg, switch, text, 
textArea, tspan, use, video  

observer 

<IDREF> 

listener  

offset 

<number> 

stop  

origin 

<text> 

animateMotion  

overlay 

'none' | 'top' 

video  

overline-position 

<number> 

font-face  

overline-thickness 

<number> 

font-face  

panose-1 

<text> 

font-face  

path 

<text> 

animateMotion  

pathLength 

<number> 

path  

phase 

'default' | 'capture' 

listener  

playbackOrder 

'all' | 'forwardOnly' 

svg  

points 

<points-data> 

polygon, polyline  

preserveAspectRatio 

<text> 

animation, image, svg, video  

propagate 

'continue' | 'stop' 

listener  

property 

<list-of-strings> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video  

<length> 

circle, radialGradient 

background image

485 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性 

アニメー

ション 

継承 

値 

要素 

rel 

<list-of-strings> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

repeatCount 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, set, video 

repeatDur 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, set, video 

requiredExtensions 

<list-of-IRIs> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, desc, 
discard, ellipse, foreignObject, g, image, line, 
metadata, path, polygon, polyline, rect, set, switch, 
tbreak, text, textArea, title, tspan, use, video 

requiredFeatures 

<list-of-IRIs> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, desc, 
discard, ellipse, foreignObject, g, image, line, 
metadata, path, polygon, polyline, rect, set, switch, 
tbreak, text, textArea, title, tspan, use, video 

requiredFonts 

<list-of-family-names> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, desc, 
discard, ellipse, foreignObject, g, image, line, 
metadata, path, polygon, polyline, rect, set, switch, 
tbreak, text, textArea, title, tspan, use, video 

requiredFormats 

<list-of-content-types> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, desc, 
discard, ellipse, foreignObject, g, image, line, 
metadata, path, polygon, polyline, rect, set, switch, 
tbreak, text, textArea, title, tspan, use, video 

resource 

<string> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

restart 

'always' 

'never' 

'whenNotActive' 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, set, video 

background image

486 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性 

アニメー

ション 

継承 

値 

要素 

rev 

<list-of-strings> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

role 

<list-of-strings> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video  

rotate 

<text> 

animateMotion  

rotate 

<list-of-numbers> 

text  

rx 

<length> 

ellipse, rect  

ry 

<length> 

ellipse, rect  

slope 

<number> 

font-face  

snapshotTime 

'none' | <Clock-value> 

svg  

stemh 

<number> 

font-face  

stemv 

<number> 

font-face  

strikethrough-position 

<number> 

font-face  

strikethrough-thickness 

<number> 

font-face  

syncBehavior 

'canSlip' | 'locked' | 
'independent' | 'default' 

animation, audio, video  

syncBehaviorDefault 

'canSlip' | 'locked' | 
'independent' | 'inherit' 

svg  

syncMaster 

<boolean> 

animation, audio, video  

syncTolerance 

<Clock-value> | 'default' animation, audio, video  

syncToleranceDefault 

<Clock-value> | 'inherit' 

svg  

systemLanguage 

<list-of-language-ids> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, desc, 
discard, ellipse, foreignObject, g, image, line, 
metadata, path, polygon, polyline, rect, set, switch, 
tbreak, text, textArea, title, tspan, use, video 

target 

'̲replace' | '̲self' | 
'̲parent' | '̲top' | '̲blank' 
| <XML-Name> 

a  

target 

<IDREF> 

listener  

timelineBegin 

'onLoad' | 'onStart' 

svg  

to 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform, set  

background image

487 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性 

アニメー

ション 

継承 

値 

要素 

transform 

<transform> | 'none' 

a, animation, circle, ellipse, foreignObject, g, image, 
line, path, polygon, polyline, rect, switch, text, 
textArea, use, video  

transformBehavior 

'geometric' | 'pinned' | 
'pinned90' | 'pinned180' | 
'pinned270' 

video  

type 

<content-type> 

handler, script  

type 

<content-type> 

audio, image, video  

type 

'translate' | 'scale' | 
'rotate' 

'skewX' 

'skewY' 

animateTransform  

typeof 

<list-of-strings> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video  

u1 

<text> 

hkern  

u2 

<text> 

hkern  

underline-position 

<number> 

font-face  

underline-thickness 

<number> 

font-face  

unicode 

<text> 

glyph  

unicode-range 

<text> 

font-face  

units-per-em 

<number> 

font-face  

values 

<text> 

animate, 

animateColor, 

animateMotion, 

animateTransform  

version 

'1.0' | '1.1' | '1.2' 

svg  

viewBox 

<text> 

svg  

width 

<length> 

animation, foreignObject, image, rect, svg, video  

width 

<length> | 'auto' 

textArea  

widths 

<text> 

font-face  

<coordinate> 

animation, foreignObject, image, rect, textArea, use, 
video  

x-height 

<number> 

font-face  

x1 

<coordinate> 

line, linearGradient  

x2 

<coordinate> 

line, linearGradient  

<list-of-coordinates> 

text  

xlink:actuate 

'onLoad' 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, discard, 
font-face-uri, foreignObject, handler, image, mpath, 
prefetch, script, set, use, video  

xlink:actuate 

'onRequest' 

a  

background image

488 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性 

アニメー

ション 

継承 

値 

要素 

xlink:arcrole 

<IRI> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, discard, 
font-face-uri, foreignObject, handler, image, mpath, 
prefetch, script, set, use, video  

xlink:href 

<IRI> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, discard, 
font-face-uri, foreignObject, handler, image, mpath, 
prefetch, script, set, use, video  

xlink:role 

<IRI> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, discard, 
font-face-uri, foreignObject, handler, image, mpath, 
prefetch, script, set, use, video  

xlink:show 

'other' 

animate, 

animateColor, 

animateMotion, 

animateTransform, discard, font-face-uri, handler, 
mpath, prefetch, script, set  

xlink:show 

'embed' 

animation, audio, foreignObject, image, use, video  

xlink:show 

'new' | 'replace' 

a  

xlink:title 

<text> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, discard, 
font-face-uri, foreignObject, handler, image, mpath, 
prefetch, script, set, use, video 

xlink:type 

'simple' 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, discard, 
font-face-uri, foreignObject, handler, image, mpath, 
prefetch, script, set, use, video 

xml:base 

<IRI> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

xml:id 

<NCName> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

background image

489 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

属性 

アニメー

ション 

継承 

値 

要素 

xml:lang 

<language-id> 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, handler, 
hkern, image,  line, linearGradient, listener, 
metadata, missing-glyph, mpath, path, polygon, 
polyline, prefetch, radialGradient, rect, script, set, 
solidColor, stop, svg, switch, tbreak, text, textArea, 
title, tspan, use, video 

xml:space 

'default' | 'preserve' 

a, 

animate, 

animateColor, 

animateMotion, 

animateTransform, animation, audio, circle, defs, 
desc, discard, ellipse, font, font-face, font-face-src, 
font-face-uri, foreignObject, g, glyph, hkern, image, 
line, 

linearGradient, 

listener, 

metadata, 

missing-glyph, mpath, path, polygon, polyline, 
prefetch, radialGradient, rect, set, solidColor, stop, 
svg, switch, tbreak, text, textArea, title, tspan, use, 
video 

xml:space 

'preserve' 

handler, script 

<coordinate> 

animation, foreignObject, image, rect, textArea, use, 
video 

y1 

<coordinate> 

line, linearGradient 

y2 

<coordinate> 

line, linearGradient 

<list-of-coordinates> 

text  

zoomAndPan 

'disable' | 'magnify' 

svg  

490 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書M 

(規定) 

Image/svg+xmlのためのメディア型登録 

M.1 概説 

この附属書は,BCP 13及びW3CRegMediaに適合する形で,新しいMIMEメディア型"image/svg+xml"

を登録することについて定めている。 

M.2 メディア型image/svg+xmlの登録 

MIMEメディア型名: 

image  

MIMEサブタイプ名: 

svg+xml  

必須パラメタ: 

なし 

任意パラメタ: 

なし 

SVG文書の符号化は,XML符号化宣言によって決定されなければならない。これは,[RFC3023]の8.9,

8.10,及び8.11に従ってcharsetパラメタが省略される場合,application/xmlメディア型と同じ意味をもつ。 

符号化への配慮: 

application/xmlと同じ。[RFC3023]の3.2を参照。 

用法の制約: 

なし 

セキュリティへの配慮: 

他のXML型と同様に,また,[RFC3023]の箇条10にもあるように,悪意をもって構築されたXML実体

の繰り返しによって多量のメモリが消費させられる可能性があり,これは制約のある環境ではXMLプロ

セッサに不具合を生じさせることがある。 

SVG文書は,gzip圧縮を用いた圧縮形式によって転送してもよい。MIMEに似たメカニズムを使うシス

テム(例 HTTP)では,これはContent-Transfer-Encodingヘッダによって示される。そうではないシステ

ム(例 ダイレクト ファイルシステム アクセス)では,これはファイル名拡張子及びMacintoshファイ

ルタイプコードによって示される。さらに,gzip圧縮された内容は,[RFC1952]の2.3.1に示されるような

最初のバイト列によって容易に認識される。 

SVG要素には,任意の複数のURIを参照するものがある。その場合には,[RFC3986]の箇条7の安全性

の問題について考慮することが望ましい。 

HTMLと同じように,SVG文書は外部メディア(例 画像,オーディオ,ビデオ,スタイルシート,ス

クリプト言語)を参照してもよい。スクリプト言語は実行可能な内容である。この場合,それらの形式の

メディア型登録におけるセキュリティへの配慮を適用する。 

加えて,SVG及びXMLにおける一般的な拡張性機能によって,"image/svg+xml"では,ここには示され

ていないセキュリティ上の意図を示した内容を記述することができる可能性がある。しかし,そのプロセ

491 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ッサがこの規格の規定の意味だけに適合している場合,この内容はSVG名前空間の外にあり,無視されな

ければならない。そのプロセッサが追加的な内容を認識及び処理する場合,又はその内容の更なる処理を

他のプロセッサに実行する場合に限り,潜在的なセキュリティ上の問題が生じる。その場合には,この登

録に関する文書の範囲外となる。 

相互運用性への配慮: 

この規格では,SVG名前空間及び他の名前空間の両方において,とりわけ認識されていない要素及び属

性を扱うときに適合しなければならない振る舞いを指示する意味の処理について記述している。 

SVGは拡張可能なので,適合"image/svg+xml"プロセッサは,受け取った内容が整形式のXMLであるこ

とを予期しなければならない。しかし,その内容が特定のDTD又はスキーマにおいて妥当であること,

又はそのプロセッサが文書内の全要素及び属性を認識すると保証することはできない。 

SVGではTest Suite及び関連する実装報告書を公開し,各報告書の時点においてどの実装がどのテスト

に合格したのかを公開している。この情報は,新しいテストが追加されたり実装が改善されたりした場合

に定期的に更新される。 

公開されている仕様書: 

このメディア型登録は,この規格の附属書Mから引用されている。 

追加情報: 

担当者及び問合せ先のEメールアドレス: 

Chris Lilley,Doug Schepers(member-svg-media-type@w3.org) 

意図される用途: 

COMMON  

著者/変更責任者: 

SVG仕様書は,World Wide Web ConsortiumにおけるSVG Working Groupの製作物である。これらの仕様

書に変更を加える権限はW3Cが所持する。 

492 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書N 
(規定) 

この規格のためのRelaxNGスキーマ 

この規格のためのスキーマは,文書スキーマ定義言語(DSDL)−第2部:正規文法に基づく妥当性検

証−Relax NG [JIS X 4177-2:2005](XML Schema Part 2 [SCHEMA2] のデータ型を使用する,名前空間を利

用できるスキーマ言語)で書かれている。これによって,DTD構文を用いるよりもずっと自然に名前空間

及びモジュール性を表現することができる。この規格のためのRelaxNGスキーマは,他のRelaxNGスキ

ーマにインポートされてもよいし,又はNamespace-based Validation Dispatching Language [NVDL] を用いて,

他の言語による他のスキーマと統合したマルチ ネームスペースでマルチ グラマーなスキーマにしてもよ

い。 

DTDとは異なり,検証に用いるスキーマは,文書インスタンスに直接書かれない。DOCTYPE宣言と等

価なものはない。エディタ又は他の検証ツールは,そのスキーマのIRI(又はローカル キャッシュ 複写)

を指し示すだけである。 

ドライバスキーマ及び完全なスキーマディレクトリが利用可能である。 

493 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書O 
(規定) 

ECMAScript言語結合 

O.1 Module dom 

Prototype Object DOMException 

DOMExceptionクラスは次のような定数をもつ。 

DOMException.INDEX̲SIZE̲ERR 

この定数はNumber型で値が1である。 

DOMException.DOMSTRING̲SIZE̲ERR 

この定数はNumber型で値が2である。 

DOMException.HIERARCHY̲REQUEST̲ERR 

この定数はNumber型で値が3である。 

DOMException.WRONG̲DOCUMENT̲ERR 

この定数はNumber型で値が4である。 

DOMException.INVALID̲CHARACTER̲ERR 

この定数はNumber型で値が5である。 

DOMException.NO̲DATA̲ALLOWED̲ERR 

この定数はNumber型で値が6である。 

DOMException.NO̲MODIFICATION̲ALLOWED̲ERR 

この定数はNumber型で値が7である。 

DOMException.NOT̲FOUND̲ERR 

この定数はNumber型で値が8である。 

DOMException.NOT̲SUPPORTED̲ERR 

この定数はNumber型で値が9である。 

DOMException.INUSE̲ATTRIBUTE̲ERR 

この定数はNumber型で値が10である。 

DOMException.INVALID̲STATE̲ERR 

この定数はNumber型で値が11である。 

DOMException.SYNTAX̲ERR 

この定数はNumber型で値が12である。 

DOMException.INVALID̲MODIFICATION̲ERR 

この定数はNumber型で値が13である。 

DOMException.NAMESPACE̲ERR 

この定数はNumber型で値が14である。 

DOMException.INVALID̲ACCESS̲ERR 

この定数はNumber型で値が15である。 

DOMException.VALIDATION̲ERR 

この定数はNumber型で値が16である。 

494 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

DOMException.TYPE̲MISMATCH̲ERR 

この定数はNumber型で値が17である。 

Object DOMException 

DOMExceptionオブジェクトは次のようなプロパティをもつ。 

code 

このプロパティはNumber型である。 

Object Node 

Nodeオブジェクトは次のようなプロパティをもつ。 

namespaceURI 

このプロパティはString型である。 

localName 

このプロパティはString型である。 

parentNode 

このプロパティはNode型である。 

ownerDocument 

このプロパティはDocument型である。 

textContent 

このプロパティはString型である。 

Nodeオブジェクトは次のようなメソッドをもつ。 

appendChild(newChild) 

このメソッドはNodeを返す。newChildパラメタはNode型である。 

insertBefore(newChild, refChild) 

このメソッドはNodeを返す。newChildパラメタはNode型である。refChildパラメタはNode型で

ある。 

removeChild(oldChild) 

このメソッドはNodeを返す。oldChildパラメタはNode型である。 

cloneNode(deep) 

このメソッドはNodeを返す。deepパラメタはBoolean型である。 

Object Element 

Elementは,Node及びElementTraversalの全てのプロパティ及びメソッド,並びに,次に定義して

いるプロパティ及びメソッドをもつ。 

Elementオブジェクトは次のようなメソッドをもつ。 

getAttributeNS(namespaceURI, localName) 

このメソッドはStringを返す。namespaceURIパラメタはString型である。localNameパラメタはString

型である。 

setAttributeNS(namespaceURI, qualifiedName, value) 

このメソッドは戻り値をもたない。namespaceURIパラメタはString型である。qualifiedNameパラメ

タはString型である。valueパラメタはString型である。 

getAttribute(name) 

このメソッドはStringを返す。nameパラメタはString型である。 

495 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

setAttribute(name, value) 

このメソッドは戻り値をもたない。nameパラメタはString型である。valueパラメタはString型で

ある。 

Object Document 

Documentは,Nodeの全てのプロパティ及びメソッド,並びに,次に定義しているプロパティ及び

メソッドをもつ。 

Documentオブジェクトは次のようなプロパティをもつ。 

documentElement 

このプロパティはElement型である。 

Documentオブジェクトは次のようなメソッドをもつ。 

createElementNS(namespaceURI, qualifiedName) 

このメソッドはElementを返す。namespaceURIパラメタはString型である。qualifiedNameパラメタ

はString型である。 

getElementById(elementId) 

このメソッドはElementを返す。elementIdパラメタはString型である。 

Object ElementTraversal 

ElementTraversalオブジェクトは次のようなプロパティをもつ。 

firstElementChild 

このプロパティはElement型である。 

lastElementChild 

このプロパティはElement型である。 

nextElementSibling 

このプロパティはElement型である。 

previousElementSibling 

このプロパティはElement型である。 

childElementCount 

このプロパティはNumber型である。 

Object Location 

Locationオブジェクトは次のようなメソッドをもつ。 

assign(iri) 

このメソッドは戻り値をもたない。iriパラメタはString型である。 

reload() 

このメソッドは戻り値をもたない。 

Object Window 

Windowオブジェクトは次のようなプロパティをもつ。 

parent 

このプロパティはWindow型である。 

location 

このプロパティはLocation型である。 

496 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

O.2 Module views 

Object AbstractView 

AbstractViewオブジェクトは次のようなプロパティをもつ。 

document 

このプロパティはDocumentView型である。 

Object DocumentView 

DocumentViewオブジェクトは次のようなプロパティをもつ。 

defaultView 

このプロパティはAbstractView型である。 

O.3 Module events 

Object EventTarget 

EventTargetオブジェクトは次のようなメソッドをもつ。 

addEventListener(type, listener, useCapture) 

このメソッドは戻り値をもたない。typeパラメタはString型である。listenerパラメタはEventListener

型である。useCaptureパラメタはBoolean型である。 

removeEventListener(type, listener, useCapture) 

このメソッドは戻り値をもたない。typeパラメタはString型である。listenerパラメタはEventListener

型である。useCaptureパラメタはBoolean型である。 

Function EventListener 

ECMAScriptでは,EventListenerを二つの方法によって指定することができる。一つ目の方法は

ECMAScript Functionオブジェクトの使用である。ここでは,その関数自体がhandleEvent操作の実装

とみなされる。二つ目の方法はhandleEventプロパティをもつECMAScriptオブジェクトである。これ

は,handleEvent操作の実装を提供する。ECMAScript FunctionオブジェクトがhandleEventプロパティ

ももっている場合には,そのhandleEventプロパティが(そのFunction自体ではない。)handleEvent

操作の実装とみなされる。 

EventListenerオブジェクトは次のようなメソッドをもつ。 

handleEvent(evt) 

このメソッドは戻り値をもたない。evtパラメタはEvent型である。 

Object Event 

Eventオブジェクトは次のようなプロパティをもつ。 

target 

このプロパティはEventTarget型である。 

currentTarget 

このプロパティはEventTarget型である。 

type 

このプロパティはString型である。 

cancelable 

このプロパティはBoolean型である。 

defaultPrevented 

497 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このプロパティはBoolean型である。 

Eventオブジェクトは次のようなメソッドをもつ。 

stopPropagation() 

このメソッドは戻り値をもたない。 

preventDefault() 

このメソッドは戻り値をもたない。 

Object MouseEvent 

MouseEventは,UIEventの全てのプロパティ及びメソッド,並びに,次に定義しているプロパティ

及びメソッドをもつ。 

MouseEventオブジェクトは次のようなプロパティをもつ。 

screenX 

このプロパティはNumber型である。 

screenY 

このプロパティはNumber型である。 

clientX 

このプロパティはNumber型である。 

clientY 

このプロパティはNumber型である。 

button 

このプロパティはNumber型である。 

Object MouseWheelEvent 

MouseWheelEventは,MouseEventの全てのプロパティ及びメソッド,並びに,次に定義しているプ

ロパティ及びメソッドをもつ。 

MouseWheelEventオブジェクトは次のようなプロパティをもつ。 

wheelDelta 

このプロパティはNumber型である。 

Object TextEvent 

TextEventは,UIEventの全てのプロパティ及びメソッド,並びに,次に定義しているプロパティ及

びメソッドをもつ。 

TextEventオブジェクトは次のようなプロパティをもつ。 

data 

このプロパティはString型である。 

Object KeyboardEvent 

KeyboardEventは,UIEventの全てのプロパティ及びメソッド,並びに,次に定義しているプロパテ

ィ及びメソッドをもつ。 

KeyboardEventオブジェクトは次のようなプロパティをもつ。 

keyIdentifier 

このプロパティはString型である。 

Object UIEvent 

UIEventは,Eventの全てのプロパティ及びメソッド,並びに,次に定義しているプロパティ及びメ

498 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

ソッドをもつ。 

UIEventオブジェクトは次のようなプロパティをもつ。 

detail 

このプロパティはNumber型である。 

Object ProgressEvent 

ProgressEventは,Eventの全てのプロパティ及びメソッド,並びに,次に定義しているプロパティ

及びメソッドをもつ。 

ProgressEventオブジェクトは次のようなプロパティをもつ。 

lengthComputable 

このプロパティはBoolean型である。 

loaded 

このプロパティはNumber型である。 

total 

このプロパティはNumber型である。 

O.4 Module smil 

Object ElementTimeControl 

ElementTimeControlオブジェクトは次のようなメソッドをもつ。 

beginElementAt(offset) 

このメソッドは戻り値をもたない。offsetパラメタはNumber型である。 

beginElement() 

このメソッドは戻り値をもたない。 

endElementAt(offset) 

このメソッドは戻り値をもたない。offsetパラメタはNumber型である。 

endElement() 

このメソッドは戻り値をもたない。 

Object TimeEvent 

TimeEventは,Eventの全てのプロパティ及びメソッド,並びに,次に定義しているプロパティ及び

メソッドをもつ。 

TimeEventオブジェクトは次のようなプロパティをもつ。 

detail 

このプロパティはNumber型である。 

O.5 Module svg 

Prototype Object SVGException 

SVGExceptionクラスは次のような定数をもつ。 

SVGException.SVG̲WRONG̲TYPE̲ERR 

この定数はNumber型で値が0である。 

SVGException.SVG̲INVALID̲VALUE̲ERR 

この定数はNumber型で値が1である。 

499 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVGException.SVG̲MATRIX̲NOT̲INVERTABLE 

この定数はNumber型で値が2である。 

Object SVGException 

SVGExceptionオブジェクトは次のようなプロパティをもつ。 

code 

このプロパティはNumber型である。 

Object SVGDocument 

SVGDocumentは,Document及びEventTargetの全てのプロパティ及びメソッド,並びに,次に定義

しているプロパティ及びメソッドをもつ。 

Object SVGUseElement 

SVGUseElementは,SVGLocatableElementの全てのプロパティ及びメソッド,並びに,次に定義し

ているプロパティ及びメソッドをもつ。 

Object SVGElementInstance 

SVGElementInstanceは,EventTargetの全てのプロパティ及びメソッド,並びに,次に定義している

プロパティ及びメソッドをもつ。 

SVGElementInstanceオブジェクトは次のようなプロパティをもつ。 

correspondingElement 

このプロパティはSVGElement型である。 

correspondingUseElement 

このプロパティはSVGUseElement型である。 

Prototype Object SVGSVGElement 

SVGSVGElementクラスは次のような定数をもつ。 

SVGSVGElement.NAV̲AUTO 

この定数はNumber型で値が1である。 

SVGSVGElement.NAV̲NEXT 

この定数はNumber型で値が2である。 

SVGSVGElement.NAV̲PREV 

この定数はNumber型で値が3である。 

SVGSVGElement.NAV̲UP 

この定数はNumber型で値が4である。 

SVGSVGElement.NAV̲UP̲RIGHT 

この定数はNumber型で値が5である。 

SVGSVGElement.NAV̲RIGHT 

この定数はNumber型で値が6である。 

SVGSVGElement.NAV̲DOWN̲RIGHT 

この定数はNumber型で値が7である。 

SVGSVGElement.NAV̲DOWN 

この定数はNumber型で値が8である。 

SVGSVGElement.NAV̲DOWN̲LEFT 

この定数はNumber型で値が9である。 

500 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVGSVGElement.NAV̲LEFT 

この定数はNumber型で値が10である。 

SVGSVGElement.NAV̲UP̲LEFT 

この定数はNumber型で値が11である。 

Object SVGSVGElement 

SVGSVGElementは,SVGLocatableElement及びSVGTimedElementの全てのプロパティ及びメソッド,

並びに,次に定義しているプロパティ及びメソッドをもつ。 

SVGSVGElementオブジェクトは次のようなプロパティをもつ。 

currentScale 

このプロパティはNumber型である。 

currentRotate 

このプロパティはNumber型である。 

currentTranslate 

このプロパティはSVGPoint型である。 

viewport 

このプロパティはSVGRect型である。 

SVGSVGElementオブジェクトは次のようなメソッドをもつ。 

getCurrentTime() 

このメソッドはNumberを返す。 

setCurrentTime(seconds) 

このメソッドは戻り値をもたない。secondsパラメタはNumber型である。 

createSVGMatrixComponents(a, b, c, d, e, f) 

このメソッドはSVGMatrixを返す。aパラメタはNumber型である。bパラメタはNumber型である。

cパラメタはNumber型である。dパラメタはNumber型である。eパラメタはNumber型である。fパ

ラメタはNumber型である。 

createSVGRect() 

このメソッドはSVGRectを返す。 

createSVGPoint() 

このメソッドはSVGPointを返す。 

createSVGPath() 

このメソッドはSVGPathを返す。 

createSVGRGBColor(red, green, blue) 

このメソッドはSVGRGBColorを返す。redパラメタはNumber型である。greenパラメタはNumber

型である。blueパラメタはNumber型である。 

moveFocus(motionType) 

このメソッドは戻り値をもたない。motionTypeパラメタはNumber型である。 

setFocus(theObject) 

このメソッドは戻り値をもたない。theObjectパラメタはEventTarget型である。 

getCurrentFocusedObject() 

このメソッドはEventTargetを返す。 

501 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Object SVGRGBColor 

SVGRGBColorオブジェクトは次のようなプロパティをもつ。 

red 

このプロパティはNumber型である。 

green 

このプロパティはNumber型である。 

blue 

このプロパティはNumber型である。 

Object SVGRect 

SVGRectオブジェクトは次のようなプロパティをもつ。 

このプロパティはNumber型である。 

このプロパティはNumber型である。 

width 

このプロパティはNumber型である。 

height 

このプロパティはNumber型である。 

Object SVGPoint 

SVGPointオブジェクトは次のようなプロパティをもつ。 

このプロパティはNumber型である。 

このプロパティはNumber型である。 

SVGPointオブジェクトは次のようなメソッドをもつ。 

matrixTransform(matrix) 

このメソッドはSVGPointを返す。matrixパラメタはSVGMatrix型である。 

Prototype Object SVGPath 

SVGPathクラスは次のような定数をもつ。 

SVGPath.MOVE̲TO 

この定数はNumber型で値が77である。 

SVGPath.LINE̲TO 

この定数はNumber型で値が76である。 

SVGPath.CURVE̲TO 

この定数はNumber型で値が67である。 

SVGPath.QUAD̲TO 

この定数はNumber型で値が81である。 

SVGPath.CLOSE 

この定数はNumber型で値が90である。 

502 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Object SVGPath 

SVGPathオブジェクトは次のようなプロパティをもつ。 

numberOfSegments 

このプロパティはNumber型である。 

SVGPathオブジェクトは次のようなメソッドをもつ。 

getSegment(cmdIndex) 

このメソッドはNumberを返す。cmdIndexパラメタはNumber型である。 

getSegmentParam(cmdIndex, paramIndex) 

このメソッドはNumberを返す。cmdIndexパラメタはNumber型である。paramIndexパラメタは

Number型である。 

moveTo(x, y) 

このメソッドは戻り値をもたない。xパラメタはNumber型である。yパラメタはNumber型である。 

lineTo(x, y) 

このメソッドは戻り値をもたない。xパラメタはNumber型である。yパラメタはNumber型である。 

quadTo(x1, y1, x2, y2) 

このメソッドは戻り値をもたない。x1パラメタはNumber型である。y1パラメタはNumber型であ

る。x2パラメタはNumber型である。y2パラメタはNumber型である。 

curveTo(x1, y1, x2, y2, x3, y3) 

このメソッドは戻り値をもたない。x1パラメタはNumber型である。y1パラメタはNumber型であ

る。x2パラメタはNumber型である。y2パラメタはNumber型である。x3パラメタはNumber型であ

る。y3パラメタはNumber型である。 

close() 

このメソッドは戻り値をもたない。 

Object SVGMatrix 

SVGMatrixオブジェクトは次のようなメソッドをもつ。 

getComponent(index) 

このメソッドはNumberを返す。indexパラメタはNumber型である。 

mMultiply(secondMatrix) 

このメソッドはSVGMatrixを返す。secondMatrixパラメタはSVGMatrix型である。 

inverse() 

このメソッドはSVGMatrixを返す。 

mTranslate(x, y) 

このメソッドはSVGMatrixを返す。xパラメタはNumber型である。yパラメタはNumber型である。 

mScale(scaleFactor) 

このメソッドはSVGMatrixを返す。scaleFactorパラメタはNumber型である。 

mRotate(angle) 

このメソッドはSVGMatrixを返す。angleパラメタはNumber型である。 

Object SVGLocatable 

SVGLocatableオブジェクトは次のようなメソッドをもつ。 

getBBox() 

503 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドはSVGRectを返す。 

getScreenCTM() 

このメソッドはSVGMatrixを返す。 

getScreenBBox() 

このメソッドはSVGRectを返す。 

Object SVGLocatableElement 

SVGLocatableElementは,SVGElement及びSVGLocatableの全てのプロパティ及びメソッド,並び

に,次に定義しているプロパティ及びメソッドをもつ。 

Object TraitAccess 

TraitAccessオブジェクトは次のようなメソッドをもつ。 

getTrait(name) 

このメソッドはStringを返す。nameパラメタはString型である。 

getTraitNS(namespaceURI, name) 

このメソッドはStringを返す。namespaceURIパラメタはString型である。nameパラメタはString

型である。 

getFloatTrait(name) 

このメソッドはNumberを返す。nameパラメタはString型である。 

getFloatListTrait(name) 

このメソッドはObjectを返す(ただし,詳細についてはO.6を参照。)。nameパラメタはString型

である。 

getMatrixTrait(name) 

このメソッドはSVGMatrixを返す。nameパラメタはString型である。 

getRectTrait(name) 

このメソッドはSVGRectを返す。nameパラメタはString型である。 

getPathTrait(name) 

このメソッドはSVGPathを返す。nameパラメタはString型である。 

getRGBColorTrait(name) 

このメソッドはSVGRGBColorを返す。nameパラメタはString型である。 

getPresentationTrait(name) 

このメソッドはStringを返す。nameパラメタはString型である。 

getPresentationTraitNS(namespaceURI, name) 

このメソッドはStringを返す。namespaceURIパラメタはString型である。nameパラメタはString

型である。 

getFloatPresentationTrait(name) 

このメソッドはNumberを返す。nameパラメタはString型である。 

getFloatListPresentationTrait(name) 

このメソッドはObjectを返す(ただし,詳細についてはO.6を参照。)。nameパラメタはString型

である。 

getMatrixPresentationTrait(name) 

このメソッドはSVGMatrixを返す。nameパラメタはString型である。 

504 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

getRectPresentationTrait(name) 

このメソッドはSVGRectを返す。nameパラメタはString型である。 

getPathPresentationTrait(name) 

このメソッドはSVGPathを返す。nameパラメタはString型である。 

getRGBColorPresentationTrait(name) 

このメソッドはSVGRGBColorを返す。nameパラメタはString型である。 

setTrait(name, value) 

このメソッドは戻り値をもたない。nameパラメタはString型である。valueパラメタはString型で

ある。 

setTraitNS(namespaceURI, name, value) 

このメソッドは戻り値をもたない。namespaceURIパラメタはString型である。nameパラメタはString

型である。valueパラメタはString型である。 

setFloatTrait(name, value) 

このメソッドは戻り値をもたない。nameパラメタはString型である。valueパラメタはNumber型

である。 

setFloatListTrait(name, value) 

このメソッドは戻り値をもたない。nameパラメタはString型である。valueパラメタはObject型で

ある(ただし,詳細についてはO.6を参照。)。 

setMatrixTrait(name, matrix) 

このメソッドは戻り値をもたない。nameパラメタはString型である。matrixパラメタはSVGMatrix

型である。 

setRectTrait(name, rect) 

このメソッドは戻り値をもたない。nameパラメタはString型である。rectパラメタはSVGRect型で

ある。 

setPathTrait(name, path) 

このメソッドは戻り値をもたない。nameパラメタはString型である。pathパラメタはSVGPath型

である。 

setRGBColorTrait(name, color) 

このメソッドは戻り値をもたない。nameパラメタはString型である。colorパラメタはSVGRGBColor

型である。 

Object SVGElement 

SVGElementは,Element,EventTarget及びTraitAccessの全てのプロパティ及びメソッド,並びに,

次に定義しているプロパティ及びメソッドをもつ。 

SVGElementオブジェクトは次のようなプロパティをもつ。 

id 

このプロパティはString型である。 

Object SVGTimedElement 

SVGTimedElementは,SVGElement及びsmil::ElementTimeControlの全てのプロパティ及びメソッド,

並びに,次に定義しているプロパティ及びメソッドをもつ。 

505 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVGTimedElementオブジェクトは次のようなプロパティをもつ。 

isPaused 

このプロパティはBoolean型である。 

SVGTimedElementオブジェクトは次のようなメソッドをもつ。 

pauseElement() 

このメソッドは戻り値をもたない。 

resumeElement() 

このメソッドは戻り値をもたない。 

Object SVGAnimationElement 

SVGAnimationElementは,SVGTimedElementの全てのプロパティ及びメソッド,並びに,次に定義

しているプロパティ及びメソッドをもつ。 

Object SVGVisualMediaElement 

SVGVisualMediaElementは,SVGLocatableElement及びSVGTimedElementの全てのプロパティ及び

メソッド,並びに,次に定義しているプロパティ及びメソッドをもつ。 

Object SVGTimer 

SVGTimerは,events::EventTargetの全てのプロパティ及びメソッド,並びに,次に定義しているプ

ロパティ及びメソッドをもつ。 

SVGTimerオブジェクトは次のようなプロパティをもつ。 

delay 

このプロパティはNumber型である。 

repeatInterval 

このプロパティはNumber型である。 

running 

このプロパティはBoolean型である。 

SVGTimerオブジェクトは次のようなメソッドをもつ。 

start() 

このメソッドは戻り値をもたない。 

stop() 

このメソッドは戻り値をもたない。 

Object SVGGlobal 

SVGGlobalオブジェクトは次のようなメソッドをもつ。 

createTimer(initialInterval, repeatInterval) 

このメソッドはSVGTimerを返す。initialIntervalパラメタはNumber型である。repeatIntervalパラメ

タはNumber型である。 

getURL(iri, callback) 

このメソッドは戻り値をもたない。iriパラメタはString型である。callbackパラメタは

AsyncStatusCallback型である。 

postURL(iri, data, callback, type, encoding) 

このメソッドは戻り値をもたない。iriパラメタはString型である。dataパラメタはString型である。

callbackパラメタはAsyncStatusCallback型である。typeパラメタはString型である。encodingパラメタ

506 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

はString型である。 

parseXML(data, contextDoc) 

このメソッドはNodeを返す。dataパラメタはString型である。contextDocパラメタはDocument型

である。 

Object AsyncStatusCallback 

AsyncStatusCallbackオブジェクトは次のようなメソッドをもつ。 

operationComplete(status) 

このメソッドは戻り値をもたない。statusパラメタはAsyncURLStatus型である。 

Object AsyncURLStatus 

AsyncURLStatusオブジェクトは次のようなプロパティをもつ。 

success 

このプロパティはBoolean型である。 

contentType 

このプロパティはString型である。 

content 

このプロパティはString型である。 

O.6 Sequences 

ECMAScript言語結合では,sequence<float>型の値はECMAScriptオブジェクトによって表現される(以

下,sequenceオブジェクトと呼ぶ。)。 

sequenceオブジェクトには,そのsequenceの長さを与える非負整数Numberを値とするlengthプロパテ

ィがなければならない。 

範囲[0, length)における各indexのために,sequenceオブジェクトは,その名前をindexとし,値におい

てそのindexにおけるsequenceのelementを与えるプロパティ(indexプロパティ)をもっていなければな

らない。ホストオブジェクトから返されたとき(すなわち,戻り型がsequence<float>である操作が呼び出

されたとき,又は型がsequence<float>である属性を取得したとき),これらのプロパティから返される

element値は,ECMAScript Numberでなければならない。 

ホストオブジェクトに渡されたとき(すなわち,型がsequence<float>である操作引数として渡されたと

き,又は型がsequence<float>である属性に割り当てられたとき),各indexプロパティの値はelement値を

与える。これは,ToNumberオペレータに対応するindexプロパティの値を渡した結果である(ECMAScript 

Language Specification [ECMA-262]の9.3で定義している。)。 

507 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書P 

(規定) 

Java言語結合 

この結合における定数は,常にpublic static finalである。全てのフィールド及びメソッドはpublicである。 

P.1 

Package org.w3c.dom 

org.w3c.dom.DOMExceptionのためのクラス定数 

org.w3c.dom.DOMExceptionクラスは次のような定数をもつ。 

INDEX̲SIZE̲ERR 

この定数はshortで値が1である。 

DOMSTRING̲SIZE̲ERR 

この定数はshortで値が2である。 

HIERARCHY̲REQUEST̲ERR 

この定数はshortで値が3である。 

WRONG̲DOCUMENT̲ERR 

この定数はshortで値が4である。 

INVALID̲CHARACTER̲ERR 

この定数はshortで値が5である。 

NO̲DATA̲ALLOWED̲ERR 

この定数はshortで値が6である。 

NO̲MODIFICATION̲ALLOWED̲ERR 

この定数はshortで値が7である。 

NOT̲FOUND̲ERR 

この定数はshortで値が8である。 

NOT̲SUPPORTED̲ERR 

この定数はshortで値が9である。 

INUSE̲ATTRIBUTE̲ERR 

この定数はshortで値が10である。 

INVALID̲STATE̲ERR 

この定数はshortで値が11である。 

SYNTAX̲ERR 

この定数はshortで値が12である。 

INVALID̲MODIFICATION̲ERR 

この定数はshortで値が13である。 

NAMESPACE̲ERR 

この定数はshortで値が14である。 

INVALID̲ACCESS̲ERR 

この定数はshortで値が15である。 

508 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

VALIDATION̲ERR 

この定数はshortで値が16である。 

TYPE̲MISMATCH̲ERR 

この定数はshortで値が17である。 

Class org.w3c.dom.DOMException 

org.w3c.dom.DOMExceptionは,java.lang.RuntimeExceptionを拡張する。 

org.w3c.dom.DOMExceptionクラスは次のようなメソッドをもつ。 

getCode() 

このメソッドはshortを返す。 

setCode(short code) 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.Node 

org.w3c.dom.Nodeインタフェースは次のようなメソッドをもつ。 

getNamespaceURI() 

このメソッドはStringを返す。 

getLocalName() 

このメソッドはStringを返す。 

getParentNode() 

このメソッドはNodeを返す。 

getOwnerDocument() 

このメソッドはDocumentを返す。 

getTextContent() 

このメソッドはStringを返す。 

setTextContent(String textContent) 

このメソッドは戻り値をもたない。 

appendChild(Node newChild) 

このメソッドはNodeを返す。 

このメソッドは,例外DOMExceptionを処理する。 

insertBefore(Node newChild, Node refChild) 

このメソッドはNodeを返す。 

このメソッドは,例外DOMExceptionを処理する。 

removeChild(Node oldChild) 

このメソッドはNodeを返す。 

このメソッドは,例外DOMExceptionを処理する。 

cloneNode(boolean deep) 

このメソッドはNodeを返す。 

Interface org.w3c.dom.Element 

org.w3c.dom.Elementは,Node, ElementTraversalを拡張する。 

org.w3c.dom.Elementインタフェースは次のようなメソッドをもつ。 

getAttributeNS(String namespaceURI, String localName) 

509 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドはStringを返す。 

このメソッドは,例外DOMExceptionを処理する。 

setAttributeNS(String namespaceURI, String qualifiedName, String value) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

getAttribute(String name) 

このメソッドはStringを返す。 

setAttribute(String name, String value) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

Interface org.w3c.dom.Document 

org.w3c.dom.Documentは,Nodeを拡張する。 

org.w3c.dom.Documentインタフェースは次のようなメソッドをもつ。 

createElementNS(String namespaceURI, String qualifiedName) 

このメソッドはElementを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getDocumentElement() 

このメソッドはElementを返す。 

getElementById(String elementId) 

このメソッドはElementを返す。 

Interface org.w3c.dom.ElementTraversal 

org.w3c.dom.ElementTraversalインタフェースは次のようなメソッドをもつ。 

getFirstElementChild() 

このメソッドはElementを返す。 

getLastElementChild() 

このメソッドはElementを返す。 

getNextElementSibling() 

このメソッドはElementを返す。 

getPreviousElementSibling() 

このメソッドはElementを返す。 

getChildElementCount() 

このメソッドはlongを返す。 

Interface org.w3c.dom.Location 

org.w3c.dom.Locationインタフェースは次のようなメソッドをもつ。 

assign(String iri) 

このメソッドは戻り値をもたない。 

reload() 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.Window 

org.w3c.dom.Windowインタフェースは次のようなメソッドをもつ。 

510 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

getParent() 

このメソッドはWindowを返す。 

getLocation() 

このメソッドはLocationを返す。 

P.2 

Package org.w3c.dom.views 

Interface org.w3c.dom.views.AbstractView 

org.w3c.dom.views.AbstractViewインタフェースは次のようなメソッドをもつ。 

getDocument() 

このメソッドはDocumentViewを返す。 

Interface org.w3c.dom.views.DocumentView 

org.w3c.dom.views.DocumentViewインタフェースは次のようなメソッドをもつ。 

getDefaultView() 

このメソッドはAbstractViewを返す。 

P.3 

Package org.w3c.dom.events 

Interface org.w3c.dom.events.EventTarget 

org.w3c.dom.events.EventTargetインタフェースは次のようなメソッドをもつ。 

addEventListener(String type, EventListener listener, boolean useCapture) 

このメソッドは戻り値をもたない。 

removeEventListener(String type, EventListener listener, boolean useCapture) 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.events.EventListener 

org.w3c.dom.events.EventListenerインタフェースは次のようなメソッドをもつ。 

handleEvent(Event evt) 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.events.Event 

org.w3c.dom.events.Eventインタフェースは次のようなメソッドをもつ。 

getTarget() 

このメソッドはEventTargetを返す。 

getCurrentTarget() 

このメソッドはEventTargetを返す。 

getType() 

このメソッドはStringを返す。 

getCancelable() 

このメソッドはbooleanを返す。 

getDefaultPrevented() 

このメソッドはbooleanを返す。 

stopPropagation() 

このメソッドは戻り値をもたない。 

511 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

preventDefault() 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.events.MouseEvent 

org.w3c.dom.events.MouseEventは,UIEventを拡張する。 

org.w3c.dom.events.MouseEventインタフェースは次のようなメソッドをもつ。 

getScreenX() 

このメソッドはlongを返す。 

getScreenY() 

このメソッドはlongを返す。 

getClientX() 

このメソッドはlongを返す。 

getClientY() 

このメソッドはlongを返す。 

getButton() 

このメソッドはshortを返す。 

Interface org.w3c.dom.events.MouseWheelEvent 

org.w3c.dom.events.MouseWheelEventは,MouseEventを拡張する。 

org.w3c.dom.events.MouseWheelEventインタフェースは次のようなメソッドをもつ。 

getWheelDelta() 

このメソッドはlongを返す。 

Interface org.w3c.dom.events.TextEvent 

org.w3c.dom.events.TextEventは,UIEventを拡張する。 

org.w3c.dom.events.TextEventインタフェースは次のようなメソッドをもつ。 

getData() 

このメソッドはStringを返す。 

Interface org.w3c.dom.events.KeyboardEvent 

org.w3c.dom.events.KeyboardEventは,UIEventを拡張する。 

org.w3c.dom.events.KeyboardEventインタフェースは次のようなメソッドをもつ。 

getKeyIdentifier() 

このメソッドはStringを返す。 

Interface org.w3c.dom.events.UIEvent 

org.w3c.dom.events.UIEventは,Eventを拡張する。 

org.w3c.dom.events.UIEventインタフェースは次のようなメソッドをもつ。 

getDetail() 

このメソッドはlongを返す。 

Interface org.w3c.dom.events.ProgressEvent 

org.w3c.dom.events.ProgressEventは,Eventを拡張する。 

org.w3c.dom.events.ProgressEventインタフェースは次のようなメソッドをもつ。 

getLengthComputable() 

このメソッドはbooleanを返す。 

512 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

getLoaded() 

このメソッドはlongを返す。 

getTotal() 

このメソッドはlongを返す。 

P.4 

Package org.w3c.dom.smil 

Interface org.w3c.dom.smil.ElementTimeControl 

org.w3c.dom.smil.ElementTimeControlインタフェースは次のようなメソッドをもつ。 

beginElementAt(float offset) 

このメソッドは戻り値をもたない。 

beginElement() 

このメソッドは戻り値をもたない。 

endElementAt(float offset) 

このメソッドは戻り値をもたない。 

endElement() 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.smil.TimeEvent 

org.w3c.dom.smil.TimeEventは,Eventを拡張する。 

org.w3c.dom.smil.TimeEventインタフェースは次のようなメソッドをもつ。 

getDetail() 

このメソッドはlongを返す。 

P.5 

Package org.w3c.dom.svg 

org.w3c.dom.svg.SVGExceptionのためのクラス定数 

org.w3c.dom.svg.SVGExceptionクラスは次のような定数をもつ。 

SVG̲WRONG̲TYPE̲ERR 

この定数はshortで値が0である。 

SVG̲INVALID̲VALUE̲ERR 

この定数はshortで値が1である。 

SVG̲MATRIX̲NOT̲INVERTABLE 

この定数はshortで値が2である。 

Class org.w3c.dom.svg.SVGException 

org.w3c.dom.svg.SVGExceptionは,java.lang.RuntimeExceptionを拡張する。 

org.w3c.dom.svg.SVGExceptionクラスは次のようなメソッドをもつ。 

getCode() 

このメソッドはshortを返す。 

setCode(short code) 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.svg.SVGDocument 

org.w3c.dom.svg.SVGDocumentは,Document, EventTargetを拡張する。 

513 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Interface org.w3c.dom.svg.SVGUseElement 

org.w3c.dom.svg.SVGUseElementは,SVGLocatableElementを拡張する。 

Interface org.w3c.dom.svg.SVGElementInstance 

org.w3c.dom.svg.SVGElementInstanceは,EventTargetを拡張する。 

org.w3c.dom.svg.SVGElementInstanceインタフェースは次のようなメソッドをもつ。 

getCorrespondingElement() 

このメソッドはSVGElementを返す。 

getCorrespondingUseElement() 

このメソッドはSVGUseElementを返す。 

Interface constants org.w3c.dom.svg.SVGSVGElement 

org.w3c.dom.svg.SVGSVGElementインタフェースは次のような定数をもつ。 

NAV̲AUTO 

この定数はshortで値が1である。 

NAV̲NEXT 

この定数はshortで値が2である。 

NAV̲PREV 

この定数はshortで値が3である。 

NAV̲UP 

この定数はshortで値が4である。 

NAV̲UP̲RIGHT 

この定数はshortで値が5である。 

NAV̲RIGHT 

この定数はshortで値が6である。 

NAV̲DOWN̲RIGHT 

この定数はshortで値が7である。 

NAV̲DOWN 

この定数はshortで値が8である。 

NAV̲DOWN̲LEFT 

この定数はshortで値が9である。 

NAV̲LEFT 

この定数はshortで値が10である。 

NAV̲UP̲LEFT 

この定数はshortで値が11である。 

Interface org.w3c.dom.svg.SVGSVGElement 

org.w3c.dom.svg.SVGSVGElementは,SVGLocatableElement, SVGTimedElementを拡張する。 

org.w3c.dom.svg.SVGSVGElementインタフェースは次のようなメソッドをもつ。 

getCurrentScale() 

このメソッドはfloatを返す。 

setCurrentScale(float currentScale) 

514 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドは戻り値をもたない。 

getCurrentRotate() 

このメソッドはfloatを返す。 

setCurrentRotate(float currentRotate) 

このメソッドは戻り値をもたない。 

getCurrentTranslate() 

このメソッドはSVGPointを返す。 

getViewport() 

このメソッドはSVGRectを返す。 

getCurrentTime() 

このメソッドはfloatを返す。 

setCurrentTime(float seconds) 

このメソッドは戻り値をもたない。 

createSVGMatrixComponents(float a, float b, float c, float d, float e, float f) 

このメソッドはSVGMatrixを返す。 

createSVGRect() 

このメソッドはSVGRectを返す。 

createSVGPoint() 

このメソッドはSVGPointを返す。 

createSVGPath() 

このメソッドはSVGPathを返す。 

createSVGRGBColor(float red, float green, float blue) 

このメソッドはSVGRGBColorを返す。 

このメソッドは,例外SVGExceptionを処理する。 

moveFocus(short motionType) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

setFocus(EventTarget theObject) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

getCurrentFocusedObject() 

このメソッドはEventTargetを返す。 

Interface org.w3c.dom.svg.SVGRGBColor 

org.w3c.dom.svg.SVGRGBColorインタフェースは次のようなメソッドをもつ。 

getRed() 

このメソッドはlongを返す。 

setRed(long red) 

このメソッドは戻り値をもたない。 

getGreen() 

このメソッドはlongを返す。 

515 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

setGreen(long green) 

このメソッドは戻り値をもたない。 

getBlue() 

このメソッドはlongを返す。 

setBlue(long blue) 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.svg.SVGRect 

org.w3c.dom.svg.SVGRectインタフェースは次のようなメソッドをもつ。 

getX() 

このメソッドはfloatを返す。 

setX(float x) 

このメソッドは戻り値をもたない。 

getY() 

このメソッドはfloatを返す。 

setY(float y) 

このメソッドは戻り値をもたない。 

getWidth() 

このメソッドはfloatを返す。 

setWidth(float width) 

このメソッドは戻り値をもたない。 

getHeight() 

このメソッドはfloatを返す。 

setHeight(float height) 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.svg.SVGPoint 

org.w3c.dom.svg.SVGPointインタフェースは次のようなメソッドをもつ。 

getX() 

このメソッドはfloatを返す。 

setX(float x) 

このメソッドは戻り値をもたない。 

getY() 

このメソッドはfloatを返す。 

setY(float y) 

このメソッドは戻り値をもたない。 

matrixTransform(SVGMatrix matrix) 

このメソッドはSVGPointを返す。 

Interface constants org.w3c.dom.svg.SVGPath 

org.w3c.dom.svg.SVGPathインタフェースは次のような定数をもつ。 

MOVE̲TO 

この定数はshortで値が77である。 

516 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

LINE̲TO 

この定数はshortで値が76である。 

CURVE̲TO 

この定数はshortで値が67である。 

QUAD̲TO 

この定数はshortで値が81である。 

CLOSE 

この定数はshortで値が90である。 

Interface org.w3c.dom.svg.SVGPath 

org.w3c.dom.svg.SVGPathインタフェースは次のようなメソッドをもつ。 

getNumberOfSegments() 

このメソッドはlongを返す。 

getSegment(long cmdIndex) 

このメソッドはshortを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getSegmentParam(long cmdIndex, long paramIndex) 

このメソッドはfloatを返す。 

このメソッドは,例外DOMExceptionを処理する。 

moveTo(float x, float y) 

このメソッドは戻り値をもたない。 

lineTo(float x, float y) 

このメソッドは戻り値をもたない。 

quadTo(float x1, float y1, float x2, float y2) 

このメソッドは戻り値をもたない。 

curveTo(float x1, float y1, float x2, float y2, float x3, float y3) 

このメソッドは戻り値をもたない。 

close() 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.svg.SVGMatrix 

org.w3c.dom.svg.SVGMatrixインタフェースは次のようなメソッドをもつ。 

getComponent(long index) 

このメソッドはfloatを返す。 

このメソッドは,例外DOMExceptionを処理する。 

mMultiply(SVGMatrix secondMatrix) 

このメソッドはSVGMatrixを返す。 

inverse() 

このメソッドはSVGMatrixを返す。 

このメソッドは,例外SVGExceptionを処理する。 

mTranslate(float x, float y) 

このメソッドはSVGMatrixを返す。 

517 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

mScale(float scaleFactor) 

このメソッドはSVGMatrixを返す。 

mRotate(float angle) 

このメソッドはSVGMatrixを返す。 

Interface org.w3c.dom.svg.SVGLocatable 

org.w3c.dom.svg.SVGLocatableインタフェースは次のようなメソッドをもつ。 

getBBox() 

このメソッドはSVGRectを返す。 

getScreenCTM() 

このメソッドはSVGMatrixを返す。 

getScreenBBox() 

このメソッドはSVGRectを返す。 

Interface org.w3c.dom.svg.SVGLocatableElement 

org.w3c.dom.svg.SVGLocatableElementは,SVGElement, SVGLocatableを拡張する。 

Interface org.w3c.dom.svg.TraitAccess 

org.w3c.dom.svg.TraitAccessインタフェースは次のようなメソッドをもつ。 

getTrait(String name) 

このメソッドはStringを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getTraitNS(String namespaceURI, String name) 

このメソッドはStringを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getFloatTrait(String name) 

このメソッドはfloatを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getFloatListTrait(String name) 

このメソッドはfloat[]を返す。 

このメソッドは,例外DOMExceptionを処理する。 

getMatrixTrait(String name) 

このメソッドはSVGMatrixを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getRectTrait(String name) 

このメソッドはSVGRectを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getPathTrait(String name) 

このメソッドはSVGPathを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getRGBColorTrait(String name) 

このメソッドはSVGRGBColorを返す。 

このメソッドは,例外DOMExceptionを処理する。 

518 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

getPresentationTrait(String name) 

このメソッドはStringを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getPresentationTraitNS(String namespaceURI, String name) 

このメソッドはStringを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getFloatPresentationTrait(String name) 

このメソッドはfloatを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getFloatListPresentationTrait(String name) 

このメソッドはfloat[]を返す。 

このメソッドは,例外DOMExceptionを処理する。 

getMatrixPresentationTrait(String name) 

このメソッドはSVGMatrixを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getRectPresentationTrait(String name) 

このメソッドはSVGRectを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getPathPresentationTrait(String name) 

このメソッドはSVGPathを返す。 

このメソッドは,例外DOMExceptionを処理する。 

getRGBColorPresentationTrait(String name) 

このメソッドはSVGRGBColorを返す。 

このメソッドは,例外DOMExceptionを処理する。 

setTrait(String name, String value) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

setTraitNS(String namespaceURI, String name, String value) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

setFloatTrait(String name, float value) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

setFloatListTrait(String name, float[] value) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

setMatrixTrait(String name, SVGMatrix matrix) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

setRectTrait(String name, SVGRect rect) 

519 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

setPathTrait(String name, SVGPath path) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

setRGBColorTrait(String name, SVGRGBColor color) 

このメソッドは戻り値をもたない。 

このメソッドは,例外DOMExceptionを処理する。 

Interface org.w3c.dom.svg.SVGElement 

org.w3c.dom.svg.SVGElementは,Element, EventTarget, TraitAccessを拡張する。 

org.w3c.dom.svg.SVGElementインタフェースは次のようなメソッドをもつ。 

getId() 

このメソッドはStringを返す。 

setId(String id) 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.svg.SVGTimedElement 

org.w3c.dom.svg.SVGTimedElementは,SVGElement, smil::ElementTimeControlを拡張する。 

org.w3c.dom.svg.SVGTimedElementインタフェースは次のようなメソッドをもつ。 

pauseElement() 

このメソッドは戻り値をもたない。 

resumeElement() 

このメソッドは戻り値をもたない。 

getIsPaused() 

このメソッドはbooleanを返す。 

Interface org.w3c.dom.svg.SVGAnimationElement 

org.w3c.dom.svg.SVGAnimationElementは,SVGTimedElementを拡張する。 

Interface org.w3c.dom.svg.SVGVisualMediaElement 

org.w3c.dom.svg.SVGVisualMediaElementは,SVGLocatableElement, SVGTimedElementを拡張する。 

Interface org.w3c.dom.svg.SVGTimer 

org.w3c.dom.svg.SVGTimerは,events::EventTargetを拡張する。 

org.w3c.dom.svg.SVGTimerインタフェースは次のようなメソッドをもつ。 

getDelay() 

このメソッドはlongを返す。 

setDelay(long delay) 

このメソッドは戻り値をもたない。 

getRepeatInterval() 

このメソッドはlongを返す。 

setRepeatInterval(long repeatInterval) 

このメソッドは戻り値をもたない。 

getRunning() 

520 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドはbooleanを返す。 

start() 

このメソッドは戻り値をもたない。 

stop() 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.svg.SVGGlobal 

org.w3c.dom.svg.SVGGlobalインタフェースは次のようなメソッドをもつ。 

createTimer(long initialInterval, long repeatInterval) 

このメソッドはSVGTimerを返す。 

getURL(String iri, AsyncStatusCallback callback) 

このメソッドは戻り値をもたない。 

postURL(String iri, String data, AsyncStatusCallback callback, String type, String encoding) 

このメソッドは戻り値をもたない。 

parseXML(String data, Document contextDoc) 

このメソッドはNodeを返す。 

Interface org.w3c.dom.svg.AsyncStatusCallback 

org.w3c.dom.svg.AsyncStatusCallbackインタフェースは次のようなメソッドをもつ。 

operationComplete(AsyncURLStatus status) 

このメソッドは戻り値をもたない。 

Interface org.w3c.dom.svg.AsyncURLStatus 

org.w3c.dom.svg.AsyncURLStatusインタフェースは次のようなメソッドをもつ。 

getSuccess() 

このメソッドはbooleanを返す。 

getContentType() 

このメソッドはStringを返す。 

getContent() 

このメソッドはStringを返す。 

Interface org.w3c.dom.svg.EventListenerInitializer2 

org.w3c.dom.svg.EventListenerInitializer2インタフェースは次のようなメソッドをもつ。 

initializeEventListeners(Element scriptElement) 

このメソッドは戻り値をもたない。 

createEventListener(Element handlerElement) 

このメソッドはEventListenerを返す。 

521 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書Q 
(規定) 

Perl言語結合 

この結合におけるフィールドは,(パラメタを渡さないときには値を取得し,パラメタを与えたときは値

を設定する)メソッドとして実装される。設定時の戻り値は,設定された後のフィールドにおけるそれで

ある。正規化が実施されるかもしれないので,それは設定に渡された値とは異なる可能性があることに注

意する。 

Q.1 Module dom 

Package W3C::DOM::DOMException 

W3C::DOM::DOMExceptionパッケージは次のような定数をもつ。 

INDEX̲SIZE̲ERR 

この定数はnumberで値が1である。 

DOMSTRING̲SIZE̲ERR 

この定数はnumberで値が2である。 

HIERARCHY̲REQUEST̲ERR 

この定数はnumberで値が3である。 

WRONG̲DOCUMENT̲ERR 

この定数はnumberで値が4である。 

INVALID̲CHARACTER̲ERR 

この定数はnumberで値が5である。 

NO̲DATA̲ALLOWED̲ERR 

この定数はnumberで値が6である。 

NO̲MODIFICATION̲ALLOWED̲ERR 

この定数はnumberで値が7である。 

NOT̲FOUND̲ERR 

この定数はnumberで値が8である。 

NOT̲SUPPORTED̲ERR 

この定数はnumberで値が9である。 

INUSE̲ATTRIBUTE̲ERR 

この定数はnumberで値が10である。 

INVALID̲STATE̲ERR 

この定数はnumberで値が11である。 

SYNTAX̲ERR 

この定数はnumberで値が12である。 

INVALID̲MODIFICATION̲ERR 

この定数はnumberで値が13である。 

NAMESPACE̲ERR 

522 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この定数はnumberで値が14である。 

INVALID̲ACCESS̲ERR 

この定数はnumberで値が15である。 

VALIDATION̲ERR 

この定数はnumberで値が16である。 

TYPE̲MISMATCH̲ERR 

この定数はnumberで値が17である。 

Class W3C::DOM::DOMException 

W3C::DOM::DOMExceptionクラスは次のようなフィールドをもつ。 

code 

このフィールドはnumberを保持する。 

Class W3C::DOM::Node 

W3C::DOM::Nodeクラスは次のようなフィールドをもつ。 

namespaceURI 

このフィールドはstringを保持する。 

localName 

このフィールドはstringを保持する。 

parentNode 

このフィールドはW3C::DOM::Nodeを保持する。 

ownerDocument 

このフィールドはW3C::DOM::Documentを保持する。 

textContent 

このフィールドはstringを保持する。 

W3C::DOM::Nodeクラスは次のようなメソッドをもつ。 

appendChild($newChild) 

このメソッドはW3C::DOM::Nodeを返す。パラメタ$newChildはW3C::DOM::Nodeである。 

insertBefore($newChild, $refChild) 

このメソッドはW3C::DOM::Nodeを返す。パラメタ$newChildはW3C::DOM::Nodeである。パラメ

タ$refChildはW3C::DOM::Nodeである。 

removeChild($oldChild) 

このメソッドはW3C::DOM::Nodeを返す。パラメタ$oldChildはW3C::DOM::Nodeである。 

cloneNode($deep) 

このメソッドはW3C::DOM::Nodeを返す。パラメタ$deepはbooleanである。 

Class W3C::DOM::Element 

W3C::DOM::ElementはW3C::DOM::Node, W3C::DOM::ElementTraversalを継承する。 

W3C::DOM::Elementクラスは次のようなメソッドをもつ。 

getAttributeNS($namespaceURI, $localName) 

このメソッドはstringを返す。パラメタ$namespaceURIはstringである。パラメタ$localNameはstring

である。 

setAttributeNS($namespaceURI, $qualifiedName, $value) 

523 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドは戻り値をもたない。パラメタ$namespaceURIはstringである。パラメタ$qualifiedName

はstringである。パラメタ$valueはstringである。 

getAttribute($name) 

このメソッドはstringを返す。パラメタ$nameはstringである。 

setAttribute($name, $value) 

このメソッドは戻り値をもたない。パラメタ$nameはstringである。パラメタ$valueはstringである。 

Class W3C::DOM::Document 

W3C::DOM::DocumentはW3C::DOM::Nodeを継承する。 

W3C::DOM::Documentクラスは次のようなフィールドをもつ。 

documentElement 

このフィールドはW3C::DOM::Elementを保持する。 

W3C::DOM::Documentクラスは次のようなメソッドをもつ。 

createElementNS($namespaceURI, $qualifiedName) 

このメソッドはW3C::DOM::Elementを返す。パラメタ$namespaceURIはstringである。パラメタ

$qualifiedNameはstringである。 

getElementById($elementId) 

このメソッドはW3C::DOM::Elementを返す。パラメタ$elementIdはstringである。 

Class W3C::DOM::ElementTraversal 

W3C::DOM::ElementTraversalクラスは次のようなフィールドをもつ。 

firstElementChild 

このフィールドはW3C::DOM::Elementを保持する。 

lastElementChild 

このフィールドはW3C::DOM::Elementを保持する。 

nextElementSibling 

このフィールドはW3C::DOM::Elementを保持する。 

previousElementSibling 

このフィールドはW3C::DOM::Elementを保持する。 

childElementCount 

このフィールドはnumberを保持する。 

Class W3C::DOM::Location 

W3C::DOM::Locationクラスは次のようなメソッドをもつ。 

assign($iri) 

このメソッドは戻り値をもたない。パラメタ$iriはstringである。 

reload() 

このメソッドは戻り値をもたない。 

Class W3C::DOM::Window 

W3C::DOM::Windowクラスは次のようなフィールドをもつ。 

parent 

このフィールドはW3C::DOM::Windowを保持する。 

location 

524 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このフィールドはW3C::DOM::Locationを保持する。 

Q.2 Module views 

Class W3C::DOM::Views::AbstractView 

W3C::DOM::Views::AbstractViewクラスは次のようなフィールドをもつ。 

document 

このフィールドはW3C::DOM::Views::DocumentViewを保持する。 

Class W3C::DOM::Views::DocumentView 

W3C::DOM::Views::DocumentViewクラスは次のようなフィールドをもつ。 

defaultView 

このフィールドはW3C::DOM::Views::AbstractViewを保持する。 

Q.3 Module events 

Class W3C::DOM::Events::EventTarget 

W3C::DOM::Events::EventTargetクラスは次のようなメソッドをもつ。 

addEventListener($type, $listener, $useCapture) 

このメソッドは戻り値をもたない。パラメタ$typeはstringである。パラメタ$listenerは

W3C::DOM::Events::EventListenerである。パラメタ$useCaptureはbooleanである。 

removeEventListener($type, $listener, $useCapture) 

このメソッドは戻り値をもたない。パラメタ$typeはstringである。パラメタ$listenerは

W3C::DOM::Events::EventListenerである。パラメタ$useCaptureはbooleanである。 

Class W3C::DOM::Events::EventListener 

W3C::DOM::Events::EventListenerクラスは次のようなメソッドをもつ。 

handleEvent($evt) 

このメソッドは戻り値をもたない。パラメタ$evtはW3C::DOM::Events::Eventである。 

Class W3C::DOM::Events::Event 

W3C::DOM::Events::Eventクラスは次のようなフィールドをもつ。 

target 

このフィールドはW3C::DOM::Events::EventTargetを保持する。 

currentTarget 

このフィールドはW3C::DOM::Events::EventTargetを保持する。 

type 

このフィールドはstringを保持する。 

cancelable 

このフィールドはbooleanを保持する。 

defaultPrevented 

このフィールドはbooleanを保持する。 

W3C::DOM::Events::Eventクラスは次のようなメソッドをもつ。 

stopPropagation() 

このメソッドは戻り値をもたない。 

525 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

preventDefault() 

このメソッドは戻り値をもたない。 

Class W3C::DOM::Events::MouseEvent 

W3C::DOM::Events::MouseEventはW3C::DOM::Events::UIEventを継承する。 

W3C::DOM::Events::MouseEventクラスは次のようなフィールドをもつ。 

screenX 

このフィールドはnumberを保持する。 

screenY 

このフィールドはnumberを保持する。 

clientX 

このフィールドはnumberを保持する。 

clientY 

このフィールドはnumberを保持する。 

button 

このフィールドはnumberを保持する。 

Class W3C::DOM::Events::MouseWheelEvent 

W3C::DOM::Events::MouseWheelEventはW3C::DOM::Events::MouseEventを継承する。 

W3C::DOM::Events::MouseWheelEventクラスは次のようなフィールドをもつ。 

wheelDelta 

このフィールドはnumberを保持する。 

Class W3C::DOM::Events::TextEvent 

W3C::DOM::Events::TextEventはW3C::DOM::Events::UIEventを継承する。 

W3C::DOM::Events::TextEventクラスは次のようなフィールドをもつ。 

data 

このフィールドはstringを保持する。 

Class W3C::DOM::Events::KeyboardEvent 

W3C::DOM::Events::KeyboardEventはW3C::DOM::Events::UIEventを継承する。 

W3C::DOM::Events::KeyboardEventクラスは次のようなフィールドをもつ。 

keyIdentifier 

このフィールドはstringを保持する。 

Class W3C::DOM::Events::UIEvent 

W3C::DOM::Events::UIEventはW3C::DOM::Events::Eventを継承する。 

W3C::DOM::Events::UIEventクラスは次のようなフィールドをもつ。 

detail 

このフィールドはnumberを保持する。 

Class W3C::DOM::Events::ProgressEvent 

W3C::DOM::Events::ProgressEventはW3C::DOM::Events::Eventを継承する。 

W3C::DOM::Events::ProgressEventクラスは次のようなフィールドをもつ。 

lengthComputable 

このフィールドはbooleanを保持する。 

526 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

loaded 

このフィールドはnumberを保持する。 

total 

このフィールドはnumberを保持する。 

Q.4 Module smil 

Class W3C::DOM::SMIL::ElementTimeControl 

W3C::DOM::SMIL::ElementTimeControlクラスは次のようなメソッドをもつ。 

beginElementAt($offset) 

このメソッドは戻り値をもたない。パラメタ$offsetはnumberである。 

beginElement() 

このメソッドは戻り値をもたない。 

endElementAt($offset) 

このメソッドは戻り値をもたない。パラメタ$offsetはnumberである。 

endElement() 

このメソッドは戻り値をもたない。 

Class W3C::DOM::SMIL::TimeEvent 

W3C::DOM::SMIL::TimeEventはW3C::DOM::Events::Eventを継承する。 

W3C::DOM::SMIL::TimeEventクラスは次のようなフィールドをもつ。 

detail 

このフィールドはnumberを保持する。 

Q.5 Module svg 

Package W3C::DOM::SVG::SVGException 

W3C::DOM::SVG::SVGExceptionパッケージは次のような定数をもつ。 

SVG̲WRONG̲TYPE̲ERR 

この定数はnumberで値が0である。 

SVG̲INVALID̲VALUE̲ERR 

この定数はnumberで値が1である。 

SVG̲MATRIX̲NOT̲INVERTABLE 

この定数はnumberで値が2である。 

Class W3C::DOM::SVG::SVGException 

W3C::DOM::SVG::SVGExceptionクラスは次のようなフィールドをもつ。 

code 

このフィールドはnumberを保持する。 

Class W3C::DOM::SVG::SVGDocument 

W3C::DOM::SVG::SVGDocumentはW3C::DOM::Document, W3C::DOM::Events::EventTargetを継承す

る。 

Class W3C::DOM::SVG::SVGUseElement 

W3C::DOM::SVG::SVGUseElementはW3C::DOM::SVG::SVGLocatableElementを継承する。 

527 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Class W3C::DOM::SVG::SVGElementInstance 

W3C::DOM::SVG::SVGElementInstanceはW3C::DOM::Events::EventTargetを継承する。 

W3C::DOM::SVG::SVGElementInstanceクラスは次のようなフィールドをもつ。 

correspondingElement 

このフィールドはW3C::DOM::SVG::SVGElementを保持する。 

correspondingUseElement 

このフィールドはW3C::DOM::SVG::SVGUseElementを保持する。 

Package W3C::DOM::SVG::SVGSVGElement 

W3C::DOM::SVG::SVGSVGElementパッケージは次のような定数をもつ。 

NAV̲AUTO 

この定数はnumberで値が1である。 

NAV̲NEXT 

この定数はnumberで値が2である。 

NAV̲PREV 

この定数はnumberで値が3である。 

NAV̲UP 

この定数はnumberで値が4である。 

NAV̲UP̲RIGHT 

この定数はnumberで値が5である。 

NAV̲RIGHT 

この定数はnumberで値が6である。 

NAV̲DOWN̲RIGHT 

この定数はnumberで値が7である。 

NAV̲DOWN 

この定数はnumberで値が8である。 

NAV̲DOWN̲LEFT 

この定数はnumberで値が9である。 

NAV̲LEFT 

この定数はnumberで値が10である。 

NAV̲UP̲LEFT 

この定数はnumberで値が11である。 

Class W3C::DOM::SVG::SVGSVGElement 

W3C::DOM::SVG::SVGSVGElement

W3C::DOM::SVG::SVGLocatableElement, 

W3C::DOM::SVG::SVGTimedElementを継承する。 

W3C::DOM::SVG::SVGSVGElementクラスは次のようなフィールドをもつ。 

currentScale 

このフィールドはnumberを保持する。 

currentRotate 

このフィールドはnumberを保持する。 

currentTranslate 

528 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このフィールドはW3C::DOM::SVG::SVGPointを保持する。 

viewport 

このフィールドはW3C::DOM::SVG::SVGRectを保持する。 

W3C::DOM::SVG::SVGSVGElementクラスは次のようなメソッドをもつ。 

getCurrentTime() 

このメソッドはnumberを返す。 

setCurrentTime($seconds) 

このメソッドは戻り値をもたない。パラメタ$secondsはnumberである。 

createSVGMatrixComponents($a, $b, $c, $d, $e, $f) 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。パラメタ$aはnumberである。パラメタ$bは

numberである。パラメタ$cはnumberである。パラメタ$dはnumberである。パラメタ$eはnumber

である。パラメタ$fはnumberである。 

createSVGRect() 

このメソッドはW3C::DOM::SVG::SVGRectを返す。 

createSVGPoint() 

このメソッドはW3C::DOM::SVG::SVGPointを返す。 

createSVGPath() 

このメソッドはW3C::DOM::SVG::SVGPathを返す。 

createSVGRGBColor($red, $green, $blue) 

このメソッドはW3C::DOM::SVG::SVGRGBColorを返す。パラメタ$redはnumberである。パラメタ

$greenはnumberである。パラメタ$blueはnumberである。 

moveFocus($motionType) 

このメソッドは戻り値をもたない。パラメタ$motionTypeはnumberである。 

setFocus($theObject) 

このメソッドは戻り値をもたない。パラメタ$theObjectはW3C::DOM::Events::EventTargetである。 

getCurrentFocusedObject() 

このメソッドはW3C::DOM::Events::EventTargetを返す。 

Class W3C::DOM::SVG::SVGRGBColor 

W3C::DOM::SVG::SVGRGBColorクラスは次のようなフィールドをもつ。 

red 

このフィールドはnumberを保持する。 

green 

このフィールドはnumberを保持する。 

blue 

このフィールドはnumberを保持する。 

Class W3C::DOM::SVG::SVGRect 

W3C::DOM::SVG::SVGRectクラスは次のようなフィールドをもつ。 

このフィールドはnumberを保持する。 

529 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このフィールドはnumberを保持する。 

width 

このフィールドはnumberを保持する。 

height 

このフィールドはnumberを保持する。 

Class W3C::DOM::SVG::SVGPoint 

W3C::DOM::SVG::SVGPointクラスは次のようなフィールドをもつ。 

このフィールドはnumberを保持する。 

このフィールドはnumberを保持する。 

W3C::DOM::SVG::SVGPointクラスは次のようなメソッドをもつ。 

matrixTransform($matrix) 

このメソッドは

W3C::DOM::SVG::SVGPoint

を返す。パラメタ$matrix

W3C::DOM::SVG::SVGMatrixである。 

Package W3C::DOM::SVG::SVGPath 

W3C::DOM::SVG::SVGPathパッケージは次のような定数をもつ。 

MOVE̲TO 

この定数はnumberで値が77である。 

LINE̲TO 

この定数はnumberで値が76である。 

CURVE̲TO 

この定数はnumberで値が67である。 

QUAD̲TO 

この定数はnumberで値が81である。 

CLOSE 

この定数はnumberで値が90である。 

Class W3C::DOM::SVG::SVGPath 

W3C::DOM::SVG::SVGPathクラスは次のようなフィールドをもつ。 

numberOfSegments 

このフィールドはnumberを保持する。 

W3C::DOM::SVG::SVGPathクラスは次のようなメソッドをもつ。 

getSegment($cmdIndex) 

このメソッドはnumberを返す。パラメタ$cmdIndexはnumberである。 

getSegmentParam($cmdIndex, $paramIndex) 

このメソッドはnumberを返す。パラメタ$cmdIndexはnumberである。パラメタ$paramIndexはnumber

である。 

moveTo($x, $y) 

このメソッドは戻り値をもたない。パラメタ$xはnumberである。パラメタ$yはnumberである。 

lineTo($x, $y) 

530 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドは戻り値をもたない。パラメタ$xはnumberである。パラメタ$yはnumberである。 

quadTo($x1, $y1, $x2, $y2) 

このメソッドは戻り値をもたない。パラメタ$x1はnumberである。パラメタ$y1はnumberである。

パラメタ$x2はnumberである。パラメタ$y2はnumberである。 

curveTo($x1, $y1, $x2, $y2, $x3, $y3) 

このメソッドは戻り値をもたない。パラメタ$x1はnumberである。パラメタ$y1はnumberである。

パラメタ$x2はnumberである。パラメタ$y2はnumberである。パラメタ$x3はnumberである。パラ

メタ$y3はnumberである。 

close() 

このメソッドは戻り値をもたない。 

Class W3C::DOM::SVG::SVGMatrix 

W3C::DOM::SVG::SVGMatrixクラスは次のようなメソッドをもつ。 

getComponent($index) 

このメソッドはnumberを返す。パラメタ$indexはnumberである。 

mMultiply($secondMatrix) 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。パラメタ$secondMatrixは

W3C::DOM::SVG::SVGMatrixである。 

inverse() 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。 

mTranslate($x, $y) 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。パラメタ$xはnumberである。パラメタ$yは

numberである。 

mScale($scaleFactor) 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。パラメタ$scaleFactorはnumberである。 

mRotate($angle) 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。パラメタ$angleはnumberである。 

Class W3C::DOM::SVG::SVGLocatable 

W3C::DOM::SVG::SVGLocatableクラスは次のようなメソッドをもつ。 

getBBox() 

このメソッドはW3C::DOM::SVG::SVGRectを返す。 

getScreenCTM() 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。 

getScreenBBox() 

このメソッドはW3C::DOM::SVG::SVGRectを返す。 

Class W3C::DOM::SVG::SVGLocatableElement 

W3C::DOM::SVG::SVGLocatableElement

W3C::DOM::SVG::SVGElement, 

W3C::DOM::SVG::SVGLocatableを継承する。 

Class W3C::DOM::SVG::TraitAccess 

W3C::DOM::SVG::TraitAccessクラスは次のようなメソッドをもつ。 

getTrait($name) 

531 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドはstringを返す。パラメタ$nameはstringである。 

getTraitNS($namespaceURI, $name) 

このメソッドはstringを返す。パラメタ$namespaceURIはstringである。パラメタ$nameはstringで

ある。 

getFloatTrait($name) 

このメソッドはnumberを返す。パラメタ$nameはstringである。 

getFloatListTrait($name) 

このメソッドはPerl arrayを返す。パラメタ$nameはstringである。 

getMatrixTrait($name) 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。パラメタ$nameはstringである。 

getRectTrait($name) 

このメソッドはW3C::DOM::SVG::SVGRectを返す。パラメタ$nameはstringである。 

getPathTrait($name) 

このメソッドはW3C::DOM::SVG::SVGPathを返す。パラメタ$nameはstringである。 

getRGBColorTrait($name) 

このメソッドはW3C::DOM::SVG::SVGRGBColorを返す。パラメタ$nameはstringである。 

getPresentationTrait($name) 

このメソッドはstringを返す。パラメタ$nameはstringである。 

getPresentationTraitNS($namespaceURI, $name) 

このメソッドはstringを返す。パラメタ$namespaceURIはstringである。パラメタ$nameはstringで

ある。 

getFloatPresentationTrait($name) 

このメソッドはnumberを返す。パラメタ$nameはstringである。 

getFloatListPresentationTrait($name) 

このメソッドはPerl arrayを返す。パラメタ$nameはstringである。 

getMatrixPresentationTrait($name) 

このメソッドはW3C::DOM::SVG::SVGMatrixを返す。パラメタ$nameはstringである。 

getRectPresentationTrait($name) 

このメソッドはW3C::DOM::SVG::SVGRectを返す。パラメタ$nameはstringである。 

getPathPresentationTrait($name) 

このメソッドはW3C::DOM::SVG::SVGPathを返す。パラメタ$nameはstringである。 

getRGBColorPresentationTrait($name) 

このメソッドはW3C::DOM::SVG::SVGRGBColorを返す。パラメタ$nameはstringである。 

setTrait($name, $value) 

このメソッドは戻り値をもたない。パラメタ$nameはstringである。パラメタ$valueはstringである。 

setTraitNS($namespaceURI, $name, $value) 

このメソッドは戻り値をもたない。パラメタ$namespaceURIはstringである。パラメタ$nameはstring

である。パラメタ$valueはstringである。 

setFloatTrait($name, $value) 

このメソッドは戻り値をもたない。パラメタ$nameはstringである。パラメタ$valueはnumberであ

532 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

る。 

setFloatListTrait($name, $value) 

このメソッドは戻り値をもたない。パラメタ$nameはstringである。パラメタ$valueはPerl arrayで

ある。 

setMatrixTrait($name, $matrix) 

このメソッドは戻り値をもたない。パラメタ$nameはstringである。パラメタ$matrixは

W3C::DOM::SVG::SVGMatrixである。 

setRectTrait($name, $rect) 

このメソッドは戻り値をもたない。パラメタ$nameはstringである。パラメタ$rectは

W3C::DOM::SVG::SVGRectである。 

setPathTrait($name, $path) 

このメソッドは戻り値をもたない。パラメタ$nameはstringである。パラメタ$pathは

W3C::DOM::SVG::SVGPathである。 

setRGBColorTrait($name, $color) 

このメソッドは戻り値をもたない。パラメタ$nameはstringである。パラメタ$colorは

W3C::DOM::SVG::SVGRGBColorである。 

Class W3C::DOM::SVG::SVGElement 

W3C::DOM::SVG::SVGElement

W3C::DOM::Element, 

W3C::DOM::Events::EventTarget, 

W3C::DOM::SVG::TraitAccessを継承する。 

W3C::DOM::SVG::SVGElementクラスは次のようなフィールドをもつ。 

id 

このフィールドはstringを保持する。 

Class W3C::DOM::SVG::SVGTimedElement 

W3C::DOM::SVG::SVGTimedElementはW3C::DOM::SVG::SVGElement, ::smil::ElementTimeControlを

継承する。 

W3C::DOM::SVG::SVGTimedElementクラスは次のようなフィールドをもつ。 

isPaused 

このフィールドはbooleanを保持する。 

W3C::DOM::SVG::SVGTimedElementクラスは次のようなメソッドをもつ。 

pauseElement() 

このメソッドは戻り値をもたない。 

resumeElement() 

このメソッドは戻り値をもたない。 

Class W3C::DOM::SVG::SVGAnimationElement 

W3C::DOM::SVG::SVGAnimationElementはW3C::DOM::SVG::SVGTimedElementを継承する。 

Class W3C::DOM::SVG::SVGVisualMediaElement 

W3C::DOM::SVG::SVGVisualMediaElement

W3C::DOM::SVG::SVGLocatableElement, 

W3C::DOM::SVG::SVGTimedElementを継承する。 

Class W3C::DOM::SVG::SVGTimer 

W3C::DOM::SVG::SVGTimerは::events::EventTargetを継承する。 

533 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

W3C::DOM::SVG::SVGTimerクラスは次のようなフィールドをもつ。 

delay 

このフィールドはnumberを保持する。 

repeatInterval 

このフィールドはnumberを保持する。 

running 

このフィールドはbooleanを保持する。 

W3C::DOM::SVG::SVGTimerクラスは次のようなメソッドをもつ。 

start() 

このメソッドは戻り値をもたない。 

stop() 

このメソッドは戻り値をもたない。 

Class W3C::DOM::SVG::SVGGlobal 

W3C::DOM::SVG::SVGGlobalクラスは次のようなメソッドをもつ。 

createTimer($initialInterval, $repeatInterval) 

このメソッドはW3C::DOM::SVG::SVGTimerを返す。パラメタ$initialIntervalはnumberである。パ

ラメタ$repeatIntervalはnumberである。 

getURL($iri, $callback) 

このメソッドは戻り値をもたない。パラメタ$iriはstringである。パラメタ$callbackは

W3C::DOM::SVG::AsyncStatusCallbackである。 

postURL($iri, $data, $callback, $type, $encoding) 

このメソッドは戻り値をもたない。パラメタ$iriはstringである。パラメタ$dataはstringである。

パラメタ$callbackはW3C::DOM::SVG::AsyncStatusCallbackである。パラメタ$typeはstringである。パ

ラメタ$encodingはstringである。 

parseXML($data, $contextDoc) 

このメソッドはW3C::DOM::Nodeを返す。パラメタ$dataはstringである。パラメタ$contextDocは

W3C::DOM::Documentである。 

Class W3C::DOM::SVG::AsyncStatusCallback 

W3C::DOM::SVG::AsyncStatusCallbackクラスは次のようなメソッドをもつ。 

operationComplete($status) 

このメソッドは戻り値をもたない。パラメタ$statusはW3C::DOM::SVG::AsyncURLStatusである。 

Class W3C::DOM::SVG::AsyncURLStatus 

W3C::DOM::SVG::AsyncURLStatusクラスは次のようなフィールドをもつ。 

success 

このフィールドはbooleanを保持する。 

contentType 

このフィールドはstringを保持する。 

content 

このフィールドはstringを保持する。 

Class W3C::DOM::SVG::EventListenerInitializer2 

534 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

W3C::DOM::SVG::EventListenerInitializer2クラスは次のようなメソッドをもつ。 

initializeEventListeners($scriptElement) 

このメソッドは戻り値をもたない。パラメタ$scriptElementはW3C::DOM::Elementである。 

createEventListener($handlerElement) 

このメソッドはW3C::DOM::Events::EventListenerを返す。パラメタ$handlerElementは

W3C::DOM::Elementである。 

535 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書R 
(規定) 

Python言語結合 

R.1 Module dom 

Error constants for DOMException 

DOMExceptionクラスは次のような定数をもつ。 

INDEX̲SIZE̲ERR 

この定数はintで値が1である。 

DOMSTRING̲SIZE̲ERR 

この定数はintで値が2である。 

HIERARCHY̲REQUEST̲ERR 

この定数はintで値が3である。 

WRONG̲DOCUMENT̲ERR 

この定数はintで値が4である。 

INVALID̲CHARACTER̲ERR 

この定数はintで値が5である。 

NO̲DATA̲ALLOWED̲ERR 

この定数はintで値が6である。 

NO̲MODIFICATION̲ALLOWED̲ERR 

この定数はintで値が7である。 

NOT̲FOUND̲ERR 

この定数はintで値が8である。 

NOT̲SUPPORTED̲ERR 

この定数はintで値が9である。 

INUSE̲ATTRIBUTE̲ERR 

この定数はintで値が10である。 

INVALID̲STATE̲ERR 

この定数はintで値が11である。 

SYNTAX̲ERR 

この定数はintで値が12である。 

INVALID̲MODIFICATION̲ERR 

この定数はintで値が13である。 

NAMESPACE̲ERR 

この定数はintで値が14である。 

INVALID̲ACCESS̲ERR 

この定数はintで値が15である。 

VALIDATION̲ERR 

この定数はintで値が16である。 

536 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

TYPE̲MISMATCH̲ERR 

この定数はintで値が17である。 

Exception Class DOMException 

DOMExceptionクラスは次のような属性をもつ。 

code 

この属性はintを保持する。 

Class Node 

Nodeクラスは次のような属性をもつ。 

namespaceURI 

この属性はunicodeを保持する。 

localName 

この属性はunicodeを保持する。 

parentNode 

この属性はNodeを保持する。 

ownerDocument 

この属性はDocumentを保持する。 

textContent 

この属性はunicodeを保持する。 

Nodeクラスは次のようなメソッドをもつ。 

appendChild(newChild) 

このメソッドはNodeを返す。引数newChildはNodeである。 

insertBefore(newChild, refChild) 

このメソッドはNodeを返す。引数newChildはNodeである。引数refChildはNodeである。 

removeChild(oldChild) 

このメソッドはNodeを返す。引数oldChildはNodeである。 

cloneNode(deep) 

このメソッドはNodeを返す。引数deepはbooleanである。 

Class Element 

ElementはNode, ElementTraversalを継承する。 

Elementクラスは次のようなメソッドをもつ。 

getAttributeNS(namespaceURI, localName) 

このメソッドはunicodeを返す。引数namespaceURIはunicodeである。引数localNameはunicode

である。 

setAttributeNS(namespaceURI, qualifiedName, value) 

このメソッドは戻り値をもたない。引数namespaceURIはunicodeである。引数qualifiedNameは

unicodeである。引数valueはunicodeである。 

getAttribute(name) 

このメソッドはunicodeを返す。引数nameはunicodeである。 

setAttribute(name, value) 

このメソッドは戻り値をもたない。引数nameはunicodeである。引数valueはunicodeである。 

537 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Class Document 

DocumentはNodeを継承する。 

Documentクラスは次のような属性をもつ。 

documentElement 

この属性はElementを保持する。 

Documentクラスは次のようなメソッドをもつ。 

createElementNS(namespaceURI, qualifiedName) 

このメソッドはElementを返す。引数namespaceURIはunicodeである。引数qualifiedNameはunicode

である。 

getElementById(elementId) 

このメソッドはElementを返す。引数elementIdはunicodeである。 

Class ElementTraversal 

ElementTraversalクラスは次のような属性をもつ。 

firstElementChild 

この属性はElementを保持する。 

lastElementChild 

この属性はElementを保持する。 

nextElementSibling 

この属性はElementを保持する。 

previousElementSibling 

この属性はElementを保持する。 

childElementCount 

この属性はlongを保持する。 

Class Location 

Locationクラスは次のようなメソッドをもつ。 

assign(iri) 

このメソッドは戻り値をもたない。引数iriはunicodeである。 

reload() 

このメソッドは戻り値をもたない。 

Class Window 

Windowクラスは次のような属性をもつ。 

parent 

この属性はWindowを保持する。 

location 

この属性はLocationを保持する。 

R.2 Module views 

Class AbstractView 

AbstractViewクラスは次のような属性をもつ。 

document 

538 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この属性はDocumentViewを保持する。 

Class DocumentView 

DocumentViewクラスは次のような属性をもつ。 

defaultView 

この属性はAbstractViewを保持する。 

R.3 Module events 

Class EventTarget 

EventTargetクラスは次のようなメソッドをもつ。 

addEventListener(type, listener, useCapture) 

このメソッドは戻り値をもたない。引数typeはunicodeである。引数listenerはEventListenerである。

引数useCaptureはbooleanである。 

removeEventListener(type, listener, useCapture) 

このメソッドは戻り値をもたない。引数typeはunicodeである。引数listenerはEventListenerである。

引数useCaptureはbooleanである。 

Class EventListener 

EventListenerクラスは次のようなメソッドをもつ。 

handleEvent(evt) 

このメソッドは戻り値をもたない。引数evtはEventである。 

Class Event 

Eventクラスは次のような属性をもつ。 

target 

この属性はEventTargetを保持する。 

currentTarget 

この属性はEventTargetを保持する。 

type 

この属性はunicodeを保持する。 

cancelable 

この属性はbooleanを保持する。 

defaultPrevented 

この属性はbooleanを保持する。 

Eventクラスは次のようなメソッドをもつ。 

stopPropagation() 

このメソッドは戻り値をもたない。 

preventDefault() 

このメソッドは戻り値をもたない。 

Class MouseEvent 

MouseEventはUIEventを継承する。 

MouseEventクラスは次のような属性をもつ。 

screenX 

539 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この属性はlongを保持する。 

screenY 

この属性はlongを保持する。 

clientX 

この属性はlongを保持する。 

clientY 

この属性はlongを保持する。 

button 

この属性はintを保持する。 

Class MouseWheelEvent 

MouseWheelEventはMouseEventを継承する。 

MouseWheelEventクラスは次のような属性をもつ。 

wheelDelta 

この属性はlongを保持する。 

Class TextEvent 

TextEventはUIEventを継承する。 

TextEventクラスは次のような属性をもつ。 

data 

この属性はunicodeを保持する。 

Class KeyboardEvent 

KeyboardEventはUIEventを継承する。 

KeyboardEventクラスは次のような属性をもつ。 

keyIdentifier 

この属性はunicodeを保持する。 

Class UIEvent 

UIEventはEventを継承する。 

UIEventクラスは次のような属性をもつ。 

detail 

この属性はlongを保持する。 

Class ProgressEvent 

ProgressEventはEventを継承する。 

ProgressEventクラスは次のような属性をもつ。 

lengthComputable 

この属性はbooleanを保持する。 

loaded 

この属性はlongを保持する。 

total 

この属性はlongを保持する。 

540 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

R.4 Module smil 

Class ElementTimeControl 

ElementTimeControlクラスは次のようなメソッドをもつ。 

beginElementAt(offset) 

このメソッドは戻り値をもたない。引数offsetはfloatである。 

beginElement() 

このメソッドは戻り値をもたない。 

endElementAt(offset) 

このメソッドは戻り値をもたない。引数offsetはfloatである。 

endElement() 

このメソッドは戻り値をもたない。 

Class TimeEvent 

TimeEventはEventを継承する。 

TimeEventクラスは次のような属性をもつ。 

detail 

この属性はlongを保持する。 

R.5 Module svg 

Error constants for SVGException 

SVGExceptionクラスは次のような定数をもつ。 

SVG̲WRONG̲TYPE̲ERR 

この定数はintで値が0である。 

SVG̲INVALID̲VALUE̲ERR 

この定数はintで値が1である。 

SVG̲MATRIX̲NOT̲INVERTABLE 

この定数はintで値が2である。 

Exception Class SVGException 

SVGExceptionクラスは次のような属性をもつ。 

code 

この属性はintを保持する。 

Class SVGDocument 

SVGDocumentはDocument, EventTargetを継承する。 

Class SVGUseElement 

SVGUseElementはSVGLocatableElementを継承する。 

Class SVGElementInstance 

SVGElementInstanceはEventTargetを継承する。 

SVGElementInstanceクラスは次のような属性をもつ。 

correspondingElement 

この属性はSVGElementを保持する。 

correspondingUseElement 

541 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この属性はSVGUseElementを保持する。 

Class constants SVGSVGElement 

SVGSVGElementクラスは次のような定数をもつ。 

NAV̲AUTO 

この定数はintで値が1である。 

NAV̲NEXT 

この定数はintで値が2である。 

NAV̲PREV 

この定数はintで値が3である。 

NAV̲UP 

この定数はintで値が4である。 

NAV̲UP̲RIGHT 

この定数はintで値が5である。 

NAV̲RIGHT 

この定数はintで値が6である。 

NAV̲DOWN̲RIGHT 

この定数はintで値が7である。 

NAV̲DOWN 

この定数はintで値が8である。 

NAV̲DOWN̲LEFT 

この定数はintで値が9である。 

NAV̲LEFT 

この定数はintで値が10である。 

NAV̲UP̲LEFT 

この定数はintで値が11である。 

Class SVGSVGElement 

SVGSVGElementはSVGLocatableElement, SVGTimedElementを継承する。 

SVGSVGElementクラスは次のような属性をもつ。 

currentScale 

この属性はfloatを保持する。 

currentRotate 

この属性はfloatを保持する。 

currentTranslate 

この属性はSVGPointを保持する。 

viewport 

この属性はSVGRectを保持する。 

SVGSVGElementクラスは次のようなメソッドをもつ。 

getCurrentTime() 

このメソッドはfloatを返す。 

setCurrentTime(seconds) 

542 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドは戻り値をもたない。引数secondsはfloatである。 

createSVGMatrixComponents(a, b, c, d, e, f) 

このメソッドはSVGMatrixを返す。引数aはfloatである。引数bはfloatである。引数cはfloatで

ある。引数dはfloatである。引数eはfloatである。引数fはfloatである。 

createSVGRect() 

このメソッドはSVGRectを返す。 

createSVGPoint() 

このメソッドはSVGPointを返す。 

createSVGPath() 

このメソッドはSVGPathを返す。 

createSVGRGBColor(red, green, blue) 

このメソッドはSVGRGBColorを返す。引数redはfloatである。引数greenはfloatである。引数blue

はfloatである。 

moveFocus(motionType) 

このメソッドは戻り値をもたない。引数motionTypeはintである。 

setFocus(theObject) 

このメソッドは戻り値をもたない。引数theObjectはEventTargetである。 

getCurrentFocusedObject() 

このメソッドはEventTargetを返す。 

Class SVGRGBColor 

SVGRGBColorクラスは次のような属性をもつ。 

red 

この属性はlongを保持する。 

green 

この属性はlongを保持する。 

blue 

この属性はlongを保持する。 

Class SVGRect 

SVGRectクラスは次のような属性をもつ。 

この属性はfloatを保持する。 

この属性はfloatを保持する。 

width 

この属性はfloatを保持する。 

height 

この属性はfloatを保持する。 

Class SVGPoint 

SVGPointクラスは次のような属性をもつ。 

543 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この属性はfloatを保持する。 

この属性はfloatを保持する。 

SVGPointクラスは次のようなメソッドをもつ。 

matrixTransform(matrix) 

このメソッドはSVGPointを返す。引数matrixはSVGMatrixである。 

Class constants SVGPath 

SVGPathクラスは次のような定数をもつ。 

MOVE̲TO 

この定数はintで値が77である。 

LINE̲TO 

この定数はintで値が76である。 

CURVE̲TO 

この定数はintで値が67である。 

QUAD̲TO 

この定数はintで値が81である。 

CLOSE 

この定数はintで値が90である。 

Class SVGPath 

SVGPathクラスは次のような属性をもつ。 

numberOfSegments 

この属性はlongを保持する。 

SVGPathクラスは次のようなメソッドをもつ。 

getSegment(cmdIndex) 

このメソッドはintを返す。引数cmdIndexはlongである。 

getSegmentParam(cmdIndex, paramIndex) 

このメソッドはfloatを返す。引数cmdIndexはlongである。引数paramIndexはlongである。 

moveTo(x, y) 

このメソッドは戻り値をもたない。引数xはfloatである。引数yはfloatである。 

lineTo(x, y) 

このメソッドは戻り値をもたない。引数xはfloatである。引数yはfloatである。 

quadTo(x1, y1, x2, y2) 

このメソッドは戻り値をもたない。引数x1はfloatである。引数y1はfloatである。引数x2はfloat

である。引数y2はfloatである。 

curveTo(x1, y1, x2, y2, x3, y3) 

このメソッドは戻り値をもたない。引数x1はfloatである。引数y1はfloatである。引数x2はfloat

である。引数y2はfloatである。引数x3はfloatである。引数y3はfloatである。 

close() 

このメソッドは戻り値をもたない。 

Class SVGMatrix 

544 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

SVGMatrixクラスは次のようなメソッドをもつ。 

getComponent(index) 

このメソッドはfloatを返す。引数indexはlongである。 

mMultiply(secondMatrix) 

このメソッドはSVGMatrixを返す。引数secondMatrixはSVGMatrixである。 

inverse() 

このメソッドはSVGMatrixを返す。 

mTranslate(x, y) 

このメソッドはSVGMatrixを返す。引数xはfloatである。引数yはfloatである。 

mScale(scaleFactor) 

このメソッドはSVGMatrixを返す。引数scaleFactorはfloatである。 

mRotate(angle) 

このメソッドはSVGMatrixを返す。引数angleはfloatである。 

Class SVGLocatable 

SVGLocatableクラスは次のようなメソッドをもつ。 

getBBox() 

このメソッドはSVGRectを返す。 

getScreenCTM() 

このメソッドはSVGMatrixを返す。 

getScreenBBox() 

このメソッドはSVGRectを返す。 

Class SVGLocatableElement 

SVGLocatableElementはSVGElement, SVGLocatableを継承する。 

Class TraitAccess 

TraitAccessクラスは次のようなメソッドをもつ。 

getTrait(name) 

このメソッドはunicodeを返す。引数nameはunicodeである。 

getTraitNS(namespaceURI, name) 

このメソッドはunicodeを返す。引数namespaceURIはunicodeである。引数nameはunicodeである。 

getFloatTrait(name) 

このメソッドはfloatを返す。引数nameはunicodeである。 

getFloatListTrait(name) 

このメソッドはPython listを返す。引数nameはunicodeである。 

getMatrixTrait(name) 

このメソッドはSVGMatrixを返す。引数nameはunicodeである。 

getRectTrait(name) 

このメソッドはSVGRectを返す。引数nameはunicodeである。 

getPathTrait(name) 

このメソッドはSVGPathを返す。引数nameはunicodeである。 

getRGBColorTrait(name) 

545 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドはSVGRGBColorを返す。引数nameはunicodeである。 

getPresentationTrait(name) 

このメソッドはunicodeを返す。引数nameはunicodeである。 

getPresentationTraitNS(namespaceURI, name) 

このメソッドはunicodeを返す。引数namespaceURIはunicodeである。引数nameはunicodeである。 

getFloatPresentationTrait(name) 

このメソッドはfloatを返す。引数nameはunicodeである。 

getFloatListPresentationTrait(name) 

このメソッドはPython listを返す。引数nameはunicodeである。 

getMatrixPresentationTrait(name) 

このメソッドはSVGMatrixを返す。引数nameはunicodeである。 

getRectPresentationTrait(name) 

このメソッドはSVGRectを返す。引数nameはunicodeである。 

getPathPresentationTrait(name) 

このメソッドはSVGPathを返す。引数nameはunicodeである。 

getRGBColorPresentationTrait(name) 

このメソッドはSVGRGBColorを返す。引数nameはunicodeである。 

setTrait(name, value) 

このメソッドは戻り値をもたない。引数nameはunicodeである。引数valueはunicodeである。 

setTraitNS(namespaceURI, name, value) 

このメソッドは戻り値をもたない。引数namespaceURIはunicodeである。引数nameはunicodeで

ある。引数valueはunicodeである。 

setFloatTrait(name, value) 

このメソッドは戻り値をもたない。引数nameはunicodeである。引数valueはfloatである。 

setFloatListTrait(name, value) 

このメソッドは戻り値をもたない。引数nameはunicodeである。引数valueはPython listである。 

setMatrixTrait(name, matrix) 

このメソッドは戻り値をもたない。引数nameはunicodeである。引数matrixはSVGMatrixである。 

setRectTrait(name, rect) 

このメソッドは戻り値をもたない。引数nameはunicodeである。引数rectはSVGRectである。 

setPathTrait(name, path) 

このメソッドは戻り値をもたない。引数nameはunicodeである。引数pathはSVGPathである。 

setRGBColorTrait(name, color) 

このメソッドは戻り値をもたない。引数nameはunicodeである。引数colorはSVGRGBColorであ

る。 

Class SVGElement 

SVGElementはElement, EventTarget, TraitAccessを継承する。 

SVGElementクラスは次のような属性をもつ。 

id 

この属性はunicodeを保持する。 

546 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Class SVGTimedElement 

SVGTimedElementはSVGElement, smil::ElementTimeControlを継承する。 

SVGTimedElementクラスは次のような属性をもつ。 

isPaused 

この属性はbooleanを保持する。 

SVGTimedElementクラスは次のようなメソッドをもつ。 

pauseElement() 

このメソッドは戻り値をもたない。 

resumeElement() 

このメソッドは戻り値をもたない。 

Class SVGAnimationElement 

SVGAnimationElementはSVGTimedElementを継承する。 

Class SVGVisualMediaElement 

SVGVisualMediaElementはSVGLocatableElement, SVGTimedElementを継承する。 

Class SVGTimer 

SVGTimerはevents::EventTargetを継承する。 

SVGTimerクラスは次のような属性をもつ。 

delay 

この属性はlongを保持する。 

repeatInterval 

この属性はlongを保持する。 

running 

この属性はbooleanを保持する。 

SVGTimerクラスは次のようなメソッドをもつ。 

start() 

このメソッドは戻り値をもたない。 

stop() 

このメソッドは戻り値をもたない。 

Class SVGGlobal 

SVGGlobalクラスは次のようなメソッドをもつ。 

createTimer(initialInterval, repeatInterval) 

このメソッドはSVGTimerを返す。引数initialIntervalはlongである。引数repeatIntervalはlongであ

る。 

getURL(iri, callback) 

このメソッドは戻り値をもたない。引数iriはunicodeである。引数callbackはAsyncStatusCallback

である。 

postURL(iri, data, callback, type, encoding) 

このメソッドは戻り値をもたない。引数iriはunicodeである。引数dataはunicodeである。引数callback

はAsyncStatusCallbackである。引数typeはunicodeである。引数encodingはunicodeである。 

parseXML(data, contextDoc) 

547 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

このメソッドはNodeを返す。引数dataはunicodeである。引数contextDocはDocumentである。 

Class AsyncStatusCallback 

AsyncStatusCallbackクラスは次のようなメソッドをもつ。 

operationComplete(status) 

このメソッドは戻り値をもたない。引数statusはAsyncURLStatusである。 

Class AsyncURLStatus 

AsyncURLStatusクラスは次のような属性をもつ。 

success 

この属性はbooleanを保持する。 

contentType 

この属性はunicodeを保持する。 

content 

この属性はunicodeを保持する。 

Class EventListenerInitializer2 

EventListenerInitializer2クラスは次のようなメソッドをもつ。 

initializeEventListeners(scriptElement) 

このメソッドは戻り値をもたない。引数scriptElementはElementである。 

createEventListener(handlerElement) 

このメソッドはEventListenerを返す。引数handlerElementはElementである。 

548 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書S 

(規定) 

引用規格及び参考文献 

S.1 

引用規格 

[ATAG] 

Authoring Tool Accessibility Guidelines 1.0, J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, eds. 

World Wide Web Consortium(2000年2月3日) 

この版のATAG 1.0:http://www.w3.org/TR/2000/REC-ATAG10-20000203/  

[AWWW] 

Architecture of the World Wide Web, Volume One, I. Jacobs, N. Walsh, eds. World Wide Web Consortium

(2004年12月15日) 

この版のAWWW Volume 1:http://www.w3.org/TR/2004/REC-webarch-20041215/ 

[BCP19] 

IANA Charset Registration Procedures, N. Freed, J. Postel(2000年10月) 

http://tools.ietf.org/html/bcp19 

[BCP47] 

IETF BCP 47 [現在次の文書を組み合わせた構成になっている:Tags for the Identification of 

Languages, A. Phillips, M. Davis(2006年9月),Matching of Language Tags, A. Phillips, M. Davis(2006

年9月)] 

http://tools.ietf.org/html/bcp47  

[COLORIMETRY] 

Colorimetry, Third Edition, Commission Internationale de l'Eclairage, CIE Publication 15:2004, ISBN 

3-901-906-33-9.  

http://www.cie.co.at/publ/abst/15-2004.html 

[CHARMOD] 

Character Model for the World Wide Web 1.0: Fundamentals, M. Dürst, F. Yergeau, R. Ishida, M. Wolf, T. 

Texin, eds. World Wide Web Consortium(2005年2月15日) 

この版のCharmod 1.0:http://www.w3.org/TR/2005/REC-charmod-20050215/ 

[CSS2] 

Cascading Style Sheets, level 2, B. Bos, H. W. Lie, C. Lilley, I. Jacobs, eds. World Wide Web Consortium

(1998年5月12日)この版のCSS 2:http://www.w3.org/TR/1998/REC-CSS2-19980512/ 

[DOM2EVENTS] 

Document Object Model (DOM) Level 2 Events Specification, T. Pixley, ed. World Wide Web Consortium

(2000年11月13日) 

この版のDOM 2 Events:http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/ 

[DOM2VIEWS] 

Document Object Model (DOM) Level 2 Views Specification, A. Le Hors, L. Cable, eds. World Wide Web 

Consortium(2000年11月13日) 

549 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この版のDOM 2 Views:http://www.w3.org/TR/2000/REC-DOM-Level-2-Views-20001113/ 

[DOM3] 

Document Object Model (DOM) Level 3 Core Specification, A. Le Hors, P. Le Hégaret, L. Wood, G. Nicol, J. 

Robie, M. Champion, S. Byrne, eds. World Wide Web Consortium(2004年4月7日) 

この版のDOM 3 Core:http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ 

[EBNF] 

Information technology−Syntactic metalanguage−Extended BNF, International Organization for 

Standardization(1996年) 

http://standards.iso.org/ittf/PubliclyAvailableStandards/s026153̲ISO̲IEC̲14977̲1996(E).zip.  

この仕様書は,Extensible Markup Language (XML) 1.0 (Fourth Edition) ([XML10]の箇条6)Notation

の箇条に定義されたEBNFの部分集合を利用している。 

[ET] 

Element Traversal Specification, D. Schepers, ed. World Wide Web Consortium(2008年12月22日) 

この版のElement Traversal: 

http://www.w3.org/TR/2008/REC-ElementTraversal-20081222/  

[FOLEY-VANDAM] 

Computer Graphics: Principles and Practice, Second Edition, J. D. Foley, A. van Dam, S. K. Feiner, J. F. 

Hughes, R. L. Phillips. Addison-Wesley(1995年) 

[GML] 

OpenGIS Geography Markup Language (GML) Encoding Standard, version 3.2.1, C. Portele, ed. Open GIS 

Consortium(2007年8月27日) 

http://portal.opengeospatial.org/files/?artifact̲id=20509 

[IEEE-754] 

IEEE Standard for Binary Floating-Point Arithmetic (ANSI/IEEE Std 754-1985). Institute of Electrical and 

Electronics Engineers(1985年) 

[JIS X 4177-2:2005] 

文書スキーマ定義言語(DSDL)−第2部:正規文法に基づく妥当性検証−RELAX NG 

注記 Document Schema Definition Languages (DSDL)−Part 2: Regular grammar-based validation−

RELAX NG, ISO/IEC FDIS 19757-2:2002(E), J. Clark, 村田 真 (MURATA M.), eds. International 

Organization for Standardization(2002年12月12日)がこの規格に一致している。 

lhttp://www.y12.doe.gov/sgml/sc34/document/0362̲files/relaxng-is.pdf 

[JIS X 5810-2:2008] 

多目的インターネットメール拡張(MIME)−第2部:メディア型 

注記 RFC2046 Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types, N. Freed and N. 

Borenstein(1996年11月)このRFCの公開に伴い,RFC 1521,RFC 1522及びRFC 1590が

廃止になったことに注意する。http://tools.ietf.org/html/rfc2046 

[JPEG] 

ISO/IEC 10918: Information Technology−Digital Compression And Coding Of Continuous-tone Still 

Images, International Organization for Standardization(1992年9月) 

http://www.w3.org/Graphics/JPEG/itu-t81.pdf 

550 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

[JFIF] 

JPEG File Interchange Format, version 1.02. E. Hamilton, ed. Independent JPEG Group(1992年9月1日) 

http://www.w3.org/Graphics/JPEG/jfif3.pdf 

[NVDL] 

Information Technology−Document Schema Definition Languages (DSDL)−Part 4: Namespace-based 

Validation Dispatching Language: ISO/IEC FDIS 19757-4:2005(E), International Organization for 

Standardization(2005年12月) 

http://www.jtc1sc34.org/repository/0694.pdf 

[PNG] 

Portable Network Graphics (PNG) Specification (Second Edition): Information technology−Computer 

graphics and image processing−Portable Network Graphics (PNG): Functional specification, ISO/IEC 

15948:2003 (E), D. Duce, ed. World Wide Web Consortium(2003年11月10日) 

この版のPNG:http://www.w3.org/TR/2003/REC-PNG-20031110/ 

[QAF-SPEC] 

QA Framework: Specification Guidelines, K. Dubost, L. Rosenthal, D. Hazaël-Massieux, L. Henderson. 

World Wide Web Consortium(2005年8月17日) 

この版のQA Framework: Specification Guidelines: 

http://www.w3.org/TR/2005/REC-qaframe-spec-20050817/ 

[RFC1951] 

DEFLATE Compressed Data Format Specification version 1.3, P. Deutsch(1996年5月) 

http://www.ietf.org/rfc/rfc1952 

[RFC1952] 

GZIP file format specification version 4.3, P. Deutsch(1996年5月) 

http://tools.ietf.org/html/rfc1952 

[RFC2119] 

Key words for use in RFCs to Indicate Requirement Levels, S. Bradner(1997年3月) 

http://tools.ietf.org/html/rfc2119  

[RFC2397] 

The "data" URL scheme, L. Masinter(1998年8月) 

http://tools.ietf.org/html/rfc2397  

[RFC2616] 

Hypertext Transfer Protocol−HTTP/1.1, R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen, L. Masinter, P. 

Leach and T. Berners-Lee(1999年6月) 

このRFCの公開に伴い,RFC 2068が廃止になったことに注意する。 

http://tools.ietf.org/html/rfc2616  

[RFC2781] 

UTF-16, an encoding of ISO 10646, P. Hoffman and F. Yergeau(2000年2月) 

http://tools.ietf.org/html/rfc2781 

[RFC3023] 

XML Media Types, M. Murata, S. St. Laurent, D. Kohn(2001年1月) 

551 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

RFC 3023の改正が予定されていることに注意する。 

http://tools.ietf.org/html/rfc3023 

[RFC3629] 

UTF-8, a transformation format of ISO 10646, F. Yergeau(2003年11月) 

このRFCの公開に伴い,RFC 2044及びRFC 2279が廃止になったことに注意する。 

http://tools.ietf.org/html/rfc3629 

[RFC3986] 

Uniform Resource Identifiers (URI): Generic Syntax, T. Berners-Lee, R. Fielding, L. Masinter(2005年1月) 

RFC 3986はRFC 1738を更新し,RFC 3986の公開によってRFC 2732,RFC 2396及びRFC 1808が

廃止になったことに注意する。 

http://tools.ietf.org/html/rfc3986 

[RFC3987] 

Internationalized Resource Identifiers (IRIs), M. Dürst, M. Suignard(2005年1月) 

http://tools.ietf.org/html/rfc3987 

[RFC4329] 

Scripting Media Types, B. Höhrmann(2006年4月) 

http://tools.ietf.org/html/rfc4329 

[SMIL21] 

Synchronized Multimedia Integration Language (SMIL 2.1), D. Bulterman, G. Grassel, et. al.. World Wide 

Web Consortium(2005年12月13日) 

この版のSMIL 2:http://www.w3.org/TR/2005/REC-SMIL2-20051213/ 

[SMILANIM] 

SMIL Animation, P. Schmitz, A. Cohen. World Wide Web Consortium(2001年9月4日) 

この版のSMIL Animation:http://www.w3.org/TR/2001/REC-smil-animation-20010904/ 

[SRGB] 

IEC 61966-2-1:1999 Multimedia systems and equipment−Colour measurement and management−Part 

2-1: Colour management−Default RGB colour space−sRGB, International Electrotechnical Commission, 

1999. ISBN 2-8318-4989-6.  

(Using the sRGB̲v4̲ICC̲preference.icc profile及びsRGB profiles [USING-SRGB, SRGB-PROFILES] 

も参照) 

http://webstore.iec.ch/webstore/webstore.nsf/artnum/025408 

[SVGM11] 

Mobile SVG Profiles: SVG Tiny and SVG Basic, T. Capin, ed. World Wide Web Consortium(2003年1月

14日) 

この版のSVG Mobile 1.1:http://www.w3.org/TR/2001/REC-SVGmobile-20030114/ 

[UAAG] 

User Agent Accessibility Guidelines 1.0, I. Jacobs, J. Gunderson, E. Hansen, eds. World Wide Web 

Consortium(2002年12月17日) 

この版のUAAG 1.0:http://www.w3.org/TR/2000/REC-UAAG10-20021217/ 

[UNICODE] 

552 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

The Unicode Standard, Version 4.1.0 以上 The Unicode Consortium 

The Unicode Standard, Version 4.1.0は,Unicode 4.0.1及びUnicode 4.1.0による修正を加えられたThe 

Unicode Standard, Version 4.0 (Boston, MA, Addison-Wesley, 2003. ISBN 0-321-18578-1) によって定義さ

れていることに注意する。 

Unicode 4.0.1:http://www.unicode.org/versions/Unicode4.0.1/ 

Unicode 4.1.0:http://www.unicode.org/versions/Unicode4.1.0/ 

上記の詳細についてはhttp://www.unicode.org/unicode/standard/versions/を参照。 

[UAX9] 

Unicode Bidirectional Algorithm, The Unicode Standard Annex #9. The Unicode Consortium(2008年) 

最新版のAnnex:http://www.unicode.org/reports/tr15/ 

[UAX14] 

Unicode Line Breaking Algorithm, The Unicode Standard Annex #14. The Unicode Consortium(2008年) 

最新版のAnnex:http://www.unicode.org/reports/tr14/ 

[UAX15] 

Unicode Normalization Forms, The Unicode Standard Annex #15. The Unicode Consortium(2008年) 

最新版のAnnex:http://www.unicode.org/reports/tr15/ 

[JIS X 4176:2005] 

XMLリンク付け言語(XLink)1.0 

注記 XML Linking Language (XLink) Version 1.0, S. DeRose, E. Maler, D. Orchard, eds. World Wide Web 

Consortium(2001年6月27日)がこの規格に一致している。 

この版のXLink 1.0:http://www.w3.org/TR/2001/REC-xlink-20010627/ 

 [XML10] 

Extensible Markup Language (XML) 1.0 (Fourth Edition), T. Bray, J. Paoli, C. M. Sperberg-McQueen, E. 

Maler, eds. World Wide Web Consortium(2004年2月4日) 

この版のXML 1.0:http://www.w3.org/TR/2006/REC-xml-20060816/ 

注記 JIS X 4159:2005 拡張可能なマーク付け言語(XML)1.0(Third Edition)が前の版に対応し

ている。 

[XML11] 

Extensible Markup Language (XML) 1.1 (Second Edition), T. Bray, J. Paoli, C. M. Sperberg-McQueen, E. 

Maler, F. Yergeau, J. Cowan, eds. World Wide Web Consortium(2004年4月15日) 

この版のXML 1.1:http://www.w3.org/TR/2006/REC-xml11-20060816/ 

[XMLID] 

xml:id Version 1.0, J. Marsh, D. Veillard, N. Walsh, eds. World Wide Web Consortium(2005年9月9日) 

この版のxml:id:http://www.w3.org/TR/2005/REC-xml-id-20050909/ 

[XML-BASE] 

XML Base, J. Marsh, ed. World Wide Web Consortium(2001年6月27日) 

この版のXML Base:http://www.w3.org/TR/2001/REC-xmlbase-20010627/ 

[XML-EVENTS] 

XML Events, S. McCarron, S. Pemberton, T. V. Raman, eds. World Wide Web Consortium(2003年10月14

日) 

553 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

この版のXML Events:http://www.w3.org/TR/2003/REC-xml-events-20031014/ 

[XML-NS10] 

Namespaces in XML 1.0 (Second Edition), T. Bray, D. Hollander, A. Layman, eds. World Wide Web 

Consortium(2006年8月16日) 

この版のNamespaces in XML 1.0:http://www.w3.org/TR/2006/REC-xml-names-20060816/ 

注記 JIS X 4158:2005 XML名前空間が1999年1月14日にW3Cが勧告したXML-NSに対応して

いる。 

 [XML-NS] 

Namespaces in XML 1.1 (Second Edition), T. Bray, D. Hollander, A. Layman, R. Tobin, eds. World Wide 

Web Consortium(2006年8月16日) 

この版のNamespaces in XML 1.1:http://www.w3.org/TR/2006/REC-xml-names11-20060816/ 

[XPTRFW] 

XPointer Framework, P. Grosso, E. Maler, J. Marsh, N. Walsh, eds. World Wide Web Consortium(2003年3

月25日) 

この版のXPointer Framework:http://www.w3.org/TR/2003/REC-xptr-framework-20030325/ 

[XSL] 

Extensible Stylesheet Language (XSL) Version 1.1, A. Berglund, ed. World Wide Web Consortium(2006年

12月5日) 

この版のXSL 1.1:http://www.w3.org/TR/2006/REC-xsl11-20061205/ 

S.2 

参考文献 

[ARIA] 

Accessible Rich Internet Applications (WAI-ARIA) Version 1.0, M. Cooper, R. Schwerdtfeger, L. Seeman, L. 

Pappas, eds. World Wide Web Consortium, work in progress(2008年8月6日) 

この版の WAI-ARIA:http://www.w3.org/TR/2008/WD-wai-aria-20080806/ 

[CC] 

Creative Commons.  

http://creativecommons.org/ 

[CHARMOD-NORM] 

Character Model for the World Wide Web 1.0: Normalization, M. Dürst, F. Yergeau, R. Ishida, M. Wolf, T. 

Texin, A. Phillips, eds. World Wide Web Consortium, work in progress(2005年2月25日) 

この版の Charmod Normalization:http://www.w3.org/TR/2005/WD-charmod-norm-20051027/ 

[CODECS] 

WAVE and AVI Codec Registries, Internet Assigned Numbers Authority.  

http://www.iana.org/assignments/wave-avi-codec-registry 

[CSS21] 

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, B. Bos, T. Çelik, I. Hickson, H. W. Lie, 

eds. World Wide Web Consortium, work in progress(2007年7月19日) 

この版の CSS 2.1:http://www.w3.org/TR/2007/CR-CSS21-20070719 

[DCORE] 

554 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Dublin Core Metadata Initiative  

http://dublincore.org/ 

[DOM3EVENTS] 

Document Object Model (DOM) Level 3 Events Specification, B. Höhrmann, P. Le Hégaret, T. Pixley, D. 

Schepers, eds. World Wide Web Consortium, work in progress(2007年12月21日) 

この版の DOM 3 Events:http://www.w3.org/TR/2007/WD-DOM-Level-3-Events-20071221/ 

[ECMA-262] 

ECMAScript Language Specification, 3rd Edition, M. Cowlishaw, ed. Ecma International(1999年12月) 

http://www.ecma-international.org/publications/standards/Ecma-262.htm  

[HTML4] 

HTML 4.01 Specification, D. Raggett, A. Le Hors, I. Jacobs. World Wide Web Consortium(1999年12月24

日) 

この版の HTML 4:http://www.w3.org/TR/1999/REC-html401-19991224/ 

[HTML5] 

HTML 5, I. Hickson, D. Hyatt, eds. World Wide Web Consortium, work in progress(2008年6月10日) 

この版の HTML 5:http://www.w3.org/TR/2008/WD-html5-20080610/ 

[ITS] 

Internationalization Tag Set (ITS) 1.0, C. Lieske, F. Sasaki. World Wide Web Consortium(2007年4月3日) 

この版の ITS 1.0:http://www.w3.org/TR/2007/REC-its-20070403/ 

[JAVA] 

The Java Language Specification, J. Gosling, B. Joy and G. Steele. Addison-Wesley(1996年9月) 

http://java.sun.com/docs/books/jls/ 

[JIS X 4169:2007] 

XSL変換(XSLT)1.0 

注記 XSL Transformations (XSLT) Version 1.0, J. Clark, ed. World Wide Web Consortium(1999年11月

16日)がこの規格に一致している。 

この版の XSLT 1.0:http://www.w3.org/TR/1999/REC-xslt-19991116 

[JSR226] 

JSR 226: Scalable 2D Vector Graphics API for J2METM, S. Chitturi, specification lead. Java Community 

Process(2004年12月21日) 

http://forum.nokia.com/info/sw.nokia.com/id/bcffc227-cacc-4e41-9829-d1979db4dde3/JSR-226-spec-fr-1̲0.

zip.html 

[MATHML] 

Mathematical Markup Language (MathML) Version 2.0 (Second Edition), D. Carlisle, P. Ion, R. Miner, N. 

Poppelier, eds. World Wide Web Consortium(2003年10月21日) 

この版の MathML 2:http://www.w3.org/TR/2003/REC-MathML2-20031021/ 

[MF] 

Microformats  

http://microformats.org/ 

[MIME-RESPECT] 

555 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

Authoritative Metadata, R. Fielding, I. Jacobs, eds. World Wide Web Consortium(2006年4月12日) 

この版の Authoritative Metadata:http://www.w3.org/2001/tag/doc/mime-respect-20060412 

[MIMETYPES] 

MIME Media Types, Internet Assigned Numbers Authority 

http://www.iana.org/assignments/media-types/ 

[NSState] 

The Disposition of Names in an XML Namespace, N. Walsh, ed. World Wide Web Consortium(2006年1月

9日) 

この版の Namespace State:http://www.w3.org/2001/tag/doc/namespaceState-2006-01-09 

[PROGRESSEVENTS] 

Progress Events 1.0, C. McCathieNevile, ed. World Wide Web Consortium, work in progress(2008年5月

21日) 

この版の ProgressEvents:http://www.w3.org/TR/2008/WD-progress-events-20080521/ 

[RFC2361] 

WAVE and AVI Codec Registries. E. Fleischman(1998年6月) 

http://tools.ietf.org/html/rfc2361 

[RDF] 

RDF Primer, F. Manola, E. Miller, eds. World Wide Web Consortium(2004年2月10日) 

この版の RDF Primer:http://www.w3.org/TR/2004/REC-rdf-primer-20040210/ 

[RDFA] 

RDFa in XHTML: Syntax and Processing, B. Adida, M. Birbeck, S. McCarron, S. Pemberton, eds. World 

Wide Web Consortium, work in progress(2008年9月4日) 

この版の RDFa Syntax:http://www.w3.org/TR/2008/PR-rdfa-syntax-20080904/RDFa Primerも利用可

能:http://www.w3.org/TR/xhtml-rdfa-primer/ 

[ROLE] 

XHTML Role Attribute Module, M. Birbeck, S. McCarron, S. Pemberton, T. V. Raman, R. Schwerdtfeger, 

eds. World Wide Web Consortium, work in progress(2008年4月7日) 

この版の RDFa Syntax:http://www.w3.org/TR/2008/PR-rdfa-syntax-20080904/ 

[SCHEMA2] 

XML Schema Part 2: Datatypes Second Edition. P. Biron, A. Malhotra, eds. World Wide Web Consortium

(2004年10月28日) 

Processing XML 1.1 documents with XML Schema 1.0 processors [XML11-SCHEMA] も参照。 

この版の XML Schema Part 2:http://www.w3.org/TR/2004/REC-xmlschema-2-20041028/ 

[SRGB-PROFILES] 

sRGB profiles, International Color Consortium 

http://www.color.org/srgbprofiles.xalter 

[SVG11] 

Scalable Vector Graphics (SVG) 1.1, J. Ferraiolo, 藤沢 淳 (FUJISAWA Jun), D. Jackson, eds. World Wide 

Web Consortium(2003年1月14日) 

この版の SVG 1.1:http://www.w3.org/TR/2003/REC-SVG11-20030114/ 

556 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

[SVG-ACCESS] 

Accessibility Features of SVG, C. McCathieNevile, M. Koivunen, eds. World Wide Web Consortium(2000

年8月7日) 

この版の Accessibility Features of SVG:http://www.w3.org/TR/2000/NOTE-SVG-access-20000807/ 

[USING-SRGB] 

Using the sRGB̲v4̲ICC̲preference.icc profile, International Color Consortium 

http://www.color.org/ICC̲White̲Paper̲26̲Using̲the̲V4̲sRGB̲ICC̲profile.pdf 

[WAI] 

The Web Accessibility Initiative 

http://www.w3.org/WAI/ 

[WCAG] 

Web Content Accessibility Guidelines 1.0, W. Chisholm, G. Vanderheiden, I. Jacobs, eds. World Wide Web 

Consortium(1999年5月5日) 

この版の WCAG 1.0:http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/ 

[WCAG2] 

Web Content Accessibility Guidelines 2.0, B. Caldwell, W. Chisholm, J. Slatin, G. Vanderheim, eds. World 

Wide Web Consortium, work in progress(2008年4月30日) 

この版の WCAG 2.0 :http://www.w3.org/TR/2008/CR-WCAG20-20080430/ 

[WICD] 

WICD Core 1.0, T. Mehrvarz, L. Pajunen, J. Quint, D. Appelquist, eds. World Wide Web Consortium, work 

in progress(2007年7月18日) 

この版の WICD Core 1.0:http://www.w3.org/TR/2007/CR-WICD-20070718/ 

[WINDOW] 

Window Object 1.0, I. Davis, M. Stachowiak, eds. World Wide Web Consortium, work in progress(2006年4

月7日) 

この版の Window 1.0:http://www.w3.org/TR/2006/WD-Window-20060407/ 

[WEBCGM] 

WebCGM 1.0 Second Release, D. Cruikshank, J. Gebhardt, L. Henderson, R. Platon, D. Weidenbrueck, eds. 

World Wide Web Consortium(2001年12月17日) 

この版の WebCGM:http://www.w3.org/TR/2001/REC-WebCGM-20011217/ 

[XBL2] 

XML Binding Language (XBL) 2.0, I. Hickson, ed. World Wide Web Consortium, work in progress(2007年

3月16日) 

この版の XBL 2:http://www.w3.org/TR/2007/CR-xbl-20070316/ 

[XHTML] 

XHTMLTM 1.0: The Extensible HyperText Markup Language (Second Edition). World Wide Web 

Consortium(2002年8月1日) 

この版の XHTML 1:http://www.w3.org/TR/2002/REC-xhtml1-20020801/ 

[XHTMLVOCAB] 

"XHTML Vocabulary namespace". XHTML 2 Working Group, World Wide Web Consortium 

557 

X 4197:2012  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

最新版:http://www.w3.org/1999/xhtml/vocab 

[XI18N-BP] 

Best Practices for XML Internationalization, Y. Savourel, J. Kosek, R. Ishida. World Wide Web Consortium

(2008年2月13日) 

この版の Best Practices for XML Internationalization: 

http://www.w3.org/TR/2008/NOTE-xml-i18n-bp-20080213/ 

[XLINK11] 

XML Linking Language (XLink) Version 1.1, S. DeRose, E. Maler, D. Orchard, N. Walsh, eds. World Wide 

Web Consortium, work in progress(2008年3月31日) 

この版の XLink 1.1:http://www.w3.org/TR/2008/WD-xlink11-20080331/ 

[XML11-SCHEMA] 

Processing XML 1.1 documents with XML Schema 1.0 processors, H. S. Thompson, ed. World Wide Web 

Consortium(2005年5月11日) 

この版の Processing XML 1.1 with XML Schema 1.0: 

http://www.w3.org/TR/2005/NOTE-xml11schema10-20050511/ 

[XSLT2] 

XSL Transformations (XSLT) Version 2.0, M. Kay, ed. World Wide Web Consortium(2007年1月23日) 

この版の XSLT 2.0:http://www.w3.org/TR/2007/REC-xslt20-20070123/ 

558 

X 4197:2012  

  

2019年7月1日の法改正により名称が変わりました。まえがきを除き,本規格中の「日本工業規格」を「日本産業規格」に読み替えてください。 

附属書T 

(参考) 
変更履歴 

(原勧告の規定を不採用とした。)