Poser un SVG transparent sur une image JPG ou PNG

Comment procéder pour dessiner sur une photo des textes, des cercles, des flèches, des phylactères (bulles de BD), des figures géométriques, etc? Voici une méthode qui dispose d'une large palette de possibilités.

Premier exemple: Solvay

Sur une photo, entourer d'un cercle rouge les têtes de deux personnes et écrire leurs noms respectifs.

1. Nous partons d'une image, nommée "Solvay-1927.png", de dimensions 800x579, qui va servir de fond.
2. Au moyen de l'application en ligne Poser un quadrillage sur une image, en choisissant 20 cases sur la largeur, nous obtenons l'image quadrillée "Solvay-1927_20x14.png".
3. Sur l'image quadrillée, avec l'origine placée en bas à gauche, on prend les coordonnées de points de repère :
   • le titre en (10, 11)
   • pour Einstein, le centre de la tête en (10.9, 6.3) et le texte en (11,5)
   • pour Bohr, le centre de la tête en (17.7, 6.7) et le texte en (18.5, 7.6)
   • rayon des deux cercles: 0.7
4. Avec l'application en ligne pour créer un SVG,
   • définir la fenêtre graphique avec x_min=0, x_max=20, y_min=0, y_max=20, largeur=800px, fond=transparent;
   • poser les textes et la flèche aux coordonnées repérées;
   • téléchager le SVG, dans notre exemple sous le nom "calque-01.svg";
   • enregistrer l'état final de l'application en ligne sous le nom "generator.html".
5. Avec GIMP
   • Fichier > Ouvrir l'image > Solvay-1927.png
   • Fichier > Ouvrir en tant que calque > calque-01.svg > largeur 800 px
   • Image > Aplatir l'image
   • Exporter sous > "Solvay-1927-com.png"

Deuxième exemple: Galilée

Sur une photo, ajouter des phylactères (bulles de BD) représentant les paroles de deux personnages.

1. Nous partons d'une image, nommée "Galilee-1920px-ori.png", de largeur 1920px, qui va servir de fond.
2. Au moyen de l'application en ligne Poser un quadrillage sur une image, en choisissant 20 cases sur la largeur, nous obtenons l'image quadrillée "Galilee-2511px_20x13.jpg".
3. Sur l'image quadrillée, avec l'origine placée en bas à gauche, on prend les coordonnées de points de repère :
   • pour Galilée, le phylactère entre les points de coordonnées (2; 8) et (8.5; 10.5)
   • Pour l'inquisiteur entre les points (11.5; 8) et (18; 10.5)
4. Avec l'application en ligne pour créer un SVG,
   • définir la fenêtre graphique avec x_min=0, x_max=20, y_min=0, y_max=20, largeur=800px, fond=transparent;
   • créer deux groupes : un par phylactère ;
   • poser les phylactères aux coordonnées repérées; les phylactères sont des polygones à 7 sommets, de couleur blanche et bordés de noir; voir les détails dans le fichier de données "phylactere.html" dont le lien est donné ci-dessous.
   • poser les textes aux ordonnées 9.75 et 8.75
   • si nécessaire, repositionner chaque phylactère ; ici, on a appliqué la translation (0; 0.5) au groupe qui contient le deuxième phylactère
   • téléchager le SVG, dans notre exemple sous le nom "phylactere.svg";
   • enregistrer l'état final de l'application en ligne sous le nom "phylactere.html". Les paramètres originaux (largeur de la fenêtre graphique = 1920 pixels; taille de la police = 50) ont été diminués afin d'adapter aux smartphones (largeur de la fenêtre graphique = 400 pixels; taille de la police = 9 ou 10).
5. Avec GIMP
   • Fichier > Ouvrir l'image > Galilee-1920px-ori.png
   • Fichier > Ouvrir en tant que calque > phylactere.svg > largeur 1920px, résolution 400 px/in
   • Image > Aplatir l'image
   • Exporter sous > "Galilee-1920px.png"