Insertion d'un SVG dans un autre

On dispose d'un premier SVG appelé fond.svg

Pour l'anecdote, il a été produit par Créer des graphiques SVG en coordonnées mathématiques.

On aimerait y insérer la formule mathématique suivante qui se trouve dans le fichier formule.svg aussi dénommé "insert" ci-après.

Pour information, cette formule a été produite par LaTeX to SVG qui fait appel à MathJax.

Le but est d'obtenir le SVG suivant :

Application en ligne

qui automatise l'insertion d'un SVG dans un autre

Fichier SVG du fond

Fichier SVG de l'insert

Centre de l'insert

• rapport entre 0 et 1 indiquant la position horizontale du centre de l'insert
  \( \small pos_x = \frac{ \text{distance de la gauche du fond au centre de l'insert}}{\text{largeur du fond}}\)
  =
• rapport entre 0 et 1 indiquant la position verticale du centre de l'insert
  \( \small pos_y = \frac{ \text{distance du haut du fond au centre de l'insert}}{\text{hauteur du fond}}\)
  =

Largeur de l'insert

• \( i_r = \frac{ \text{largeur souhaitée de l'insert}}{\text{largeur du fond}}\)
  = (rapport entre 0 et 1)

Enregistrer le fichier reçu en retour.

Méthode utilisée par l'application en ligne

Afin d'expliquer une méthode, on montre comment le faire à la main.

1. Sur l'image fond.svg agrandie, fixer par la pensée l'endroit où vous voulez poser l'insert (c'est-à-dire la formule) et mesurer sur l'écran, avec une règle graduée en cm,
   • en mesurant horizontalement, de gauche à droite
     \( \small \begin{aligned} pos_x &= \frac{\text{distance de la gauche du fond au centre de l'insert}}{\text{largeur totale de l'image de fond}} \\ &= \frac{11 \ cm}{22 \ cm} = 0.5 \end{aligned} \)
   • en mesurant verticalement, de haut en bas
     \( \small \begin{aligned} pos_y &= \frac{\text{distance du haut du fond au centre de l'insert}}{\text{hauteur totale de l'image de fond}} \\ &= \frac{12.2 \ cm}{18.3 \ cm} = 0.6667 \end{aligned} \)
   • en mesurant horizontalement la grandeur souhaitée de la formule
     \( \small \begin{aligned} i_r &= \frac{\text{longueur souhaitée de la formule}}{\text{largeur totale de l'image de fond}} \\ &= \frac{4 \ cm}{22 \ cm} = 0.1818 \end{aligned} \)
2. Travailler sur des copies des fichiers originaux dénommées fond-a.svg et formule-a.svg
   Utiliser un éditeur de programmes comme Notepad++
   Épurer le fichier formule-a.svg : le cas échéant, supprimer le début
   \( \quad \) <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
   Vérifier que le fichier commence par <svg et se termine par </svg>
3. Noter les dimensions en px de formule-a.svg : en lisant le début du fichier
   \( \quad \)width="88.888px" height="41.832px"
   \( \quad w_2 = 88.888 \) et \( h_2 = 41.832 \)
   En faisant de même avec fond-a.svg
   \( \quad \)width="380" height="317"
   \( \quad w_1 = 380 \) et \( h_1 = 317 \)
4. Calculer
   • la largeur souhaitée, en px, pour formule.svg :
     \( \begin{aligned} \quad i_w &= i_r \times w_1 \\ &= 0.1818 \times 380 = 69.084 \end{aligned} \)
   • la hauteur souhaitée, en px, pour formule.svg :
     \( \begin{aligned} \quad i_h &= i_w \frac{h_2}{w_2} \\ &= 69.084 \frac{41.832}{88.888} = 32.512 \end{aligned} \)
   • la position souhaitée en px dans fond-a.svg :
     \( \begin{aligned} \quad p_w &= pos_x \times w_1 - \frac{i_w}{2} \\ &= 0.5 \times 380 - \frac{69.084}{2} = 155.458 \end{aligned} \)
     \( \quad \quad \) la correction \( -\frac{i_w}{2} \) est due au fait que \( pos_x \) se réfère au milieu de la formule, tandis que \( p_w \) se réfère au bord gauche de la formule ;
     \( \begin{aligned} \quad p_h &= pos_y \times h_1 -\frac{i_h}{2}\\ &= 0.6667 \times 317 -\frac{32.512}{2} = 195.088 \end{aligned} \)
     \( \quad \quad \) la correction \( -\frac{i_h}{2} \) est due au fait que \( pos_y \) se réfère au milieu de la formule, tandis que \( p_h \) se réfère au bord supérieur de la formule ;
     
   • le facteur d'agrandissement :
     \( \begin{aligned} \quad scale &= \frac{i_w}{w_2} \\ &= \frac{69.084}{88.888} = 0.77720 \end{aligned} \)
5. En éditant formule-a.svg, emballer la formule en ajoutant avant et après les deux lignes suivantes :
   \( \quad \) <g transform="translate(155.458, 195.088) scale(0.77720)">
   \( \quad \) <svg ... </svg>
   \( \quad \) </g>
   Plus généralement, la formule est
   \( \quad \text{translate} \left( p_w, p_h \right) \) et, pour la valeur de \( scale \), la formule est donnée plus haut.
6. En éditant fond-a.svg, insérer le contenu de formule-a.svg immédiatement avant le </svg> final.

Les documents mentionnés peuvent être téléchargés ici :

• fond.svg
• formule.svg
• formule-a.svg
• fond-a.svg