SVG in SwiftUI: Assets einfügen und Farben steuern

Lege ein statisches SVG, das mit deiner SwiftUI-App ausgeliefert wird, in einem Xcode-Asset-Katalog ab und lade das Bild über seinen Asset-Namen. Entscheide dann, ob es seine Originalfarben behalten oder zu einer eingefärbten Silhouette werden soll. Apple hat SVG-Bildassets in Xcode 12 eingeführt. Die Versionshinweise nennen den Erhalt der Vektoren für Deployment-Ziele ab iOS 13, iPadOS 13 und macOS 10.15.

Dieser Katalogablauf unterscheidet sich vom Herunterladen einer SVG-Datei während der Laufzeit der App. Er unterscheidet sich auch vom Erstellen eines eigenen SF Symbols. Wähle den Auslieferungsweg, bevor du die Grafik änderst oder ein Renderer-Paket hinzufügst.

Den Weg für dieses konkrete Bild wählen

Ein SVG ist die Quelldatei. Wie deine App es erhält und verwendet, bestimmt den nächsten Schritt.

Diese Anleitung verwendet den ersten Weg. Eine kleine zweifarbige Tasse macht zwei verschiedene Fehler leicht erkennbar: den Verlust des korallfarbenen Dampfs und das Füllen des offenen Henkels. Für die Diagnose brauchst du keine komplizierte Illustration.

Der Leitfaden zur UI-Kit-Vorbereitung behandelt die umfassendere Aufgabe, ein Set einheitlich zu gestalten. Hier geht es darum, wie ein akzeptiertes SVG in ein SwiftUI-Image gelangt.

Eine kleine Quelle mit sichtbaren Prüfpunkten vorbereiten

Speichere dieses selbst erstellte Beispiel als CupMark.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <path d="M12 26H43V45Q43 54 34 54H21Q12 54 12 45Z"
    fill="#147D73"/>
  <path d="M43 30H48Q55 30 55 37Q55 44 48 44H43"
    fill="none" stroke="#147D73" stroke-width="5"/>
  <path d="M24 19Q18 14 25 8M35 19Q29 14 36 8"
    fill="none" stroke="#EB8067" stroke-width="4" stroke-linecap="round"/>
</svg>

Die Tasse ist petrolfarben, die beiden Dampfstriche sind korallfarben und der Bereich im Henkel ist leer. Behalte diese drei Eigenschaften auf deiner Prüfliste. Das SVG enthält keinen Text, kein externes Bild, keinen Filter und kein Skript. Es bietet damit eine kompakte Ausgangsdatei für einen Katalogversuch.

Prüfe bei deiner eigenen Grafik die Quelle vor dem Import. Zu viel leere Zeichenfläche lässt ein Icon klein wirken, selbst wenn seine View die richtigen Abmessungen hat. Ein weißes Hintergrundrechteck wird Teil einer Vorlagensilhouette. Ein eingebettetes Foto bleibt eine andere Art von Inhalt als die umgebenden Pfade; die Prüfung auf eingebettete Rasterbilder hilft dir, sie zu unterscheiden.

Bewahre die bearbeitbare Masterdatei getrennt von der Auslieferungskopie der App auf. Wenn das Icon Schrift enthält, kläre die vorgesehene Schriftart- oder Konturenstrategie in der Masterdatei. Siehe dazu den Ablauf bei Schriftänderungen in SVG. Einen SwiftUI-Textstil zu ändern ersetzt nicht die Prüfung von Schriftzügen innerhalb eines Bilds.

Als gewöhnliches Bildset hinzufügen

Öffne den Asset-Katalog der App, häufig Assets.xcassets. Füge ein neues Bildset hinzu und nenne es CupMark. Ziehe das SVG in das passende Bildfeld. Apples Leitfaden zu Asset-Katalogen beschreibt das Erstellen von Sets, Importieren von Ressourcen und Bereitstellen von Varianten über den Attributes-Inspektor.

Verwende für dieses Beispiel ein Bildset. Wähle keinen Symbolbildablauf, nur weil die Quelle auf .svg endet.

Prüfe nach dem Import die Katalogvorschau und mögliche Build-Diagnosen. Stelle sicher, dass der Katalog zu dem App-Target gehört, das ihn verwenden wird. Wenn deine Asset-Einrichtung Plattform- oder Erscheinungsvarianten enthält, prüfe, ob das gewünschte Bild in der entsprechenden Konfiguration vorhanden ist, statt anzunehmen, die Vorschau repräsentiere jede Konfiguration.

Der Name CupMark ist der unten verwendete Bildressourcenname. Er ist weder eine Download-URL noch ein Pfad zum originalen SVG in deinem Designordner. Apples Image-Initialisierer sucht eine Ressource nach Namen in einem Bundle; standardmäßig ist das das Hauptbundle. Wenn dein Bild zu einem anderen Ressourcenbundle gehört, gib dieses bewusst an.

