Image en SVG

À propos de la conversion d'une image en SVG

Un PNG est une grille de pixels. Agrandissez-le et vous obtenez des pixels plus gros. Un SVG est un ensemble de formes décrites par des mathématiques : il reste net à n'importe quelle taille — sur une carte de visite, sur un panneau publicitaire, sur un écran qui n'existe pas encore.

Le problème, c'est qu'on a rarement le SVG. On a un logo que quelqu'un a envoyé par courriel en PNG de 400 px, et il doit maintenant partir sur une enseigne.

Cet outil redessine l'image en formes. Il repère les frontières entre les couleurs et trace de vrais chemins vectoriels le long de celles-ci : vous obtenez un SVG en bonne et due forme, que vous pouvez agrandir, recolorer et ouvrir dans n'importe quel logiciel de dessin.

Ce que la vectorisation sait faire — et ne sait pas faire

Vectoriser, ce n'est pas récupérer le fichier d'origine. C'est dessiner autour de ce qu'on voit, et le résultat dépend entièrement de ce que vous donnez à l'outil.

Cela marche bien sur :

• Les logos et logotypes en couleurs plates
• Les icônes, symboles et pictogrammes
• Les dessins au trait, croquis et encrages
• Les schémas, cartes et plans
• Les pochoirs, silhouettes et tampons

Cela ne marche pas sur les photographies. Une photo n'a pas de frontières nettes entre les couleurs : elle en a des millions de progressives. La vectorisation en fait des milliers de petites taches colorées : techniquement un SVG, généralement *plus lourd* que la photo d'origine, et bon à rien. L'outil repère une photo probable et vous le dit, plutôt que de vous remettre un fichier de 12 Mo qui ressemble à de la peinture renversée.

Les réglages

Commencez par dire ce qu'est l'image — Logo ou icône, Dessin au trait ou Illustration détaillée. Cela place simplement les trois curseurs à un point de départ raisonnable, que vous pouvez ensuite ajuster.

• Le nombre de couleurs est le réglage le plus important. La vectorisation réduit l'image à une petite palette et dessine autour de chaque zone. Un logo bicolore vectorisé avec 8 couleurs récupère la frange d'anticrénelage sous forme de formes en plus ; avec 2, il ressort propre. Moins de couleurs vaut presque toujours mieux que plus.
• Le lissage redresse les tremblements que l'anticrénelage laisse le long d'un contour. Augmentez-le si les contours paraissent hachés ; baissez-le si de vrais détails sont arrondis.
• Le détail décide à partir de quelle taille une forme est abandonnée. Baissez-le pour jeter les points parasites et le bruit ; augmentez-le pour conserver les traits fins d'un dessin complexe.

Vectorisez, regardez le résultat à droite, ajustez, recommencez. Cela prend quelques secondes.

Laisser le fond de côté

Laisser le fond de côté abandonne la grande forme unie derrière le dessin : le SVG a alors un fond transparent plutôt qu'un rectangle blanc.

Utilisez-le pour un logo destiné à la page de quelqu'un d'autre ou à un en-tête coloré. Laissez l'option décochée si le fond fait réellement partie du dessin.

Vérifiez les contours avant de vous en servir

Zoomez dans le panneau vectorisé à droite. Les angles qui doivent être vifs, les courbes qui doivent être douces et les petits textes sont les endroits où la vectorisation montre ses limites.

Si le résultat est presque juste mais brouillon, essayez d'abord moins de couleurs. Si l'original est une très petite image, la vectorisation ne peut que deviner un détail qui n'a jamais existé — une favicône de 64 px ne deviendra pas un logo net.

Rien n'est envoyé

L'image est lue et vectorisée dans votre navigateur. Elle n'atteint jamais un serveur, ce qui compte lorsque le fichier est un logo non publié, la marque d'un client ou un dessin sous accord de confidentialité.

Cela veut dire aussi : aucune limite de taille et aucune attente. Les très grandes images sont réduites avant la vectorisation, car passé un certain point les pixels supplémentaires n'ajoutent que du bruit, pas du détail.

À quoi cela sert

• Un logo qui n'existe qu'en PNG et doit partir en signalétique ou en impression
• Une icône à recolorer ou à redimensionner dans du code
• Un croquis ou dessin au trait préparé pour la découpe, la gravure ou la broderie
• Un pochoir ou une silhouette pour une découpeuse vinyle ou un laser
• Transformer un schéma en quelque chose de modifiable
• Obtenir un SVG pour un site web, où il reste net sur tous les écrans

Bon à savoir

• Le SVG possède une vraie viewBox, il se met donc correctement à l'échelle quand vous fixez une largeur en CSS ou en HTML
• Copier le code SVG met le balisage dans le presse-papiers, prêt à coller dans une page ou un composant
• Le résultat s'ouvre dans Illustrator, Inkscape, Figma et Affinity, où les chemins se modifient à la main
• Des milliers de formes signifient que les réglages ne conviennent pas à cette image, pas que l'outil a échoué — réduisez les couleurs
• Pour l'autre sens, utilisez SVG en PNG ou SVG en JPG
• Pour détourer une photo à la place, utilisez Supprimer l'arrière-plan

Comment l'utiliser

• Cliquez sur Cliquez pour envoyer, ou déposez votre logo ou dessin sur la zone
• Choisissez ce que c'est : Logo ou icône, Dessin au trait ou Illustration détaillée
• Appuyez sur Vectoriser et regardez le résultat à droite
• Si les contours sont brouillons, ajustez d'abord le nombre de couleurs, puis recommencez
• Cochez Laisser le fond de côté s'il vous faut de la transparence
• Appuyez sur Télécharger le SVG, ou sur Copier le code SVG pour le coller directement dans une page

Outils liés

• SVG en PNG — l'autre sens
• SVG en JPG — un SVG en image plate
• Supprimer l'arrière-plan — détourer un sujet sur une photo
• Agrandir une image — agrandir un bitmap sans le vectoriser
• Générateur de favicône — faire du résultat une icône de site
• Compresser une image — quand un bitmap était finalement la bonne réponse