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

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

by J. David Eisenberg, Amelia Bellamy-Royds, 原 隆文
Released May 2017
Publisher(s): O'Reilly Japan, Inc.
ISBN: 9784873117973

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

Table of contents

  1. 大扉
  2. 原書大扉
  3. クレジット
  4. 　
  5. まえがき
    1. 本書の対象読者
    2. 本書の非対象読者
    3. それでも本書を読む人は……
    4. サンプルについて
    5. 本書の構成
    6. 表記上のルール
    7. 意見と質問
    8. 初版に関する謝辞
    9. 第2版に関する謝辞
  6. 1章　はじめに
    1. 1.1　グラフィックスシステム
      1. 1.1.1　ラスターグラフィックス
      2. 1.1.2　ベクターグラフィックス
      3. 1.1.3　ラスターグラフィックスの用途
      4. 1.1.4　ベクターグラフィックスの用途
    2. 1.2　拡大と縮小
    3. 1.3　SVGの役割
    4. 1.4　SVGグラフィックスの作成
      1. 1.4.1　文書構造
      2. 1.4.2　基本的な図形
      3. 1.4.3　スタイルを属性として指定する
      4. 1.4.4　グラフィックオブジェクトをグループ化する
      5. 1.4.5　座標系の変換
      6. 1.4.6　その他の基本的な図形
      7. 1.4.7　パス
      8. 1.4.8　テキスト
  7. 2章　WebページでのSVGの使用
    1. 2.1　画像としてのSVG
      1. 2.1.1　<img>要素の中にSVGを含める
      2. 2.1.2　CSSの中にSVGを含める
    2. 2.2　アプリケーションとしてのSVG
    3. 2.3　混合文書でのSVGマークアップ
      1. 2.3.1　SVGでの外部オブジェクト
      2. 2.3.2　XHTMLやHTML5でのインラインSVG
      3. 2.3.3　その他のXMLアプリケーションでのSVG
  8. 3章　座標系
    1. 3.1　ビューポート
    2. 3.2　デフォルトのユーザー座標系の使用
    3. 3.3　ビューポートに対するユーザー座標系の指定
    4. 3.4　アスペクト比の維持
      1. 3.4.1　preserveAspectRatioに関する位置揃えの指定
      2. 3.4.2　meet指定子の使用
      3. 3.4.3　slice指定子の使用
      4. 3.4.4　none指定子の使用
    5. 3.5　ネストされた座標系
  9. 4章　基本図形
    1. 4.1　直線
    2. 4.2　ストロークの特性
      1. 4.2.1　stroke-width
      2. 4.2.2　ストロークの色
      3. 4.2.3　stroke-opacity
      4. 4.2.4　stroke-dasharray
    3. 4.3　矩形
      1. 4.3.1　角の丸い矩形
    4. 4.4　円と楕円
    5. 4.5　<polygon>要素（多角形）
      1. 4.5.1　交差する線を持つ多角形の塗りつぶし
    6. 4.6　<polyline>要素（折れ線）
    7. 4.7　ラインキャップと結合部
    8. 4.8　基本図形のリファレンスの要約
      1. 4.8.1　図形要素
      2. 4.8.2　色の指定
      3. 4.8.3　ストロークと塗りつぶしの特性
  10. 5章　文書構造
    1. 5.1　構造とプレゼンテーション
    2. 5.2　SVGでのスタイルの使用
      1. 5.2.1　インラインスタイル
      2. 5.2.2　内部スタイルシート
      3. 5.2.3　外部スタイルシート
      4. 5.2.4　プレゼンテーション属性
    3. 5.3　オブジェクトのグループ化と参照
      1. 5.3.1　<g>要素
      2. 5.3.2　<use>要素
      3. 5.3.3　<defs>要素
      4. 5.3.4　<symbol>要素
      5. 5.3.5　<image>要素
  11. 6章　座標系の変換
    1. 6.1　translate変換（移動）
    2. 6.2　scale変換（拡大縮小）
    3. 6.3　一連の変換
    4. 6.4　テクニック：デカルト座標系からの変換
    5. 6.5　rotate変換（回転）
    6. 6.6　テクニック：指定した点を中心とする拡大縮小
    7. 6.7　skewX変換とskewY変換（傾斜）
    8. 6.8　変換に関するリファレンスの要約
    9. 6.9　CSSでの変換とSVG
  12. 7章　パス
    1. 7.1　moveto、lineto、closepath
    2. 7.2　相対的なmovetoおよびlineto
    3. 7.3　パスのショートカット
      1. 7.3.1　水平のlinetoコマンドと垂直のlinetoコマンド
      2. 7.3.2　パスに関する表記上のショートカット
    4. 7.4　楕円弧
    5. 7.5　他の楕円弧フォーマットからの変換
    6. 7.6　ベジェ曲線
      1. 7.6.1　二次ベジェ曲線
      2. 7.6.2　三次ベジェ曲線
    7. 7.7　パスに関するリファレンスの要約
    8. 7.8　パスと塗りつぶし
    9. 7.9　<marker>要素（マーカー）
    10. 7.10　マーカーに関するいろいろ
  13. 8章　パターンとグラデーション
    1. 8.1　パターン
      1. 8.1.1　patternUnits属性
      2. 8.1.2　patternContentUnits属性
      3. 8.1.3　ネストされたパターン
    2. 8.2　グラデーション
      1. 8.2.1　linearGradient要素（線形グラデーション）
      2. 8.2.2　radialGradient要素（円形グラデーション）
      3. 8.2.3　グラデーションに関するリファレンスの要約
    3. 8.3　パターンやグラデーションの変換
  14. 9章　テキスト
    1. 9.1　テキストに関する用語
    2. 9.2　<text>要素の属性とプロパティ
    3. 9.3　テキストの位置揃え
    4. 9.4　<tspan>要素
    5. 9.5　textLength属性の設定
    6. 9.6　縦書きのテキスト
    7. 9.7　国際化対応とテキスト
      1. 9.7.1　Unicodeと双方向性
      2. 9.7.2　<switch>要素
      3. 9.7.3　カスタムフォントの使用
    8. 9.8　パスに沿ったテキスト
    9. 9.9　空白類文字とテキスト
    10. 9.10　ケーススタディ：グラフィックにテキストを追加する
  15. 10章　クリッピングとマスキング
    1. 10.1　パスに従うクリッピング
    2. 10.2　マスキング
    3. 10.3　ケーススタディ：グラフィックのマスキング
  16. 11章　フィルター
    1. 11.1　フィルターはどのように機能するか
    2. 11.2　ドロップシャドウの作成
      1. 11.2.1　フィルターの境界を設定する
      2. 11.2.2　<feGaussianBlur>を使ってドロップシャドウを作成する
      3. 11.2.3　フィルター結果の保存、連鎖、統合
    3. 11.3　グローシャドウの作成
      1. 11.3.1　<feColorMatrix>要素
      2. 11.3.2　さらに<feColorMatrix>要素について
    4. 11.4　<feImage>要素
    5. 11.5　<feComponentTransfer>要素
    6. 11.6　<feComposite>要素
    7. 11.7　<feBlend>要素
    8. 11.8　<feFlood>要素と<feTile>要素
    9. 11.9　照明効果
      1. 11.9.1　拡散照明
      2. 11.9.2　鏡面反射照明
    10. 11.10　背景へのアクセス
    11. 11.11　<feMorphology>要素
    12. 11.12　<feConvolveMatrix>要素
    13. 11.13　<feDisplacementMap>要素
    14. 11.14　<feTurbulence>要素
    15. 11.15　フィルターに関するリファレンスの要約
  17. 12章　アニメーション
    1. 12.1　アニメーションの基礎
    2. 12.2　時間はどのように計測されるか
    3. 12.3　アニメーションの同期
    4. 12.4　反復アクション
    5. 12.5　さまざまな属性のアニメーション化
    6. 12.6　複数値の指定
    7. 12.7　多段階アニメーションのタイミング
    8. 12.8　<set>要素
    9. 12.9　<animateTransform>要素
    10. 12.10　<animateMotion>要素
    11. 12.11　モーションパスのkeyPointsとkeyTimesの指定
    12. 12.12　CSSによるSVG要素のアニメーション
      1. 12.12.1　アニメーションのプロパティ
      2. 12.12.2　アニメーションのキーフレームの設定
      3. 12.12.3　CSSによる動きのアニメーション化
  18. 13章　対話性
    1. 13.1　SVGでのリンクの使用
    2. 13.2　CSSアニメーションの制御
    3. 13.3　ユーザーによって始動されるSMILアニメーション
    4. 13.4　SVGでのスクリプト
      1. 13.4.1　イベント：概要
      2. 13.4.2　イベントに対する監視と応答
      3. 13.4.3　複数オブジェクトの属性を変更する
      4. 13.4.4　オブジェクトのドラッグ
      5. 13.4.5　HTMLページとの連携
      6. 13.4.6　新しい要素の作成
  19. 14章　SVG DOMの使用
    1. 14.1　要素の属性値の判別
      1. 14.1.1　SVGデータオブジェクト
    2. 14.2　SVGのインターフェースメソッド
      1. 14.2.1　SVG要素に対するインターフェース
    3. 14.3　ECMAScript/JavaScriptを用いたSVGの作成
    4. 14.4　スクリプトによるアニメーション
    5. 14.5　JavaScriptライブラリーの利用
    6. 14.6　Snapでのイベント処理
      1. 14.6.1　オブジェクトのクリック
      2. 14.6.2　オブジェクトのドラッグ
  20. 15章　SVGの生成
    1. 15.1　カスタムデータをSVGに変換する
    2. 15.2　XSLTを使ってXMLデータをSVGに変換する
      1. 15.2.1　課題を定義する
      2. 15.2.2　XSLTはどのように機能するか
      3. 15.2.3　XSLスタイルシートの作成
  21. 付録A　SVGのために必要なXML
    1. A.1　XMLとは何か？
    2. A.2　XML文書の解剖
      1. A.2.1　要素と属性
      2. A.2.2　名前に関する構文
      3. A.2.3　整形式
      4. A.2.4　コメント
      5. A.2.5　実体参照
      6. A.2.6　文字参照
    3. A.3　文字エンコード
      1. A.3.1　Unicodeエンコード方式
      2. A.3.2　その他の文字エンコード
    4. A.4　妥当性
      1. A.4.1　文書型定義（DTD）
      2. A.4.2　それらを組み合わせる
    5. A.5　XML名前空間
    6. A.6　XMLを処理するためのツール
      1. A.6.1　パーサーの選択
      2. A.6.2　XSLTプロセッサー
  22. 付録B　スタイルシート入門
    1. B.1　スタイルの解剖
    2. B.2　インラインスタイル：style属性
    3. B.3　内部スタイルシート
    4. B.4　クラスセレクター
    5. B.5　SVGでのCSSの使用
  23. 付録C　プログラミングの概念
    1. C.1　定数
    2. C.2　変数
    3. C.3　代入と演算子
    4. C.4　配列
    5. C.5　コメント
    6. C.6　条件文
    7. C.7　反復アクション
    8. C.8　関数
    9. C.9　オブジェクト、プロパティ、メソッド
    10. C.10　方法ではなく本質
  24. 付録D　行列代数
    1. D.1　行列に関する用語
    2. D.2　行列の加算
    3. D.3　行列の乗算
    4. D.4　SVGは変換処理で行列代数をどのように使用しているか？
  25. 付録E　フォントの作成
    1. E.1　ttf2svgユーティリティー
  26. 付録F　楕円弧を別のフォーマットに変換する
    1. F.1　中心と角度によるフォーマットからSVGへの変換
    2. F.2　SVGから中心と角度によるフォーマットへの変換
  27. 著者紹介
  28. 奥付

