SVGの良いところはベクターベースなので縮小、または拡大しても綺麗なまま表現できること、そして一般的に画像よりも軽量ということです。さらにJavaScriptとの親和性も高いのが開発者にとって嬉しいことです。 とはいえ、SVGに対して高度な操作を行うのは大変です。すでにある、例えば今回紹介するPath Sliderのようなライブラリを活用するのが良いでしょう。

Path Sliderの使い方

一例です。

クリックするとアイコンがアニメーションしながら動きます。

別な例です。

より実用的なデモです。スライドが滑らかです。

Path Sliderだけですべての表現ができるとは思えませんので、JavaScript側でも多少の設定は必要でしょう。しかし、こういったダイナミックな表現を行おうと思うと相当なコード量が必要なはずです。Path Sliderを使って、手軽に実装しましょう。

Path SliderはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Path Slider Basic Demo lmgonzalves/path-slider: Animating Elements Along SVG Paths with Javascript