SVGエッセンシャルズ 第2版

まえがき

　1章　はじめに
    1.1　グラフィックスシステム
        1.1.1　ラスターグラフィックス
        1.1.2　ベクターグラフィックス
        1.1.3　ラスターグラフィックスの用途
        1.1.4　ベクターグラフィックスの用途
    1.2　拡大と縮小
    1.3　SVGの役割
    1.4　SVGグラフィックスの作成
        1.4.1　文書構造
        1.4.2　基本的な図形
        1.4.3　スタイルを属性として指定する
        1.4.4　グラフィックオブジェクトをグループ化する
        1.4.5　座標系の変換
        1.4.6　その他の基本的な図形
        1.4.7　パス
        1.4.8　テキスト

2章　WebページでのSVGの使用
    2.1　画像としてのSVG
        2.1.1　<img>要素の中にSVGを含める
        2.1.2　CSSの中にSVGを含める
    2.2　アプリケーションとしてのSVG
    2.3　混合文書でのSVGマークアップ
        2.3.1　SVGでの外部オブジェクト
        2.3.2　XHTMLやHTML5でのインラインSVG
        2.3.3　その他のXMLアプリケーションでのSVG

3章　座標系
    3.1　ビューポート
    3.2　デフォルトのユーザー座標系の使用
    3.3　ビューポートに対するユーザー座標系の指定
    3.4　アスペクト比の維持
        3.4.1　preserveAspectRatioに関する位置揃えの指定
        3.4.2　meet指定子の使用
        3.4.3　slice指定子の使用
        3.4.4　none指定子の使用
    3.5　ネストされた座標系

4章　基本図形
    4.1　直線
    4.2　ストロークの特性
        4.2.1　stroke-width
        4.2.2　ストロークの色
        4.2.3　stroke-opacity
        4.2.4　stroke-dasharray
    4.3　矩形
        4.3.1　角の丸い矩形
    4.4　円と楕円
    4.5　<polygon>要素（多角形）
        4.5.1　交差する線を持つ多角形の塗りつぶし
    4.6　<polyline>要素（折れ線）
    4.7　ラインキャップと結合部
    4.8　基本図形のリファレンスの要約
        4.8.1　図形要素
        4.8.2　色の指定
        4.8.3ストロークと塗りつぶしの特性

5章　文書構造
    5.1　構造とプレゼンテーション
    5.2　SVGでのスタイルの使用
        5.2.1　インラインスタイル
        5.2.2　内部スタイルシート
        5.2.3　外部スタイルシート
        5.2.4　プレゼンテーション属性
    5.3　オブジェクトのグループ化と参照
        5.3.1　<g>要素
        5.3.2　<use>要素
        5.3.3　<defs>要素
        5.3.4　<symbol>要素
        5.3.5　<image>要素

6章　座標系の変換
    6.1　translate変換（移動）
    6.2　scale変換（拡大縮小）
    6.3　一連の変換
    6.4　テクニック：デカルト座標系からの変換
    6.5　rotate変換（回転）
    6.6　テクニック：指定した点を中心とする拡大縮小
    6.7　skewX変換とskewY変換（傾斜）
    6.8　変換に関するリファレンスの要約
    6.9　CSSでの変換とSVG

7章　パス
    7.1　moveto、lineto、closepath
    7.2　相対的なmovetoおよびlineto
    7.3　パスのショートカット
        7.3.1　水平のlinetoコマンドと垂直のlinetoコマンド
        7.3.2　パスに関する表記上のショートカット
    7.4　楕円弧
    7.5　他の楕円弧フォーマットからの変換
    7.6　ベジェ曲線
        7.6.1　二次ベジェ曲線
        7.6.2　三次ベジェ曲線
    7.7　パスに関するリファレンスの要約
    7.8　パスと塗りつぶし
    7.9　<marker>要素（マーカー）
    7.10　マーカーに関するいろいろ

8章　パターンとグラデーション
    8.1　パターン
        8.1.1　patternUnits属性
        8.1.2　patternContentUnits属性
        8.1.3　ネストされたパターン
    8.2　グラデーション
        8.2.1　linearGradient要素（線形グラデーション）
        8.2.2　radialGradient要素（円形グラデーション）
        8.2.3　グラデーションに関するリファレンスの要約
    8.3　パターンやグラデーションの変換

9章　テキスト
    9.1　テキストに関する用語
    9.2　<text>要素の属性とプロパティ
    9.3　テキストの位置揃え
    9.4　<tspan>要素
    9.5　textLength属性の設定
    9.6　縦書きのテキスト
    9.7　国際化対応とテキスト
        9.7.1　Unicodeと双方向性
        9.7.2　<switch>要素
        9.7.3　カスタムフォントの使用
    9.8　パスに沿ったテキスト
    9.9　空白類文字とテキスト
    9.10　ケーススタディ：グラフィックにテキストを追加する

