SVG in Unreal Engine: Motion-Design-Geometrie prüfen

Der SVG Importer von Unreal Engine bietet einen Geometrieablauf für Motion Design. Epics Tutorial zum SVG Importer beschreibt, wie aus 2D-Vektordateien 3D-Geometrie entsteht. Prüfe zunächst Plugin und Dokumentation für deine Engine-Version. Importiere dann eine kleine Quelle, deren Löcher, Farben und separate Teile du eindeutig erkennst.

Das ist eine andere Aufgabe, als ein SVG zur Laufzeit als UI-Bild anzuzeigen. Eine Texturvorschau, ein Szenen-Actor und ein Widget-Renderer sind unterschiedliche Ergebnisse. Diese Anleitung konzentriert sich auf die Vorbereitung von Grafik für Szenengeometrie und die Entscheidung, ob die entstehenden Objekte zum Motion Design passen.

Das Beispiel ist ein selbst erstelltes hohles Abzeichen mit einer abgesetzten Raute. Es ist ein dokumentierter Ablauf zum Ausprobieren in deinem Projekt, kein Bericht über einen durchgeführten Unreal-Import oder Extrusionstest.

Das Ziel wählen, bevor du die Grafik änderst

Entscheide, was die Grafik werden soll. Die Dateiendung SVG allein beantwortet diese Frage nicht.

Epics Motion-Design-Schnellstart beschreibt ein Editor-Plugin für Broadcast-Grafiken. Seine Oberfläche ähnelt UMG, bietet aber Funktionen über Widgets hinaus. Diese Ähnlichkeit belegt nicht, dass ein gewöhnliches UMG Image beliebige SVG-Dateien laden kann.

Wenn du dieselbe Quelle zwischen Engines verschiebst, behandelt der Leitfaden zum SVG-Import in Unity einen eigenen Importer und eine separate Zielentscheidung. Dass eine Engine die Datei akzeptiert, bestätigt nicht die Dateiunterstützung der anderen.

Das Plugin in deiner Engine-Version prüfen

Epics Eintrag zum SVG-Importer-Plugin trägt derzeit einen Beta-Hinweis und nennt als Kategorie Experimental. Nimm das zum Anlass, die Funktion in dem Projekt zu prüfen, das du ausliefern wirst, insbesondere bevor du stark davon abhängig wirst.

Das offizielle Tutorial ist für Unreal Engine 5.4 und 5.5 gekennzeichnet. Die aktuelle API-Dokumentation ist eine separate Referenz. Gehe daher nicht davon aus, dass die Panels oder Beschriftungen eines älteren Videos exakt zu einer anderen installierten Version passen.

Folge für die Motion-Design-Einrichtung den passenden Schnellstartanweisungen, um Motion Design und Storm Sync Motion Design Bridge zu aktivieren. Prüfe, ob der zugehörige SVG Importer im Projekt verfügbar und aktiviert ist. Folge einer Neustartaufforderung des Editors, bevor du die Grafik untersuchst.

Verwende zuerst ein kleines Testlevel. Der Schnellstart beschreibt ein leeres Level oder eine Vorlage, gefolgt von Motion Design > Create Defaults > Spawn. Halte diesen Test von einer komplexen Sequenz getrennt, damit sich ein fehlender Actor, ein Kameraproblem oder ein Fehler bei der Plugin-Einrichtung leichter von einer fehlerhaften Quelle unterscheiden lässt.

Ein hohles Abzeichen mit einem abgesetzten Teil vorbereiten

Speichere dieses selbst erstellte Beispiel als hollow-badge.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 140">
  <path fill="#147D78" fill-rule="evenodd"
    d="M24 24H116V116H24Z M46 46H94V94H46Z"/>
  <path fill="#EF8067" d="M150 30L168 48L150 66L132 48Z"/>
</svg>

Der petrolfarbene Pfad bildet einen quadratischen Rahmen mit leerer quadratischer Mitte. Die korallfarbene Raute ist ein separater Pfad mit Abstand zum Rahmen. Die Datei enthält kein Hintergrundrechteck, keine Kontur, keinen Text, Filter, externes Bild oder Animation.

Diese Auslassungen sind bewusst gewählt. Sie lassen dich vor dem Test einer komplexen Illustration einige hilfreiche Fragen stellen: Bleibt die Mitte offen, bleibt die Raute abgesetzt und sind beide Farben wie vorgesehen dargestellt?

Prüfe auch deine eigene Quelle in einem Vektoreditor. Wenn sie lediglich ein Foto in einen SVG-Container verpackt, hilft die Prüfung auf eingebettete Rasterbilder, diesen Fall zu erkennen. Eine Bitmap umzubenennen oder einzubetten liefert nicht die geschlossenen Grenzen, die diese Geometrieübung benötigt.

