誰でも簡単!!SVGで行うアニメーションとクリッピングマスク

Web制作
ブッ君
ブッ君

今回はSVGを利用した様々なアニメーションやクリッピングマスクの方法を説明して行くよ!!

マー君
マー君

SVG??

マー君
マー君

ありがとう!画像形式の1つなんだね・・・

でも、画像でアニメーション?クリッピングマスク???

いまいちイメージがわかないなぁ・・・

ブッ君
ブッ君

ふふふ・・・

SVGとCSSやJSを組み合わせて使用する事で、とても簡単にアニメーションや複雑な図形でクリッピングマスクをかけることもできるんだ!!

SVGをコードで読み解こう

ブッ君
ブッ君

SVGは画像ファイルとして、○○.svgや○○.svgzとして使用する事も出来ますが、アニメーションやクリッピングマスクを行うにはSVGをコードで扱う必要があるから、その内容をしっかりと理解しよう!!

図形の形状ごとに使用される要素を理解しよう

SVGタグに使用する属性や、図形の形状で使用されるタグは形状毎に違うので、こちらでしっかりと理解しよう!

その他の要素一覧

SVGで行うクリッピングマスク

CSSのclip-pathで図形を自動作成する便利なジェネレーター

SVGで行うアニメーション

ブッ君
ブッ君

SVGでアニメーションを行う方法は大きく分けて3つあるよ!

SMILでアニメーションを行う

ブッ君
ブッ君

SMILはIEとEdgeにはサポートしていないことと、一度chromeに非推奨警告が出されたことがあり、今後に不安があるから、SVGのアニメーションはCSSやJSを使用した方がいいね!!

CSSでアニメーションを行う

こちらでは様々なアニメーションを丁寧な説明と共に紹介してくれています!かなり応用されているアニメーションもありますが、実際に自分で作成しながら学ぶと技術向上になると思います!

JSでアニメーションを行う

SVGモーフィングアニメーション

ブッ君
ブッ君

モーフィングとは、「図形から図形に滑らかに変形」させるアニメーションのことだよ!

SVGアニメーションの便利なジェネレーター

SVG画像をアップロードするだけで、アニメーションを自動作成してくれる、便利なジェネレーターです!

デザインソフトでSVGファイルを作成しよう

SVGファイルを作成するツール

jpgやpng画像をアップロードするだけでSVGファイルを作成することが出来るオンラインツールです!

SVGのレスポンシブ

SVG使用時の注意点について

コメント

タイトルとURLをコピーしました