Import SVG Godot : Texture2D, DPITexture et icônes nettes

L’import SVG Godot transforme normalement le SVG en pixels pendant l’import de la ressource. Agrandir cette texture peut donc sembler flou même si la source contient des tracés vectoriels propres. Pour les icônes SVG devant s’adapter à l’échelle de la zone d’affichage (viewport), l’importateur actuel propose aussi DPITexture, qui peut rastériser à nouveau la source pour un autre facteur de suréchantillonnage. Godot décrit les deux méthodes dans son guide d’import d’images.

Commence par vérifier la ressource importée et sa mise à l’échelle dans le projet. Retracer un SVG déjà valide ne corrigera pas une texture basse résolution étirée sur un écran plus grand.

Choisir le type d’import SVG selon l’affichage

Les deux choix ci-dessous décrivent les types de ressources du panneau Import. DPITexture hérite lui-même de Texture2D ; ce ne sont donc pas des familles de classes sans lien. La référence DPITexture marque aussi la classe comme expérimentale ; vérifie la documentation adaptée à la version Godot du projet avant adoption.

L’import de texture donne une ressource de texture. Traite édition des tracés, formes de collision et performances comme exigences distinctes ; un nom SVG ne prouve pas leur gestion. Pour une scène navigateur, compare les méthodes géométrie et texture PixiJS pour voir comment le même SVG emprunte une autre voie vers le moteur.

La source SVG et ses pixels rendus

Vérifier d’abord un import Texture2D par défaut

Utilise une ressource représentative avant de changer tout un dossier d’icônes. Choisis une forme avec bord courbe, espace étroit et petits détails importants dans l’interface.

1. Place le SVG dans le projet et sélectionne-le dans FileSystem.
2. Ouvre Import et confirme le type Texture2D.
3. Examine SVG > Scale et Process > Size Limit, puis réimporte après un changement.
4. Place la texture dans son sprite ou composant d’interface prévu et vérifie sa taille affichée.

SVG > Scale change la taille de rastérisation ; une valeur supérieure crée une image plus grande. Elle agit aussi sur la taille de texture en 2D ; examine donc les dimensions du nœud ou de la mise en page après changement. Process > Size Limit peut plafonner les dimensions importées. Les deux commandes sont décrites dans la référence de l’importateur de textures.

Pour un exemple simple, un matriciel de 32 pixels de large affiché sur 128 pixels écran est agrandi. Les courbes vectorielles source n’ajoutent pas de pixels à ce matriciel déjà importé. Génère une texture adaptée ou teste DPITexture si le suréchantillonnage convient à l’interface.

Évite d’augmenter l’échelle de tous les SVG par un grand multiplicateur arbitraire. Établis d’abord la plus grande utilisation réelle, puis examine aussi la plus petite. Une ressource réussie dans un grand aperçu d’inventaire peut perdre un espace étroit sur un petit bouton.

Utiliser DPITexture avec les bons réglages de suréchantillonnage

Pour tester l’adaptation, sélectionne le SVG dans FileSystem, passe son type d’import à DPITexture et réimporte. Réutilise le même placement d’interface pour répondre à une question : changer la méthode de rastérisation résout-il l’écart aux échelles prévues ?

DPITexture garde les données source SVG et peut produire un matriciel adapté au suréchantillonnage. Son base_scale contrôle l’échelle de texture source ; il ne transforme pas la ressource en tracés de scène éditables. Consulte la documentation de la classe DPITexture.

Deux cas de mise à l’échelle sont à vérifier :

• Échelle de la zone d’affichage : le suréchantillonnage d’image Godot peut effectuer un nouveau rendu de la source vectorielle lorsque le facteur d’échelle de la zone d’affichage change. Active-le pour un SVG en l’important comme DPITexture.
• Échelle de nœud : le suréchantillonnage basé sur Scale d’un Node2D ou Control est désactivé par défaut. Active Oversampling with Scale sur le nœud concerné si ce comportement est nécessaire.

Le guide de suréchantillonnage Godot explique cette distinction. Il note aussi que des changements d’échelle fréquents peuvent demander du travail CPU, car la texture est rendue à nouveau. Teste l’échelle animée dans la scène livrée avant d’appliquer largement l’option.

L’éditeur 2D peut rééchantillonner automatiquement pendant le zoom, ce qui en fait un aperçu utile. Exécute aussi le projet et teste son comportement réel de la zone d’affichage. En mode d’étirement Viewport, la scène est d’abord dessinée à la taille de base de la zone d’affichage, puis mise à l’échelle vers la fenêtre système ; ce dernier changement peut toujours déterminer l’apparence de l’interface. La documentation des modes d’étirement décrit la différence avec Canvas Items.

Préparer un dessin que Godot peut reproduire

Changer l’importateur résout un problème de taille de rendu. Des objets manquants ou une silhouette modifiée nécessitent une vérification graphique source.

Chercher de vrais tracés

Ouvre le SVG dans un éditeur vectoriel et sélectionne son dessin visible. Si toute l’icône est une seule image matricielle placée, examine cela avant de régler Godot. L’élément SVG <image> peut contenir du matriciel, comme l’explique la référence MDN de l’élément. Rastériser à nouveau cette enveloppe ne reconstruit pas les courbes propres jamais contenues dans un petit PNG intégré.

Utilise la liste de vérifications du matriciel intégré pour distinguer pixels placés et formes éditables. Si un original vectoriel existe, exporte depuis celui-ci. Pour un ensemble, garde un canevas et des marges cohérents avec le guide SVG des kits d’interface.

Convertir le texte décoratif en tracés