Behalte die bearbeitbare Masterdatei und exportiere eine Übergabekopie. Verwende als Ausgangspunkt einfache geschlossene Formen mit Füllung. Ergänze Effekte, Verläufe oder aufwendige Beschneidungen nur, wenn dein Projekt sie braucht und du ihre Verarbeitung prüfen kannst. Eine ähnlich benannte Klasse in einer API-Referenz ist keine vollständige Kompatibilitätsgarantie für die Funktion.

Eine Datei importieren und das entstandene Asset bestimmen

Wähle für den Versuch einen Inhaltsordner im Projekt. Epics allgemeiner Leitfaden zum Asset-Import dokumentiert den Button Import im Content Browser und den Import per Drag-and-drop. Wähle mit aktiviertem passendem SVG Importer das kleine SVG und prüfe die importerspezifischen Optionen sowie mögliche Diagnosemeldungen deiner installierten Version.

Wenn die Datei abgelehnt wird oder der erwartete Importer nicht erscheint, prüfe zuerst Engine-Version und Plugin-Einrichtung. Wiederholtes Vereinfachen der Grafik behebt keine nicht verfügbare Importfunktion.

Bestimme nach dem Import den Asset-Typ, bevor du das Asset platzierst. Epics SVGImporter-API umfasst SVG-Daten, SVG-Actors und Dynamic-Mesh-Komponenten. Das sind hilfreiche Unterscheidungen: Ein Quelldaten-Asset belegt noch nicht, dass die Szene die gewünschte Geometrie enthält.

Bringe das Asset über den SVG-Actor-Platzierungsablauf deiner Version in die Testszene. Die Motion-Design-Werkzeugkasten umfasst SVG-Actors. Wähle das platzierte Ergebnis und prüfe es von vorn, bevor du Tiefe, Materialien oder Animation änderst. Notiere das verwendete Asset und den Actor, damit ein Teammitglied die Einrichtung nachvollziehen kann.

Speichere die importierten Assets und bewahre das originale SVG auf. Unreals allgemeiner Importleitfaden erklärt, dass importierter Inhalt in Projekt-Assets gespeichert wird. Die Quelldatei bleibt für spätere Bearbeitung und erneuten Import wichtig.

Loch, Farbe und separate Objekte prüfen

Beginne mit der quadratischen Öffnung des Abzeichens. Betrachte sie vor einem kontrastierenden Hintergrund und, wenn das Ergebnis Tiefe besitzt, aus einem anderen Winkel. Eine helle Fläche über der Mitte kann von vorn wie eine Öffnung aussehen. Entscheidend ist, ob der gewünschte leere Bereich tatsächlich leer bleibt.

Wenn sich die Mitte füllt, prüfe die Teilpfade und das Füllverhalten der Quelle, bevor du weitere Effekte ergänzt. Der Leitfaden zu gefüllten SVG-Löchern erklärt, warum eine eingefärbte Innenfläche und eine echte Öffnung in einer flachen Vorschau gleich aussehen können.

Prüfe als Nächstes den Abstand neben der Raute. Achte auf eine unbeabsichtigte Verbindung, eine zusätzliche Fläche oder einen Hintergrundbereich. Wähle anschließend die für die Animation benötigten Objekte. Wenn sich die Raute unabhängig bewegen muss, prüfe, ob die verfügbare Actor-/Komponentenanordnung ihre Bewegung erlaubt, ohne den Rahmen zu verändern. Ein optisch getrennter Akzent belegt allein nicht die gewünschte Auswahlstruktur.

Prüfe die Farbe nach der Geometrie. Vergleiche den petrolfarbenen Rahmen und die korallfarbene Raute mit der Quelle unter den Material- und Lichtbedingungen der geplanten Komposition. Deute eine schattierte Seitenfläche nicht allein deshalb als Quellfarbenfehler, weil sie dunkler ist als die Vorderseite.

Bei Problemen mit der Tiefe liefert die Checkliste zur SVG-Extrusion Fragen zur Quellgeometrie. Sie ist keine Unreal-spezifische Befehlsanleitung. Ein korrektes Erscheinungsbild in diesem Test belegt außerdem kein wasserdichtes Fertigungsmesh.

Gekrümmte Grafik prüfen und bewusst erneut importieren

Das quadratische Beispiel vermeidet Kurven, die meisten Logos aber nicht. Epics SVGImporter-API beschreibt eine Einstellung zur Konvertierungsqualität beim Umwandeln von Splines in Polylinien. Quellkurven und erzeugte Darstellung müssen daher getrennt geprüft werden.

Prüfe bei einem abgerundeten Logo die äußere Kurve und die kleinste Öffnung beim geringsten Kameraabstand der Aufnahme. Wenn Kanten facettiert erscheinen, untersuche die entsprechenden Konvertierungsregler deiner Engine-Version. Setze nicht willkürlich einen Maximalwert, nur weil die Quelle eine Vektorgrafik ist.