Halte den Unterschied zwischen Dateiname und Asset-Name in den Übergabenotizen fest. Ein Teammitglied kann das Asset-Set umbenennen, ohne den ursprünglichen Designdateinamen zu ändern. Der Code muss dem Ressourcennamen folgen, den er tatsächlich lädt.

Original- und Vorlagenmodus vergleichen

Verwende diese View, nachdem du das Bildset CupMark hinzugefügt hast:

import SwiftUI
 
struct CupComparison: View {
    var body: some View {
        HStack(spacing: 24) {
            Image("CupMark")
                .renderingMode(.original)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .accessibilityLabel("Cup with rising steam")
 
            Image("CupMark")
                .renderingMode(.template)
                .resizable()
                .scaledToFit()
                .frame(width: 48, height: 48)
                .foregroundStyle(Color.blue)
                .accessibilityLabel("Cup with rising steam")
        }
        .padding()
    }
}

Die linke Instanz fordert ausdrücklich den Originalmodus an. Die rechte fordert den Vorlagenmodus an und gibt Blau als Vordergrundstil vor. Apples Dokumentation zum Vorlagenmodus definiert ihn dadurch, dass nicht transparente Pixel die Vordergrundfarbe annehmen. Er behandelt die Silhouette und ist kein Befehl zum Umfärben nur eines SVG-Pfads.

Bei der Tasse bedeutet das: Die rechte Version sollte blauen Dampf und eine blaue Tasse haben. Der Unterschied zwischen Koralle und Petrol entfällt absichtlich. Die Henkelöffnung sollte leer bleiben. Wenn deine App den Dampf unabhängig von der Tasse ändern muss, wähle eine Auslieferungsstruktur, die diese Teile getrennt zugänglich macht, statt von einem einzigen Vorlagenbild eine Gestaltung pro Pfad zu erwarten.

Die Modifikatoren legen auch die Größenentscheidung explizit fest. resizable() aktiviert das Größenänderungsverhalten des Bilds, und scaledToFit() erhält sein Seitenverhältnis innerhalb des 48-Punkte-Rahmens. Der View-Rahmen und die eigene Zeichenfläche der Grafik sind separate Grenzen: Zusätzlicher Leerraum im SVG bleibt Teil der Quelle.

Dies ist ein dokumentiertes Beispiel zum Ausprobieren in deinem Projekt, kein Bericht über einen nativen Rendering-Test. Prüfe die tatsächlich gebaute App, einschließlich der kleinsten Größe, in der du das Zeichen verwenden willst. Eine klare 48-Punkte-Vorschau belegt nicht, dass beide Dampfstriche bei 16 Punkten noch sinnvoll erkennbar sind.

Das sichtbare Ergebnis diagnostizieren, bevor du die Datei änderst

Ein fehlendes Bild, eine veränderte Farbe und eine schlechte Silhouette in kleiner Größe verlangen unterschiedliche Lösungen.

Ändere jeweils nur eine Ebene. Wenn die Quelle bereits die korrekte Öffnung hat, behebt erneutes Nachzeichnen keinen falsch geschriebenen Asset-Namen. Wenn die Ressourcensuche funktioniert, der Vorlagenmodus aber Farbunterschiede entfernt, ändern zusätzliche SVG-Farben den gewählten Rendering-Modus nicht.

Prüfe bei einem Icon neben sichtbarem Text seinen für assistive Technologien zugänglichen Namen im vollständigen Kontext des Steuerelements. Das Beispiel gibt für jedes Vergleichsbild eine Beschreibung an. Eine dekorative Wiederholung neben einem bereits benannten Steuerelement braucht möglicherweise eine andere Behandlung für die Barrierefreiheit. Übernimm die Beschriftungen der Vergleichs-View nicht mechanisch an jede Stelle.

Laufzeit-SVG und SF Symbols getrennt entscheiden

Ein benanntes Katalogbild ist keine API zum Abrufen und Parsen beliebigen SVG-XMLs. Wenn die Datei erst nach dem Build der App eintrifft, wähle einen Renderer, der diese Eingabe ausdrücklich verarbeitet. Beispielsweise beschreibt die README des Projekts SVGView einen in SwiftUI geschriebenen SVG-Parser und -Renderer. Prüfe die konkreten SVG-Funktionen deiner Dateien. Das Ziel eines Pakets, breite Unterstützung zu bieten, belegt nicht, dass dein gesamter Eingabesatz korrekt gerendert wird.

Beziehe Laden, Fehler und das Verhalten bei nicht unterstützten Dateien in diese Laufzeitfunktion ein. Füge kein Paket allein deshalb hinzu, weil eine ältere Antwort behauptet, SwiftUI könne keine SVG-Bilder verwenden, wenn du ein statisches Bild brauchst, das der Asset-Katalog bereits abdeckt.

