Import SVG PixiJS : choisis Graphics ou une texture

PixiJS peut utiliser un SVG de deux façons : Graphics.svg() analyse la géométrie de dessin prise en charge, tandis que charger le SVG comme texture fournit à un Sprite des pixels à afficher. Choisis la géométrie si l’illustration doit fortement changer d’échelle, et une texture si une image matricielle adaptée à la taille d’affichage prévue convient à la ressource. PixiJS décrit les deux méthodes dans son guide SVG.

Teste le même fichier avec les deux méthodes avant de choisir. Notre petit emblème conservait son ouverture et ses couleurs dans les deux cas, mais la méthode géométrique perdait la translation du groupe. La texture respectait le placement du navigateur et devenait moins nette lors de l’agrandissement. Ce sont des problèmes distincts avec des corrections différentes.

Décide ce dont la scène a besoin

Un objet Graphics est un contenu de dessin Pixi, pas un arbre DOM SVG avec les ID d’éléments d’origine. Son contexte peut être partagé entre les instances, comme l’explique le guide Graphics. Conserve le SVG original si tu dois modifier les tracés sources individuels ou exporter un autre SVG plus tard. Les deux méthodes finissent par dessiner des pixels à l’écran.

Teste une courbe, un trou et une transformation

Cet exemple utilise PixiJS 8.21.0, un SVG de 96 × 96, une résolution de moteur de rendu de 1 et une texture SVG chargée à la résolution 1. La petite version est dessinée à sa taille native ; la grande utilise une échelle de 3. L’emblème original possède deux tracés colorés et un groupe translaté de huit unités SVG dans chaque direction. Son contour intérieur est orienté à l’opposé du contour extérieur pour former l’ouverture.

Le même SVG original dans trois moteurs de rendu

Le damier est visible à travers l’ouverture dans les trois colonnes. C’est un fond derrière l’illustration, pas une forme blanche peinte dans le trou. Le décalage de la colonne centrale est visible aux deux tailles : huit unités à l’échelle native deviennent 24 pixels d’affichage à l’échelle 3.

Ces observations concernent cette source et cette version. Elles ne prouvent pas que tous les trous, transformations, dégradés ou SVG exportés fonctionneront de la même manière.

Enregistre la source SVG

Enregistre ceci sous emblem.svg à côté de ta page. C’est une illustration originale dessinée pour la comparaison, pas un résultat de vectorisation.

<svg xmlns="http://www.w3.org/2000/svg"
     width="96" height="96" viewBox="0 0 96 96">
  <g transform="translate(8 8)">
    <path fill="#145c61" d="M40 0
      C62 0 80 18 80 40 C80 62 62 80 40 80
      C18 80 0 62 0 40 C0 18 18 0 40 0 Z
      M40 20 C29 20 20 29 20 40 C20 51 29 60 40 60
      C51 60 60 51 60 40 C60 29 51 20 40 20 Z"/>
    <path fill="#e68546"
      d="M62 5 C74 9 80 21 78 34 L61 32
         C63 23 61 15 55 10 Z"/>
  </g>
</svg>

Exécute les deux méthodes

Place ce script dans une page HTML servie en HTTP à côté de emblem.svg. Il importe la version précise de Pixi, récupère ton SVG de confiance et dessine les versions native et agrandie dans deux colonnes. Celle de gauche utilise la géométrie ; celle de droite une texture.

<script type="module">
import { Application, Assets, Graphics, Sprite }
  from 'https://cdn.jsdelivr.net/npm/pixi.js@8.21.0/dist/pixi.mjs';
 
const app = new Application();
await app.init({
  width: 640, height: 420, resolution: 1,
  antialias: true, background: '#e7eeea', preference: 'webgl'
});
document.body.append(app.canvas);
 
const response = await fetch('emblem.svg');
if (!response.ok) throw new Error('SVG request failed');
const svgText = await response.text();
const texture = await Assets.load({
  src: 'emblem.svg', data: { resolution: 1 }
});
 
for (const [scale, y] of [[1, 12], [3, 120]]) {
  const geometry = new Graphics().svg(svgText);
  geometry.scale.set(scale);
  geometry.position.set(16, y);
  const sprite = new Sprite(texture);
  sprite.scale.set(scale);
  sprite.position.set(336, y);
  app.stage.addChild(geometry, sprite);
}
</script>

Ouvre aussi le SVG original dans le navigateur. Compare le contour extérieur, l’ouverture, la forme d’accent et le placement, pas seulement l’absence d’erreur de chargement.

Corrige l’écart que tu observes réellement

La géométrie s’est déplacée

Dans ce test, Graphics.svg() n’appliquait pas le translate(8 8) englobant. L’implémentation du parseur SVG à cette version précise est utile pour vérifier le comportement de la version de ton projet.

Pour ce fichier précis, remplacer la ligne de positionnement de la géométrie par la suivante compense cette translation connue :

geometry.position.set(16 + 8 * scale, y + 8 * scale);

La correction inclut scale car la translation manquante appartient au système de coordonnées source. À l’échelle 3, la correction est de 24 pixels dans chaque direction. Ce n’est pas un outil général d’aplatissement des transformations. Un fichier avec des rotations ou cisaillements imbriqués, ou différentes transformations sur des tracés séparés, nécessite un SVG de livraison correctement préparé ou une autre méthode de rendu. Compare le fichier de livraison exporté à l’original modifiable.

