最近ではWEBデザインの世界でもSVG画像を利用する機会が増えてきました。 SVG画像とは簡単に言うと、点や線といった幾何学的な情報から成り立つ画像の形式で、いくら拡大しても綺麗なままでかつ、ファイルサイズもそのままであるのが特徴です。 またXML形式で保存されるため画像であるにもかかわらず、テキストエディタ(メモ帳)で編集することもできます。 ロゴやイラストなどのデザインによく使われますね。 さて、SVG画像を取り入れると従来のビットマップ画像(ラスター画像)では出来なかった、アニメーション効果を作ることができます。 以下の画像は実際にSVG画像を動かして「カエルがほっぺたを膨らませて鳴いている」様子をアニメーションにしたものです。図1 このような変化はスタイルシートによるアニメーション効果では実現出来ません。 図1 カエルのなく頃に これはSVGのパス(点と点を曲線で結んだもの)をJa
![Snap.svgを使ってSVG画像を簡単アニメーション!|株式会社カポタスト](https://cdn-ak-scissors.b.st-hatena.com/image/square/b72a39d94df1d6f9757eaf8f861f492e9bf47883/height=288;version=1;width=512/https%3A%2F%2Fcapotast.co.jp%2F_wp%2Fwp-content%2Fuploads%2F2016%2F11%2Fsnap-01.png)