Snap.svgを使ってSVG画像を簡単アニメーション！｜株式会社カポタスト
最近ではWEBデザインの世界でもSVG画像を利用する機会が増えてきました。 SVG画像とは簡単に言うと、点や線といった幾何学的な情報から成り立つ画像の形式で、いくら拡大しても綺麗なままでかつ、ファイルサイズもそのままであるのが特徴です。 またXML形式で保存されるため画像であるにもかかわらず、テキストエディタ︵メモ帳︶で編集することもできます。 ロゴやイラストなどのデザインによく使われますね。 さて、SVG画像を取り入れると従来のビットマップ画像︵ラスター画像︶では出来なかった、アニメーション効果を作ることができます。 以下の画像は実際にSVG画像を動かして﹁カエルがほっぺたを膨らませて鳴いている﹂様子をアニメーションにしたものです。図1このような変化はスタイルシートによるアニメーション効果では実現出来ません。 図1カエルのなく頃に これはSVGのパス︵点と点を曲線で結んだもの︶をJa
