Die ersten Schritte auf dem Onyx No…←▼→XAMPP Fakemail unter Windows einric…

SVG animieren

Erstellt: 22.08.2021 Lesedauer 1 - 2 Min.

Präsentationen lassen sich sehr bequem mit SVG-Grafiken realisieren. Benötigt wird ein SVG und „Sozi“.

Demo-Präsentation
Die Animation öffnet nach Anklicken in einem neuen Tab/Fenster

Der Autor von „Sozi“ empfiehlt zwar Incscape für die Erstellung von SVG-Grafiken. Doch mir persönlich ist das zu verquastet. Ich greife liefer zu meinem Schweizer Grafikmesser Photoline. Damit kann – ich – intuitiver und schneller die gewünschten Grafiken erstellen. Vor allem ist das Exportieren damit sehr flexibel: Photoline exportiert Schriften – wenn gewünscht – als Vektoren in das SVG. Die Originaldatei bleibt bearbeitbar, die exportierte SVG-Grafik enthält vektorisierten Text. Incscape kann das zwar ebenfalls, doch nur für eine Kopie der Datei, was einerseits aufwändiger ist, andererseits bei einer kleinen Unachtsamkeit sehr fatal sein kann.

Das in Incspace integrierte „JessyInk“ für Animationen wird augenscheinlich nur sehr stiefmütterlich gepflegt. Das Reparieren der „stehenden“ Präsentation (s. Präsentationen mit Inkscape) mit einer aktuellen Incscape-Version und JessyInk habe ich nach einer halben Stunde entnervt aufgegeben.

Erheblich fluffiger lassen sich SVG-Grafiken mit Sozi in Bewegung setzen. Was einerseits an der – subjektiv – intuitiveren Oberfläche liegt, maßgeblich jedoch wohl auch an der sehr detallierten Dokumentation, die mehrsprachig, unter anderem auf Deutsch, vorliegt. Es erkennt, wenn die Grafik parallel von Photoline aktualisiert wurde. Das macht das Arbeiten sehr bequem. Nach einigen Versuchen auf Basis der Anleitung würde ich die nachfolgende Anmiation jetzt anders angehen1. Doch die vorhandenen Anleitungen sind gut, daher gibt es dazu keine Wiederholung in anderen Worten.

Was ich spannender finde ist das Integrieren in Webseiten. Bei Sozi wird dafür der „iframe“ vorgeschlagen, was jedoch bei dynamischen Seiten so seine Tücken hat und je nach Webseiten-Konzept schlicht unmöglich ist. Deshalb ist die nachfolgende Animation mit dem object-Tag in die Seite eingebettet:


1Eventuell dokumentiere ich das in einem weiteren Beitrag – wenn sich herausstellt, dass es tatsächlich zweckmäßiger ist.