10章　クリッピングとマスキング
    10.1　パスに従うクリッピング
    10.2　マスキング
    10.3　ケーススタディ：グラフィックのマスキング

11章　フィルター
    11.1　フィルターはどのように機能するか
    11.2　ドロップシャドウの作成
        11.2.1　フィルターの境界を設定する
        11.2.2　<feGaussianBlur>を使ってドロップシャドウを作成する
        11.2.3　フィルター結果の保存、連鎖、統合
    11.3　グローシャドウの作成
        11.3.1　<feColorMatrix>要素
        11.3.2　さらに<feColorMatrix>要素について
    11.4　<feImage>要素
    11.5　<feComponentTransfer>要素
    11.6　<feComposite>要素
    11.7　<feBlend>要素
    11.8　<feFlood>要素と<feTile>要素
    11.9　照明効果
        11.9.1　拡散照明
        11.9.2　鏡面反射照明
    11.10　背景へのアクセス
    11.11　<feMorphology>要素
    11.12　<feConvolveMatrix>要素
    11.13　<feDisplacementMap>要素
    11.14　<feTurbulence>要素
    11.15　フィルターに関するリファレンスの要約

12章　アニメーション
    12.1　アニメーションの基礎
    12.2　時間はどのように計測されるか
    12.3　アニメーションの同期
    12.4　反復アクション
    12.5　さまざまな属性のアニメーション化
    12.6　複数値の指定
    12.7　多段階アニメーションのタイミング
    12.8　<set>要素
    12.9　<animateTransform>要素
    12.10　<animateMotion>要素
    12.11　モーションパスのkeyPointsとkeyTimesの指定
    12.12　CSSによるSVG要素のアニメーション
        12.12.1　アニメーションのプロパティ
        12.12.2　アニメーションのキーフレームの設定
        12.12.3　CSSによる動きのアニメーション化

13章　対話性
    13.1　SVGでのリンクの使用
    13.2　CSSアニメーションの制御
    13.3　ユーザーによって始動されるSMILアニメーション
    13.4　SVGでのスクリプト
        13.4.1　イベント：概要
        13.4.2　イベントに対する監視と応答
        13.4.3　複数オブジェクトの属性を変更する
        13.4.4　オブジェクトのドラッグ
        13.4.5　HTMLページとの連携
        13.4.6　新しい要素の作成

14章　SVGDOMの使用
    14.1　要素の属性値の判別
        14.1.1　SVGデータオブジェクト
    14.2　SVGのインターフェースメソッド
        14.2.1　SVG要素に対するインターフェース
    14.3　ECMAScript/JavaScriptを用いたSVGの作成
    14.4　スクリプトによるアニメーション
    14.5　JavaScriptライブラリーの利用
    14.6　Snapでのイベント処理
        14.6.1　オブジェクトのクリック
        14.6.2オブジェクトのドラッグ

15章　SVGの生成
    15.1　カスタムデータをSVGに変換する
    15.2　XSLTを使ってXMLデータをSVGに変換する
        15.2.1　課題を定義する
        15.2.2　XSLTはどのように機能するか
        15.2.3　XSLスタイルシートの作成

付録A　SVGのために必要なXML
    A.1　XMLとは何か？
    A.2　XML文書の解剖
        A.2.1　要素と属性
        A.2.2　名前に関する構文
        A.2.3　整形式
        A.2.4　コメント
        A.2.5　実体参照
        A.2.6　文字参照
    A.3　文字エンコード
        A.3.1　Unicodeエンコード方式
        A.3.2　その他の文字エンコード
    A.4　妥当性
        A.4.1　文書型定義（DTD）
        A.4.2　それらを組み合わせる
    A.5　XML名前空間
    A.6　XMLを処理するためのツール
        A.6.1　パーサーの選択
        A.6.2　XSLTプロセッサー

付録B　スタイルシート入門
    B.1　スタイルの解剖
    B.2　インラインスタイル：style属性
    B.3　内部スタイルシート
    B.4　クラスセレクター
    B.5　SVGでのCSSの使用

付録C　プログラミングの概念
    C.1　定数
    C.2　変数
    C.3　代入と演算子
    C.4　配列
    C.5　コメント
    C.6　条件文
    C.7　反復アクション
    C.8　関数
    C.9　オブジェクト、プロパティ、メソッド
    C.10　方法ではなく本質

付録D　行列代数
    D.1　行列に関する用語
    D.2　行列の加算
    D.3　行列の乗算
    D.4　SVGは変換処理で行列代数をどのように使用しているか？

付録E　フォントの作成
    E.1　ttf2svgユーティリティー

付録F　楕円弧を別のフォーマットに変換する
    F.1　中心と角度によるフォーマットからSVGへの変換
    F.2　SVGから中心と角度によるフォーマットへの変換

索引