Import SVG Unreal Engine : vérifier la géométrie Motion Design
Prépare un SVG pour Motion Design d’Unreal Engine, examine trous et pièces séparées et distingue géométrie de scène, texture et image d’interface à l’exécution.
Sur cette page
- Choisir la destination avant de modifier le dessin
- Vérifier le plugin dans ta version du moteur
- Préparer un badge creux avec une pièce détachée
- Importer un fichier et identifier la ressource obtenue
- Vérifier le trou, les couleurs et les objets séparés
- Examiner les courbes et réimporter volontairement
- Quand un emblème matriciel nécessite une reconstruction
- FAQ
- Sources
SVG Importer d’Unreal Engine fournit une procédure géométrique pour Motion Design. Le tutoriel d’import SVG d’Epic décrit la transformation de fichiers vectoriels 2D en géométrie 3D. Commence par vérifier le plugin et la documentation de ta version du moteur, puis importe une petite source dont tu reconnais les trous, couleurs et pièces séparées.
C’est une tâche différente de l’affichage d’un SVG comme image d’interface à l’exécution. Un aperçu de texture, un acteur de scène et un moteur de rendu de widgets sont des livrables différents. Ce guide se concentre sur la préparation du dessin pour la géométrie de scène et sur l’adéquation des objets obtenus au motion design.
L’exemple est un badge creux original avec un losange détaché. C’est une procédure documentée à essayer dans ton projet, pas le compte rendu d’un test d’import ou d’extrusion Unreal.
Choisir la destination avant de modifier le dessin
Décide ce que le graphisme doit devenir. L’extension SVG seule ne répond pas à cette question.
| Usage prévu | Ce qu’il faut établir d’abord | Points à examiner |
|---|---|---|
| Graphisme construit comme géométrie de scène | Procédure SVG Importer et Motion Design adaptée | Trous, surfaces, couleurs, limites et contrôle des objets |
| Image plate sur une surface | Méthode de texture/matériau du projet | Résolution, transparence et matériau final |
| Icône dans des widgets UMG ordinaires | Méthode de rendu prise en charge par l’interface | Comportement des widgets et prise en charge de la cible empaquetée |
| SVG reçu après le démarrage de l’application | Implémentation explicite de chargement/rendu à l’exécution | Gestion des entrées, couverture des fonctionnalités et comportement en cas d’échec |
Le guide de démarrage Motion Design d’Epic décrit un plugin d’éditeur pour le graphisme destiné à la diffusion audiovisuelle. Son interface ressemble à UMG, mais inclut des capacités hors des widgets. Cette ressemblance ne prouve pas qu’un Image UMG ordinaire peut charger des SVG quelconques.
Si tu déplaces la même source entre moteurs, le guide d’import SVG Unity traite d’un autre importateur et d’un autre choix de destination. L’acceptation par un moteur ne vérifie pas la prise en charge des fichiers par l’autre.
Vérifier le plugin dans ta version du moteur
La fiche du plugin SVG Importer d’Epic porte actuellement une bannière Beta et la catégorie Experimental. Prends cela comme une raison de valider la fonctionnalité dans le projet à livrer, surtout avant d’en faire une dépendance majeure.
Le tutoriel officiel est associé à Unreal Engine 5.4 et 5.5. La documentation API actuelle est une référence distincte ; ne suppose donc pas que les panneaux ou libellés d’une ancienne vidéo correspondent exactement à une autre version installée.
Pour configurer Motion Design, suis les instructions de démarrage adaptées pour activer Motion Design et Storm Sync Motion Design Bridge. Vérifie que le plugin SVG Importer correspondant est disponible et activé dans ce projet. Suis toute demande de redémarrage de l’éditeur avant d’examiner le dessin.
Utilise d’abord un petit niveau de test. Le guide de démarrage décrit un niveau vide ou modèle, suivi de Motion Design > Create Defaults > Spawn. Garde ce test séparé d’une séquence complexe pour mieux distinguer acteur manquant, problème de caméra ou de configuration du plugin d’une source mal formée.
Préparer un badge creux avec une pièce détachée
Enregistre cet exemple original sous hollow-badge.svg :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 140">
<path fill="#147D78" fill-rule="evenodd"
d="M24 24H116V116H24Z M46 46H94V94H46Z"/>
<path fill="#EF8067" d="M150 30L168 48L150 66L132 48Z"/>
</svg>Le tracé bleu-vert forme un cadre carré avec un centre carré vide. Le losange corail est un tracé distinct, séparé du cadre par un espace. Le fichier ne contient aucun rectangle de fond, contour, texte, filtre, image externe ni animation.
Ces omissions sont voulues. Elles permettent de poser quelques questions utiles avant de tester une illustration complexe : le centre reste-t-il ouvert, le losange reste-t-il détaché et les deux couleurs sont-elles représentées comme prévu ?
Examine aussi ta propre source dans un éditeur vectoriel. Si elle enveloppe seulement une photographie dans un conteneur SVG, la vérification du matriciel intégré aide à identifier ce cas. Renommer ou envelopper une image matricielle ne fournit pas les limites fermées nécessaires à cet exercice géométrique.
Garde l’original éditable et exporte une copie livrable. Utilise des formes simples fermées et remplies comme référence ; ajoute effets, dégradés ou rognage élaboré seulement lorsque le projet en a besoin et que tu peux vérifier leur traitement. L’existence d’une classe au nom similaire dans une référence API n’est pas une garantie de compatibilité complète de la fonctionnalité.

