SVGマスクとかSMILとか

SVGマスク

元のSVG

元の画像

マスク

元のSVG

マスクの色反転

元のSVG

アウトラインマスクとアニメーション(IEはSVGのアニメーションに対応していないため、動作せず)

SMIL(Synchronized Multimedia Integration Language)

SVGについて細かく記載されているページ
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_03.htm

円を動かす

円を動かす　その２

四角形の頂点を動かす

円を変形させる

svg領域にクラスをつけて背景色と領域サイズを指定している。
点線は普通にSVG

CSSで設定したサイズに合わせてSVGが変形している

SVG内の色に「currentColor」と指定した場合、CSSのcolorで指定した色が反映される例

カエルを瞬きさせる（パスを変形させることはできんかった。。。）