SVG in Rive: Bearbeitbare Grafik für Animation vorbereiten

Du kannst ein SVG in Rive importieren, indem du die Datei in den Editor ziehst oder das Assets-Panel verwendest. Rive konvertiert die Grafik in native bearbeitbare Vektorobjekte. Das Importergebnis braucht zwei Prüfungen: Sieht es richtig aus und kannst du die Teile auswählen, die du animieren möchtest? Rives SVG-Dokumentation erklärt Konvertierung und Grenzen.

Beginne mit der originalen Vektordatei, wenn du eine hast. Wenn deine Quelle PNG oder JPG ist, entscheide zwischen dem Beibehalten als Bild, Zeichnen der benötigten Formen oder vorherigem Nachzeichnen in SVG. Nachzeichnen ist hilfreich, um bearbeitbare Konturen zu rekonstruieren. Diese musst du weiterhin für die Animation organisieren.

Was passiert mit einem SVG in Rive?

Nach dem Import arbeitest du mit Rive-Objekten. Das Quell-SVG ist nicht in der exportierten .riv-Datei enthalten und Rives Laufzeitumgebungen konvertieren derzeit keine SVG-Assets zur Laufzeit. Schließe SVG-Vorbereitung und Import im Editor ab, bevor du die Rive-Datei exportierst. Rives Exportverhalten beschreibt diese Grenze.

Die Unterscheidung ist auch bei der Grafikauswahl wichtig. Eine Formebene steuert Füllung und Kontur, während die enthaltenen Pfade die Geometrie definieren. Klappe eine Form in der Hierarchy auf, um diese Pfade zu prüfen. Eine übergeordnete Gruppe auszuwählen kann die ganze Illustration bewegen, obwohl ihre untergeordneten Teile bearbeitbar sind. Rives Leitfaden zu Formen und Pfaden zeigt diese Struktur.

Wenn sich das Quell-SVG selbst nicht trennen lässt, verwende die Diagnose für SVG-Objekte und Gruppen, um vor Änderungen eine Gruppe, einen zusammengesetzten Pfad oder ein eingebettetes Bild zu identifizieren.

Die Teile vor dem Export vorbereiten

Notiere die gewünschten Bewegungen, bevor du die Grafik zusammenfasst oder reduzierst. Betrachte eine Schreibtischlampe: Der Schirm soll nicken, der Arm sich neigen und der Fuß stillstehen. Diese Bewegungen legen separate Teile nahe, die du auswählen und anordnen kannst.

Dieselbe Methode funktioniert für die Augenlider einer Figur, eine winkende Hand oder ein Logoelement: Benenne die Bewegung und prüfe dann, ob die Quelle das dafür benötigte Teil enthält.

Die beweglichen Teile planen

Benenne wichtige Teile im Quelldokument und bewahre eine Masterkopie. Halte zusammengehörige Details zusammen, wenn sie sich gemeinsam bewegen sollen. Fasse nicht eine ganze Illustration in einem Pfad zusammen, nur um die Objektliste zu verkürzen.

Organisiere diese Teile nach dem Import mit Rive-Gruppen und gib ihnen separate Transformationsregler. Rive erlaubt dir, eine Gruppe zu erstellen und in der Hierarchy Objekte darin abzulegen. Du kannst eine Auswahl auch mit Command+G unter macOS oder Ctrl+G unter Windows gruppieren. Rives Gruppendokumentation behandelt diese Bedienelemente.

Aus SVG, Figma oder Illustrator importieren

Eine gespeicherte SVG-Datei

1. Speichere einen separaten SVG-Export, damit die bearbeitbare Masterdatei verfügbar bleibt.
2. Ziehe die Datei in Rive oder klicke im Assets-Panel auf + und wähle die zu importierende Datei.
3. Platziere die Grafik am benötigten Ort und klappe ihre Struktur in der Hierarchy auf.
4. Wähle einen kleinen Teil, ändere seine Füllung und mache die Änderung anschließend rückgängig. Prüfe, ob sich nur der gewünschte Bereich geändert hat.

Die beiden Dateiimportwege sind in Rives Assets-Überblick dokumentiert. Ein erfolgreicher Import ist der Beginn der Bearbeitungsprüfung.

