SVG in SwiftUI: aggiungi risorse e gestisci i colori

Per un SVG statico incluso nell'app SwiftUI, inserisci la grafica in un catalogo di risorse Xcode e carica l'immagine con il nome della risorsa. Decidi poi se debba mantenere i colori originali o diventare una sagoma colorata. Apple ha aggiunto le risorse immagine SVG in Xcode 12; le sue note di rilascio indicano la conservazione vettoriale per destinazioni di distribuzione iOS 13, iPadOS 13 e macOS 10.15 o successive.

Quella procedura con catalogo è diversa dallo scaricare un file SVG mentre l'app è in esecuzione. È anche diversa dal creare un SF Symbol personalizzato. Scegli il metodo di distribuzione prima di cambiare la grafica o aggiungere un pacchetto di rendering.

Scegli il metodo per questa specifica immagine

Un SVG è il file sorgente. Il modo in cui l'app lo riceve e lo usa determina il passaggio successivo.

Questa guida pratica usa il primo metodo. Una piccola tazza bicolore rende facili da notare due errori separati: perdere il colore corallo del vapore e riempire il manico aperto. Nessuno dei due richiede un'illustrazione complicata per la diagnosi.

La guida di preparazione dei kit UI tratta il lavoro più ampio di rendere coerente un insieme. Qui la domanda è come un SVG accettato raggiunga un Image SwiftUI.

Prepara un piccolo sorgente con controlli visibili

Salva questo esempio originale come 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>

La tazza è verde petrolio, i due tratti del vapore sono corallo e l'area dentro il manico è vuota. Mantieni queste tre proprietà nella lista di controllo. L'SVG non contiene testo, immagine esterna, filtro o script, quindi offre un file iniziale compatto per un esperimento con il catalogo.

Per la tua grafica, ispeziona il sorgente prima dell'importazione. Troppa tela vuota fa sembrare piccola un'icona anche quando la vista ha le dimensioni corrette. Un rettangolo bianco di sfondo diventa parte della sagoma template. Una fotografia incorporata rimane un contenuto di tipo diverso dai tracciati circostanti; il controllo dei raster incorporati aiuta a distinguerli.

Mantieni l'originale modificabile separato dalla copia distribuita nell'app. Se l'icona contiene scritte, risolvi nell'originale la strategia del carattere previsto o della conversione in contorni; consulta la procedura sulle variazioni dei caratteri SVG. Cambiare uno stile di testo SwiftUI non sostituisce il controllo delle scritte dentro un'immagine.

Aggiungilo come normale insieme di immagini

Apri il catalogo di risorse dell'app, spesso Assets.xcassets. Aggiungi un nuovo insieme di immagini e chiamalo CupMark. Trascina l'SVG nel riquadro immagine appropriato. La guida Apple ai cataloghi di risorse descrive creazione degli insiemi, importazione delle risorse e aggiunta di variazioni tramite l'ispettore Attributes.

Usa un insieme di immagini per questo esempio. Non selezionare una procedura per immagini simbolo soltanto perché il sorgente termina in .svg.

Dopo l'importazione, controlla l'anteprima del catalogo e la diagnostica della compilazione. Conferma che il catalogo appartenga al target dell'app che lo userà. Se la configurazione delle risorse contiene variazioni di piattaforma o aspetto, assicurati che l'immagine prevista sia presente nella configurazione pertinente invece di presumere che l'anteprima rappresenti ogni configurazione.

Il nome CupMark è il nome della risorsa immagine usato sotto. Non è un URL di download né un percorso dell'SVG originale nella cartella del progetto grafico. L'inizializzatore Image di Apple cerca una risorsa per nome in un bundle; il valore predefinito è il bundle principale. Se l'immagine appartiene a un altro bundle di risorse, fornisci deliberatamente quel bundle.

Conserva nelle note di consegna la distinzione fra nome del file e nome della risorsa. Un membro del gruppo può rinominare l'insieme di risorse senza cambiare il nome del file originale del disegno, e il codice deve seguire il nome della risorsa che effettivamente carica.

Confronta rendering originale e template

Usa questa vista dopo aver aggiunto l'insieme di immagini CupMark:

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()
    }
}

L'istanza sinistra richiede esplicitamente il rendering originale. Quella destra richiede il rendering template e fornisce il blu come stile di primo piano. La documentazione Apple sul rendering template definisce la modalità template in termini di pixel non trasparenti che prendono il colore di primo piano. È un trattamento della sagoma, non un comando per ricolorare soltanto un tracciato SVG.

Per la tazza, significa che la versione destra dovrebbe avere vapore blu e tazza blu. La distinzione corallo/verde petrolio scompare intenzionalmente. L'apertura del manico dovrebbe rimanere vuota. Se l'app richiede che il vapore cambi indipendentemente dalla tazza, scegli una struttura di consegna che esponga quelle parti separatamente invece di aspettarti che una sola immagine template offra stili per singolo tracciato.

I modificatori rendono inoltre esplicita la decisione sulle dimensioni. resizable() attiva il comportamento di ridimensionamento dell'immagine e scaledToFit() ne conserva le proporzioni dentro la cornice di 48 punti. La cornice della vista e la tela della grafica sono confini separati: lo spazio vuoto aggiuntivo dentro l'SVG fa ancora parte del sorgente.

È un esempio documentato da provare nel progetto, non il resoconto di una prova di rendering nativo. Controlla l'app effettivamente compilata, incluse le dimensioni minime a cui intendi usare il simbolo. Un'anteprima chiara a 48 punti non dimostra che entrambi i tratti del vapore rimangano utili a 16 punti.

Diagnostica il risultato visibile prima di cambiare il file

