Animiertes SVG direkt aus Illustrator erstellen

[draupnir]

Hallo zusammen,
Adobe Illustrator hat die Fähigkeit Grafiken auf verschiedene Zeichenflächen zu verteilen. Warum nicht diese Zeichenflächen für eine Bild-für-Bild-Animation wie bei einer GIF-Animation verwenden? Nur halt als Vektorgrafik. Dann hätte man die Vorteile einer scharfen Darstellung, einer kleinen Dateigröße und eine Skalierbarkeit ohne Verluste im Aussehen.

Hier ein Beispiel (leiden kann ich die SVG-Datei hier nicht direkt anzeigen lassen):
A061-2D-AI-JS-SVG_anim-CrazyClock-5sec_anim.svg

Genau für diesen Wunsch habe ich ein Javascript geschrieben. Es kann von meiner Webseite
http://www.computergrafik-know-how.de/javascript-svg-animation-aus-illustrator/
kostenlos geladen werden. Ich habe dort auch ein paar anderen Javascripts auf Lager.

Gruß Jens.

P.S. Wer ausser in Safari unter macOS 10.14 und 10.15 Probleme mit der Darstellung von animierten SVGs in seinem Webbrowser hat, der möge das bitte hier oder per persönliche Nachricht schreiben. Danke.

 

[liselotte]

Coole Action
leider sieht auf Firefox (WIN) sehr verwirrend aus
MfG

 

[draupnir]

Guten Morgen,
welcher Firefox? Kannst Du bitte mal Screenshot posten. Danke. J.

 

[liselotte]

Firefox 90.02 Win 10
Screenshot ist gerade schlecht, aber die Zeiger bewegen sich nicht im Kreis
MfG

 

[draupnir]

Danke für die Rückmeldung. Ich schaue es mir an, ob ich was machen kann. J.

 

[liselotte]

Edge leider das selbe
MfG

 

[draupnir]

Äh, das die Uhr mehrere Zeiger bekommt ist Absicht. Das ist eine Hommage an die TV-Serie "Loki" (2021), siehe Disney+.
Ich habe eher Probleme mit fehlenden oder halben Frames in Safari, die nicht unter macOS 11 laufen. Und da habe ich WORDPRESS im Verdacht, die Probleme zu verursachen.
Darum hier noch eine Seite mit reinem HTML:
http://www.computergrafik-know-how.de/download/animated_SVG/animated_SVG.html

Danke, für's Anschauen.

 

[liselotte]

Wenn die Zeiger so "spinnen" sollen ist m. M. alles OK
Die Flage ist auch gut geworden
MfG

 

[draupnir]

Danke. Das Spiel "Mühle" lädt leider viel zu lang. Das 3D-Modell des Spielbretts aus dem Illustrator hat viel zu viele (nicht sichtbare) Flächen. Jedoch habe ich schon eine Idee, wie ich das in den nächsten Tagen verbessern kann.

 

[draupnir]

Update: Version 1.7 ist verfügbar.

• 1.7 Befehle wie »pattern, symbol, linearGradient, radialGradient«, die in mehreren Frame einen identischen Inhalt haben, werden zusammengefasst vor die Frames geschrieben, um eine kleinere Datei zu erhalten.

• 1.6 Die einzelnen SVG-Dateien, die das Skript speichert, löscht das Skript auf Wunsch automatisch wieder. Die Einstellungen finden Sie ab Zeile 62 im Skript.

• 1.5 Meldungen erscheinen entweder in Englisch oder in Deutsch. Kein Sprachmix mehr.

Mehr auf meiner Seite: http://www.computergrafik-know-how.de/javascript-svg-animation-aus-illustrator/