svg

Un éditeur de dessin svg

Vous allez ici utiliser un éditeur svg wysiwig pour créer votre première figure SVG.

Cliquez ici pour ouvrir svgeditor.

Utilisez les outils proposés par le logiciel pour constituer une figure simple telle que la suivante :

Ensuite, cliquez sur l'icône menu svg : le texte qui s'affiche est le code qui produit l'image. Nous allons apprendre dans la suite du cours à produire quelques images en écrivant directement le code.

Pas de corrigé ici puisqu'il ne s'agit que de tester un logiciel.

Le code de la figure SVG de l'énoncé est le suivant :

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
<g class="layer">
  <title>Layer 1</title>
  <rect transform="rotate(27.004091262817383 141.49999999999997,164) " id="svg_1" height="50" width="117" y="139" x="83" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <ellipse id="svg_2" ry="27" rx="29" cy="213" cx="173" stroke-width="5" stroke="#000000" fill="#ffff00"/>
  <text stroke="#000000" transform="matrix(1,0,0,0.5797014832496643,0,121.95880866516382) " xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_4" y="-51.38003" x="166" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#000000">Ma première figure SVG</text>
</g>
</svg>

Les cours suivants rentreront dans le détail de ce code, mais vous pouvez déjà repérer quelques clefs :

La balise <svg></svg> qui encadre l'ensemble.
La balise <g></g> qui va servir à regrouper des éléments svg (pour pouvoir par exemple ensuite faire référence à l'ensemble de ces éléments en une seule fois).
La balise <rect .../> qui sert à définir un rectangle.
La balise <ellipse .../> qui sert à définir une ellipse.
La balise <text> ...</text> qui sert à placer du texte dans l'image.

SVG dans le navigateur

Le navigateur firefox (ainsi que les autres bons navigateurs comme Opera ou Chrome) savent interpréter directement le code SVG d'une figure.

Pour vérifier cela, ouvrez un éditeur de texte et copiez le code suivant constituant le document minimal typique d'une page html.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> figure svg </title>
    </head>
    <body>

	     COLLER LE CODE DE LA FIGURE SVG  ICI A LA PLACE DE CE TEXTE OU EN DESSOUS.
  
    </body>
</html>

Collez ensuite le code d'une figure SVG créée avec svg-editor à l'emplacement indiqué.

Enfin, nommez votre fichier sous la forme "nomChoisi.html", enregistrez et ouvrez avec firefox. Vous devriez observer votre figure.

Insistons bien ici sur le fait que l'on a collé du code et non une image. Le navigateur n'a donc pas embarqué un fichier image : il a interprété le code xml constituant l'image svg.