À quoi ressemble un fichier vectorisé de l’intérieur

L’outil de vectorisation groupe le résultat par objet : un <g> pour l’arrière-plan (quand l’image en a un) vient en premier, puis un <g> par objet distinct, chacun nommé dans un <title> (Background, Object 1, Object 2…). À l’intérieur de chaque groupe, chaque forme est son propre élément <path>, avec un fill et un attribut d qui contient le contour sous forme de commandes de déplacement, de ligne et de courbe cubique. Les formes sont imbriquées selon ce qui les entoure : une forme qui en contient d’autres (un visage avec ses yeux) devient son propre groupe (Part 1.1, Part 1.1.1…) dont le premier tracé est la forme elle-même, dessinée entière sous ce qu’elle contient ; masquer un œil laisse donc voir le visage, pas un trou. Les taches de quelques pixels restent des tracés sans nom à l’intérieur de leur parent. Il n’y a ni contours ni éléments de texte : le logotype d’un logo est un contour rempli, pas du texte. Avec Calques réglé sur Par couleur dans les paramètres, le fichier n’a pas de groupes, mais un <path> par couleur.

Un petit paysage rond en SVG, puis chacun de ses quatre tracés seul : un disque bleu, un ciel crème, une montagne bleu marine et un soleil orange avec son reflet

Le SVG d’exemple de notre page d’accueil (à gauche), puis chacun de ses quatre tracés isolé : chaque forme est un élément distinct avec son propre remplissage, prêt à être sélectionné, recoloré ou supprimé.

L’éditeur lit exactement cette structure, à la taille et dans les coordonnées propres au fichier. Chaque tracé est une forme sur laquelle vous pouvez cliquer pour la sélectionner. La liste des calques montre les groupes de premier niveau du fichier : un fichier dont les formes sont directement dans le SVG (un tracé Par couleur) s’ouvre comme un seul calque, et un fichier groupé par objet s’ouvre avec un calque par groupe, qui porte son nom.

Ce que l’éditeur en ligne fait bien

  • Recolorer une forme. Sélectionnez-la et choisissez un nouveau remplissage. Comme un même tracé contient toutes les zones d’une couleur au sein d’un objet, recolorer « le bleu » change d’un coup toutes les zones bleues de cet objet ; si deux d’entre elles doivent différer, il faut les séparer dans un logiciel de bureau.
  • Déplacer et redimensionner. Faites glisser pour déplacer, utilisez les poignées pour redimensionner. Agrandir un vecteur ne le rend jamais flou : créez une version pour l’en-tête de page et une autre pour un favicon à partir du même fichier.
  • Déplacer des points un par un. Sélectionnez une forme et passez à l’outil de modification des points (N) : chaque point d’ancrage de la courbe vectorisée reçoit une poignée à faire glisser, et ses poignées de courbe infléchissent les segments voisins. C’est ainsi qu’on corrige une irrégularité ou qu’on redresse un bord sans quitter le navigateur.
  • Aligner et espacer des formes. Sélectionnez plusieurs formes et alignez leurs bords ou leurs centres les uns sur les autres, ou sur le visuel (une forme seule s’aligne toujours sur le visuel) ; avec trois formes ou plus sélectionnées, Répartir les espace de façon égale.
  • Réunir, soustraire, intersecter. Sélectionnez deux formes ou plus et utilisez Combiner les formes : Réunir les fusionne en un seul contour, Soustraire découpe les formes du dessus dans celle du bas, Intersection ne garde que le chevauchement, Exclure garde ce qui ne se chevauche pas, et Diviser fait de chaque chevauchement sa propre forme. Les courbes restent des courbes, le résultat garde la couleur et le calque de la forme du bas, et une seule annulation rétablit les formes d’origine. C’est l’étape habituelle avant la découpe : fusionner des lettres qui se chevauchent en une seule pièce, ou soustraire une forme pour créer une réserve.
  • Aimanter à la grille. Activez l’aimant et choisissez une taille de grille : ce que vous déplacez, dessinez, redimensionnez ou remodelez point par point tombe alors sur la grille, affichée par-dessus le visuel tant qu’elle est active. L’éditeur mémorise ce réglage dans votre navigateur.
  • Réutiliser des formes et travailler sur plusieurs fichiers. Gardez une sélection dans Mes éléments (stockés dans votre navigateur pour votre compte, exportables dans un fichier) et ajoutez-la à n’importe quel autre dessin. Ouvrez un autre de vos fichiers débloqués dans un nouvel onglet pour copier de l’un à l’autre : chaque onglet a son propre historique d’annulation et s’enregistre comme une nouvelle version de son propre fichier.
  • Réorganiser, masquer et verrouiller. Les calques peuvent être masqués, verrouillés (les clics vont alors aux formes du dessous), renommés et montés ou descendus ; dans un calque, Ctrl+D duplique une forme et les flèches la décalent.
  • Supprimer les restes. Les tracés de petites taches et un rectangle de fond resté en place se suppriment en un clic. C’est généralement la première modification après la vectorisation d’un JPEG.
  • Exporter. Enregistrez le SVG, ou exportez un PNG à la largeur en pixels de votre choix, transparence conservée. Modifier un résultat débloqué ne coûte aucun crédit supplémentaire.