Figma

Verwende in Figma Copy as SVG für die gewünschte Grafik und füge sie anschließend in den Rive-Editor ein. Prüfe importierte Formen und Erscheinungsbild, bevor du den Rest einer großen Komposition kopierst. Das ist Rives dokumentierter Figma-Importweg.

Illustrator

Setze die SVG-Gestaltung auf Presentation Attributes. Rive dokumentiert leicht unterschiedliche Bezeichnungen für Illustrators Exportwege:

• Save As: Setze in SVG Options CSS Properties auf Presentation Attributes.
• Export As: Setze in SVG Options Styling auf Presentation Attributes.
• Direktes Kopieren und Einfügen: Prüfe die Styling-Optionen von Export As SVG, da Illustrator diese Einstellungen für diesen Weg verwendet.

Deaktiviere außerdem Preserve Illustrator Editing Capabilities im Übergabe-SVG. Behalte die Illustrator-Masterdatei separat. Rive warnt, dass diese Option zusätzliche Illustrator-Daten einfügt, die Dateigröße erhöht und Daten enthalten kann, die der Importer nicht erkennt. Rives Illustrator-Hinweise sind die Quelle für diese Einstellungen.

Das Importsymptom der ersten Prüfung zuordnen

Rive unterstützt lineare und radiale Verläufe, gibt aber nicht jede SVG-Funktion wieder. Die folgende Tabelle überträgt seine Liste nicht unterstützter Funktionen in eine Reparaturreihenfolge. Die Spalte zur ersten Prüfung ist ein Diagnosevorschlag, keine Garantie für deine Datei.

Wenn ein Illustrator-SVG schwarz erscheint, beginne mit der Exporteinstellung Presentation Attributes und prüfe dann die Farbe der betroffenen Form. Schwarze Grafik allein identifiziert die Ursache nicht. Verwechsle sie nicht mit Rives dokumentiertem weißen Ersatzwert für inherit.

Bei fehlendem Bildinhalt erklärt der Leitfaden zu eingebetteten Rasterbildern in SVG, wie du prüfst, ob die Datei tatsächliche Pfade oder ein Bild in einem SVG-Container enthält. Laut seiner Asset-Typenliste kann Rive JPEG, PNG und WebP als eigene Bildassets importieren. Einen texturierten Hintergrund als separate Rastergrafik zu behalten kann die richtige Wahl sein.

Wenn der Import nie fertig wird

Probiere in derselben Sitzung ein kleines einfaches SVG. Wenn auch das fehlschlägt, speichere deine Arbeit und starte den Editor neu, bevor du die Grafik neu aufbaust. Wenn nur eine Datei fehlschlägt, isoliere ihre Gruppen in separaten Exportkopien, bis du den betroffenen Abschnitt findest. Das trennt ein Sitzungsproblem von einem dateispezifischen Problem und legt keine universelle Komplexitätsgrenze fest.

Wann PerfectVector in diesen Ablauf gehört

PerfectVector ist hilfreich, wenn deine Quellgrafik Raster ist und du bearbeitbare Vektorkonturen für Rive brauchst. Konvertiere eine flache PNG- oder JPG-Illustration in SVG-Pfade und prüfe das Ergebnis vor dem Import in einem Vektoreditor. Kontrolliere Silhouette, kleine Lücken und Grenzen zwischen Teilen, die getrennte Bewegung benötigen. Nachzeichnen rekonstruiert sichtbare Bereiche. Es stellt keine ursprünglichen Ebenennamen wieder her und entscheidet nicht, wo deine Animationsgelenke liegen.

Kehre zum Lampenbeispiel zurück. Wenn Arm und Fuß eine verbundene Form geworden sind, trenne die Teile an dieser Grenze oder zeichne sie neu. Wenn ein beweglicher Teil einen im Quellbild verdeckten Bereich freilegt, zeichne diesen selbst. Erledige das, bevor du die Animation um die importierte Struktur aufbaust.

