SVGマスターへの道

公式ドキュメント・仕様書

• W3C SVG (Scalable Vector Graphics)

  SVGの公式仕様を策定しているW3Cのページです。最新の仕様書や関連情報へのリンクがあります。仕様書は詳細で正確な情報を得るための最終的な拠り所となります。

• MDN Web Docs - SVG (日本語)

  Mozillaによる開発者向けドキュメントサイト。SVGに関するチュートリアル、リファレンス、ガイドが非常に充実しており、分かりやすく実践的です。英語版 (MDN - SVG English) もあります。

学習サイト・チュートリアル

• SVG on the Web - A Practical Guide (CSS-Tricks)

  CSS-Tricksはウェブ開発に関する質の高い記事で有名ですが、その中でもSVGに関する総合的なガイドは非常に実践的で役立ちます。

• SVG Tutorial by Jenkov.com

  SVGの基本から応用まで、網羅的に解説しているチュートリアルサイトです。

• Sara Soueidan's Blog

  SVGのエキスパートであるSara Soueidan氏のブログ。高度なテクニックや深い洞察に満ちた記事が多数あります。ワークショップも開催されています。

• SVG Tutorials on Codrops

  Codropsは、インスピレーションあふれるウェブデザインやエフェクトのチュートリアルで知られており、SVGに関する高度なテクニックやクリエイティブな作例も豊富です。

SVG作成・編集・最適化ツール

• Inkscape

  無料でオープンソースの高機能ベクターグラフィックエディタ。SVGをネイティブフォーマットとして扱い、多くのSVG機能をサポートしています。学習用にもプロユースにも最適です。

• Adobe Illustrator

  プロフェッショナル標準のベクターグラフィックソフト。SVGの書き出し機能も強力で、詳細な設定が可能です。(有料)

• SVGOMG (SVGO GUI)

  ウェブ上で動作するSVG最適化ツール。SVGOという強力な最適化エンジンをGUIで簡単に操作でき、プレビューを見ながらファイルサイズを削減できます。

• Visual Studio Code (VS Code)

  人気のコードエディタ。SVGプレビュー、自動補完、SVGO連携などの便利な拡張機能が多数あり、SVGコードの編集に役立ちます。

SVG関連JavaScriptライブラリ

JavaScriptを使ってSVGをより動的に、そして高度に操作するためのライブラリも豊富に存在します。

• D3.js (Data-Driven Documents)

  データを元に動的なドキュメント（主にSVG）を生成するための非常に強力なライブラリ。インタラクティブなデータビジュアライゼーションの分野で広く使われています。

• GreenSock Animation Platform (GSAP)

  高性能で柔軟なJavaScriptアニメーションライブラリ。SVG要素のアニメーションにも強く、複雑なシーケンスやインタラクションをスムーズに実現できます。

• Snap.svg

  SVGの操作やアニメーションを容易にするために作られたJavaScriptライブラリ。Adobeによって開発が開始されました。

• SVG.js

  SVGの操作とアニメーションのための軽量で読みやすいAPIを提供するライブラリです。