La texture agrandie manque de netteté

La texture SVG de la figure contient 96 × 96 pixels. Redimensionner son sprite à 288 × 288 ne relit pas les courbes sources. Pour préparer davantage de pixels, charge une texture distincte à une résolution supérieure :

const largeTexture = await Assets.load({
  src: 'emblem.svg?resolution=3',
  data: { resolution: 3 }
});

Dans la version testée, cela produisait une source de 288 × 288 pixels avec une taille logique de texture de 96 × 96 et une résolution source de 3. Utilise largeTexture pour créer le sprite. La chaîne de requête donne à cette expérience une clé de cache distincte ; le serveur doit servir le même SVG pour cette URL. Le guide Assets de Pixi explique le cache fondé sur les URL, et son guide des textures distingue une texture de sa source.

Choisis la résolution pour la plus grande utilisation requise à l’écran, en incluant la résolution du moteur de rendu réellement livrée. Augmenter uniquement la résolution du moteur n’ajoute pas de détails à une texture de faible résolution déjà chargée. Vérifie aussi la plus petite taille d’icône : une source plus grande ne peut pas rendre lisible une petite ouverture si l’affichage final est trop petit.

Un détail manque

Vérifie la source originale dans un navigateur, puis teste une copie plus simple dans Pixi. Réduis le SVG aux formes concernées et réintroduis un à un ses groupes, couleurs et effets. La documentation Graphics de Pixi décrit la prise en charge SVG comme un sous-ensemble ; un chargement réussi n’est pas une vérification complète de compatibilité.

Conserve une copie de livraison matricielle si elle préserve de façon fiable l’illustration aux tailles connues. Pour un symbole géométrique simple, dessiner les formes directement dans Pixi peut faciliter la maintenance. Ne choisis pas une méthode sur une affirmation non mesurée selon laquelle elle serait toujours plus rapide ou utiliserait moins de mémoire. Teste ta scène et les appareils cibles.

Prépare la source avant importation

Si un SVG contient un PNG placé, changer son nom de fichier ou l’importer comme géométrie ne reconstruit pas les contours vectoriels manquants. Utilise la liste de vérification des images matricielles intégrées pour examiner d’abord la source. Le guide général de vectorisation d’images explique quand la vectorisation est utile.

PerfectVector intervient lorsqu’il ne reste qu’un PNG ou JPG plat et que tu as besoin de formes sources modifiables pour l’icône. Convertis ton image en SVG, puis examine le contour, les couleurs séparées et les petites ouvertures dans un éditeur SVG avant de répéter le test Pixi. Utilise directement un original vectoriel propre existant. La vectorisation ne corrige pas le traitement des transformations de Pixi et ne configure pas la résolution des textures.

D’autres moteurs font leurs propres choix d’importation. Le guide d’import SVG Godot explique les textures et le suréchantillonnage dans cet outil ; le guide SVG Unity traite de son processus distinct. Ne transfère pas les réglages d’un moteur à un autre uniquement sur la base de l’extension SVG.

Vérifie l’icône livrée

Avant d’accepter la ressource, compare-la à la source affichée dans le navigateur aux plus petites et plus grandes tailles prévues. Vérifie l’ouverture sur des fonds contrastés, le placement du groupe et les effets nécessaires. Note la version Pixi, la résolution du moteur de rendu, les dimensions en pixels de la source de texture et l’échelle de la scène. Conserve l’original SVG dans le projet pour tester un changement ultérieur de disposition ou d’importateur contre la même source.

Tu possèdes uniquement une illustration matricielle ? Prépare un SVG modifiable avec PerfectVector, examine son contour et ses espaces vides, puis teste la méthode d’importation Pixi réelle aux tailles utilisées par ton interface.

FAQ

Importer un SVG dans PixiJS conserve-t-il sa géométrie vectorielle ? Cela dépend de la méthode. Graphics.svg analyse la géométrie de dessin prise en charge. Charger un SVG comme texture fournit à un Sprite une source matricielle. Conserve le SVG original séparément pour modifier la source et effectuer de futurs exports.

Pourquoi un sprite SVG PixiJS peut-il paraître flou ? Un sprite peut afficher sa texture à une taille supérieure à ses dimensions en pixels. Vérifie la résolution source et la plus grande taille d’affichage prévue. Charge une texture de taille adaptée ou teste la méthode géométrique pour une illustration prise en charge.

Graphics.svg préserve-t-il toutes les fonctions SVG ? Non. Il prend en charge un sous-ensemble de SVG. Dans cet exemple PixiJS 8.21.0, le trou et les deux couleurs subsistaient, mais pas la translation du groupe. Teste ton propre fichier exporté contre une référence de navigateur.

Sources

1. Guide SVG PixiJS — Décrit les méthodes d’importation texture et géométrie ainsi que la résolution des textures.
2. Guide Graphics PixiJS — Explique le partage de GraphicsContext et les limites de prise en charge SVG.
3. Guide Assets PixiJS — Décrit le chargement des ressources et le cache fondé sur les URL.
4. Guide des textures PixiJS — Décrit la relation entre textures et sources.
5. Parseur SVG PixiJS 8.21.0 — Fournit l’implémentation à cette version précise pour examiner les écarts d’importation.