SVGファーストガイド｜相澤裕介｜カットシステム｜電子書籍｜shinanobook.com

shinanobook.com HOME >
Webで使える！SVGファーストガイド

Webで使える！SVGファーストガイド

　SVGの最大の特徴は、どんなに拡大しても画質が劣化しないこと。サイズという概念に捉われる必要がないため、様々な用途にSVGを活用できます。　また、画像でありながらテキストデータであることもSVGの大きな特徴といえます。位置や色などの情報をテキストデータとして保持しているため、JavaScriptを使って自在に画像を操作することが可能です。アニメーションにも対応しています。一般的に広く利用されているJPEGやPNGなどの画像は“単なる画像データ”でしかありません。他の画像に差し替えることはできても、画像の内容を手軽に操作することは不可能です。しかし、SVGなら可能です。このような特徴から、Flashのように“動きのある画像”を実現する場合にもSVGが活用できると期待されています。
　本書は、SVGを初めて学ぶ方を対象にした解説書です。HTMLとCSSの基礎的な知識があれば、すぐにSVGを試すことができます。HTMLやCSSと同様に、SVGはテキストエディターで記述できるため、SVGを始めるにあたって特別なアプリ—ケーションは何も必要ありません。もちろん、SVGの作成に画像編集アプリを使用することも可能です。本書ではInkscapeという無償のアプリケーションを紹介しているので、こちらも試してみるとよいでしょう。
　SVGはまだまだ普及し始めたばかりの技術ですが、近い将来、Webに欠かせない技術の一つになると認識されています。SVGの利用を始める第一歩として、本書でSVGの基本を学び、SVGのユニークな活用方法を発見していただければ幸いです。

SVGファーストガイド｜相澤裕介｜カットシステム

第1章　SVGの基本
1.1　SVGとは…？
1.2　ラスター画像とベクター画像
1.3　SVGの利点
1.4　XMLベースの記述について
1.5　SVGファイルの編集と圧縮
1.6　SVGの基本構成
第2章　線や図形の描画
2.1　直線の描画
2.2　四角形、円、楕円の描画
2.3　折れ線、多角形の描画
2.4　パスの描画
2.5　文字の配置
2.6　ラスター画像の表示
2.7　グループ化と要素の複製
2.8　リンクの設置
第3章　描画た図形の加工
3.1　スタイルシートの活用
3.2　表示する範囲の指定
3.3　座標変換による図形の変形
3.4　グラデーションとパターン
3.5　クリッピングとマスク
3.6　アニメーション
3.7　フィルター
第4章　SVGファイルの作成と素材の活用
4.1　Inkscapeの導入と基本操作
4.2　SVGに変換可能なWeb素材
4.3　覚えておくと便利な機能
第5章　JavaScriptでSVGを操作
5.1　属性値の指定と取得
5.2　アニメーション処理
5.3　拡大／縮小できる画像のサンプル
5.4　外部SVGファイルの操作
付録　SVG簡易リファレンス
A.1　要素
A.2　属性
A.3　プロパティ

ページ先頭へ

SVGファーストガイドを読むならshinanobook.com