12周年記念パーティ開催! 2024/5/10(金) 19:00

マークアップ・エンジニアのためのSVG入門

全10回

Web媒体で使用するSVGの基礎知識から、作成方法までを解説します。SVGはベクターデータであるため、高解像度化と画面サイズの多様化が進むスマートフォンなどで活用の場が増えていくでしょう。

本シリーズ中、第8回と第9回の内容がブラウザの仕様変更の影響を受けています。記事冒頭に注意がありますのでご覧ください。

最終回 SVGを3Dの世界へ

SVGの基本の番外編として、SVGデータを3Dにデータに変換し、WebGLを利用した実装に持ち込む方法を解説します。このような手法も引き出しのひとつとして持っておくのもいいかと思います。

第9回 SVGのアニメーション 3

前回解説したパスセグメントの機能を活用して、異なる2つのパス間のモーフィングの実装をどのように行うのか解説します。また、パスセグメントの作り方のコツも紹介します。

第8回 SVGのアニメーション 2

これから数回に渡ってSVGのpath要素の描画の仕組みを解説し、最終的にはそれを操作してモーフィングアニメーションを作ります。今回はpath要素のd属性について理解を深めます。

第7回 SVGのアニメーション 1

SVGにはHTMLにはないDOMを操作するためのインターフェース(API)が用意されています。これを利用し、DOMを操作して、アニメーションを創ることができます。

第6回 レスポンシブイメージ

SVGとCSSを組み合わせることができる特性を利用して、SVGを条件によって変化するレスポンシブイメージとして利用できます。この記事ではレスポンシブの仕組み、実装方法や応用例を解説します。

第5回 SVGをコーディングする 2

SVGはUIだけでなく、グラフィックデザインにも、もちろん幅広く利用することができます。シンボルとインスタンスの利用やその応用例、SVGの外部化などの実装手法をいくつか解説します。

第4回 SVGをコーディングする 1

コード化されたSVGデータをどのようにHTMLと組み合わせ、どんなことができるのか、サンプルとともに解説します。SVGの特徴を知って、UIなどの実装に役立てるヒントが満載です。

第3回 SVGデータの作成 2

Illustratorでピクセルの端数がでないように作成した元データを、SVGに書き出す過程を解説します。書き出しの設定、注意点のほか、書き出し後の処理ツールなども紹介します。

第2回 SVGデータの作成 1

Web媒体で使用するSVGデータの作成方法をAdobe Illustrator CCでのデータ作成、SVG書き出しを例に紹介します。まずは元データ作成時の環境設定、作成時の注意点などを解説します。

第1回 SVGコードの基本

この記事ではまずSVGのコードとしての基本と、さまざまな実装方法を概観してみましょう。それぞれの特徴を捉えられると、実装方法の選択が適切にできます。