Product information

  • Title: SVGエッセンシャルズ 第2版
  • Author(s): J. David Eisenberg, Amelia Bellamy-Royds, 原 隆文
  • Release date: May 2017
  • Publisher(s): O'Reilly Japan, Inc.
  • ISBN: 9784873117973

You might also like

book

ハンズオンNode.js

by 今村 謙士

Node.jsの入門書。対象読者は、フロントエンド開発の知識はあってもサーバサイド開発は知らないエンジニアや、他言語の経験はあってもNode.jsは触ったことがないプログラマー。本書ではターミナルのプロンプトにコマンドを入力してその反応を確認したり、簡単なスクリプトをNode.js環境で実行したりしながら、Node.jsプログラミングの基本からWebアプリケーションの開発、テスト、デプロイまでをハンズオン形式で学びます。また、コードの背景にある設計思想や、プログラムの挙動の仕組みについてもしっかり掘り下げます。本書のゴールは、読者がNode.jsの全体像を掴み、業務レベルでのアプリケーション開発に対応可能な知識を身につけることです。

book

プログラミングRust 第2版

by Jim Blandy, Jason Orendorff, Leonora F. S. Tindall, 中田 秀基

次世代ブラウザ開発用にMozillaによって開発されたRustは、C/C++並みのパフォーマンスと低レベルの制御能力に加え、メモリとスレッドの安全性を担保し、さらに並行性にも優れるといった特徴を持つ、優秀な言語です。本書はMozillaで実際にRustを使ってFirefoxを開発している著者らによる、言語の概要と用途について解説する書籍で、Rustのほとんどの機能を詳細にカバーします。Rustのメジャーバージョンアップにより非同期処理が可能となったことに対応し、第2版では新たに非同期処理の章を設け、この機能を詳細に解説しています。Rust 2021対応。

