Eine geeignete SVG-Datei für TGS enthält echte Vektorgrafik auf einer klar definierten Zeichenfläche. Der Dateiname sagt wenig aus: SVG kann auch Fotos, bearbeitbaren Text und Effekte enthalten, die eine Konvertierung nicht überstehen. Bereite vor der Animation eine eigene Exportkopie vor, damit Korrekturen das bearbeitbare Original nicht beschädigen.

Prüfe, was die Datei tatsächlich enthält

Öffne die SVG-Datei in deinem Grafikprogramm und wähle einzelne Objekte aus. Ein Logo aus bearbeitbaren Konturen ist eine gute Grundlage. Ein Foto innerhalb einer SVG-Datei bleibt ein Rasterbild, auch wenn der Browser es einwandfrei anzeigt. Auch Text kann wie Vektorgrafik aussehen, aber weiterhin von einer Schriftart abhängen.

Ein Abzeichen kann beispielsweise drei unterschiedliche Bestandteile enthalten: einen Schild aus Konturen, eine bearbeitbare Beschriftung und ein eingebettetes Porträt. Behalte den Schild, wandle die Beschriftung in Pfade um und ersetze das Porträt durch eine vereinfachte Vektorzeichnung. Dieselbe Komposition ohne diese Änderungen erneut zu speichern, löst das Kompatibilitätsproblem nicht.

Trenne Original und Exportkopie

Bewahre das ursprüngliche Dokument mit bearbeitbarem Text, wiederverwendbaren Komponenten und den gewünschten Effekten auf. Dupliziere die Zeichenfläche oder das Dokument für die Konvertierung. In dieser Kopie kannst du Pfade vereinfachen und Buchstaben in Konturen umwandeln, ohne spätere Textänderungen unnötig zu erschweren. Benenne beide Versionen nach ihrer jeweiligen Aufgabe.

Entferne ungenutzte Objekte aus der Exportkopie, statt sie lediglich hinter anderen Formen zu verstecken. Erhalte getrennte Elemente, wenn sie sich unabhängig bewegen sollen. Zerlege eine zusammenhängende Form aber nicht unnötig in Dutzende winzige Teile. Mit einer übersichtlichen Objektstruktur erkennst du leichter, welche Teile du gerade animierst.

Ersetze anfällige Darstellungseffekte

Untersuche Schatten, Masken, strukturierte Füllungen und andere Effekte einzeln. Ein Browser kann SVG-Funktionen darstellen, die der TGS-Export nicht reproduzieren kann. Bei einem kleinen Sticker vermittelt eine einfache versetzte Silhouette den Schatten möglicherweise zuverlässiger als ein Weichzeichner. Prüfe das Aussehen nach jedem Austausch.

Wandle nicht die gesamte Zeichnung in ein Rasterbild um, um ihr Aussehen zu bewahren. Dadurch kann die SVG-Vorschau überzeugend wirken, obwohl die für TGS benötigte Vektorstruktur verloren geht.

  • Wandle den endgültigen Text in Pfade um.
  • Ersetze eingebettete Bilder durch Vektorgrafik.
  • Baue wichtige Effekte mit einfachen Formen nach.
  • Bewahre einen Screenshot des gewünschten Aussehens zum Vergleich auf.

Lass Platz für die geplante Bewegung

Platziere die Grafik mittig auf einer bewusst gewählten Zeichenfläche und prüfe ihre äußersten Punkte. Ein statisches Motiv, das fast alle Ränder berührt, hat wenig Platz zum Federn oder Drehen. Entscheide zunächst über die grundlegende Bewegung, bevor du die Zeichenfläche eng um die Zeichnung beschneidest.

Stell dir ein quadratisches Emblem vor, das sich um seine Mitte dreht. Während der Drehung reichen die Ecken weiter nach außen als bei waagerechten Kanten. Verkleinere die Grafik oder wähle eine sanftere Bewegung. Nur die Größenangabe der Zeichenfläche zu ändern, verschiebt die eigentliche Geometrie nicht.

Vergleiche einen einfachen Export, bevor du ihn verfeinerst

Wähle deine SVG-Datei im Konverter aus und melde dich über Telegram an. Beim Auswählen einer SVG-Datei wird eine Kopie zur Diagnose an den Dienst gesendet. Beginne mit einer unbewegten Komposition oder einem zurückhaltenden Preset und vergleiche die Vorschau mit deiner Referenz. Prüfe Buchstaben, Innenräume, Farben und transparente Bereiche, bevor du die Bewegung detailliert bearbeitest.

Fehlt bereits in dieser Ausgangsversion etwas, korrigiere das betreffende Element in der SVG-Datei. Ist die Ausgangsversion korrekt, die animierte Variante aber fehlerhaft, konzentriere dich auf Bewegung, Zeitablauf und Grenzen. So verfolgt jede Änderung einen klaren Zweck, und unabhängige Anpassungen verdecken nicht das ursprüngliche Problem.

Quellen und weiterführende Informationen