Verwende das Original-SVG, wenn es bereits geeignete Pfade enthält. Verwende native Zeichenwerkzeuge für wenige einfache geometrische Teile. Behalte Fotos und gemalte Texturen als Rasterassets, wenn ihr Erscheinungsbild wichtiger ist als bearbeitbare Konturen. Unser Überblick zur Bildvektorisierung erklärt die Kompromisse bei Quellbildern. Der Leitfaden zur Nachzeichnung in Adobe Animate behandelt einen eigenen Ablauf, wenn Animate dein Ziel ist.

Eine Bewegung prüfen, bevor du die Animation aufbaust

Wähle auf einer Arbeitskopie den Lampenschirm und drehe ihn leicht. Prüfe, ob die gewünschten Details ihm folgen, während der Fuß stillsteht. Mache die Änderung rückgängig, wähle den Arm und wiederhole den Test. Wenn sich die falschen Teile bewegen, prüfe die Anordnung übergeordneter und untergeordneter Objekte, bevor du weitere Pfade bearbeitest.

Prüfe auch den Drehpunkt. In Rive erben untergeordnete Objekte die Transformationen ihres übergeordneten Objekts. Der Ursprung bestimmt, wo Drehung oder Skalierung stattfinden. Mit Freeze kannst du ein übergeordnetes Objekt verschieben, ohne seine untergeordneten Objekte zu bewegen. Schalte es mit Y um und nach der Ursprungsanpassung wieder aus. Folge für die Bedienelemente Rives Leitfaden zu Freeze und Origin.

Prüfe, bevor du dich auf den Animationsaufbau festlegst:

• Jedes benötigte Teil lässt sich unabhängig auswählen.
• Füllungen, Konturen, Löcher und Verläufe entsprechen weiterhin dem gewünschten Erscheinungsbild.
• Separat importierte Rasterbilder sind dort vorhanden, wo du sie behalten möchtest.
• Bewegung legt keine versehentlichen Lücken oder fehlende verdeckte Grafik frei.
• Jedes bewegliche Teil dreht sich um das vorgesehene Gelenk.
• Originalquelle und saubere Importkopie bleiben verfügbar.

FAQ

Macht ein SVG-Import die Grafik in Rive bearbeitbar? Ja, für die von Rive unterstützten SVG-Funktionen. Klappe die importierte Grafik in der Hierarchy auf, um den benötigten Teil auszuwählen. Wenn mehrere Bereiche weiterhin als ein Objekt wirken, prüfe Gruppierung und Pfadstruktur.

Warum ist das Bild in meinem SVG verschwunden? Rive ignoriert eingebettete Bilder beim SVG-Import. Suche die originale Rastergrafik und importiere sie als Bildasset oder zeichne geeignete Grafik in Pfade nach, wenn du bearbeitbare Konturen brauchst.

Unterstützt Rive SVG-Verläufe? Lineare und radiale Verläufe werden unterstützt. Verlaufstransformationen werden ignoriert, daher muss die Platzierung eines Verlaufs nach dem Import möglicherweise angepasst werden.

Erstellt das Nachzeichnen eines PNGs eine Rive-Animation? Nachzeichnen kann SVG-Geometrie aus geeigneter Rastergrafik erstellen. Du musst weiterhin bewegliche Teile prüfen und trennen, ihre Hierarchie und Ursprünge setzen und die Animation in Rive aufbauen.

Quellen

1. Rive — SVG und Vektorassets — Konvertierung in native Objekte, Illustrator- und Figma-Import, Laufzeit-Exportverhalten und nicht unterstützte SVG-Funktionen.
2. Rive — Assets — Dateiimport-Bedienelemente und separate Rasterbildassets.
3. Rive — Überblick über Formen und Pfade — Formgestaltung und Pfadgeometrie innerhalb einer Formebene.
4. Rive — Gruppen — Teile organisieren und Gruppierungsbedienelemente in der Hierarchy.
5. Rive — Freeze und Origin — Transformationen übergeordneter und untergeordneter Objekte und Verschieben eines Ursprungs ohne Bewegung der untergeordneten Grafik.

---

Wenn deine Grafik als PNG oder JPG beginnt und bearbeitbare Konturen braucht, bereite mit PerfectVector ein SVG vor. Prüfe die nachgezeichneten Teile, importiere die Datei in Rive und teste eine unabhängige Bewegung, bevor du den Rest der Animation aufbaust.