SVGの基礎のトレーニングコース

導入

Scalable Vector Graphicsの概要

• ベクターグラフィックスの理解
• SVGの基礎
• SVGの用途とアプリケーション

SVGを使用する基本を学ぶ

• SVGを作成する
• SVGを画像として使用する
• SVG画像を作成する

SVGコードの詳細を掘り下げる

• SVGのレイアウト、構造、属性の理解
• SVG要素の概要
• SVGグラフィカル要素の操作
• SVGコンテナ要素の操作
• SVGグラデーション要素の操作

SVGをHTML & CSSと共に使用する

• SVGを埋め込む
• CSSを使用してSVGを編集し、スタイルを適用する
• SVGをレスポンシブにする

SVGスプライトの作成

• イメージスプライトの概要
• HTMLでインラインSVGスプライトを使用する
• HTMLで外部SVGスプライトを参照する
• CSSでインラインSVGスプライトを使用する
• SVGフラグメント識別子の使用

SVGの最適化

SVGでのアニメーション

• CSSを使用したSVGアニメーション
• SMILを使用したSVGアニメーション
• JavaScriptを使用したSVGアニメーション

最初のSVGロゴアニメーションプロジェクトを作成する

• 作業環境のセットアップ
• SVGを描画する
• SVGのスタイルを適用するためにSVGコードを編集する
• SVGを最適化する
• SVGをアニメートする

トラブルシューティング

閉会の挨拶