Placer une formule LaTex dans un SVG

Un exemple d'insertion d'un SVG dans un SVG

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

aaa

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

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

Le but est d'obtenir le SVG suivant :

aaa

Il s'agit donc d'insérer le SVG formule.svg dans le SVG fond.svg à la position et à la grandeur souhaitées.

Voici comment procéder

  1. En affichant l'image fond.svg agrandie, mesurer sur l'écran, avec une règle graduée en cm, la position souhaitée pour le milieu de la formule formule.svg. Dans l'exemple
    • en mesurant horizontalement, de gauche à droite
      \( \begin{aligned} pos_x &= \frac{\text{distance de la formule au bord gauche de l'image de fond}}{\text{largeur totale de l'image de fond}} \\ &= \frac{11 \ cm}{22 \ cm} = 0.5 \end{aligned} \)
    • en mesurant verticalement, de haut en bas
      \( \begin{aligned} pos_y &= \frac{\text{distance de la formule au bord supérieur de l'image}}{\text{hauteur totale de l'image}} \\ &= \frac{12.2 \ cm}{18.3 \ cm} = 0.6667 \end{aligned} \)
    • en mesurant horizontalement la grandeur souhaitée de la formule
      \( \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="87.552px" height="41.016px"
    \( \quad w_2 = 87.552 \) et \( h_2 = 41.016 \)
    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 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 \\ &= 0.6667 \times 317 = 211.33 \end{aligned} \)
    • le facteur d'agrandissement :
      \( \begin{aligned} \quad scale &= \frac{i_w}{w_2} \\ &= \frac{69.084}{87.552} = 0.789 \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, 211.33) scale(0.789)">
    \( \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 :

Contact   |   Accueil   >   SVG