SVG in Unity: Grafik für UI Toolkit oder Sprites

SVG-Import in Unity beginnt mit zwei Entscheidungen: welche Editorversion du nutzt und wo die Grafik erscheinen soll. Unity 6.3 enthält SVG-Import für UI Toolkit und Texture2D. Direkter SVG-Import als Sprite- oder uGUI-Asset verwendet das Vector-Graphics-Paket; frühere Editoren nutzen die ältere Paketlinie. Unity dokumentiert diese Aufteilung im Versionsleitfaden zu Vector Graphics.

Wenn du bereits ein bearbeitbares SVG hast, bereite diese Datei für den Importer vor. Ist deine einzige Quelle ein PNG oder JPG, zeichne sie nur nach, wenn du Vektorformen brauchst. Eine Textur oder ein Pixel-Art-Sprite kann rasterbasiert bleiben.

Teste ein repräsentatives Icon, um Probleme der Quellgrafik von Unity-Import- und Darstellungsproblemen zu trennen, bevor du einen ganzen Satz verarbeitest.

Für Szenengeometrie in einer anderen Engine nutze die SVG-Importprüfungen für Unreal Engine, um Motion-Design-Quellformen, Öffnungen und separate Teile zu prüfen.

Wähle den Importweg vor der Grafikbearbeitung

Wähle den Weg anhand der Zielkomponente. Ein Asset, das in einem UI-Toolkit-Layout funktioniert, gehört nicht automatisch in ein Sprite-Renderer-Feld.

Die Tabelle folgt Unitys Paketanforderungen. Lege die Editor- und Paketversionen deines Projekts fest. Anweisungen für Unity 2018 oder einen 2.0-Vorschauimporter können andere Optionen beschreiben als ein aktuelles 6.3-Projekt.

Wähle zuerst das Ziel

Behalte einen kleinen Importtest neben deiner Grafik

Wähle ein Icon mit einer Kurve, einem inneren Loch und jedem Farbeffekt, den der Satz benötigt. Behalte das Original-SVG neben einer einfachen Version aus einfarbig gefüllten Formen. Importiert die einfache Version korrekt, untersuche die komplexe Grafik, bevor du das ganze Projekt änderst.

Bereite ein SVG vor, das der Importer reproduzieren kann

Öffne die Quelle in einem Vektoreditor und prüfe die tatsächlichen Objekte. Behalte das ursprüngliche Original und erstelle dann einen separaten Export zur Übergabe an Unity.

Bestätige, dass die Grafik Pfade enthält

Ein SVG kann über ein <image>-Element eine Bitmap enthalten; die Endung allein belegt keine Vektorgeometrie. Die W3C-Spezifikation zu eingebetteten Inhalten dokumentiert diesen Unterschied. Wähle einen Grafikteil im Editor und prüfe seine Objekte oder sein Markup. Nutze die Diagnose eingebetteter Rasterbilder, wenn es ein einziges Bildrechteck ist.

Existiert die ursprüngliche Vektordatei, exportiere sie erneut. Ein daraus exportiertes PNG nachzuzeichnen fügt Rekonstruktionsarbeit hinzu und kann die Silhouette verändern. Stimme bei einer Iconfamilie zuerst Zeichenfläche, Innenabstände und optisches Gewicht ab; der Leitfaden zur SVG-Vorbereitung für UI-Kits behandelt diese Entscheidungen für den ganzen Satz.

Ersetze nicht unterstützte Funktionen bewusst

Unitys nativer Importer unterstützt einen Teil von SVG 1.1. Zu den dokumentierten Ausschlüssen gehören bearbeitbarer Text, Pixelmasken, Filter, Interaktion und Animation. Eine Browservorschau kann daher korrekt aussehen, während das Unity-Ergebnis abweicht. Siehe Unitys SVG-Einschränkungen.

Bereite die Ausgabekopie nach den Anforderungen der Grafik vor:

• Wandle dekorative Schrift in Pfade um. Behalte Oberflächenbeschriftungen als Text in der Oberfläche, wenn sie Bearbeitung oder Lokalisierung benötigen.
• Baue einen benötigten Schatten oder ein Leuchten mit einem vom Ziel unterstützten Effekt neu auf oder behalte diese Grafik als Raster.
• Prüfe Masken getrennt von Beschneidungspfaden. Eine weiche Pixelmaske und ein geometrischer Clip sind unterschiedliche Konstruktionen.
• Plane Animation in Unity, statt dich auf im SVG eingebettete Animation zu verlassen.

