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

X 4197

:2012

(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)

ページ

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)

ページ

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)

ページ

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)

ページ

18.1

  概説  

336

18.2

  'metadata'要素  

337

18.3

  拡張可能なメタデータ属性  

338

19

  拡張性  

339

19.1

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

339

19.2

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

340

附属書 A(規定)SVG Micro DOMuDOM  

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)

まえがき

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

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

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

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

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

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

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

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

変倍ベクタグラフィックス(SVGTiny 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)

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)

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)

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)

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

書よりも優先される可能性もある。現在の 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 は開発された。


   

日本工業規格

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 内容にその高レベルの情報が含まれるようにして行うのがよい。ア

クセシビリティを高めるための技術の提案については,

附属書 を参照。

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

適合している。


2

X 4197

:2012

   

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 プロファイルを完全に実装しない場合には,ユーザエージェントの適合性に関

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


3

X 4197

:2012

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>

    ">


4

X 4197

:2012

   

    ]>

<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"である(附属書 を参照)。

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

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

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

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

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

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

よって圧縮された SVG ファイルについて,詳細は

附属書 を参照。)。

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]  に記載されている機能の多くをサポートしている(名前空間及びイ

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


5

X 4197

:2012

この規格は,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](附属書 

参照)

 SVG

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

附属書 を参

照)

他の 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)

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


6

X 4197

:2012

   

形。詳細については,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


7

X 4197

:2012

文書の終了(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)


8

X 4197

:2012

   

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

す。エラー処理に関する詳細については,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 利用者エージェントに指示を与える場合,


9

X 4197

:2012

