SVG dans SwiftUI : ajouter des ressources et gérer leur couleur

Pour un SVG statique inclus dans ton application SwiftUI, place le dessin dans un catalogue de ressources Xcode et charge l’image par son nom de ressource. Décide ensuite si elle doit garder ses couleurs originales ou devenir une silhouette teintée. Apple a ajouté les ressources image SVG dans Xcode 12 ; ses notes de version indiquent la conservation vectorielle pour les cibles de déploiement iOS 13, iPadOS 13 et macOS 10.15 ou ultérieures.

Cette procédure de catalogue diffère du téléchargement d’un SVG pendant l’exécution de l’application. Elle diffère aussi de la création d’un SF Symbol personnalisé. Choisis la méthode de livraison avant de modifier le dessin ou d’ajouter un paquet de rendu.

Choisir la méthode pour cette image précise

Un SVG est le fichier source. La façon dont l’application le reçoit et l’utilise détermine l’étape suivante.

Ce guide utilise la première méthode. Une petite tasse bicolore rend deux erreurs faciles à remarquer : perdre la couleur corail de la vapeur et remplir l’anse ouverte. Aucune ne nécessite une illustration complexe pour être diagnostiquée.

Le guide de préparation des kits d’interface traite du travail plus large de cohérence d’un ensemble. Ici, la question est comment un SVG accepté arrive dans un Image SwiftUI.

Préparer une petite source avec des vérifications visibles

Enregistre cet exemple original sous 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 tasse est bleu-vert, les deux traits de vapeur sont corail et la zone à l’intérieur de l’anse est vide. Garde ces trois propriétés dans ta liste de vérification. Le SVG ne contient ni texte, image externe, filtre ni script ; il fournit donc un fichier initial compact pour une expérience de catalogue.

Pour ton propre dessin, examine la source avant l’import. Trop de canevas vide fait paraître une icône petite même si sa vue a les bonnes dimensions. Un rectangle de fond blanc devient partie de la silhouette template. Une photographie intégrée reste un autre type de contenu que les tracés qui l’entourent ; la vérification du matriciel intégré aide à les distinguer.

Garde l’original éditable hors de la copie livrable de l’application. Si l’icône contient du lettrage, résous la stratégie de police ou de conversion en tracés dans l’original ; consulte la procédure des changements de police SVG. Changer un style de texte SwiftUI ne remplace pas la vérification du lettrage dans une image.

L’ajouter comme jeu d’images ordinaire

Ouvre le catalogue de ressources de l’application, souvent Assets.xcassets. Ajoute un nouveau jeu d’images et nomme-le CupMark. Glisse le SVG dans l’emplacement d’image approprié. Le guide Apple des catalogues de ressources décrit la création de jeux, l’import de ressources et les variantes via l’inspecteur Attributes.

Utilise un jeu d’images pour cet exemple. Ne sélectionne pas une procédure d’image de symbole simplement parce que la source se termine par .svg.

Après l’import, vérifie l’aperçu du catalogue et les diagnostics de compilation. Confirme que le catalogue appartient à la cible d’application qui l’utilisera. Si ta configuration de ressources comprend des variantes de plateforme ou d’apparence, assure-toi que l’image prévue est présente dans la configuration concernée au lieu de supposer que l’aperçu représente toutes les configurations.

Le nom CupMark est celui de la ressource image utilisée ci-dessous. Ce n’est ni une URL de téléchargement ni un chemin vers le SVG original de ton dossier de conception. L’initialiseur Image d’Apple cherche une ressource par nom dans un bundle ; le bundle principal est la valeur par défaut. Si ton image appartient à un autre bundle de ressources, fournis-le volontairement.

Garde la distinction entre nom de fichier et nom de ressource dans les notes de transmission. Un collègue peut renommer le jeu de ressources sans changer le nom du fichier original, et le code doit suivre le nom réellement chargé.

Comparer les rendus original et template

Utilise cette vue après avoir ajouté le jeu d’images 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’instance gauche demande explicitement le rendu original. Celle de droite demande le rendu template et fournit le bleu comme style de premier plan. La documentation Apple du rendu template définit ce mode par les pixels non transparents qui prennent la couleur du premier plan. C’est un traitement de silhouette, pas une commande pour recolorer un seul tracé SVG.

Pour la tasse, la version droite devrait donc avoir une vapeur bleue et une tasse bleue. La distinction corail/bleu-vert disparaît volontairement. L’ouverture de l’anse doit rester vide. Si l’application exige que la vapeur change indépendamment de la tasse, choisis une structure de livraison qui expose ces parties séparément au lieu d’attendre une gestion par tracé d’une seule image template.

Les modificateurs rendent aussi le choix de taille explicite. resizable() active le redimensionnement de l’image et scaledToFit() préserve ses proportions dans le cadre de 48 points. Le cadre de la vue et le canevas du dessin sont des limites distinctes : l’espace vide supplémentaire du SVG reste dans la source.

C’est un exemple documenté à essayer dans ton projet, pas un compte rendu de test de rendu natif. Vérifie l’application réellement compilée, y compris la plus petite taille prévue pour le symbole. Un aperçu clair de 48 points n’établit pas que les deux traits de vapeur resteront utiles à 16 points.

Diagnostiquer le résultat visible avant de modifier le fichier

Une image manquante, une couleur changée et une silhouette peu lisible en petit nécessitent des corrections différentes.

