SVGの解説書。SVGは2001年にW3C勧告として公開されたXMLベースの画像フォーマットです。ベクターグラフィックスなので拡大縮小、変形しても美しさが損なわれません。会社のロゴをSVGで作る企業も増えていますし、D3.jsによるデータビジュアライゼーションでも基盤技術としてSVGが使われています。本書では簡潔なサンプルを数多く使い、基本的な図形の作成、アニメーションや複雑なグラフィックスの作成、さらにはスクリプトによる制御など、SVGの基礎から応用までをわかりやすく解説します。スマートフォンのSVG対応も進み、今後はさらに利用が膨らむであろうこのレガシーで今とても熱いフォーマットの基本を本書でマスターしましょう。
SVGエッセンシャルズ 第2版
J. David Eisenberg、Amelia Bellamy-Royds 著、原 隆文 訳
- TOPICS
- Web
- 発行年月日
- 2017年05月
- PRINT LENGTH
- 432
- ISBN
- 978-4-87311-797-3
- 原書
- SVG Essentials, 2nd Edition
- FORMAT
- Print PDF EPUB
関連ファイル
目次
まえがき 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から中心と角度によるフォーマットへの変換 索引