Reduziere nicht jeden Verlauf, nur weil ein Filter nicht unterstützt wird. Teste den Effekt, den das Design tatsächlich verwendet. Scheitert ein komplexes Emblem, exportiere eine Version mit einfarbigen Füllungen und ergänze ihre Effekte einzeln wieder. Das grenzt die Funktion ein, die das Aussehen verändert.

Entferne versehentliche Komplexität

Lösche verstreute Flecken, versteckte Duplikate und Hintergrundrechtecke, die nicht zum Icon gehören. Vereinfache eine offensichtlich unruhige Kurve nur unter Vergleich mit der Quelle. Ein kleines Loch, das bei der Bereinigung geschlossen wird, ist eine fehlgeschlagene Bearbeitung, auch wenn die Datei kürzer wird.

Es gibt keine brauchbare universelle Zielanzahl von Knoten für alle Spielgrafiken. Ein geometrischer Pfeil und eine handgezeichnete Figur brauchen unterschiedlich viele Details. Der Leitfaden zur SVG-Knotenbereinigung hilft dir zu entscheiden, welche Punkte Forminformation tragen.

Importiere in UI Toolkit unter Unity 6.3 oder neuer

Beginne mit einem Ausgabe-SVG, dessen Silhouette und Effekte du bereits geprüft hast.

1. Füge das SVG dem Assets-Ordner des Projekts hinzu und wähle es aus.
2. Setze im Inspector Generated Asset Type auf UI Toolkit Vector Image.
3. Wende die Importeinstellungen an und verwende das resultierende Vektorbild im gewünschten UI-Toolkit-Element.
4. Prüfe das tatsächliche Layout in seiner kleinsten und größten gewünschten Anzeigegröße.

Unity dokumentiert die native Assetauswahl unter Mit Vektorgrafiken arbeiten. Benötigt die verwendende Komponente Texture2D, wähle stattdessen diese Ausgabe und prüfe die resultierende Textur in ihrer gewünschten Größe.

Beginne für UI Toolkit mit den empfohlenen grundlegenden Tessellierungseinstellungen. Target Resolution und Zoom Factor lassen den Importer die Kurvenunterteilung für die vorgesehenen Anzeigebedingungen konfigurieren. Unity empfiehlt die niedrigste Zielauflösung, die zufriedenstellende Ergebnisse liefert. Seine Bildimporteinstellungen erklären die Steuerungen.

Halte zwei Prüfungen auseinander: ob das SVG die richtige Form beschreibt und ob das importierte Asset diese Form gut darstellt. Höhere Tessellierung kann kein Loch wiederherstellen, das im Quellexport verschwunden ist.

Importiere für Sprite Renderer oder uGUI

Installiere über den Package Manager das kompatible Paket com.unity.vectorgraphics, wenn das Ziel dessen Sprite- oder uGUI-Unterstützung braucht. Wähle das entsprechende generierte Asset für deine Komponente und bestätige, dass sie es akzeptiert. Die aktuelle Paketdokumentation unterscheidet diese Importtypen vom eingebauten UI-Toolkit-Weg.

Prüfe für einen Sprite Renderer Szenengröße und Drehpunkt des Objekts, bevor du es in Prefabs kopierst. Prüfe für uGUI den SVGImage-Workflow deines Projekts. Ein gewöhnlicher Raster-Sprite-Workflow bleibt eine Alternative, wenn die Grafik in den erforderlichen Abmessungen bereits richtig aussieht.

Das ältere 2.0-Paket dokumentiert SVG-Einheiten pro Szeneneinheit, Sprite-Drehpunkte und Tessellierungssteuerungen. Es bezeichnet das Paket auch als experimentell und rät vom Produktionseinsatz ab. Teams, die diesen Weg pflegen, sollten vor dem Hinzufügen das Handbuch zum 2.0-Paket zusammen mit ihren Projektanforderungen prüfen.

Wenn du ein bestehendes Projekt aktualisierst, führe den Importtest in einer Kopie oder einem versionierten Branch aus. Vergleiche generierte Assettypen und Referenzen in tatsächlichen Prefabs und Szenen. Verwende eine erfolgreiche Miniaturvorschau nicht als einzigen Migrationstest und wende keine umfangreiche .meta-Bearbeitung aus einem alten Forenbeitrag an, ohne dessen konkretes Problem zu reproduzieren.

Diagnostiziere den ersten sichtbaren Unterschied

Verwende für jedes repräsentative Asset ein kurzes Testprotokoll: Quelldatei, Editor-/Paketversionen, Zielkomponente, erwartete Anzeigegröße und erste sichtbare Abweichung.

