TeX412

C'est quoi SVG ?

Exemple de SVG

                
<?xml version='1.0'?>
<svg xmlns="http://www.w3.org/2000/svg"
        viewBox="-10 -10 20 20"
        width="200" height="200">
  <g stroke="red" stroke-width="3">
    <circle cx="0" cy="0" r="8" fill="white"/>
    <line x1="-5" y1="-5" x2="5" y2="5" />
  </g>
</svg>
                
              

Quelques commandes

Ligne

                
<line stroke="red" stroke-width=".1"
  x1="3" y1="2" x2="4" y2="1" />
                
              

                
\path[draw=red, line width=.1cm]
  (3,2) -- (4,1);
                  
              

Polygone

                
<polygon fill="yellow" stroke="blue" stroke-width="2"
  points="5,25 10,20 10,12 15,12 15,20 20,25" />
                
              

                
\path[fill=yellow, draw=blue, line width=2cm]
  plot coordinates
    {(5,25) (10,20) (10,12) (15,12) (15,20) (20,25)} -- cycle;
                  
              

Rectangle

                
<rect stroke="white" fill="magenta" fill-opacity=".7"
  x="5" y="5" rx="3" ry="3" width="20" height="10"/>
                
              

                
\path[draw=white, fill=magenta, fill opacity=.7, rounded corners=3cm]
  (5,5) rectangle +(20,10);
                  
              

Cercle et ellipse

                
<circle fill="magenta"
  cx="0" cy="0" r="10" />
<ellipse fill="none" stroke="yellow" transform="rotate(30)"
  cx="0" cy="0" rx="5" ry="15" />
                
              

                
\path[fill=magenta]
  (0,0) circle(10);
\path[draw=yellow,line width=1cm, rotate=30]
  (0,0) ellipse[x radius=5,y radius=15];
                  
              

Chemin générique

                
<path fill="none" stroke="yellow"
  d="M5,5 h5 v5 l5,5 C 25,15 25,25 15,25 z" />
                
              

                
\path[draw=yellow] (5,5) -- ++(5,0)  -- ++(0,5) --++(5,5)
    .. controls (25,15) and (25,25) .. (15,25) -- cycle;
                  
              

                  
\draw[yellow] svg {M5,5 h5 v5 l5,5 C 25,15 25,25 15,25 z};
                  
                

Texte

                
<text x="10" y="5" fill="yellow">Voilà !</text>
                
              

                
\node[yellow, above right] at (10,20) {Voilà !};
                
              

Regroupement

                
<g fill="yellow" fill-opacity=.7">
  <circle cx="10" cy="10" r="7"/>
  <rect x="10" y="10" width="40" height="15"/>
</g>
                
              

                
\begin{scope}[fill=yellow, fill opacity=.7]
  \fill (10,10) circle(7);
  \fill (10,10) rectangle +(40,15);
\end{scope}
                
              

Comment utiliser SVG ?

Avec img

                
<img src="anonymus.svg" width="100" height="100">
<img src="anonymus.svg" width="200" height="200">
<img src="anonymus.svg" width="100" height="200">
                
              

Comme fond

                
<style>
  .svgbkgd{
    background: url(cochon.svg);
    background-size: 100px 100px;
  }
</style>
<div class="svgbkgd"
    style="
      height:300px;
      width:300px;
      display:inline-block">
</div>
                
              

Directement dans le HTML5

                
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -150 300 400" width="300" height="400" >

  <g fill="none" stroke-width="3">
    <polygon points="30,30 200,100 100,200" stroke="red"/>
    <circle cx="100" cy ="100" r="100" stroke="blue"/>
  </g>

  <g fill="white">
    <circle cx="30" cy ="30" r="3" />
    <circle cx="200" cy ="100" r="3" />
    <circle cx="100" cy ="200" r="3" />

    <text x="20" y="25">A</text>
    <text x="205" y="105">B</text>
    <text x="95" y="220">C</text>
   </g>

</svg>
                
              

Le système de coordonnées de SVG

• Le SVG est dessiné sur un canvas infinie.
• Une fenêtre de référence est définie avec l'attribue
  viewBox="x y width height" de la balise svg.
• La taille par défaut de cette fenêtre est définie avec les attribue width et height de la balise svg. Pour vous éviter des mauvaises surprises il faut que ces deux valeurs ont le même rapport que la taille de la fenêtre de référence. Par exemple:

                    
  <svg xmlns="http://www.w3.org/2000/svg"
    viewBox="-5 15 100 300"
    width="10cm" height="30cm" >
                    
                  

• On peut modifier, lors de l'utilisation du SVG, la taille de cette fenêtre, par exemple avec <img ... width=".." height="..">.
  Pour approfondir ces questions, il faut voir les attribues preserveAspectRatio et transform.

Comment créer du SVG ?

Avec un logiciel

• Avec tout éditeur de texte : Ce n'est pas le plus pratique, mais c'est bien utile pour pouvoir faire des petites corrections. Et c'est comme ça qu'on l'intègre directement dans le code HTML.
• InkScape : est un logiciel libre spécialement dédier à l'édition des SVG. Peut importer aussi de PDF et exporter en TikZ (avec un plugin). Les fichier SVG par défaut ne sont pas optimisés, il est préférable de les enregistrer avec "Optimized SVG". (L'équivalent payant est Adobe Illustrator.)
• svg-edit : est un éditeur en ligne. Moins performant que InkScape mais peut être utile si on ne dispose pas de InkScape.
• GeoGebra : peut exporter en SVG.

Conversion

• A partir d'un pdf. On peut utiliser cette méthode pour créer des figures avec des formules mathématiques en utilisant par exemple TikZ.
  • Avec le logiciel libre pdf2svg.
  • Avec InkScape. Pour que les formules mathématiques soient correctement transformées, il faut choisir la conversion avec Poppler et la transformation des polices en courbes.
• Vers pdf. Encore une fois InkScape fait du très bon travail. On peut ainsi importer des figures créées à la base avec SVG dans des documents LaTeX.
• A partir d'un dvi. Le logiciel libre qui permet de faire ça est dvisvgm. Pour préserver les formules mathématiques il faut utiliser l'option -n qui transforme les polices en courbes.

Optimisation