SVGの本が出ました。
⬆︎Apple Booksへのリンク。
こんにちは、「ふ」です。
このたび、SVGの本を発表しました。
SVGを自由に操作するスキルを手に入れ、webデザインに役立ててください。
🔸 SVG画像は、その内容をすべてコードで表現することができます。
これまでSVG画像をコピペするだけにとどまっていた方も、本書を読むことで画像を自由にカスタマイズすることが可能になります。
🔸 当電子書籍は固定レイアウトではなく、XHTMLで書いたものをそのまま表示させています。そのため、さまざまなデバイスで表示させてもレイアウト崩れはありません。
もちろんiPhoneでもオッケー。webサイトを閲覧する感覚で読むことができます。
🔸 前半はSVGの実装方法、基本的なコーディングについて。
後半はグラデーション、マスク、アニメーションなど、特殊な効果やインタラクティブ機能について紹介。
本書ではSVGの基礎から応用までカバーしています。
SVGの操作で困ったときには、いつでも本書を参考にしてください。
〜以下に本書の概要を紹介していきます。
基本編。
１、SVGの良いところ。
SVGは「拡大縮小してもぼやけない」ということのほかにも、軽量であることや、コーディングで自由にカスタマイズできることなどのメリットがあります。
またSVG画像はなぜ「くっきり表示」できるのか？
デバイスに描画される仕組みについても、理解しておきましょう。
２、SVGを使ってみよう。
IllustratorやLinearity Curve（元Vectornator）で作成したイラストをSVGで書き出し、webで表示するまでの手順を紹介します。
またアートボードについての注意や、テキストロゴを書き出す際のアウトライン化についても解説します。
３、SVGコードの概要。
SVGファイルは、xmlというマークアップ言語をベースに作られています。
ここではxmlファイルについて、また画像を表現するための名前空間/viewBox属性について理解を深めていきます。
４、基本図形を描画する要素。
円や多角形など、基本的な図形を表現する要素について紹介します。
これらを知ることで「どのコードがどの要素を指しているか」がわかるようになり、SVGファイルの内容が読み解けるようになります。
簡単な図形であれば、コードから描画していくことも可能となります。
５、path〜万能の要素。
<path>要素は前の基本的図形を含め、すべてのオブジェクトを描画することのできる要素です。
自在な曲線を描くペジェ曲線についてもここで学びます。〜といっても、複雑な計算式を理解する必要はありません。ハンドルと曲線の動きさえ知っていればオッケーです。
６、スタイリング。
塗りつぶしの色や線の状態など、要素のスタイルを操作する方法について解説します。SVGに用意されているプレゼンテーション属性や、CSSを使った指定が可能です。
応用編。
７、便利タグについて。
SVGに用意されている便利な機能。複数の要素をまとめて扱うことのできる<g>要素や、同じ要素を使い回すための<defs>、<symbol>タグについて紹介します。
８、グラデーション。
要素に質感をあたえる、グラデーション効果。SVGでは直線的に色が変化する線形グラデーションと、円形に色が変化していく放射状グラデーションが使えます。細かなカスタマイズ方法も紹介しますので、マスターしておきましょう。
９、画像を使用する。
*画像提供：Unsplash/Kenny Eliason
SVGはpngやjpegなど、外部のラスター形式の画像を読み込ませることも可能です。
写真とベクター要素を組み合わせて、素敵なデザイン作りに役立ててください。
１０、クリップパスとマスク。
要素や画像の「切り抜き」に役立つ２つの機能。
クリップパスは、自身の内側のみ表示します。一方でマスクは自身の不透明度を相手に移植します。「そこだけ透過させる」ときに便利です。
１１、SVGの座標系。
本書における学習の「ゴール」に向かうための準備となる章です。
座標空間にもとづいて描画されるSVG。その根本的な仕組みについて理解しておきましょう。
１２、transform。
SVGを「鮮明な画像を表示させる」ためだけに使うのは、もったいない。
さらにその先のことを考えている方にとっては、transformの知識は必須です。
４種類の変形と、変形の基準点について。座標変換の仕組みレベルから詳しく解説していきます。
１３、アニメーション。
最後はアニメーションについて紹介します。
SVGをアニメーションさせるには、CSS、SMIL、Web Animations APIの３種類の方法があります。それぞれの実装手順と違い・使いどころについてお話しします。
お礼が言いたくて。
この場をお借りして、みなさんにお礼申し上げます。
今回の出版にあたっては、原稿→編集→発表の手続きまで「ふ」１人で進めてきました。不慣れな工程も多くあり、かなりの期間を要することになりました。
しかしそんな中、サイトを観てくださった方々のコメントや、X(twitter)でのみなさんからのいいね・メッセージがいつも「ふ」の大きな推進力となり、無事に発表までたどり着くことができました。
１人では決して、成し得なかったことです。
ほんとうにありがとうございました！
今後もフーノページやその他のコンテンツがみなさんのお役に立てるよう、日々努力していきます。たのしみにしていてください。
ではまた〜 🎵
「ふ」です。
ベクターグラフィック、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。