ようこそ！SVGの魅力あふれる世界へ
このサイトでは、ウェブで使われる強力な画像形式であるSVG (スケーラブル・ベクター・グラフィックス) について、その基礎からプロレベルの応用テクニックまで、段階的に分かりやすく解説します。インタラクティブなデモや具体的なサンプルを豊富に用意し、中学生にも理解できるように、専門用語は噛み砕いて説明しています。
SVGの基本図形の描き方、パスを使った自由な表現、色の付け方、テキストの扱い、変形やアニメーション、さらにはインタラクティブな操作まで、SVGの持つ多彩な機能を網羅的に学ぶことができます。さらに付録として、SVGの表現力を示すリッチなサンプル集や、楽しみながらSVGのインタラクションを体験できる簡単なゲーム集もご用意しました。
このサイトを通じて、あなたもSVGを自在に操り、魅力的でインタラクティブなウェブコンテンツを作成する力を身につけましょう！
サイト全体の目次
本編: SVGの基礎から応用まで
付録: もっとSVGを楽しもう！
SVGとは？ (あらためてご紹介)
SVGは、「スケーラブル・ベクター・グラフィックス」の略で、点で絵を描くビットマップ画像（JPEGやPNGなど）とは異なり、線や形を数式のようなテキストデータ（XML形式）で記録します。そのため、どれだけ拡大・縮小しても画像がギザギザになったりぼやけたりすることがなく、常にシャープで美しい表示が可能です。ロゴやアイコン、図表、地図、そしてインタラクティブなUI要素など、ウェブの様々な場面で活用されています。
もっと詳しいお話は、最初の「SVGって何？- もっと詳しく」のページで解説しますね！
このサイトで学べることの概要
- SVGの基本的な仕組みとXMLベースの書き方
- 四角、丸、線、パスなど、様々な図形をSVGで描く方法
- 色、グラデーション、パターンを使った豊かな塗りつぶしと線のスタイリング
- SVGテキストの表示、スタイリング、パスに沿った配置
- 図形のグループ化、再利用、変形（移動・回転・拡大縮小・傾斜）
- フィルター効果を使った高度な画像処理
- SMIL、CSS、JavaScriptを使ったSVGアニメーションの作り方
- JavaScriptと連携したインタラクティブなSVGコンテンツの作成
- レスポンシブSVG、SVGスプライト、アクセシビリティ対応、最適化といったプロの技
- SVGとCanvasの違いと、それぞれの技術の適切な使い分け
- 【付録】SVGを使ったリッチなサンプル制作例（アニメーションロゴ、インタラクティブ地図、データビジュアライゼーション、モーフィング図形、数学グラフ、ローソク足チャートなど）に触れる
- 【付録】SVGを使った簡単なゲームの基本的な作り方を体験する（ドットキャッチゲーム、シンプルシューターなど）
さあ、準備はいいですか？最初のページから順番に、または興味のあるページから自由に読み進めて、SVGの世界を存分に探検してください！