Tutoriel — vecteur ou raster
Comment télécharger une image SVG — ou la convertir
La moitié des gens qui cherchent ça veulent le vecteur. L'autre moitié veut en réalité un PNG et ne le sait pas. Les deux sont à un clic l'un de l'autre.
À regarder — 19 secondes
Vecteur en sortie, ou raster en sortie
.svg, une fois en .png. Notez le suffixe du nom de fichier qui change avec le format.Regardez le suffixe du champ de nom passer de .svg à .png, et le sélecteur de taille apparaître à côté du segment — le popup ne propose une taille que lorsqu'une taille a du sens.
Ce que montre l'enregistrement
- L'image est un SVG, elle n'a donc pas de taille fixe
- Choisissez l'image voulue
- Prenez le vecteur si vous allez l'éditer
- Ou basculez en PNG s'il vous faut un raster
- Rendu sur votre machine en 1×, 2× ou 4×
- La même icône, désormais un PNG au pixel près
Choisissez délibérément
De quoi avez-vous vraiment besoin ?
C'est une décision à prendre exprès, car la conversion ne va que dans un sens. Un vecteur pourra toujours devenir un raster plus tard ; un raster ne redeviendra jamais un vecteur.
Gardez le SVG quand la destination est un site ou une app, un outil de design où vous éditerez les formes, une impression de quelque type que ce soit, ou tout endroit où la taille n'est pas encore décidée. Il reste net à toutes les tailles, le fichier est en général plus petit qu'un PNG équivalent, et vous pouvez le restyler en CSS.
Convertissez en PNG quand la destination n'accepte pas le SVG — et beaucoup ne l'acceptent pas. La plupart des clients de messagerie, bien des uploaders de CMS anciens, certaines plateformes de chat et sociales, et quantité de modèles de présentation soit rejettent le SVG soit l'affichent de façon peu fiable. PowerPoint et Keynote sont notoirement inconstants avec lui. Si vous collez dans un document qui doit être identique sur la machine de quelqu'un d'autre, le PNG est la réponse sûre.
Convertissez en JPG rarement, et seulement pour une illustration de style photographique. Le JPG n'a pas de transparence : une icône ressort sur un fond plein, et sa compression laisse des artefacts visibles autour des bords durs dont les icônes sont faites. Pour tout ce qui est aplat et arêtes nettes, le PNG est à la fois plus petit et plus propre.
Télécharger dans les deux cas
Les deux premières étapes sont communes ; c'est au segment de format que les voies divergent.
- Ouvrez le popup et trouvez l'image. Cliquez sur le bouton de la barre d'outils et feuilletez jusqu'au graphique voulu. Cela marche que l'image soit une source
<img>, du balisage en ligne ou un fond CSS. - Pour le vecteur, téléchargez simplement. Laissez le format sur SVG, tapez un nom de fichier et appuyez sur Télécharger le courant. Vous obtenez le balisage d'origine, espace de noms réparé.
- Pour un raster, changez d'abord le format. Appuyez sur PNG ou JPG dans le segment. Un sélecteur de taille apparaît à côté, et le suffixe du champ de nom change en conséquence.
- Choisissez une taille, puis téléchargez. 1×, 2× ou 4× la taille intrinsèque du vecteur. La conversion tourne sur votre machine, sur un canvas, et le résultat se télécharge comme le reste.
De quoi le multiplicateur de taille est-il le multiple
Il met à l'échelle la taille intrinsèque du vecteur — ses width et height s'il les déclare, sinon l'étendue de son viewBox. Une icône 24×24 en 4× donne donc un PNG 96×96. Si le vecteur ne déclare aucune taille, ce qui est courant pour les symboles de sprite, on retombe sur un carré raisonnable plutôt que sur le 300×150 par défaut d'un canvas nu.
En pratique : 2× est le bon défaut pour tout ce qui apparaît à l'écran, car il couvre les écrans retina. 4× sert à l'impression ou à un graphique affiché en grand. 1× sert quand vous devez coller à une taille en pixels exacte et savez ce que vous faites.
Transparence
Le PNG garde le fond transparent ; le JPG ne le peut pas et le remplira. Si vous convertissez une icône en JPG et obtenez un rectangle blanc ou noir inattendu derrière, ce n'est pas un bug — le format n'a aucun moyen d'exprimer la transparence. Prenez le PNG.
La conversion se fait ici, pas ailleurs
Cela mérite d'être dit clairement, car « convertisseur SVG en PNG » est sinon une catégorie de site qui exige d'envoyer votre fichier. Ici le vecteur est dessiné sur un canvas à l'intérieur du popup et relu comme image. C'est le même balisage nettoyé qu'un téléchargement produirait, rendu via un élément image en bac à sable pour que rien ne s'y exécute. Rien n'est envoyé, et la conversion marche réseau déconnecté.
Quand la conversion échoue
Un cas la casse à coup sûr : un SVG qui embarque en son sein une image raster d'une autre origine. La dessiner sur un canvas « souille » celui-ci, et le navigateur refuse alors de laisser relire les pixels — une règle de sécurité, pas une limite de l'extension. Vous recevrez un message explicite. Le vecteur lui-même se télécharge toujours ; seule la conversion raster ne peut pas aboutir.
- Gardez le SVG pour
- Le web, les apps, les outils de design, l'impression — partout où la taille finale n'est pas fixée.
- Convertissez pour
- L'e-mail, les présentations, les vieux uploaders de CMS et partout où le SVG est refusé.
- Tailles
- 1×, 2× ou 4× la taille intrinsèque du vecteur. 2× convient à la plupart des écrans.
- Où
- Sur votre machine, sur un canvas. Rien n'est envoyé pour convertir.
Bon à savoir
Questions fréquentes
Dois-je télécharger le SVG ou le convertir en PNG ?
Gardez le SVG pour le web, les apps, les outils de design et l'impression, où il reste net à toute taille. Convertissez en PNG quand la destination n'accepte pas le SVG — la plupart des clients de messagerie, beaucoup d'uploaders de CMS et l'essentiel des logiciels de présentation.
Que signifie le réglage de taille 2× ?
Il multiplie la taille intrinsèque du vecteur — ses width et height déclarés, ou l'étendue de son viewBox. Une icône 24×24 en 4× produit un PNG 96×96. 2× est le défaut raisonnable pour les écrans retina.
Pourquoi mon JPG a-t-il un rectangle blanc derrière l'icône ?
Le JPG n'a pas de transparence : le fond transparent est donc rempli. Prenez le PNG pour tout ce qui a un fond transparent — c'est-à-dire presque toutes les icônes.
Mon fichier est-il envoyé pour être converti ?
Non. Le vecteur est dessiné sur un canvas dans le popup et relu comme image, entièrement sur votre machine. Cela marche réseau déconnecté.
La conversion a échoué avec une erreur cross-origin.
Ce SVG embarque une image raster d'un autre domaine. La dessiner souille le canvas et le navigateur refuse de laisser relire les pixels — une règle de sécurité qu'aucune extension ne contourne. Le vecteur lui-même se télécharge normalement.
Puis-je reconvertir un PNG en SVG ?
Non. Les données de courbe n'existent pas dans un raster. Le vectorisation produit une approximation, pas les formes d'origine.
Vecteur ou raster, à un clic l'un de l'autre
Converti sur votre machine, à la taille dont vous avez réellement besoin.