フォーカス(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 属性。箇条 を参照。

1.6.33

プロパティ(property)

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

ついては,

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

てられる。箇条 を参照。

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

   

この定義は,この規格('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

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

   

しながら,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

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

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

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

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

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

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

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

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

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

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

箇条 13,箇条 15 及び

附属書 を参照するのがよい。

概念 

この箇条

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

   

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

いエイリアシングをなくすよう,

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

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

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

   

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

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

行内埋込み

この場合,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.2 

塗り重ねモデル 

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

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

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

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

される。

3.3 

描画の順序 

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

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

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

3.4 

図形要素の型 


17

X 4197

:2012

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

   

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

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

基本データ型 

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

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

<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

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

   

<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

      (#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×10

b

のような)科学的記数法によって指定される。<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

   

<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'要素から構成される。


23

X 4197

:2012

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 内容の中に現れる


24

X 4197

:2012

   

ことができない。

どんな場合でも,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'/>


25

X 4197

:2012

      <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'>


26

X 4197

:2012

   

          <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

作者が内容を正しく描画するために必要だと考える最小の 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

   

'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

を参照。

アニメーション:可


29

X 4197

:2012

ナビゲーション属性

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>


30

X 4197

:2012

   

  <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>


31

X 4197

:2012

    <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'/>


32

X 4197

:2012

   

      <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


33

X 4197

:2012

<?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'/>


34

X 4197

:2012

   

      <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'要素の使い方を次の例において説明する。この例の文書の時間軸に関連する振る舞いを次のリス

トにまとめている。


35

X 4197

:2012

時間 = 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"/>


36

X 4197

:2012

   

    <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


37

X 4197

:2012

    <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

   

て,識別及び含意が誤解されないように注意することが望ましい。

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


39

X 4197

:2012

文書については,最上位のタイトル及び説明文をツールチップ(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">


40

X 4197

:2012

   

        <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" 又 は


41

X 4197

:2012

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'>


42

X 4197

:2012

   

      <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 の例を参照。


43

X 4197

:2012

例 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" />


44

X 4197

:2012

   

  <!-- 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>


45

X 4197

:2012

  <!-- '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"/>


46

X 4197

:2012

   

  </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"/>


47

X 4197

:2012

      <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>


48

X 4197

:2012

   

  </g>

</svg>

5.7 'image'

要素 

'image'要素は,ある画像内容が現在の利用者座標系において与えられた長方形に描画されることを示す。

この規格では,'image'要素は PNG 又は JPEG [PNG,JPEG]  のようなラスタ画像形式の内容を参照しなけ

ればならない。この規格では,'image'要素を用いて SVG 文書を参照することはできない。その代わりに,

制作者は'animation'要素を用いて SVG 文書を参照することが望ましい。適合 SVG ビューアは,PNG 及び

JPEG 画像ファイル形式をサポートしていなければならない。他の画像ファイル形式もサポートしてもよ

い。

必要とされる JPEG のサポートの詳細については,

附属書 を参照。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 利用者エージェントは,


49

X 4197

:2012

表示されない画像(例  初期文書ビューポートの外にある画像)の画像データをロードしなくてもよい(た

だし,'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>


50

X 4197

:2012

   

    </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

を参照。

アニメーション:可


51

X 4197

:2012

ナビゲーション属性

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>


52

X 4197

:2012

   

      <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'要素である場合,その対象要素の削除を起動することはないし,それ自体を削除

することもない。


53

X 4197

:2012

'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'要素の処理に関連した検査には一切影響が

ない。


54

X 4197

:2012

   

処理されるかどうかにかかわらず,'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

requiredFeatures = "<list-of-strings>"  

SVG 利用者エージェントによる指定機能のサポートの有無に基づき,条件付き処理を制御する条件付き

処理属性。その値は特性文字列のリストであり,それぞれの値が空白によって区切られる。その文書が作

成された時点の SVG 仕様の既存バージョンで定義されている機能の文字列(

附属書 に示されたものな

ど)だけを使用することが望ましい。また,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

   

利用者の選択で示された言語の一つがこの属性の値で与えられた言語の一つと等しい場合,又は利用者

選択で示された言語の一つがこの属性の値で与えられた言語の一つの接頭辞[接頭辞の後の最初のタグ文

字が 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

参照。

全ての条件付き処理属性と同じように,'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

   

(省略値)現在の文書に対して外部環境が省略可能であることを示す。現在の要素及びその子孫におい

て外部リソースが利用できなくても文書の描画を続行することができる。

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 利用者エージェントの特定のメカニズムによって

解決される(又はエラーとされる。


59

X 4197

:2012

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>


60

X 4197

:2012

   

</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>


61

X 4197

:2012

</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'要素の解析の途中では行われない。


62

X 4197

:2012

   

例: 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"


63

X 4197

:2012

        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>値を与えることができない。


64

X 4197

:2012

   

 '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>


65

X 4197

:2012

      </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

   

(例  アニメーションの終わりが利用者の相互動作に依存する場合)

,内容制作者は,参照される要素につ

いて最小の活性化した所要時間を見積もることが望ましい。この見積りによって(それが 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'


67

X 4197

:2012

要素はリソースの取り込みを最適化するために使われることに注意する。'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"


68

X 4197

:2012

   

        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>


69

X 4197

:2012

</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

   

'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

この属性を'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 内容ではなく,その振る舞いは規定されな


72

X 4197

:2012

   

い。

'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="."/>


73

X 4197

:2012

    </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

   

利用される。

明らかに視覚的な性質をもつ,スタイル付けの対象となるパラメタ。例えば,オブジェクトを“塗

る”方法(フィル及びストロークの色,線幅及びダッシュのスタイルなど)を定義する全ての属性。

 '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

・  '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 利用者エージェントにおける使用が意図されてい


76

X 4197

:2012

   

る文書をスタイル付けするために,外部の制作者スタイルシートに依存してはならない。

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 内容を生成したような状況では,次に示す限界は当てはまら

ない可能性もある。

内容に附属のスタイル付け  プレゼンテーション属性は特定の要素に直接付随するので,その結果,

スタイル付けと内容とを切り離すことによる潜在的な利点(例  異なる用途及び環境のための文書

の再スタイル付け)を減少させる。

平らなデータモデル  プレゼンテーション属性は,スタイル付け体系で得られるようなより高度な

抽象化(例  特定のカテゴリの要素に適用されるプロパティの名前を付けられた集合の定義)をそ

れ自体として提供していない。結果として,多くの場合より高いレベルの重要な意味論情報が失わ

れ,文書の再利用及び再スタイル付けを潜在的に難しくしてしまう。

潜在的なファイルサイズの増加  多くの種類の図形は,複数の要素において同じようなスタイル付


77

X 4197

:2012

けプロパティを使用する。例えば,ある会社の組織図では,非正規社員の名前が書かれた箱に一つ

のスタイル付けプロパティの集合を適用し(例  破線による外形,赤いフィル)

,正社員の名前には

別のスタイル付けプロパティの集合を適用する(例  実線による外形,青いフィル)ことができる。

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">


78

X 4197

:2012

   

    <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

座標系,変換,及び単位 

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 イベントハンドラを用いてそれを実施することが望ましい。


80

X 4197

:2012

   

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>


81

X 4197

:2012

    <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>


82

X 4197

:2012

   

例 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>


83

X 4197

:2012

    <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>


84

X 4197

:2012

   

      <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)


85

X 4197

:2012

       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]


86

X 4197

:2012

   

変換によって,座標及び長さが新しい座標系から前の座標系にマップされている。

単純な変換は次のような行列の形式で表現される。

移動は次の行列と同等である。

又は,[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 

入れ子にされる変換 


87

X 4197

:2012

変換は,どのようなレベルまででも入れ子にすることができる。入れ子にされた変換では,前に定義さ

れた変換に対して後続の変換行列を右から乗じる(すなわち,連結する)効果が与えられる。

それぞれの要素において,その要素と,現在のビューポートを確立した要素(通常はその要素の直近の

祖先である'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 -->


88

X 4197

:2012

   

    <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)")は,次

のように三つの変換の連結によって構成されている。


89

X 4197

:2012

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>と同じとみなされる。


90

X 4197

:2012

   

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)">


91

X 4197

:2012

  <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

   

   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 利用者エージェントのポジショニング制御は,移動(一般的に"パン"と呼ばれる。),スケール(一


93

X 4197

:2012

般的に"ズーム"と呼ばれる。

,及び回転から構成される。

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)


94

X 4197

:2012

   

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)


95

X 4197

:2012

ビューポートを定義しない要素については,要素の 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>

この場合は次のとおりである。


96

X 4197

:2012

   

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

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

   

   | 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


99

X 4197

:2012

値"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>


100

X 4197

:2012

   

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

標系における値を示す。一方では,'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

   

      | "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

その要素の'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 を参照)。


104

X 4197

:2012

   

 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]の


105

X 4197

:2012

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'


106

X 4197

:2012

   

     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'/>


107

X 4197

:2012

      <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>


108

X 4197

:2012

   

  <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"/>


109

X 4197

:2012

は,'x'及び'y'が'10'であり'width'及び'height'が'0'である包含ボックスをもつ。

包含ボックスの正式な定義については,[FOLEY-VANDAM]の 15.2.3“Extents and Bounding Volumes”を

参照。詳細については,7.1310.411.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 プロパティと同じではない。具体的には,

パーセンテージ値は固有の幅又は高さを提供せず,包含しているブロックのパーセンテージを

示さない。その代わりに,画像データで実際に覆われているビューポートの部分が示される。


110

X 4197

:2012

   

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">

  ...


111

X 4197

:2012

</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 に示す。


112

X 4197

:2012

   

大半の 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 では,座標系を記述するよく知られた識別子が使用されている。この規格で使用されてい


113

X 4197

:2012

る座標には,与えられた変換が適用されていることに注意する。

例: 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"


114

X 4197

:2012

   

             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>


115

X 4197

:2012

                <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>


116

X 4197

:2012

   

                    <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>


117

X 4197

:2012

パス 

8.1 

概説 

パスは,フィル又はストロークすることができる図形の外形を表す(箇条 11 を参照)

パスは,現在の点の概念を用いて示される。紙の上に絵を描く場合に例えると,現在の点はペンの位置

として考えることができる。ペンの位置は変更することができ,ペンで直線又は曲線を描くことによって,

(開いた,又は閉じた)図形の外形を描くことができる。

パスは,moveto(新しい現在の点を設定する。

,lineto(直線を引く。

,curveto(3 次ベジェ曲線を用い

て曲線を描く。

,及び closepath(最後の moveto まで線を描くことによって現在の図形を閉じる。

)要素に

ついて定義されたオブジェクトの外形の幾何形状を表現する。複合パス(すなわち,複数のサブパスをも

つパス)によって,オブジェクトにおいて“ドーナツの穴”のような効果を与えることができる。

この箇条 では,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'


118

X 4197

:2012

   

の比によって,全てのパスに沿った距離の計算をスケールする。'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>


119

X 4197

:2012

パスデータには改行文字を入れることができ,複数行に分けてその読みやすさを向上させることができ

る。

大半の 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'が最初の命令ではないとき)


120

X 4197

:2012

   

新しいサブパスの開始を表す。

命令 

名前 

パラメタ 

説明 


(絶対) 

(相対)

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'の現在値を用いてそれぞれ形が整えられる。その命令の終わりに

おいて,新しい現在の点は現在のサブパスの始点に設定される。

命令 

名前 

パラメタ 

説明 


又は 
z

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 次ベジェ曲線の部分は,始点,終点及び二つの制御点に

よって定義される。


121

X 4197

:2012

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" />


122

X 4197

:2012

   

  <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


123

X 4197

:2012

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"/>


124

X 4197

:2012

   

  </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

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

   

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

   | 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')の幾何形状に沿った距離を計算することができなければならない。


128

X 4197

:2012

   

簡便な概数の使用を認めて手書きによる文書作成を支援する目的によって,制作者は'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

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'属性である。


130

X 4197

:2012

   

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"


131

X 4197

:2012

     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>

属性の定義:


132

X 4197

:2012

   

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)に戻る。ストローク操作では,その始


133

X 4197

:2012

まりを終わりに接合することができる線分は一つだけである。

スキーマ:

 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"?>


134

X 4197

:2012

   

<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'


135

X 4197

:2012

アニメーション:可

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"  />


136

X 4197

:2012

   

    <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="")の場合,その要素の描画はできない。省略値は空の文字列である。

アニメーション:可


137

X 4197

:2012

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'要素は,互いに接続された線分の集合から構成される閉じた図形を定義する。


138

X 4197

:2012

   

スキーマ:

 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"


139

X 4197

:2012

            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

   

      | "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

'text'要素の中のテキスト文字列は一直線上に描画されなければならない。SVG は,直線テキストのため

に次の国際的なテキスト処理機能をサポートしている。

左から右,又は双方向のテキスト(すなわち,アラビア語又はヘブライ語などのような右から左及

び左から右の方向のテキストを混ぜる言語)

 SVG

フォントを使用する場合,アラビア語及びハン語のテキストの現在の形式に対応する正しい字

形の自動選択

直線テキストのレイアウト規則については,10.6 に示されている。

SVG テキストは XML 内容として包含されるので,次が守られなければならない。

 SVG

内容のテキストデータは,視覚障害者が容易にアクセスできなければならない(

附属書 を参

照)

利用者の閲覧時の多くのシナリオにおいて,利用者はテキスト文字列を検索・選択し,システムの

クリップボードにそのテキスト文字列をコピーすることができる(10.13 及び 10.14 を参照)

 XML

に適合したウェブ検索エンジンは,他の XML 文書でテキスト文字列を見つけるために必要と

される以上の努力をする必要なく,SVG 内容のテキスト文字列を見つけることができる。

利用者の選択した言語に基づき複数のテキスト文字列を入れ替えることによって,多言語 SVG 内容を作

ることが可能である。

アクセシビリティを高めるために,文書におけるテキストには,その機能を示す適切な意味論のマーク

付けが含まれていることが望ましい。この詳細については,

附属書 を参照。

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

   

合成文字  ―  多くの場合,発音区別符のような一般的に使用される装飾は,一度特定の字形とし

てフォントで保存され,それから他の一つ以上の字形と一緒に構成されて目的の文字が形作られる。

例えば,あるフォントエンジンが文字 é を描画する場合,最初に 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

る字形の高さの相対的測定である。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 が前提としていることとして,あるフォントのためのフォントデータの各字形には,横書

きモードのための整列点,幅の値,及び整列ベースラインがあるということがある(縦書きモードはこの


144

X 4197

:2012

   

規格ではサポートされていない。

また,

上で必要とされるフォント特性に加え,

フォントは置換及び位置決めテーブルを提供してもよい。

この置換及び位置決めテーブルを用いて,フォーマッタ(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'/>


145

X 4197

:2012

      <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 を参照。

アニメーション:可


146

X 4197

:2012

   

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>


147

X 4197

:2012

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>


148

X 4197

:2012

   

  <!-- 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

過を追っている。最初のテキスト現在位置は,テキスト内容ブロック要素の'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)でも

説明されているように,二つの文字の間の結果的な空白が既定の英文字スペーシングと同じではな

い場合,利用者エージェントは合字を使わないほうがよい。また,使うスクリプトにおいて最も一

貫性をもつ結果を生み出す振る舞いを自らの知識によって判断して英文字スペーシングを適用しな


150

X 4197

:2012

   

いほうがよい(例  英文字スペーシングが高い場合,ローマスクリプトでは合字を壊すことによっ

て最も良い結果を生む可能性が高いが,これはアラビアスクリプトではあまり最適ではない。アラ

ビアスクリプトでは,英文字スペーシングを無視してその合字を維持することが望ましい。

合字の構成は,要素のマーク付けによって切り離されていない文字の間だけで行われなければなら

ないが,その他の 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">


151

X 4197

:2012

  <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 Tiny 1.2 لاو ط ي ن ت سا.</text>

</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

   

のかたまりは,テキストの独立したブロックを表す。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

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

   

初のテキスト位置において描画される。

注記 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

字形のいずれかを用いて描画するのかどうかを指定する。このプロパティの規定の定義は,この規格で追

加された情報を除き,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

   

座標系における高さの値として<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>


157

X 4197

:2012

上の'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">


158

X 4197

:2012

   

  <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>


159

X 4197

:2012

              </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>"


160

X 4197

:2012

   

テキスト内容が置かれる長方形領域の一角の 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

行う。このプロパティは,'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

   

'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

字形から構成される。ほとんどの場合,それぞれの単語は字形グループを一つ生成する。しかしな

がら,双方向性と特殊マーク付けとの相互作用によって,一つの単語に基づく字形が,それに埋め

込まれた他の単語に基づく字形をもつ場合もあるかもしれない。

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)

(例  フォーム入力フィールド)を構築することができる。


164

X 4197

:2012

   

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 利用者エージェントは利用者入力における空白を正規化してはならない。しかしながら,表示される


165

X 4197

:2012

テキストは'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"


166

X 4197

:2012

   

     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

キャンバス上の位置及び選択点の終わりの上に位置する図形要素にかかわらず,強調表示されなければな

らない。

テキスト選択操作が一旦終了すると(例  利用者がマウスボタンから手を離したとき)

,ポインタ装置の

活性化イベントのようなそのテキスト選択をキャンセルするイベント(例  マウスボタンを押したとき)

が発生するまで,選択されたテキストは強調表示され続ける。

テキスト選択操作の間に強調表示する文字を決めるための細かい規則については,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 ビューアでは,必要に応じてビューポートをパン及びズームして,

そのテキスト文字列を文脈において表示することができなければならない。また,そのテキスト文字列を

含む要素への断片識別子のリンク追跡があるかのように,

そのビューポートを調整できることが望ましい。


168

X 4197

:2012

   

言い換えれば,含まれるテキスト内容要素がビューポートに収められないくらい大きい場合には 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>


169

X 4197

:2012

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

   

らないことを示す。このメカニズムの提供によって,他の(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

適用対象:

図形及びテキスト内容要素

継承:

パーセンテージ:  該当なし


171

X 4197

:2012

メディア:

視覚

アニメーション:  可

算出値: 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

   

なる交わり方をしない射線を選んでもよい。

'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 で構成されるサブパス(箇条 を参照)は,ストロークされない。全く同じ位置に対する

moveto 及び lineto から構成されるサブパス,又は moveto 及び closepath から構成されるサブパスは,

'stroke-linecap'プロパティの値が butt の場合,ストロークしてはならない。また,'stroke-linecap'プロパティ


173

X 4197

:2012

の値が 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

このプロパティは,その要素の装飾的包含ボックスに寄与する。


174

X 4197

:2012

   

'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'との比率に一定の制限を課すものである。その