CSS-Tricks hat am 24. April 2017 mehrere Verfahren für SVG Shape Morphing im Web verglichen. Der Überblick stellt native Browsertechniken und JavaScript-Bibliotheken gegenüber, die Vektorformen ineinander überführen.
Als ursprüngliche Option beschreibt der Beitrag SMIL. Für neue Projekte verweist CSS-Tricks außerdem auf MorphSVG als Plugin für GreenSock GSAP, auf CSS-Animationen mit dem SVG-Pfadattribut d sowie auf die JavaScript-Bibliothek SVG Morpheus. Die vorgestellten Beispiele zeigen die jeweiligen Verfahren direkt im Browser.
Bibliotheken ergänzen native SVG-Techniken
Weitere Abschnitte behandeln KUTE.js, d3, d3-interpolate-path, mo.js und bodymovin. Die Werkzeuge unterscheiden sich bei Browserunterstützung, Lizenzmodell, Kontrolle über die Interpolation und der Frage, ob Formen mit unterschiedlich vielen Punkten verbunden werden können.
Für interaktive Medien und Spiele im Browser ist die Auswahl des Verfahrens Teil der technischen Planung. SVG eignet sich unter anderem für Benutzeroberflächen, Karten, Logos und animierte Statusanzeigen. Der ältere Beitrag zu SVG-ViewBox und interaktiven Datenvisualisierungen behandelte bereits die Verbindung aus SVG und JavaScript.