Angenommen, ein Sternemblem wird importiert, aber sein mittiges Loch verschwindet. Öffne zuerst das Ausgabe-SVG und bestätige, dass das Loch dort existiert. Falls ja, vergleiche einen vereinfachten Emblemexport in Unity. Bleibt das Loch in dieser Version erhalten, prüfe überlappende Formen, Füllkonstruktion oder Maske des ursprünglichen Emblems. Erneutes Nachzeichnen ist nur sinnvoll, wenn die Pfadgeometrie selbst falsch ist.

Teste das akzeptierte Asset sowohl in einem Zielbuild als auch im Editor. Dokumentiere, ob es in kleinster Größe lesbar bleibt, ob Farben und Transparenz passen und ob Szenen- oder Prefab-Referenzen einen frischen Import überstehen. Leistungsentscheidungen benötigen Profiling deiner eigenen Szene; eine SVG-Endung ist keine Leistungsmessung.

Wie PerfectVector dazu passt

PerfectVector gehört vor den Unity-Import, wenn deine einzige geeignete Quelle Rastergrafik ist und du bearbeitbare Formen brauchst. Lade ein PNG oder JPG mit flächigen Farben in PerfectVectors Bild-zu-Vektor-Konverter, vergleiche nachgezeichnete Silhouette und Löcher mit dem Original und prüfe dann das heruntergeladene SVG in einem Vektoreditor vor dem Unity-Import.

Verwende für die ganze Übergabe dasselbe repräsentative Icon. Akzeptiere die Nachzeichnung erst, wenn du die gewünschten Regionen bearbeiten kannst, Negativräume offen bleiben und die Bereinigung die Form nicht verzerrt hat. Wende dann den Unity-Zieltest oben an.

Behalte Foto, Textur, weiches Leuchten oder bewusstes Pixel-Art-Sprite als Raster, wenn das das gewünschte Aussehen erhält. Bei einem einfachen geometrischen Symbol kann manuelles Zeichnen leichter zu kontrollieren sein als Nachzeichnen. PerfectVector bereitet SVG-Quellgeometrie vor; es ändert nicht Unitys unterstützte Funktionen und validiert nicht dein Laufzeitrendering. Ist der Formatunterschied neu für dich, beginne mit der Erklärung zum Inhalt einer SVG-Datei.

FAQ

Braucht Unity 6 das Vector-Graphics-Paket? Das hängt von Unterversion und Ziel ab. Unity 6.3 hat eingebaute SVG-Importe für UI Toolkit und Texture2D. Sprite- und uGUI-Importe verwenden das 3.0-Vorschaupaket. Frühere Unity-Versionen verwenden den Weg über das kompatible 2.0-Vorschaupaket.

Macht eine geänderte PNG-Endung ein Vektor-Sprite? Nein. Umbenennen zeichnet keine Pixel nach. Verwende die ursprüngliche Vektorquelle, zeichne die Formen oder zeichne geeignete Rastergrafik nach und prüfe die resultierenden Pfade vor dem Unity-Import.

Kann Nachzeichnen ein falsch in Unity importiertes SVG reparieren? Nur wenn die Quellgeometrie neu aufgebaut werden muss. Enthält das SVG korrekte Pfade, aber der falsche generierte Assettyp oder ein nicht unterstützter Effekt verursacht das Problem, korrigiere zuerst diese Import- oder Exportentscheidung.

Quellen

1. Unity — Leitfaden zum Vector-Graphics-3.0-Paket — Definiert die Aufteilung nach Editorversion und eingebaute gegenüber Sprite-/uGUI-Paketwegen.
2. Unity — Mit Vektorgrafiken arbeiten — Dokumentiert native Assetoptionen und nicht unterstützte SVG-Funktionen.
3. Unity — Bildimporteinstellungen — Erklärt UI-Toolkit-Vektorbild-Einstellungen und Tessellierungssteuerungen.
4. Unity — Handbuch zum Vector-Graphics-2.0-Paket — Behandelt älteren Importer, Szeneneinheiten- und Drehpunktsteuerungen sowie experimentellen Status.
5. W3C — Eingebettete SVG-Inhalte — Belegt, dass ein SVG Rasterbildinhalt enthalten kann.

---

Wenn dein Unity-Asset als flaches PNG oder JPG beginnt und bearbeitbare Pfade braucht, konvertiere dein Bild mit PerfectVector. Prüfe Silhouette, Löcher und unerwünschte Hintergrundformen und teste dann das SVG in der Unity-Komponente und den Anzeigegrößen, die du ausliefern möchtest.