L’éditeur n’ouvre que des vecteurs qui vous appartiennent : votre propre SVG importé ou un résultat que vous avez débloqué. Les aperçus sont des images matricielles avec filigrane et ne sont pas modifiables : c’est ainsi que le vecteur payant ne circule pas sur le réseau tant qu’il n’est pas payé.

Ce qui relève d’un éditeur vectoriel de bureau

Certaines modifications demandent une chirurgie des tracés que l’éditeur en ligne ne propose pas :

  • Séparer une couleur en objets distincts (les deux formes bleues qui doivent bouger indépendamment) : « Séparer » (Break apart) dans un logiciel de bureau.
  • Décaler un contour (l’agrandir ou le rétrécir d’une distance fixe, par exemple pour la bordure de découpe d’un sticker).
  • Convertir des remplissages en traits centraux pour les traceurs à stylo ou la gravure sur une seule ligne.
  • Convertir du texte en contours. L’éditeur en ligne ajoute et conserve du texte modifiable, mais ne le transforme pas en tracés.

Inkscape (gratuit, open source) sait tout faire ; les éditeurs commerciaux aussi. Ouvrez le SVG, utilisez « Séparer », « Éroder/Dilater » (Outset) ou l’outil nœuds selon le besoin, puis enregistrez. Comme le fichier est un SVG simple avec des données de tracé standard, rien en lui n’est lié à png2svg.art.

Un ordre de travail logique

  1. Débloquez le résultat et ouvrez-le dans l’éditeur. Supprimez les formes parasites, corrigez les couleurs évidentes, lissez un bord irrégulier point par point, vérifiez l’empilement.
  2. Fusionnez ou découpez des formes avec Combiner les formes, et alignez ce qui doit l’être.
  3. Enregistrez le SVG. Passez-le dans l’optimiseur si la taille compte (suppression des métadonnées et arrondi des coordonnées ; vérifiez la comparaison avant/après indiquée).
  4. Décalez ou séparez dans un logiciel de bureau si le travail l’exige.
  5. Gardez le résultat débloqué dans vos fichiers : le retélécharger est gratuit tant qu’il est conservé, et vous pouvez le rouvrir dans l’éditeur à tout moment pendant la durée de conservation.

Les limites à garder en tête

  • L’éditeur ne peut pas ajouter de dégradé ; les remplissages sont des couleurs unies ou rien. Vous pouvez ajouter des contours (couleur et épaisseur), et les dégradés, contours et textes modifiables déjà présents dans un fichier sont conservés. Tout ce que l’éditeur ne peut pas conserver est listé avant l’enregistrement.
  • Les très gros tracés (des milliers de tracés issus d’une illustration détaillée) sont lents à manipuler dans n’importe quel navigateur ; simplifiez la vectorisation avec moins de couleurs avant de modifier.
  • Les PNG exportés sont des images matricielles à la taille choisie — exportez à la plus grande taille dont vous aurez besoin, ou continuez à utiliser le SVG.