L’importateur SVG Godot ne rend pas le texte SVG non converti en tracés. Convertis le lettrage décoratif en tracés dans la copie livrable, tout en gardant un original de texte éditable. Dans Inkscape, la commande est Path > Object to Path. Godot inclut la procédure dans Importer des images SVG avec texte.

Pour un libellé de bouton à localiser ou modifier fréquemment, garde-le comme texte d’interface et importe l’icône séparément. Convertir toute une interface en contours compliquerait ces modifications ultérieures.

Tester séparément les effets complexes

Godot utilise ThorVG pour le rendu SVG. L’interpréteur SVG ThorVG a une portée définie ; sa présentation SVG cite animation, interactivité et multimédia parmi les fonctionnalités non prises en charge. Les capacités générales du moteur ThorVG ne garantissent pas qu’une fonctionnalité SVG précise fonctionne via l’importateur Godot.

Si un badge perd un détail, compare le SVG exporté à une copie faite de formes remplies simples. Ajoute les effets nécessaires un par un. Garde un export matriciel s’il préserve mieux un dessin complexe et que le projet n’a pas besoin de formes source adaptables.

Ne supprime pas une ouverture étroite seulement pour réduire la complexité du fichier. Le test d’acceptation est la silhouette voulue, y compris ses espaces négatifs.

Diagnostiquer le premier écart visible

Note fichier source, type d’import, échelle SVG, échelle du nœud, réglages de la zone d’affichage et taille d’affichage attendue. Change ensuite le réglage lié au symptôme.

Dans Godot 4, le filtrage des textures 2D se configure via les propriétés CanvasItem, avec une valeur par défaut du projet. Un ancien tutoriel peut indiquer un réglage d’import qui n’est plus à cet endroit. Le manuel d’import d’images décrit le changement. Le filtrage peut modifier l’apparence des pixels existants ; il ne répare pas le détail source manquant.

Pour un flou aussi présent hors de Godot, suis le diagnostic plus général des SVG pixellisés. Cela aide à identifier si le mauvais bord existe avant que le moteur ne voie le fichier.

Accepter l’icône dans son interface réelle

Teste les plus petits et grands placements prévus sur fonds clairs et sombres. Vérifie courbe, espace le plus étroit et transparence autour du bord. Redimensionne la fenêtre en cours d’exécution, utilise toute commande d’échelle d’interface visible par l’utilisateur et teste l’échelle animée du nœud si présente.

Répète la vérification dans une compilation cible. Garde les réglages d’import choisis avec la ressource source pour qu’un autre contributeur reproduise le résultat. Pour un jeu d’icônes, teste plus que la silhouette la plus simple : inclue l’icône la plus dense et celle au détail important le plus fin.

Un petit fichier SVG source ne prouve pas une consommation mémoire GPU inférieure. Les deux méthodes produisent des textures matricielles pour l’affichage. Mesure les ressources importées et la scène réelle lorsque mémoire ou temps de rendu par image déterminent le choix.

Avec PerfectVector

PerfectVector intervient avant l’import Godot lorsque ta seule source est un PNG ou JPG à aplats et que tu as besoin de formes SVG éditables. Téléverse une icône représentative dans le convertisseur image vers vecteur de PerfectVector, compare contour vectorisé et espaces internes à l’original, puis examine le SVG téléchargé avant de choisir le type d’import Godot.

Accepte la vectorisation seulement si la forme est correcte. Retire un fond indésirable, vérifie que les régions prévues restent éditables et confirme que les petites ouvertures survivent au nettoyage. Effectue ensuite les mêmes vérifications Godot de taille et de suréchantillonnage que pour un SVG existant.

Garde photos, effets peints doux et pixel art volontaire en matriciel si c’est le résultat voulu. Une icône géométrique simple peut être plus facile à dessiner directement. La vectorisation reconstruit les formes source ; elle ne configure pas l’importateur Godot et ne valide pas le jeu final.

FAQ

Godot peut-il importer des fichiers SVG ? Oui. L’import Texture2D par défaut rastérise un SVG à l’import. L’importateur actuel propose aussi DPITexture pour les SVG nécessitant une nouvelle rastérisation avec suréchantillonnage. Vérifie la documentation de ta version ; DPITexture est marqué expérimental.

Pourquoi mon SVG est-il flou dans Godot ? Vérifie si un matriciel importé fixe est affiché au-delà de ses dimensions en pixels. Examine aussi étirement de la zone d’affichage, filtrage, suréchantillonnage d’échelle du nœud et matriciel intégré. Corrige la cause avant de retracer ou remplacer la source.

DPITexture préserve-t-il des tracés SVG éditables dans la scène ? Il garde la source SVG pour la nouvelle rastérisation, mais reste une ressource de texture. Son import ne fournit pas d’édition des tracés de scène et ne crée pas automatiquement la géométrie de collision nécessaire au jeu.

Sources

1. Godot — Importer des images — Définit types d’import SVG, préparation du texte, limites du moteur et filtrage des textures.
2. Godot — DPITexture — Décrit héritage, source SVG conservée, échelle et statut expérimental.
3. Godot — Résolutions multiples — Explique étirement de la zone d’affichage, suréchantillonnage d’image, réglages d’échelle de nœud et coûts des rendus répétés.
4. Godot — ResourceImporterTexture — Décrit échelle de rastérisation et limites de taille de l’importateur par défaut.
5. ThorVG — À propos de ThorVG — Définit la portée de prise en charge de l’interpréteur SVG.
6. MDN — Élément image SVG — Explique comment un SVG peut contenir un dessin matriciel.

---

Si ton icône Godot part d’un PNG ou JPG à aplats et nécessite des formes éditables, convertis ton image avec PerfectVector. Vérifie silhouette, petits espaces et tracés de fond indésirables, puis teste le SVG aux tailles d’affichage et réglages d’échelle du projet.