book

ベタープログラマ ―優れたプログラマになるための38の考え方とテクニック

by Pete Goodliffe, 柴田 芳樹

本書は、優れたコードを作りだし、人々と効率的に働く生産性の高いプログラマになるための考え方とテクニックを38のテーマで紹介します。個人的な活動として、継続的な学習方法と停滞を避けるための課題の見つけ方など、自らを成長させる方法も紹介。さらに組織の中で他の人とコミュニケーションを取りながら、効果的に働くための習慣を解説します。『Code Craft』の著者Pete Goodliffeが、自らの経験を元に「優れたプログラマ」になるための考え方と習慣をまとめた本書は、プログラミングを愛し、長く続けながら、優れたプログラマになりたいと思うすべての人に必携の一冊です。

book

プログラミングRust

by Jim Blandy, Jason Orendorff, 中田 秀基

RustはMozilla財団の支援下で開発が進められており、Mozillaの次世代ブラウザエンジンの実装にも用いられているシステムプログラミング用言語です。C/C++並みのパフォーマンスと低レベルなメモリ操作機能、型システムを用いたメモリとスレッドの安全性を両立し、さらに安全な並列性も実現した、いま最も注目されている言語です。このRustをテーマにした本書は、Rust特有の所有権、移動、借用といった概念だけでなく、生産性と柔軟性を向上させるジェネリックコード、クロージャ、イテレータ、コレクションといった高度な機能についても詳しい説明を加えており、言語仕様から高度なプログラミング技術までを網羅した決定版です。