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

[cover photo]
TOPICS
Web
発行年月日
PRINT LENGTH
432
ISBN
978-4-87311-797-3
原書
SVG Essentials, 2nd Edition
FORMAT
Print PDF EPUB
Ebook
3,960円
Ebookを購入する
Print
3,960円

SVGの解説書。SVGは2001年にW3C勧告として公開されたXMLベースの画像フォーマットです。ベクターグラフィックスなので拡大縮小、変形しても美しさが損なわれません。会社のロゴをSVGで作る企業も増えていますし、D3.jsによるデータビジュアライゼーションでも基盤技術としてSVGが使われています。本書では簡潔なサンプルを数多く使い、基本的な図形の作成、アニメーションや複雑なグラフィックスの作成、さらにはスクリプトによる制御など、SVGの基礎から応用までをわかりやすく解説します。スマートフォンのSVG対応も進み、今後はさらに利用が膨らむであろうこのレガシーで今とても熱いフォーマットの基本を本書でマスターしましょう。

関連ファイル

目次

まえがき

 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から中心と角度によるフォーマットへの変換

索引