Insertion d'un SVG dans un autre

par exemple placer une formule LaTex dans un SVG
et application en ligne

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.

Méthode manuelle

Afin d'expliquer une méthode, on montre comment le faire à la main. Plus tard, on proposera d'utiliser une application en ligne.

  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
      \( \begin{aligned} pos_x &= \frac{\text{distance du centre 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 du centre 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 hauteur souhaitée, en px, pour formule.svg :
      \( \begin{aligned} \quad i_h &= i_w \frac{h_2}{w_2} \\ &= 69.084 \frac{41.016}{87.552} = 32.364 \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.364}{2} = 195.162 \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}{87.552} = 0.78906 \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.162) scale(0.78906)">
    \( \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 :

Application en ligne

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

Fichier SVG du fond

Fichier SVG de l'insert

Position du centre de l'insert

  • \( pos_x = \frac{ \text{distance entre le centre de l'insert et le bord gauche du fond}}{\text{largeur du fond}} = \)
    (rapport entre 0 et 1)
  • \( pos_y = \frac{ \text{distance entre le centre de l'insert et le haut du fond}}{\text{hauteur du fond}} = \)
    (rapport entre 0 et 1)

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.

Contact   |   Accueil   >   SVG