Un logo arrive dans deux fichiers : logo.svg à 3 Ko et logo.png à 40 Ko. Les deux se ressemblent dans un onglet de navigateur Faites-les exploser pour remplir un écran de projecteur et un seul reste net Essayez de les télécharger sur un profil social et seul l'autre est accepté Et si tout ce que vous avez est le PNG, les outils qui promettent de " ; convertir PNG en SVG" ; remettez quelque chose qui est techniquement un SVG mais pas le fichier que votre concepteur aurait fait.
Ce guide explique la différence entre les deux formats en termes de ce que chaque fichier stocke, quand utiliser lequel, ce qui se passe lorsque vous restituez un SVG en pixels et ce que le traçage d'un PNG en formes vectorielles peut et ne peut pas récupérer. Il comprend des nombres réels du moteur de traçage derrière les convertisseurs Toolz et se trouve sous le hub d'outils d'image.
tl;dr : SVG est un format vectoriel : il stocke les formes comme géométrie, il évolue donc à n'importe quelle taille sans flou et est idéal pour les logos, les icônes et les diagrammes PNG est un format raster : il stocke une grille fixe de pixels, sans perte, qui convient aux captures d'écran, aux illustrations détaillées et n'importe où qui n'accepte que les images. Passer de SVG à PNG est exact à la taille que vous choisissez ; utilisez le Convertisseur SVG en PNG à 2 x ou 4 x pour une sortie nette Passer de PNG à SVG est traçage, qui reconstruit les formes à partir des pixels et ne récupère pas un design original Il fonctionne pour les logos plats et line art, et échoue sur les photos Toutes les conversions ici s'exécutent côté client, rien téléchargé, gratuit, aucune inscription.
Quelle est la différence entre SVG et PNG ?
SVG décrit une image comme des instructions pour la dessiner, tandis que PNG stocke le dessin fini en pixels Tout le reste sur les deux formats découle de cette seule différence.
Un fichier SVG, défini par le W3C dans Graphiques vectoriels évolutifs (SVG) 2[traduction], est du texte XML Il répertorie les chemins, les cercles, les rectangles, les dégradés et le texte, chacun avec des coordonnées et des couleurs Rien dedans ne dit combien de pixels l'image possède Lorsqu'un navigateur l'affiche, le moteur de rendu détermine quels pixels chaque forme couvre à la taille à l'écran, c'est pourquoi le même fichier est net sur un téléphone et sur un moniteur 5 K.
Un fichier PNG, spécifié par le W3C comme Graphiques de réseau portables et publié sous la référence ISO/IEC 15948, est une grille de pixels colorés compressés avec DEFLATE La compression est sans perte, donc les pixels que vous décodez sont exactement les pixels qui ont été enregistrés Un PNG peut transporter un canal alpha complet et jusqu'à 16 bits par canal Ce qu'il ne peut pas faire est d'ajouter des détails : un PNG 512 x 512 affiché à 2048 x 2048 a chaque pixel étiré sur un bloc 4 x 4, et les bords deviennent doux ou en blocs.
Voici le même badge simple que la source SVG :
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
Ces quatre lignes de balisage représentent l'image entière et restent quatre lignes, que vous l'affichiez à 240 pixels de large ou 24 000. La version PNG du même badge à 240 x 80 contient 19 200 pixels et à 960 x 320, elle en contient 307 200.
SVG vs PNG : quel format dois-je utiliser ?
Utilisez SVG pour tout ce qui est fait de formes qui doivent évoluer, et PNG pour tout ce qui est fait de pixels ou dirigé quelque part qui n'accepte que les images raster Ce tableau les définit côte à côte :
| Propriété | SVG | png |
|---|---|---|
| Modèle d'image | Vecteur : chemins, formes, texte | Raster : grille de pixels fixe |
| étalonnage | W3C SVG2 | W3C PNG, ISO/CEI 15948 |
| escalade | Sharp à n'importe quelle taille | Flou ou bloc lorsqu'il est agrandi |
| Compression | Texte ; gzip sur le serveur | Dévasement SANS PERTE |
| transparence | oui | Oui, alpha complet |
| Taille du fichier pour un logo | Généralement quelques Ko | Pousse avec des dimensions de pixels |
| Taille du fichier pour une photo | Impraticable | Large mais raisonnable |
| Modifiable après exportation | Oui, formes et couleurs dans un éditeur vectoriel | Uniquement pixel par pixel |
| Texte à l'intérieur | Peut rester sélectionnable et consultable | Cuit en pixels |
| Peut contenir des scripts | Oui, ce qui est un problème de sécurité | non |
| Accepté par les téléchargements sociaux, les applications bureautiques, les e-mails | Souvent pas | Presque toujours |
| le mieux pour | Logos, icônes, diagrammes, graphiques, illustrations UI | Captures d'écran, art détaillé, actifs de taille fixe |
Une règle pratique : gardez le SVG comme maître pour tout vecteur, et exportez-en les PNG aux tailles dont chaque destination a besoin Ne gardez jamais uniquement le PNG d'un logo, car transformer les pixels en formes est avec perte d'une manière qui transforme les formes en pixels ne l'est pas.
Pour les photographies, aucun des deux formats n'est le bon choix pour la livraison Une photo en PNG est grande, et une photo en SVG est soit un PNG enveloppé dans XML, soit une approximation tracée JPEG, WebP ou AVIF sont construits pour ce travail ; qu'est-ce que WebP et quand l'utiliser couvre le côté photo.
Pourquoi tant d'endroits refusent-ils les téléchargements SVG ?
Parce qu'un SVG est un document qui peut contenir du contenu actif, pas seulement une image La spécification SVG permet <script> éléments, attributs du gestionnaire d'événements tels que onload, des liens vers des ressources externes et du HTML intégré via <foreignObject>. Un site qui accepte un téléchargement SVG et le dessert plus tard à partir de son propre domaine pourrait finir par exécuter quelqu'un d'autre et le JavaScript n°39 ; s pour chaque visiteur qui ouvre directement le fichier.
Désinfecter SVG en toute sécurité est possible mais de manière délicate, de sorte que de nombreuses plateformes empruntent la voie la plus simple : les photos de profil, les listes de marchés, les réseaux publicitaires, de nombreuses bibliothèques multimédias CMS et la plupart des clients de messagerie acceptent uniquement les formats raster. Les documents Office et les applications de chat bénéficient également d'une prise en charge plus inégale.
C'est la raison la plus courante pour convertir SVG en PNG. Un navigateur dessinant un SVG comme image est le cas sûr, puisqu'un SVG est chargé via un <img> element ou sur un canevas n'est pas autorisé à exécuter des scripts ou à récupérer des fichiers extérieurs. Les convertisseurs Toolz restituent les SVG exactement de cette façon, ce qui permet de convertir en toute sécurité un fichier à partir d'une source inconnue.
Comment convertir SVG en PNG sans perdre en qualité ?
Rendre le SVG à la taille de pixel dont vous avez besoin, ou plus grand, et ne jamais mettre à l'échelle le PNG par la suite Parce que le SVG est la géométrie, le dessiner à 4 x est aussi exact que le dessiner à 1 x ; toute perte de qualité dans cette direction vient du choix d'une sortie trop petite.
le Convertisseur SVG en PNG détermine la taille dans cet ordre :
- Si le SVG sets racine
widthetheight4, ceux-ci sont utilisés, avec des unités telles quemm,pt,inetcmconverti en pixels CSS. - Si elle n'a qu'un
viewBox: la largeur et la hauteur de la boîte de vue sont utilisées. - S'il n'en a pas, il est tiré au sort à 1024 x 1024.
- Si le côté le plus long est encore inférieur à 512 pixels, le dessin est agrandi proportionnellement jusqu'à ce que ce côté soit 512, car une icône de 24 x 24 dessinée à sa taille déclarée est trop petite pour être utilisée.
- L'option d'échelle SVG multiplie alors le résultat par 1, 2 ou 4.
Prenez le badge ci-dessus, qui déclare width="240" height="80". Le côté le plus long est sous 512, donc il est agrandi à 512 x 171. à 2 x le PNG sort à 1024x342, avec les coins non peints laissés transparents La note sous le résultat indique la taille et d'où il vient, donc il n'y a pas de devinettes.
Choisissez 2 x pour les écrans, où la plupart des téléphones et ordinateurs portables utilisent deux pixels d'appareil ou plus par pixel CSS, et 4 x pour les écrans imprimés ou de grande taille Le plafond de sortie est de 100 mégapixels ou 16 384 pixels de côté, et les fichiers SVG de plus de 50 Mo sont refusés ; une échelle plus petite corrige le premier cas.
Deux types de contenu ne survivent pas au rendu Les images et les polices Web liées par URL sont laissées de côté, car un SVG dessiné comme image ne peut rien récupérer en dehors du fichier, donc le texte retombe dans une police système ; convertir le texte en contours dans votre éditeur vectoriel avant l'exportation évite cela Et un SVG animé devient une seule image fixe.
Dois-je convertir SVG en PNG, JPG ou PDF ?
Convertissez en PNG par défaut, en JPG uniquement lorsque la destination rejette PNG ou a besoin d'un fichier plus petit pour un graphique de type photo, et en PDF lorsque vous avez besoin d'un document à imprimer ou à envoyer par e-mail.
| cible | transparence | Taille | Ce que vous perdez | utiliser pour |
|---|---|---|---|---|
| png | entretenu | Moyen | Évolutivité | Téléchargements, diapositives, ressources d'applications, tout ce qui a un arrière-plan transparent |
| JPG | Rempli de blanc | Le plus petit pour l'art complexe | Évolutivité, transparence, netteté des bords | Formulaires qui ne prennent que JPG, pièces jointes de courriel |
| PDF (rastérisé) | Les zones transparentes montrent la page blanche | Plus grand | Évolutivité, texte sélectionnable, liens cliquables | Feuilles d'épreuves, impression d'un graphique, envoi d'œuvres d'art à des non-concepteurs |
le Convertisseur SVG en JPG remplit les zones transparentes avec du blanc, car JPEG n'a pas de canal alpha et applique le curseur Qualité. Les bords nets sur la couleur plate sont exactement l'endroit où la compression JPEG laisse une légère sonnerie, donc un logo semble généralement meilleur comme PNG.
le Convertisseur SVG en PDF mérite un avertissement clair Il rasterise : chaque SVG est attiré vers les pixels, stocké en PNG, et placé sur une page Le PDF ne contient aucune forme vectorielle, le texte ne peut pas être sélectionné, et zoomer suffisamment loin montre les pixels L'option d'échelle aide toujours, puisque la taille de la page reste fixe tandis que 2 x et 4 x y emballent plus de pixels (72, 144 ou 288 pixels par pouce avec Fit to image).Si une imprimerie demande un PDF vectoriel, par ISO 32000 un PDF peut transporter de vrais chemins vectoriels, mais vous avez besoin d'un éditeur vectoriel' ; s exporter pour cela, pas un convertisseur d'image.
Que fait la conversion de PNG en SVG ?
La conversion de PNG en SVG trace l'image : elle regroupe les pixels en zones de couleur similaire et s'ajuste aux contours autour de chaque zone, produisant des chemins vectoriels remplis Elle ne trouve pas le fichier vectoriel original, car un PNG ne contient aucun enregistrement des formes qui l'ont fait Chaque bord de la sortie est une estimation tirée des pixels.
Le traceur derrière PNG à SVG et JPG à SVG sur Toolz se trouve imagetracerjs, s'exécutant dans un Web Worker en arrière-plan afin que la page reste réactive. Cela fonctionne en deux étapes :
- Réduction de couleur. L'image est réduite à une petite palette, le nombre que vous choisissez sous Couleurs : 2, 8 ou 16.
- Fermeture de bord. Pour chaque couche de couleur, le traceur parcourt la limite de chaque zone connectée et y ajuste des lignes droites et des courbes, produisant un chemin rempli par zone.
Chaque chemin obtient également un contour de 1 pixel dans sa propre couleur Sans lui, les formes voisines laissent des espaces de racine des cheveux là où leurs bords ne se rencontrent pas tout à fait, et l'arrière-plan apparaît sous forme de fines coutures blanches.
Detail contrôle à quel point ces contours suivent les pixels :
| Détail | Tolérance de ligne et de courbe | Les taches sont tombées ci-dessous | Pré-blouissement | Résultat |
|---|---|---|---|---|
| Faible | 2 px | 16points | Léger | Des fichiers plus fluides, plus simples et plus petits |
| Moyen (par défaut) | 1 pièce | 8 points | nul | Équilibré |
| Élevé | 0,5 px | 2 points | nul | Suit les pixels de près, garde des formes minuscules, plus lourdes |
Le SVG tracé s'écrit avec son width et height définir sur la taille d'image d'origine et a viewBox en pixels tracés, il s'ouvre donc à la taille à laquelle vous vous attendez et évolue proprement partout où vous le placez.
Que peut bien faire le traçage, et où échoue-t-il ?
Le traçage se porte bien sur les images qui étaient vectorielles au départ : couleur plate, bords durs, peu de couleurs Il échoue sur tout ce qui a des tons continus, parce qu'une photo n'a pas d'arêtes à trouver, seulement des dégradés.
| Source | Comment ça trace | Paramètres suggérés |
|---|---|---|
| Logo plat, 2 à 6 couleurs | Formes propres, petit dossier | 8 couleurs, moyen |
| Art au trait noir et blanc, signatures, timbres | Très propre | 2 couleurs, Moyenne ou Haute |
| Icônes avec un dégradé | Le gradient se transforme en bandes | 16 couleurs, Medium, puis simplifier dans un éditeur |
| Dessin numérisé sur papier | La texture du papier devient des points | 2 couleurs, Faible |
| Logo JPG avec artefacts de compression | Speckles le long des bords, fond tracé comme une forme | Faible détail ; supprimer la forme du fond après |
| Capture d'écran avec texte | Les lettres deviennent des contours blobby | Gardez-le en PNG |
| Photographie | Formes postérisées tachées, énorme lime | Ne pas tracer |
La rangée de photographies n'est pas une question de goût En testant le moteur Toolz, une photo bruyante de 2000 px tracée à 16 couleurs a pris 28 secondes et a produit un SVG de 46 Mo, plusieurs fois plus lourd que l'image d'où il provient et toujours visiblement pire Le bruit donne au traceur des milliers de régions minuscules, et chacune devient son propre chemin avec ses propres coordonnées.
Ce test est la raison pour laquelle le convertisseur met à l'échelle toute image de plus de 1200 pixels sur un côté jusqu'à 1200 avant le traçage Le traçage se termine alors en secondes plutôt qu'en minutes, et comme la sortie conserve la largeur et la hauteur d'origine, rien sur la façon dont le SVG est placé ne change Une trace toujours en cours après deux minutes est arrêtée avec un message suggérant moins de couleurs ou un détail inférieur, plutôt que de laisser l'onglet occupé indéfiniment.
Les sources JPG ajoutent deux problèmes spécifiques La compression JPEG laisse des blocs faibles autour des arêtes vives, que le traceur peut transformer en formes parasites ; Le détail bas s'estompe légèrement et laisse tomber des points pour le contrer Et JPG n'a pas de transparence, donc la boîte blanche autour d'un logo devient une forme remplie de plus derrière l'illustration Dans un éditeur vectoriel, sélectionnez cette forme et supprimez-la.
Comment puis-je obtenir un SVG propre à partir d'un logo PNG ?
Commencez par les paramètres les plus simples qui préservent le design, regardez l'aperçu et n'ajoutez des couleurs ou des détails que lorsque quelque chose manque. Les paramètres plus lourds corrigent rarement une mauvaise trace ; ils y ajoutent plus de chemins.
Une séquence fiable :
- Utilisez la source la plus grande et la plus propre dont vous disposez Un export PNG bat une capture d'écran, et une capture d'écran bat une photo d'un imprimé.
- Comptez les couleurs dans le logo et choisissez l'option la plus proche à ou au-dessus. Une marque bicolore en veut 2, une marque cinq couleurs en veut 8.
- Trace à Medium Vérifiez l'aperçu et la taille du fichier affiché sous le résultat.
- S'il y a des taches ou des aspérités, retracez à Low. Si les détails fins disparaissaient, retracez à High.
- Ouvrez le résultat dans un éditeur vectoriel pour la dernière étape : supprimez la forme d'arrière-plan s'il y en a une, fusionnez les formes qui devraient en être une et remplacez tout texte tracé par du texte réel dans la bonne police.
Lorsque la taille du fichier affiché après le traçage est plus grande que celle du PNG, traitez-le comme un signal. Pour un logo, cela signifie généralement que le bruit est tracé ; pour toute autre chose, cela signifie généralement que l'image doit rester raster.
Si la trace est dirigée vers une machine de découpe, un graveur laser ou un logiciel de broderie, 2 couleurs est souvent la bonne réponse même pour un design coloré, puisque ces machines fonctionnent à partir de contours plutôt que de remplissages.
Puis-je convertir entre ces formats en un seul endroit ?
Oui. Le général Convertisseur d'images accepte SVG avec JPG, JFIF, PNG, WebP, AVIF, GIF, BMP, ICO, HEIC, TIFF, PSD, CR2, DNG et PDF, et écrit JPG, PNG, WebP, GIF, ICO, PDF ou SVG. Choisir SVG comme cible retrace toute source raster avec les mêmes paramètres de couleurs et de détails ; choisir une cible raster pour une source SVG affiche l'option d'échelle SVG.
Les pages de paires dédiées n'acceptent que leur propre format source, ce qui maintient les options à l'écran pertinentes : les pages SVG affichent l'échelle, les pages de trace affichent les couleurs et les détails.
Une combinaison n'est pas proposée : PDF vers SVG. Le convertisseur le refuse avec un message, et l'itinéraire qu'il suggère est en deux étapes : convertir d'abord la page PDF en PNG, puis tracer le PNG. Si le PDF provient d'un programme vectoriel, exporter SVG à partir de ce programme conserve les chemins réels et est la meilleure option.
Un SVG peut également devenir un favicon Le rendre à ICO produit des images PNG carrées à chaque taille d'icône, et le minimum de 512 px signifie qu'une petite icône SVG donne toujours une entrée propre de 256 px. Tailles de favicon et ce qui entre dans un fichier ICO couvre les tailles à inclure.
Les conversions SVG et PNG sont-elles privées ?
Oui. Le rendu, l'encodage et le traçage se produisent tous côté client, à l'intérieur de l'onglet du navigateur, donc aucun fichier n'est téléchargé L'étape de décodage SVG et le traceur sont téléchargés uniquement lorsqu'un fichier en a besoin, ce qui maintient la page lumineuse lorsque vous ne faites que la conversion entre les formats raster.
Les limites, en un seul endroit : fichiers SVG jusqu'à 50 Mo, sortie rendue jusqu'à 100 mégapixels et 16 384 pixels de côté, sources raster jusqu'à 100 mégapixels, traçant jusqu'à 1200 px du côté le plus long, et un plafond de deux minutes par trace Les outils sont gratuits, sans inscription, avec une limite quotidienne sur les conversions.
