1. Logo dessiné sur papier

Dessiner un logo à l’aide des formes géométriques suivantes :

• Rectangles
• Cercles
• Ellipses
• Lignes

Autres contraintes :

• Ne pas utiliser d’autre forme : pas de polygone, pas de spirale, pas de rectangle arrondi…
• Les rectangles et les ellipses ne devront pas être tournés, ils restent parallèles aux axes.

2. Logo défini géométriquement

Vous décrirez ce croquis à l’aide de mots en anglais : rect, circle, ellipse, line, et de nombres (coordonnées et tailles).

La position des points sera donnée par leurs deux coordonnées : abscisse et ordonnée. C’est comme en mathématiques, sauf que l’origine est le coin supérieur gauche du logo. Attention, les ordonnées sont donc orientées vers le bas.

• Rectangles : donner la position du coin supérieur gauche, la largeur et la hauteur
• Cercles : donner la position du centre et le rayon
• Ellipses : donner la position du centre, le rayon horizontal et le rayon vertical
• Lignes : donner la position des extrémités

Les mots seront tapés dans un fichier logo.html et mis en ligne sur votre site. Pour une meilleure présentation, penser aux balises <pre></pre>.

3. Logo SVG

Toujours dans le fichier logo.html, ajouter <img src="logo.svg" />.

Créer maintenant le fichier logo.svg (possible bien sûr de le mettre dans votre répertoire images). Voici un modèle :

<svg xmlns="http://www.w3.org/2000/svg"
     width="100" height="100">
  <rect x="50" y="50" width="40" height="20"
        stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <circle cx="20" cy="50" r="30"
          stroke-width="2" stroke="#000000" fill="#00FF00"/>
  <ellipse cx="70" cy="50" rx="30" ry="10"
           stroke-width="2" stroke="#000000" fill="#0000FF"/>
  <line x1="0" y1="0" x2="90" y2="90"
        stroke-width="8" stroke="#000000"/>
</svg>

Qui donne :

Réaliser entièrement votre logo.