Format PNG vs SVG

Format pixellisé vs vectoriel

La différence fondamentale entre les formats PNG et SVG est que le premier est pixellisé et le second vectoriel.

Le format PNG utilisent des images formées de pixels. Si une telle image est trop agrandie, elle se pixellise et devient granuleuse. De la même manière, si elle est trop réduite, elle devient floue. Le format PNG est capable d’afficher des images très haute résolution mais ne sait pas gérer l’extension à l’infini.

De leur côté, les fichiers SVG sont vectoriels, c’est-à-dire qu’ils utilisent un réseau mathématique complexe composé de lignes, de points, de formes et d’algorithmes. Les images SVG peuvent être agrandies à volonté sans perdre leur résolution.

En savoir plus sur les fichiers pixellisés et vectoriels

Taille des fichiers

Les fichiers PNG sont souvent volumineux pour pouvoir gérer les hautes résolutions, et il est donc parfois plus long de les traiter, partager, enregistrer et ouvrir. Leur poids peut aussi augmenter le temps de chargement des pages web , c’est pourquoi les fichiers JPEG sont plus répandus pour la mise en ligne de photos. Il existe toutefois une version PNG 8 bits plus légère, mais qui ne prend en charge que 256 couleurs.

Les fichiers SVG sont beaucoup plus légers que les fichiers PNG et ne risquent pas de ralentir votre ordinateur ou votre site web (à l’exception des designs présentant une multitude de détails). Ce format vectoriel permet d’augmenter ou de réduire la taille des images sans compromettre leur qualité.

Compression

Les fichiers SVG utilisent une méthode de compression sans perte , c’est-à-dire qu’ils sont compressibles sans altération de la définition, de la richesse des détails ou de la qualité.

Les fichiers PNG peuvent eux aussi être compressés sans perte, de 5 à 20 %, ce qui permet de compenser leur taille, mais ils restent globalement plus lourds que les fichiers SVG.

Photographie

Comme mentionné précédemment, le format PNG n’est pas très utilisé pour les photos destinées au web, mais il peut l’être pour des photos numériques haute qualité, très riches en détails, destinées à être imprimées et retouchées, par exemple. Il fait partie des formats courants dans Adobe Photoshop.

Par contre, avec le format SVG qui n’est pas basé sur des pixels , il est difficile d’obtenir un affichage de grande qualité.

Utilisation web

Les formats PNG et SVG sont tous deux capables d’afficher des niveaux élevés de précision pour tous types d’éléments web : images, logos, infographies, tableaux, etc.

Mais les fichiers SVG possèdent un avantage clé grâce à leur langage XML, qui utilise du texte et non du code pour afficher le contenu. Ils peuvent ainsi être analysés par les lecteurs d’écran et les moteurs de recherche, ce qui les rend très intéressants en termes d’accessibilité et de référencement.

Généralement plus petits, les fichiers SVG se chargent plus rapidement sur les pages web. Or, le temps de chargement des pages est un critère essentiel dans le classement des moteurs de recherche.

Le format PNG peut aussi gérer des images en mode texte , mais à un degré moindre.

Compatibilité et complexité

Si le format SVG est considéré comme plus avancé que le format PNG, il n’est toutefois pas compatible avec l’ensemble des navigateurs et des systèmes d’exploitation. De plus, son langage de programmation et sa structure vectorielle peuvent être intimidants dans un premier temps.

À l’inverse, le format PNG est un format internet standard pris en charge par la majorité des navigateurs et des systèmes d’exploitation.

Animation

Le format PNG ne gère pas les animations, contrairement à son homologue pixellisé GIF.

De son côté, le format SVG prend en charge les animations mais pas aussi parfaitement que des formats natifs tels que le format AI d’Adobe Illustrator.

En savoir plus sur le format AI

Transparence

Les fichiers PNG et SVG prennent tous deux en charge la transparence , ce qui en fait un excellent choix pour les logos et les images destinés au web.

Précisons que le format PNG est l’un des meilleurs choix pour des images pixellisées transparentes. Il est donc recommandé si vous travaillez avec des pixels et utilisez la transparence.

1. Ouvrez Adobe Illustrator.
2. Cliquez sur Fichier > Ouvrir, puis sélectionnez l’image sur votre ordinateur.
3. Cliquez sur le bouton Ouvrir.
4. Cliquez sur l’option Vectorisation dans le menu supérieur et sélectionnez Vectorisation de l’image.
5. Paramétrez la conversion selon vos besoins , en modifiant, par exemple, les couleurs.
6. Une fois la conversion terminée, sélectionnez votre image vectorisée et cliquez sur Dissocier. Cette opération va séparer les formes de couleur.
7. Cliquez sur Fichier > Exporter.
8. Enregistrez votre fichier au format SVG.

1. Ouvrez Adobe Photoshop.
2. Cliquez sur Fichier > Ouvrir.
3. Sélectionnez le fichier SVG sur votre ordinateur.
4. Cliquez sur Exporter > Exporter en tant que > PNG.
5. Enregistrez votre fichier au format PNG.