Was ist SVG überhaupt?

SVG ist ein vektor-orientiertes Dateiformat für Grafiken. Besonders geeignet ist es für Icons, Logos oder Illustrationen. Gegenüber den üblichen Web-Formaten wie PNG, JPG, GIF & Co. hat SVG mehrere Vorteile:

• Die Grafiken sind ohne Qualitätsverlust beliebig stufenlos skalierbar. Das ist vor allem für responsives Web-Design unglaublich praktisch, weil man für unterschiedliche Endgeräte (mit unterschiedlichen Bildschirmgrößen) nicht mehrere Grafiken in verschiedenen Größen erstellen muss.
• Die Dateigrößen sind normalerweise deutlich geringer, weil die Grafiken über Vektoren und nicht als Raster aufgebaut werden.
• Sie können ganz leicht in unterschiedlichen Farben eingefärbt werden. Wenn Sie zum Beispiel drei Smileys in unterschiedlichen Farben benötigen, reicht dafür eine SVG-Grafik.
• Der Hintergrund kann transparent sein. Das ist zum Beispiel bei einem JPG nicht möglich.

Animationen mit SVG?

Was viele nicht wissen: Auch mit dem SVG-Dateiformat kann man animierte Grafiken erstellen. Das kann man sonst nur mit GIF.

Damit kann man also die Vorteile eiens SVG (siehe oben) mit jenen eines animierten GIF kombinieren.

SVGator hilft bei der Erstellung

Die Erstellung einer Animation für ein SVG ist allerdings etwas komplizierter als bei einem GIF. Bei einem animierten GIF muss man ja „nur“ unterschiedliche Abstufungen der Animation als Grafiken „aneinanderreihen“, das funktioniert so bei SVG logischerweise nicht.

Bei unseren Recherchen sind wir auf SVGator gestoßen. Es ist zwar kostenpflichtig (ca. 20,-/Monat), doch uns haben mehrere Aspekte gefallen:

• Wenn man mit anderen Animationsprogrammen Erfahrung hat, findet man sich sehr leicht zurecht. Es ist klug aufgebaut und intuitiv.
• Es ist komplett web-basiert, man muss also kein weiteres Tool installieren.
• Man kann über eine „Morphing“-Funktion sehr weiche, fließende Animationen erstellen.
• Der Support ist gut. Wir hatten 2-3 Fragen, die schnell und kompetent beantwortet wurden.
• Man kann das Ergebnis der Animation auch als GIF oder MP4 exportieren.
• Es ist auch möglich, „Libraries“ einzurichten, um häufig verwendete Elemente dort zu speichern und in mehreren Animationen einzusetzen.

Es gibt übrigens eine kostenlose Möglichkeit, um SVGator zu testen. Dort sind die Möglichkeiten jedoch stark eingeschränkt; für einen kurzen Test reicht es, aber sonst muss man auf einen kostenpflichtigen Account wechseln.