Importer un fichier et identifier la ressource obtenue
Choisis un dossier de contenu de projet pour l’expérience. Le guide général d’import de ressources d’Epic décrit le bouton Import du Content Browser et l’import par glisser-déposer. Avec l’importateur SVG adapté activé, sélectionne le petit SVG et examine ses options spécifiques et les diagnostics de ta version installée.
Si le fichier est rejeté ou que l’importateur attendu n’apparaît pas, vérifie d’abord la version du moteur et la configuration du plugin. Simplifier sans cesse le dessin ne corrigera pas une fonctionnalité d’import indisponible.
Après l’import, identifie le type de ressource avant de la placer. L’API SVGImporter d’Epic inclut des données SVG, acteurs SVG et composants de maillage dynamique. Ces distinctions sont utiles : une ressource de données source ne prouve pas à elle seule que la scène contient la géométrie prévue.
Utilise la procédure de placement d’acteur SVG de ta version pour amener la ressource dans la scène de test. La boîte à outils Motion Design inclut des acteurs SVG. Sélectionne le résultat placé et examine-le de face avant de changer profondeur, matériaux ou animation. Note la ressource et l’acteur utilisés pour qu’un collègue puisse reproduire la configuration.
Enregistre les ressources importées et conserve le SVG original. Le guide général d’import Unreal explique que le contenu importé est stocké dans les ressources du projet ; le fichier source reste essentiel pour les modifications et réimports ultérieurs.
Vérifier le trou, les couleurs et les objets séparés
Commence par l’ouverture carrée du badge. Regarde-la sur un fond contrasté et depuis un autre angle si le résultat a une profondeur. Une face pâle couvrant le centre peut ressembler à une ouverture de face. Le critère d’acceptation est que la région destinée à être vide reste réellement vide.
Si le centre se remplit, examine les sous-tracés et le comportement de remplissage source avant d’ajouter des effets. Le guide de dépannage des trous SVG explique pourquoi un intérieur peint et une vraie ouverture peuvent se ressembler dans un aperçu plat.
Examine ensuite l’espace près du losange. Cherche un pont involontaire, une face supplémentaire ou une zone de fond. Sélectionne ensuite les objets nécessaires à l’animation. Si le losange doit bouger indépendamment, vérifie que l’organisation d’acteurs et composants disponible permet de le déplacer sans changer le cadre. Un accent visuellement séparé ne prouve pas à lui seul la structure de sélection souhaitée.
Vérifie les couleurs après la géométrie. Compare le cadre bleu-vert et le losange corail à la source dans les conditions de matériaux et d’éclairage utilisées par la composition. Ne diagnostique pas une face latérale ombrée comme une erreur de couleur source seulement parce qu’elle est plus sombre que l’avant.
Pour les problèmes liés à la profondeur, la liste de vérifications d’extrusion SVG fournit des questions sur la géométrie source. Ce n’est pas un guide de commandes propre à Unreal, et une apparence réussie dans ce test ne garantit pas un maillage fermé pour la fabrication.
Examiner les courbes et réimporter volontairement
L’exemple carré évite les courbes, mais la plupart des logos en ont. L’API SVGImporter d’Epic décrit un réglage de qualité de conversion des splines en polylignes. Les courbes source et la représentation générée sont donc deux choses distinctes à examiner.
Pour un logo arrondi, vérifie la courbe extérieure et la plus petite ouverture à la plus courte distance de caméra utilisée dans le plan. Si les bords semblent facettés, examine les commandes de conversion concernées dans ta version du moteur. Ne choisis pas arbitrairement la valeur maximale simplement parce que la source est vectorielle.
La référence versionnée SVGData pour 5.4 d’Epic indique que changer sa surcharge de qualité déclenche un réimport et une régénération de géométrie. C’est une raison de sauvegarder une référence et de revérifier la scène après un changement de source ou de conversion, plutôt que de supposer que tout le travail en aval reste inchangé. Les noms de propriétés de cette référence ne sont pas une promesse pour tous les panneaux d’éditeur ultérieurs.
Répète les vérifications de trou, espaces, matériau et contrôle des objets après le réimport. Teste la scène dans le contexte réel de livraison avant d’organiser tout le jeu de dessins. Ce guide n’établit pas la prise en charge à l’exécution d’un produit empaqueté, un rendu SVG équivalent au navigateur ni des performances universelles du plugin.
Quand un emblème matriciel nécessite une reconstruction
Si l’original vectoriel manque et que la source est un emblème PNG ou JPG simple, la procédure image vers vecteur de PerfectVector peut préparer un SVG candidat statique. Recadre sur le dessin, examine l’ouverture et l’accent détaché dans l’aperçu et compare le candidat à la source. Télécharge le SVG accepté, puis exécute les mêmes vérifications géométriques dans Unreal.
La vectorisation ne choisit pas les unités de scène, ne crée pas de rig, n’attribue pas de matériaux de production et ne garantit pas une topologie de maillage précise. Utilise un original vectoriel existant lorsqu’il est disponible. Garde photographies et effets peints complexes en matriciel si cela préserve mieux leur apparence. Pour un badge géométrique simple, créer directement les quelques formes nécessaires peut offrir plus de contrôle que les reconstruire depuis les pixels.
Garde une courte note de transmission : fichier source, version du moteur/plugin, réglages d’import, zones vides attendues, parties mobiles indépendantes et distance de caméra utilisée pour l’examen. Les guides de préparation graphique du blog traitent des choix source avant cette étape propre au moteur.
FAQ
Unreal Engine peut-il importer des fichiers SVG ? Oui. Epic fournit un SVG Importer utilisé pour la géométrie Motion Design. Vérifie la fonctionnalité et la documentation de ta version du moteur, puis contrôle la ressource importée et le résultat de scène.
L’import SVG signifie-t-il qu’UMG peut afficher n’importe quel SVG à l’exécution ? Non. Une procédure géométrique Motion Design n’établit pas le chargement arbitraire de SVG à l’exécution dans les widgets UMG ordinaires. Choisis et teste la méthode de rendu nécessaire à l’interface.
Pourquoi un trou de mon SVG semble-t-il rempli après l’import ? Examine si la source contient une vraie ouverture ou un intérieur peint, puis vérifie les sous-tracés et le remplissage. Vérifie la géométrie importée sur un fond contrasté plutôt que de te fier seulement à la vue de face.
Puis-je convertir un logo PNG en objet 3D prêt pour Unreal ? La vectorisation peut reconstruire des formes source statiques, mais ne termine pas la scène Unreal. Importe le SVG accepté, examine géométrie et matériaux générés et vérifie le contrôle des objets nécessaire au projet.
Sources
- Epic Games — Importing + SVG importer — Procédure géométrique Motion Design et versions du tutoriel.
- Epic Games — Plugin SVG Importer — Portée du plugin, bannière Beta et catégorie Experimental.
- Epic Games — Guide de démarrage Motion Design — Configuration du projet, portée de l’éditeur et boîte à outils d’acteurs SVG.
- Epic Games — Importer directement des ressources — Import général via Content Browser et enregistrement des ressources.
- Epic Games — API SVGImporter — Données, acteurs, classes de maillage dynamique et concepts de conversion des splines.
- Epic Games — SVGData, Unreal Python 5.4 — Surcharge de qualité versionnée et comportement de régénération.
Valide l’ouverture, la pièce détachée et le comportement de scène d’un badge avant d’importer tout l’ensemble. S’il ne reste qu’un dessin matriciel, prépare un SVG candidat, examine sa géométrie et vérifie le fichier accepté dans ton projet Unreal.
Plus depuis le blog

SVG clipPath ou mask : contours nets ou fondus doux
Compare clipPath et les masques alpha et luminance SVG sur une image. Reprends l’exemple, teste les fonds clairs et sombres et exporte la géométrie adaptée.

Import SVG PixiJS : choisis Graphics ou une texture
Importe un SVG dans PixiJS comme géométrie ou texture. Teste deux tailles, vérifie la résolution et repère les transformations de groupe manquantes.