Change une couche à la fois. Si la source possède déjà la bonne ouverture, refaire la vectorisation ne corrigera pas un nom de ressource mal écrit. Si la recherche fonctionne mais que le mode template retire les distinctions de couleur, ajouter des couleurs au SVG ne changera pas le mode choisi.

Pour une icône à côté d’un texte visible, examine son nom accessible dans le contexte complet de la commande. L’exemple donne une description à chaque image comparative. Une répétition décorative à côté d’une commande déjà nommée peut nécessiter un autre traitement d’accessibilité ; ne livre pas mécaniquement les libellés de la vue comparative à chaque emplacement.

Garder SVG à l’exécution et SF Symbols comme décisions distinctes

Une image de catalogue nommée n’est pas une API de récupération et d’analyse de XML SVG quelconque. Si le fichier arrive après compilation, choisis un moteur qui gère explicitement cette entrée. Par exemple, le README du projet SVGView décrit un analyseur SVG et un moteur de rendu écrits en SwiftUI. Évalue les fonctionnalités SVG réellement utilisées par tes fichiers ; l’objectif de prise en charge large d’un paquet ne prouve pas que toutes tes entrées sont correctement rendues.

Garde chargement, échecs et comportement des fichiers non pris en charge dans cette fonctionnalité à l’exécution. N’ajoute pas un paquet simplement parce qu’une ancienne réponse dit que SwiftUI ne peut pas utiliser de SVG, lorsque ton besoin est une image statique déjà couverte par le catalogue.

Les SF Symbols personnalisés ont un autre contrat source. Apple décrit une procédure de création et validation fondée sur un modèle, incluant variantes de symbole et informations d’alignement. Un SVG de tasse ordinaire n’acquiert pas ces propriétés en étant placé dans un jeu d’images. Utilise cette procédure lorsque l’application nécessite le comportement d’un symbole et conserve la structure de modèle requise.

Les formats de livraison des plateformes méritent une vérification indépendante. Si le même dessin doit aussi aller sur Android, suis le guide de transmission VectorDrawable ; l’acceptation par l’importateur d’une plateforme ne prouve pas celle d’une autre.

Quand ton icône n’existe qu’en PNG

Si la source éditable manque et que le PNG est une icône simple, le convertisseur PNG vers SVG de PerfectVector peut préparer un dessin candidat pour cette procédure. Recadre sur l’icône, examine l’aperçu pour repérer ouvertures perdues, détails fusionnés et formes de fond indésirables, puis compare à l’original. Télécharge le SVG accepté et teste-le avec les mêmes vérifications de jeu d’images et de mode de rendu.

Utilise le vectoriel original lorsqu’il existe. Garde photos et images riches en effets en matriciel si cela préserve mieux leur apparence. La vectorisation prépare la géométrie ; elle ne compile pas le catalogue Xcode, ne choisit pas ton bundle de ressources et ne produit pas un modèle SF Symbols avec les variantes requises.

Avant de transmettre la ressource, note son nom de catalogue, le comportement original/template prévu, la taille visuelle minimale et le fichier source utilisé pour la régénérer. Teste les fonds clairs et sombres et toutes les variantes d’apparence prises en charge dans l’application. Les guides graphiques du blog traitent de la préparation source avant cette livraison.

FAQ

SwiftUI peut-il utiliser un SVG depuis un catalogue de ressources ? Oui. Xcode prend en charge les ressources image SVG. Ajoute le fichier à un jeu d’images ordinaire et charge la ressource nommée avec Image. Vérifie la cible de déploiement et la compilation réelle du catalogue plutôt que de traiter cela comme une prise en charge de fichiers SVG quelconques à l’exécution.

Pourquoi mon SVG est-il devenu monochrome ? Vérifie le mode de rendu. Le rendu template utilise l’image visible comme silhouette colorée par le premier plan. Utilise original si tu as besoin des distinctions de couleur originales du dessin.

Image peut-il charger un SVG depuis une URL web ? L’initialiseur Image nommé recherche une ressource ; ce n’est pas un analyseur SVG par URL. Les fichiers SVG à l’exécution exigent une procédure de rendu et de chargement adaptée, vérifiée avec tes entrées réelles.

Un jeu d’images SVG est-il la même chose qu’un SF Symbol personnalisé ? Non. Les symboles personnalisés utilisent un modèle avec structure, variantes, informations d’alignement et validation requises. Un jeu d’images SVG normal ne fournit pas automatiquement ces propriétés de symbole.

Sources

1. Apple — Notes de version Xcode 12 — Prise en charge des ressources image SVG et cibles de déploiement documentées pour la conservation vectorielle.
2. Apple — Gérer les ressources avec des catalogues — Jeux de ressources, emplacements d’import et variantes.
3. Apple — Image init(_:bundle:) — Recherche de ressource nommée et de bundle.
4. Apple — Image.TemplateRenderingMode — Modes de rendu original et template.
5. Apple — resizable(capInsets:resizingMode:) — Comportement explicite de redimensionnement des images.
6. Apple — scaledToFit() — Ajustement préservant les proportions.
7. Apple — Créer des images de symboles personnalisés pour ton application — Modèles, variantes et validation des symboles personnalisés.
8. Exyte — SVGView — Solution distincte d’analyse et de rendu SVG pour SwiftUI.

Vérifie une icône à la taille et dans le mode couleur prévus avant d’importer tout l’ensemble. S’il ne reste qu’un PNG, prépare un SVG candidat, examine ses ouvertures et son fond et vérifie le fichier accepté dans l’application compilée.