Import SVG Unity : prépare UI Toolkit ou les sprites

L’importation SVG dans Unity commence par deux choix : la version de l’éditeur et l’endroit où apparaîtra l’illustration. Unity 6.3 inclut l’import SVG pour UI Toolkit et Texture2D. Les imports SVG directs comme ressources Sprite ou uGUI utilisent le paquet Vector Graphics ; les éditeurs précédents utilisent l’ancienne branche du paquet. Unity décrit cette répartition dans son guide des versions Vector Graphics.

Si tu possèdes déjà un SVG modifiable, prépare ce fichier pour l’importateur. Si ta seule source est un PNG ou JPG, vectorise-le uniquement si tu as besoin de formes vectorielles. Une texture ou un sprite en pixel art peut rester matriciel.

Teste une icône représentative pour distinguer les problèmes d’illustration source des problèmes d’importation et d’affichage Unity avant de traiter tout un ensemble.

Pour une géométrie de scène dans un autre moteur, utilise les vérifications d’import SVG Unreal Engine pour examiner les formes sources Motion Design, les ouvertures et les parties séparées.

Choisis la méthode d’import avant de modifier l’illustration

Utilise le composant de destination pour choisir la méthode. Une ressource fonctionnant dans une disposition UI Toolkit n’appartient pas automatiquement à un champ Sprite Renderer.

Le tableau suit les exigences des paquets Unity. Fixe les versions de l’éditeur et du paquet utilisées dans ton projet. Des instructions pour Unity 2018 ou un importateur 2.0 preview peuvent décrire d’autres options qu’un projet 6.3 actuel.

Choisis d’abord la destination

Garde un petit test d’importation à côté de l’illustration

Choisis une icône avec une courbe, un trou intérieur et les effets de couleur nécessaires à l’ensemble. Conserve le SVG original à côté d’une version simple faite de formes unies. Si cette version s’importe correctement, examine l’illustration complexe avant de changer tout le projet.

Prépare un SVG reproductible par l’importateur

Ouvre la source dans un éditeur vectoriel et examine les objets réels. Préserve l’original, puis crée un export de livraison Unity distinct.

Confirme la présence de tracés

Un SVG peut contenir une image matricielle via un élément <image> ; l’extension seule ne prouve pas une géométrie vectorielle. La spécification W3C du contenu intégré décrit cette distinction. Sélectionne une partie de l’illustration dans un éditeur et examine ses objets ou son code. Utilise le diagnostic des images matricielles intégrées s’il s’agit d’un seul rectangle image.

Si le fichier vectoriel original existe, réexporte-le. Vectoriser un PNG exporté de cet original ajoute un travail de reconstruction et peut changer la silhouette. Pour une famille d’icônes, définis d’abord la zone de dessin, les marges et le poids visuel ; le guide de préparation SVG pour kit d’interface traite de ces choix d’ensemble.

Remplace délibérément les fonctions non prises en charge

L’importateur natif Unity prend en charge une partie de SVG 1.1. Ses exclusions documentées incluent texte éditable, masques de pixels, filtres, interaction et animation. Un aperçu de navigateur peut donc sembler correct tandis que le résultat Unity diffère. Consulte les limites SVG Unity.

Prépare la copie de livraison selon les besoins de l’illustration :

• Convertis le lettrage décoratif en tracés. Garde les libellés d’interface comme texte dans l’interface s’ils nécessitent modification ou localisation.
• Recrée une ombre ou lueur nécessaire avec un effet pris en charge par la destination, ou conserve cette illustration sous forme matricielle.
• Examine les masques séparément des chemins de découpage. Un masque de pixels doux et un découpage géométrique sont des constructions différentes.
• Planifie l’animation dans Unity au lieu de dépendre d’une animation intégrée au SVG.

N’aplatis pas tous les dégradés simplement parce qu’un filtre n’est pas pris en charge. Teste l’effet réellement utilisé par le dessin. Si un badge complexe échoue, exporte une version à remplissages unis et réintroduis les effets un à un. Tu isoles ainsi la fonction modifiant l’apparence.

Retire la complexité accidentelle

Supprime les points parasites, doublons cachés et rectangles de fond ne faisant pas partie de l’icône. Simplifie une courbe manifestement bruitée uniquement en la comparant à la source. Un petit trou qui se ferme pendant le nettoyage est une modification ratée, même si le fichier devient plus court.

Il n’existe pas de nombre universel de nœuds utile pour toutes les illustrations de jeu. Une flèche géométrique et un personnage dessiné à la main nécessitent des niveaux de détail différents. Le guide de nettoyage des nœuds SVG aide à déterminer quels points portent l’information de forme.

Importe dans UI Toolkit avec Unity 6.3 ou ultérieur

Pars d’un SVG de livraison dont tu as déjà examiné la silhouette et les effets.

1. Ajoute le SVG au dossier Assets du projet et sélectionne-le.
2. Définis Generated Asset Type sur UI Toolkit Vector Image dans Inspector.
3. Applique les réglages d’importation et utilise l’image vectorielle obtenue dans l’élément UI Toolkit prévu.
4. Prévisualise la disposition réelle aux plus petites et plus grandes tailles d’affichage prévues.

Unity décrit ce choix de ressource native dans Work with vector graphics. Si le composant destinataire exige Texture2D, sélectionne plutôt cette sortie et examine la texture obtenue à la taille prévue.

Pour UI Toolkit, commence par les réglages de tessellation de base recommandés. Target Resolution et Zoom Factor permettent à l’importateur de configurer la subdivision des courbes selon les conditions d’affichage prévues. Unity recommande la plus faible résolution cible donnant des résultats satisfaisants. Ses réglages d’importation d’images expliquent ces contrôles.

