SVG

Besoin

Format d'image et animations 2D précis et redimensionnables adaptés au Web.

Analyse

SVG supporte divers types d'objets graphiques :

• Les formes vectorielles (composées de lignes droites et courbes)
• Les images
• Le texte
• les objets externes

Ces objets graphiques peuvent être groupés, on peut leur appliquer des styles, les transformer et composés d'objets préalablement rendus. SVG supporte les transformations embarquées, des tracés de clipping, les masques alpha, les effets de filtre et les modèles d'objets.

Les dessins SVG peuvent être interactifs et dynamiques. Les animations peuvent être définies et déclenchées déclarativement (c.-à-d., en incluant des éléments d'animation dans le contenu SVG) ou par script.

Conception

SVG définit un schéma XML pouvant contenir :

• une <viewBox> contenant une liste de valeur définissant un système de coordonnées :
  • minX
  • minY
  • largeur
  • hauteur
• des contextes graphiques <g>
  • des formes  ayant :
    • un nom avec des attributs spécifiques :
      • <circ> avec les attributs <cx>, <cy>, <r>
      • <rect> avec les attributs <x>, <y>, <width>, <height>
      • <line>
      • <path>
    • des attributs communs :
      • <stroke> pour la couleur de trait
      • <stroke-width> pour la largeur de trait
      • <stroke-dasharray> pour les largeurs de traits et espaces entre traits
      • <stroke-dashoffset> pour le décalage des traits
      • <pathLength> pour la longueur du trait
      • <fill> pour la couleur de remplissage
      • <transform> pour la tranformation à appliquer au contexte (rotate (-10) par ex)

Implémentation

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg height="4cm" version="1.1" viewBox="0 0 1200 400" width="12cm" xmlns="https://www.w3.org/2000/svg">
  <desc>Polygone d'exemple - Etoile et hexagone</desc>
  <!-- Montre le canvas via un rectangle -->
  <rect fill="none" height="398" stroke="blue" stroke-width="2" width="1198" x="1" y="1"></rect>
  <polygon fill="red" points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="blue" stroke-width="10"></polygon>
  <polygon fill="lime" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" stroke="blue" stroke-width="10"></polygon>
</svg>

const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");