皆さん、こんにちは。サツキです。 今回は、SVGアニメーションの話をしようと思います。 「SVGアニメーション」と聞いて難しいのでは?と思った方もおられるかもしれませんが、今回はCSSのみを使用した簡単に実装できるSVGアニメーションをご紹介しようと思います。 この先、SVGの利用はますます増えていくことになるかと思いますのでSVGアニメーションの経験の無い方はこの記事を読んで是非一度作成してみてください。 そもそもSVGとは? SVG(Scalable Vector Graphics)とは、XMLをベースにしたベクターデータで構成された画像形式の一種です。 WEBサイトでよく利用される「PNG」や「JPG」といった画像形式はドット(点)の集まりで構成されるビットマップデータなのですが、このビットマップデータには画像の拡大・縮小などの編集の際に画質が落ちてしまう特徴があります。 一方、ベク
![ロゴをリッチに!?SVGアニメーションの簡単作成](https://cdn-ak-scissors.b.st-hatena.com/image/square/df2b17dfd00033e77da87c7733656be3c82054f3/height=288;version=1;width=512/https%3A%2F%2Fwww.e-webseisaku.com%2Fwp%2Fwp-content%2Fuploads%2F2020%2F01%2Fdezdez02.jpg)