SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。 そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。

Shape Shifterの使い方

2つのボックスに対してSVGファイルを適用します。あまり複雑でないものがいいようです。

そしてプレビューを押すとアニメーションされます。

一例。マイナスがプラスに変わるアニメーション。

さらに変化点を変えることでアニメーションを若干変化させられます。

ハンバーガーメニューが矢印に変わるアニメーション。

Shape Shifterを使うと2つのSVGファイルを自在に変化させられます。元になるSVGファイルは黒だけのシンプルなものが良いようです。アニメーションを作るのは面倒ですが、Shape Shifterを使えばとても簡単に実現できそうです。

Shape ShifterはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。

Shape Shifter alexjlockwood/ShapeShifter: SVG path morphing animation editor