Distingue deux examens : le SVG décrit-il la bonne forme et la ressource importée affiche-t-elle bien cette forme ? Augmenter la tessellation ne restaure pas un trou disparu dans l’export source.

Importe pour Sprite Renderer ou uGUI

Installe le paquet compatible com.unity.vectorgraphics via Package Manager si la destination nécessite sa prise en charge Sprite ou uGUI. Choisis la ressource générée correspondant à ton composant et confirme qu’il l’accepte. La documentation actuelle du paquet distingue ces types d’importation de la méthode UI Toolkit intégrée.

Pour un Sprite Renderer, vérifie la taille de l’objet dans la scène et son pivot avant de le copier dans des prefabs. Pour uGUI, vérifie le processus SVGImage utilisé par ton projet. Un processus ordinaire de sprites matriciels reste une alternative si l’illustration paraît déjà correcte aux dimensions nécessaires.

L’ancien paquet 2.0 documente les unités SVG par unité de scène, les pivots de sprites et les contrôles de tessellation. Il qualifie aussi le paquet d’expérimental et déconseille son utilisation en production. Les équipes maintenant cette méthode doivent examiner le manuel du paquet 2.0 avec les contraintes du projet avant de l’ajouter.

Si tu mets à niveau un projet existant, réalise le test d’importation dans une copie ou une branche sous gestion de versions. Compare les types de ressources générées et les références dans les prefabs et scènes réels. N’utilise pas un aperçu miniature réussi comme seul test de migration et n’applique pas une modification .meta en masse issue d’un ancien forum sans reproduire son problème précis.

Diagnostique la première différence visible

Utilise une courte fiche de test pour chaque ressource représentative : fichier source, versions d’éditeur et de paquet, composant destinataire, taille d’affichage attendue et premier écart visible.

Par exemple, supposons qu’un badge étoilé s’importe mais perde son trou central. Ouvre d’abord le SVG de livraison et confirme que le trou y existe. Si oui, compare un export simplifié du badge dans Unity. Si le trou subsiste dans cette version, examine les formes superposées, la construction du remplissage ou le masque du badge original. Vectoriser à nouveau la source est utile uniquement si la géométrie des tracés elle-même est incorrecte.

Teste la ressource acceptée dans une compilation cible ainsi que dans l’éditeur. Note si elle reste lisible à la plus petite taille, si couleurs et transparence correspondent et si les références de scène ou de prefab survivent à une nouvelle importation. Les décisions de performance nécessitent un profilage de ta scène ; une extension SVG n’est pas une mesure de performance.

Comment cela se présente avec PerfectVector

PerfectVector intervient avant l’import Unity si ta seule source adaptée est matricielle et si tu as besoin de formes modifiables. Téléverse un PNG ou JPG à couleurs plates dans le convertisseur d’image en vecteur de PerfectVector, compare la silhouette et les trous vectorisés à l’original, puis examine le SVG téléchargé dans un éditeur vectoriel avant importation dans Unity.

Utilise la même icône représentative pendant toute la transmission. Accepte la vectorisation uniquement si ses régions prévues sont modifiables, ses espaces négatifs restent ouverts et le nettoyage n’a pas déformé la forme. Applique ensuite le test de destination Unity ci-dessus.

Garde une photo, texture, lueur douce ou sprite volontairement en pixel art sous forme matricielle si cela préserve l’apparence souhaitée. Pour un symbole géométrique simple, le dessin manuel peut être plus facile à contrôler que la vectorisation. PerfectVector prépare la géométrie source SVG ; il ne change pas les fonctions prises en charge par Unity et ne valide pas le rendu à l’exécution. Si la distinction des formats est inconnue, commence par ce que contient un fichier SVG.

FAQ

Unity 6 nécessite-t-il le paquet Vector Graphics ? La réponse dépend de la version mineure et de la destination. Unity 6.3 possède des imports SVG UI Toolkit et Texture2D intégrés. Les imports Sprite et uGUI utilisent le paquet 3.0 preview. Les versions Unity précédentes utilisent la méthode du paquet 2.0 preview compatible.

Changer l’extension PNG en SVG crée-t-il un sprite vectoriel ? Non. Renommer un fichier ne vectorise pas ses pixels. Utilise la source vectorielle originale, dessine les formes ou vectorise une illustration matricielle adaptée et examine les tracés obtenus avant importation Unity.

La vectorisation peut-elle réparer un SVG mal importé par Unity ? Uniquement si la géométrie source doit être reconstruite. Si le SVG contient des tracés corrects mais qu’un mauvais type de ressource générée ou un effet non pris en charge cause le problème, corrige d’abord ce choix d’importation ou d’export.

Sources

1. Unity — guide du paquet Vector Graphics 3.0 — Définit la répartition selon l’éditeur et les méthodes intégrées ou de paquet Sprite/uGUI.
2. Unity — travailler avec les graphiques vectoriels — Décrit les choix de ressources natives et les fonctions SVG non prises en charge.
3. Unity — réglages d’importation d’images — Explique les réglages d’images vectorielles UI Toolkit et les contrôles de tessellation.
4. Unity — manuel du paquet Vector Graphics 2.0 — Traite de l’ancien importateur, des contrôles d’unités de scène et de pivot et de son statut expérimental.
5. W3C — contenu intégré SVG — Établit qu’un SVG peut inclure des images matricielles.

---

Si ta ressource Unity part d’un PNG ou JPG plat et nécessite des tracés modifiables, convertis ton image avec PerfectVector. Examine la silhouette, les trous et les formes de fond indésirables, puis teste le SVG dans le composant Unity et aux tailles d’affichage prévues pour la livraison.