Un'immagine mancante, un colore cambiato e una sagoma poco chiara a dimensioni piccole richiedono correzioni diverse.

Cambia un livello alla volta. Se il sorgente ha già l'apertura corretta, ricostruire il ricalco non correggerà un nome di risorsa scritto male. Se la ricerca funziona ma la modalità template elimina le distinzioni di colore, aggiungere altri colori all'SVG non cambierà la modalità di rendering selezionata.

Per un'icona accanto a testo visibile, esamina il nome accessibile nel contesto completo del controllo. L'esempio fornisce una descrizione per ogni immagine del confronto. Una ripetizione decorativa accanto a un controllo già nominato potrebbe richiedere un trattamento di accessibilità diverso; non distribuire meccanicamente le etichette della vista di confronto in ogni posizionamento.

Mantieni SVG a runtime e SF Symbols come decisioni separate

Un'immagine di catalogo nominata non è un'API per recuperare e analizzare XML SVG arbitrario. Se il file arriva dopo la compilazione dell'app, scegli un renderer che gestisca esplicitamente quell'input. Per esempio, il README del progetto SVGView descrive un parser e renderer SVG scritto in SwiftUI. Valuta le funzionalità SVG effettive usate dai tuoi file; l'obiettivo di un pacchetto di offrire ampio supporto non dimostra che l'intero insieme di input venga renderizzato correttamente.

Mantieni comportamenti di caricamento, errore e file non supportati come parte di quella funzionalità a runtime. Non aggiungere un pacchetto soltanto perché una vecchia risposta afferma che SwiftUI non può usare immagini SVG, quando la tua esigenza è un'immagine statica già coperta dal metodo del catalogo di risorse.

Gli SF Symbols personalizzati hanno un contratto sorgente diverso. Apple documenta una procedura di creazione e convalida basata su modelli, incluse varianti dei simboli e informazioni di allineamento. Un normale SVG di tazza non acquisisce quelle proprietà quando viene inserito in un insieme di immagini. Usa quella procedura quando l'app richiede il comportamento dei simboli e mantieni la struttura richiesta del modello.

I formati di distribuzione delle piattaforme meritano controlli indipendenti. Se la stessa grafica è destinata anche ad Android, segui la guida di consegna VectorDrawable; l'accettazione da parte dell'importatore di una piattaforma non dimostra l'accettazione da parte di un'altra.

Quando l'icona esiste soltanto come PNG

Se manca il sorgente modificabile e il PNG è un'icona semplice, il convertitore da PNG a SVG di PerfectVector può aiutare a preparare un candidato grafico per questa procedura. Ritaglia sull'icona, ispeziona l'anteprima per aperture perse, dettagli uniti e forme di sfondo indesiderate, poi confrontala con l'originale. Scarica l'SVG accettato e provalo attraverso gli stessi controlli di insieme di immagini e modalità di rendering.

Usa il vettoriale originale quando esiste. Mantieni raster fotografie e immagini ricche di effetti quando questo ne conserva meglio l'aspetto. La vettorializzazione prepara geometria; non compila il catalogo Xcode, non sceglie il bundle di risorse e non produce un modello SF Symbols con le varianti richieste.

Prima di consegnare la risorsa, annota nome nel catalogo, comportamento originale/template previsto, dimensione visiva minima e file sorgente usato per rigenerarla. Prova sfondi chiari e scuri ed eventuali variazioni di aspetto supportate nell'app. Le guide grafiche del blog trattano la preparazione del sorgente che precede questo passaggio di consegna.

FAQ

SwiftUI può usare un SVG da un catalogo di risorse? Sì. Xcode supporta risorse immagine SVG. Aggiungi il file a un normale insieme di immagini e carica la risorsa nominata con Image. Verifica la destinazione di distribuzione e la compilazione effettiva del catalogo invece di trattarlo come supporto di file SVG arbitrari a runtime.

Perché il mio SVG è diventato monocromatico? Controlla la modalità di rendering. Il rendering template usa l'immagine visibile come una sagoma del colore di primo piano. Usa il rendering originale quando servono le distinzioni di colore originali della grafica.

Image può caricare un SVG da un URL web? L'inizializzatore Image per nome cerca una risorsa, non è un parser SVG basato su URL. I file SVG a runtime richiedono una procedura adatta di rendering e caricamento da verificare con gli input effettivi.

Un insieme di immagini SVG equivale a un SF Symbol personalizzato? No. I simboli personalizzati usano un modello con struttura richiesta, varianti, informazioni di allineamento e convalida. Un normale insieme di immagini SVG non fornisce automaticamente quelle proprietà dei simboli.

Fonti

1. Apple — Note di rilascio Xcode 12 — Supporto delle risorse immagine SVG e destinazioni di distribuzione documentate per la conservazione vettoriale.
2. Apple — Gestire risorse con i cataloghi — Insiemi di risorse, riquadri di importazione e variazioni.
3. Apple — Image init(_:bundle:) — Ricerca di risorse nominate e bundle.
4. Apple — Image.TemplateRenderingMode — Modalità di rendering originale e template.
5. Apple — resizable(capInsets:resizingMode:) — Comportamento esplicito di ridimensionamento delle immagini.
6. Apple — scaledToFit() — Adattamento con conservazione delle proporzioni.
7. Apple — Creare immagini simbolo personalizzate per l'app — Modelli di simboli personalizzati, varianti e convalida.
8. Exyte — SVGView — Una soluzione separata di analisi e rendering SVG per SwiftUI.

Controlla un'icona alle dimensioni e nella modalità di colore previste prima di importare l'insieme. Se rimane soltanto un PNG, prepara un candidato SVG, ispeziona aperture e sfondo e verifica il file accettato nell'app compilata.