Conversion d'une image PNG ou JPG en graphique vectoriel adaptable SVG

avec réduction du nombre de couleurs

L'image SVG est formée de plages de pixels de même couleur. La palette de couleurs est constituée des couleurs les plus fréquentes de l'image.

Un exemple d'utilisation (parmi beaucoup d'autres) : un logo.

L'intérêt de ce site est de proposer des réglages.

Le code SVG peut être introduit dans une page HTML pour y incruster une image qui a l'avantage de rester nette à toutes les échelles de zoom.

Le code SVG produit par le calculateur en ligne ci-dessous n'étant pas compressé, il est aisé de le modifier. Par exemple, on peut extraire une couleur.

Les traitements de textes admettent les images SVG comme les JPG et les PNG.

Calculateur en ligne

La hauteur est calculée de manière à conserver le ratio d'aspect.

Pour les grandes dimensions, le calcul peut durer plusieurs minutes.

(sans compter le blanc)

La distance entre deux couleurs de la palette est supérieure à ce seuil compris entre 0 et 255.

  • Si l'image reçue est blanchâtre ou contient des zones blanches, augmenter cette valeur.
  • En diminuant cette valeur, le nombre de couleurs effectivement utilisées peut augmenter.

(sans effet sur la durée du calcul)

La hauteur est calculée de manière à conserver le ratio d'aspect.

Pour régler les valeurs à donner, effectuer plusieurs essais.

Méthode plus générale

L'application en ligne est commode, mais elle ne s'applique qu'à des situations simples. Pour des figures plus complexes ou plus lourdes, voici une méthode plus générale.

1. Adapter l'image JPG ou PNG

Redimensionner l’image, par exemple en plafonnant la largeur à 400 pixels. La hauteur doit alors être calculée en respectant le ratio.

Pour d’autres modifications, par exemple pour réduire la palette des couleurs, utiliser un logiciel de traitement d’images comme GIMP (gratuit).

2. Convertir en SVG

Utiliser le logiciel INKSPACE (gratuit).

Fichier > Importer (incorporer, résolution déduite, rendu lisse) – l’image est sélectionnée.

Édition > Ajuster la taille de la page à la sélection

Fichier > Enregistrer sous > type : SVG optimisé > *.svg

3. Adapter le SVG

Avec un éditeur de programmes comme NOTEPAD++ (gratuit), donner à l'image les dimensions voulues (exemple):

<svg width="160px" height="148.77px"
   où la hauteur est calculée pour conserver le ratio.

Il est possible d'apporter d'autres modifications. Par exemple, pour ajouter un texte sur l'image, insérer les trois instructions suivantes entre les balises finales </g> et </svg> :

  • <g font-size="20" font-weight="bold" font-style="italic" text-anchor="middle">
       où la taille de la police est déterminée par tâtonnements
  • <text style="stroke:none;fill:blue" x="200" y="349" dy="10">Ici se trouve le texte à insérer</text>
    • où x est égal à la demi-largeur indiquée dans viewBox
    • y est égal (par exemple pour écrire au bas de l'image) à 0.94 fois la hauteur indiquée dans viewBox
    • et dy est une valeur empirique pour abaisser un peu le texte.
  • </g>

Enregistrer au format *.svg

Plus généralement, on peut poser un graphique SVG sur une image initialement JPG ou PNG :

voir Insertion d'un SVG dans un autre

4. Insérer le SVG dans le HTML ou le DOCX

Par exemple, pour les documents HTML, il faut contrôler l'affichage par le navigateur de l'ordinateur et par le navigateur du smartphone.

Contact   |   Accueil   >   Valoriser les images   >   Transformer les images par internet   >   Transformer en SVG