Für eigene SF Symbols gelten andere Anforderungen an die Quelldatei. Apple dokumentiert einen vorlagenbasierten Ablauf für Erstellung und Validierung, einschließlich Symbolvarianten und Ausrichtungsinformationen. Ein gewöhnliches Tassen-SVG erhält diese Eigenschaften nicht dadurch, dass du es in ein Bildset legst. Verwende diesen Ablauf, wenn die App Symbolverhalten braucht, und bewahre die erforderliche Vorlagenstruktur.

Prüfe plattformspezifische Auslieferungsformate unabhängig. Wenn dieselbe Grafik auch für Android bestimmt ist, folge dem Leitfaden zur VectorDrawable-Übergabe. Dass der Importer einer Plattform die Datei akzeptiert, belegt keine Akzeptanz durch eine andere.

Wenn dein Icon nur als PNG existiert

Wenn die bearbeitbare Quelle fehlt und das PNG ein einfaches Icon ist, kann PerfectVectors PNG-zu-SVG-Konverter einen Grafikkandidaten für diesen Ablauf vorbereiten. Beschneide auf das Icon, prüfe die Vorschau auf verlorene Öffnungen, verschmolzene Details und unerwünschte Hintergrundformen und vergleiche sie mit dem Original. Lade das akzeptierte SVG herunter und teste es mit denselben Bildset- und Rendering-Modus-Prüfungen.

Verwende die originale Vektorgrafik, wenn sie existiert. Behalte Fotos und effektlastige Bilder als Rastergrafik, wenn das ihr Erscheinungsbild besser erhält. Vektorisierung bereitet Geometrie vor; sie kompiliert nicht den Xcode-Katalog, wählt dein Ressourcenbundle oder erzeugt eine SF-Symbols-Vorlage mit den benötigten Varianten.

Notiere vor der Übergabe den Katalognamen des Assets, das vorgesehene Verhalten im Original- oder Vorlagenmodus, die kleinste visuelle Größe und die zur Neuerzeugung verwendete Quelldatei. Teste helle und dunkle Hintergründe sowie unterstützte Erscheinungsvarianten in der App. Die Grafikleitfäden im Blog behandeln die Quellvorbereitung vor diesem Auslieferungsschritt.

FAQ

Kann SwiftUI ein SVG aus einem Asset-Katalog verwenden? Ja. Xcode unterstützt SVG-Bildassets. Füge die Datei einem gewöhnlichen Bildset hinzu und lade die benannte Ressource mit Image. Prüfe das Deployment-Ziel und den tatsächlichen Katalog-Build, statt dies als Unterstützung beliebiger SVG-Dateien zur Laufzeit zu behandeln.

Warum wurde mein SVG einfarbig? Prüfe den Rendering-Modus. Der Vorlagenmodus verwendet das sichtbare Bild als Silhouette in der Vordergrundfarbe. Verwende den Originalmodus, wenn du die ursprünglichen Farbunterschiede der Grafik brauchst.

Kann Image ein SVG von einer Web-URL laden? Der benannte Image-Initialisierer sucht Ressourcen und ist kein URL-basierter SVG-Parser. SVG-Dateien zur Laufzeit erfordern einen geeigneten Rendering- und Ladeablauf, den du mit deinen tatsächlichen Eingaben prüfst.

Ist ein SVG-Bildset dasselbe wie ein eigenes SF Symbol? Nein. Eigene Symbole verwenden eine Vorlage mit erforderlicher Struktur, Varianten, Ausrichtungsinformationen und Validierung. Ein normales SVG-Bildset bietet diese Symboleigenschaften nicht automatisch.

Quellen

1. Apple — Versionshinweise zu Xcode 12 — Unterstützung von SVG-Bildassets und dokumentierte Deployment-Ziele für den Vektorerhalt.
2. Apple — Assets mit Asset-Katalogen verwalten — Asset-Sets, Importfelder und Varianten.
3. Apple — Image init(_:bundle:) — Suche nach benannter Ressource und Bundle.
4. Apple — Image.TemplateRenderingMode — Original- und Vorlagenmodus.
5. Apple — resizable(capInsets:resizingMode:) — Explizit festgelegtes Größenänderungsverhalten von Bildern.
6. Apple — scaledToFit() — Einpassen unter Erhalt des Seitenverhältnisses.
7. Apple — Eigene Symbolbilder für deine App erstellen — Vorlagen für eigene Symbole, Varianten und Validierung.
8. Exyte — SVGView — Eine separate SVG-Parsing- und Rendering-Lösung für SwiftUI.

Prüfe ein Icon in der vorgesehenen Größe und im vorgesehenen Farbmodus, bevor du das Set importierst. Wenn nur ein PNG übrig ist, bereite einen SVG-Kandidaten vor, prüfe Öffnungen und Hintergrund und kontrolliere die akzeptierte Datei in der gebauten App.