PNG vs SVG pour le Pixel Art : quelle exportation devriez-vous utiliser ?

PNG et SVG peuvent afficher la même illustration en pixels, mais ils résolvent des problèmes différents. PNG stocke les pixels colorés. SVG stocke les instructions pour dessiner des formes.

Pour un partage plus rapide, choisissez PNG. Pour une mise à l’échelle et une mise en page Web flexibles, SVG peut être le meilleur maître.

Quand PNG est la réponse facile

PNG est largement pris en charge et prévisible. Les plateformes sociales, les applications de chat, les moteurs de jeux, les éditeurs d’images et les systèmes de contenu le comprennent tous.

Choisissez PNG lorsque :

• vous téléchargez un avatar ou une image sociale ;
• un moteur de jeu attend une texture ;
• vous avez besoin de pixels transparents ;
• quelqu’un d’autre modifiera le fichier dans une application raster ;
• les dimensions définitives sont déjà connues.

PNG est sans perte, il n’ajoute donc pas de sonnerie de style JPEG autour des bords durs des pixels.

Le principal risque est la mise à l’échelle. Si un PNG 128×128 est affiché à 350×350, l’interpolation peut adoucir la grille. Utilisez la mise à l’échelle des nombres entiers et le rendu du voisin le plus proche lorsque votre logiciel le permet.

Quand SVG est plus utile

SVG est un format vectoriel. Un SVG pixel art représente généralement chaque bloc de couleur sous la forme d’un rectangle net. Le navigateur redessine ces formes à la taille demandée.

Choisissez SVG lorsque :

• une même œuvre doit apparaître dans plusieurs formats ;
• vous le placez sur un site web responsive ;
• vous avez besoin d’une source nette pour une sortie grand format ;
• l’œuvre d’art comporte un nombre modeste de blocs et de couleurs ;
• vous souhaitez inspecter ou modifier des formes dans un éditeur vectoriel.

SVG s’intègre également naturellement avec HTML et CSS. Mais toutes les plateformes sociales ou pipelines de jeux ne l’acceptent pas.

La taille du fichier dépend de l’illustration

SVG n’est pas toujours plus petit. Une conversion détaillée peut contenir de nombreux rectangles, produisant un fichier plus volumineux qu’un PNG compressé. Une simple icône avec de grandes zones plates peut être minuscule en SVG.

Testez les deux au lieu de vous fier au folklore du format.

Comme modèle approximatif :

• les petites illustrations simples et plates privilégient souvent le SVG ;
• les illustrations détaillées ou haute résolution privilégient souvent le PNG ;
• les conversions de pixels de type photo produisent généralement un balisage SVG chargé.

Transparence et bords

Les deux formats peuvent conserver des arrière-plans transparents. PNG stocke une valeur alpha pour chaque pixel. SVG peut laisser des zones vides ou attribuer une opacité aux formes.

Pour le pixel art classique, préférez les blocs entièrement opaques et l’espace entièrement transparent. Les pixels de bord semi-transparents peuvent créer des halos lorsque l’illustration se déplace entre des arrière-plans clairs et sombres.

Ce que j’exporte depuis PixelTool

Mon flux de travail par défaut est simple :

1. Utilisez PNG pour l’élément final immédiat.
2. Enregistrez SVG en tant que copie flexible lorsque le design pourra être redimensionné ultérieurement.
3. Testez le PNG à ses dimensions d’affichage réelles.
4. Ouvrez le SVG une fois dans le navigateur cible ou dans l’application de conception.

PixelTool génère les deux formats à partir de la même grille de pixels, vous pouvez donc les comparer sans reconstruire l’image.

Une table de décision rapide

Cas d’utilisation	Meilleur premier choix
Avatar ou publication sociale	PNG
Texture de jeu ou sprite	PNG
Décoration de site web responsive	SVG
Gros caractères à partir d’œuvres d’art simples	SVG
Compatibilité maximale	PNG
Édition ultérieure de vecteurs	SVG

Il n’est pas nécessaire de choisir un seul format pour toujours. Conservez le format qui correspond au canal de diffusion actuel, et préservez l’autre alors que cela ne coûte presque rien.