Epics versionierte SVGData-Referenz für 5.4 erklärt, dass eine Änderung der Qualitätsüberschreibung einen erneuten Import und die Neuerzeugung der Geometrie auslöst. Speichere deshalb einen Ausgangszustand und prüfe die Szene nach Änderungen der Quelle oder Konvertierungseinstellungen erneut, statt anzunehmen, alle nachfolgenden Arbeiten blieben unbeeinflusst. Die Eigenschaftsnamen dieser Referenz sind kein Versprechen für jedes spätere Editor-Panel.

Wiederhole nach dem erneuten Import die Prüfungen von Löchern, Abständen, Materialien und Objektsteuerung. Teste die Szene im tatsächlichen Auslieferungskontext, bevor du das vollständige Grafikset organisierst. Dieser Leitfaden belegt weder Laufzeitunterstützung in gepackten Anwendungen noch browsergleiches SVG-Rendering oder universelle Leistung des Plugins.

Wenn ein Rasteremblem rekonstruiert werden muss

Wenn die Vektor-Masterdatei fehlt und die Quelle ein einfaches PNG- oder JPG-Emblem ist, kann PerfectVectors Bild-zu-Vektor-Ablauf einen statischen SVG-Kandidaten vorbereiten. Beschneide auf das Motiv, prüfe Öffnung und abgesetzten Akzent in der Vorschau und vergleiche den Kandidaten mit der Quelle. Lade das akzeptierte SVG herunter und führe anschließend dieselben Geometrieprüfungen in Unreal durch.

Vektorisierung wählt keine Szeneneinheiten, erstellt kein Rig, weist keine Produktionsmaterialien zu und garantiert keine bestimmte Mesh-Topologie. Verwende eine vorhandene Vektor-Masterdatei, wenn sie verfügbar ist. Behalte Fotos und komplexe gemalte Effekte als Rastergrafik, wenn das ihr Erscheinungsbild besser erhält. Bei einem einfachen geometrischen Abzeichen kann das direkte Erstellen der wenigen benötigten Formen mehr Kontrolle bieten als ihre Rekonstruktion aus Pixeln.

Halte eine kurze Übergabenotiz fest: Quelldatei, Engine-/Plugin-Version, Importereinstellungen, erwartete leere Bereiche, unabhängig bewegliche Teile und Kameraabstand bei der Prüfung. Die Leitfäden zur Grafikvorbereitung im Blog behandeln die Quellentscheidungen vor diesem enginespezifischen Schritt.

FAQ

Kann Unreal Engine SVG-Dateien importieren? Ja. Epic bietet einen SVG Importer für Motion-Design-Geometrie. Prüfe Funktion und Dokumentation für deine Engine-Version und kontrolliere anschließend das importierte Asset und das Szenenergebnis.

Bedeutet SVG-Import, dass UMG jedes SVG zur Laufzeit anzeigen kann? Nein. Ein Motion-Design-Geometrieablauf belegt kein beliebiges Laden von SVG zur Laufzeit in gewöhnlichen UMG-Widgets. Wähle und teste den von deiner UI benötigten Rendering-Weg.

Warum erscheint ein Loch in meinem SVG nach dem Import gefüllt? Prüfe, ob die Quelle eine echte Öffnung oder eine eingefärbte Innenfläche enthält. Kontrolliere anschließend Teilpfade und Füllverhalten. Prüfe die importierte Geometrie vor einem kontrastierenden Hintergrund, statt dich allein auf die Vorderansicht zu verlassen.

Kann ich ein PNG-Logo in ein Unreal-fertiges 3D-Objekt umwandeln? Vektorisierung kann statische Quellformen rekonstruieren, stellt aber nicht die Unreal-Szene fertig. Importiere das akzeptierte SVG, prüfe erzeugte Geometrie und Materialien und kontrolliere die für dein Projekt benötigte Objektsteuerung.

Quellen

1. Epic Games — Importieren und SVG Importer — Motion-Design-Geometrieablauf und Versionskontext des Tutorials.
2. Epic Games — SVG-Importer-Plugin — Plugin-Umfang, Beta-Hinweis und Kategorie Experimental.
3. Epic Games — Motion-Design-Schnellstart — Projekteinrichtung, Editor-Umfang und SVG-Actor-Werkzeugkasten.
4. Epic Games — Assets direkt importieren — Allgemeiner Import im Content Browser und Speichern von Assets.
5. Epic Games — SVGImporter-API — Daten, Actors, Dynamic-Mesh-Klassen und Konzepte zur Spline-Konvertierung.
6. Epic Games — SVGData, Unreal Python 5.4 — Versionierte Qualitätsüberschreibung und Verhalten bei der Neuerzeugung.

Prüfe Öffnung, abgesetzten Teil und Szenenverhalten eines Abzeichens, bevor du das Set importierst. Wenn nur Rastergrafik übrig ist, bereite einen SVG-Kandidaten vor, prüfe seine Geometrie und kontrolliere die akzeptierte Datei in deinem Unreal-Projekt.