Guide complet pour SVG

SVG, acronyme de Scalable Vector Graphics, est un format de fichier basé sur XML utilisé pour décrire des graphiques vectoriels bidimensionnels. Il offre une méthode puissante et flexible pour créer des formes et des graphiques interactifs sur le web. Comprendre comment créer des formes simples en SVG peut être un excellent point de départ pour explorer ses fonctionnalités.

Pour créer des formes simples en SVG, vous pouvez utiliser des éléments de base tels que (rectangle), (cercle), (ellipse), (ligne), (polyline) et (polygone). Voici un exemple de chacun de ces éléments :

1. Rectangle ():

xmlCopy code
<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="blue" />
svg>

2. Cercle ():

xmlCopy code
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
svg>

3. Ellipse ():

xmlCopy code
<svg width="100" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="20" fill="green" />
svg>

4. Ligne ():

xmlCopy code
<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
svg>

5. Polyligne ():

xmlCopy code
<svg width="100" height="100">
  <polyline points="10,10 20,30 30,10" fill="none" stroke="black" />
svg>

6. Polygone ():

xmlCopy code
<svg width="100" height="100">
  <polygon points="10,10 90,10 50,90" fill="orange" />
svg>

Chacun de ces exemples utilise des attributs spécifiques pour définir les caractéristiques des formes, tels que les coordonnées (x, y), la largeur (width), la hauteur (height), le rayon (r), etc. Vous pouvez également spécifier des propriétés telles que la couleur de remplissage (fill), la couleur du trait (stroke), l’épaisseur du trait (stroke-width), etc.

En combinant ces éléments de base et en utilisant des attributs supplémentaires, comme les transformations (transform), vous pouvez créer une grande variété de formes et de graphiques en SVG. Il est également possible d’animer ces formes en utilisant des techniques telles que SMIL (Synchronized Multimedia Integration Language) ou JavaScript.

N’oubliez pas que les possibilités offertes par SVG vont bien au-delà de ces exemples simples. Vous pouvez également incorporer du texte, des images, des filtres, des gradients, des masques, des effets et bien plus encore dans vos créations SVG pour des expériences riches et interactives sur le web.

Bien sûr, explorons davantage les fonctionnalités et les techniques avancées pour créer des formes en SVG.

1. Attributs de style et de couleur:
   En plus des attributs de base comme fill (remplissage) et stroke (contour), vous pouvez utiliser des valeurs comme les codes hexadécimaux, les noms de couleur CSS, les gradients linéaires ou radiaux, ainsi que les motifs (pattern). Par exemple:

   xmlCopy code
   <svg width="100" height="100">
     <rect x="10" y="10" width="80" height="80" fill="#FFA500" stroke="black" stroke-width="2" />
   svg>
   

2. Groupes d’éléments ():
   Les groupes permettent de regrouper plusieurs éléments SVG ensemble, ce qui facilite leur manipulation et leur transformation. Par exemple:

   xmlCopy code
   <svg width="100" height="100">
     <g transform="translate(50,50)">
       <circle cx="0" cy="0" r="40" fill="blue" />
       <rect x="-20" y="-20" width="40" height="40" fill="red" />
     g>
   svg>
   

3. Transformation (transform):
   Vous pouvez déplacer, mettre à l’échelle, incliner ou pivoter des éléments SVG en utilisant l’attribut transform. Par exemple:

   xmlCopy code
   <svg width="100" height="100">
     <rect x="10" y="10" width="20" height="20" fill="green" />
     <rect x="10" y="10" width="20" height="20" fill="red" transform="translate(30,10) rotate(45)" />
   svg>
   

4. Dégradés (, )
   Les dégradés permettent de créer des transitions progressives de couleur. Par exemple:

   xmlCopy code
   <svg width="100" height="100">
     <defs>
       <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
         <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
         <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
       linearGradient>
     defs>
     <rect x="10" y="10" width="80" height="80" fill="url(#grad1)" />
   svg>
   

5. Masques ():
   Les masques permettent de masquer ou de révéler des parties spécifiques d’éléments SVG. Par exemple:

   xmlCopy code
   <svg width="100" height="100">
     <defs>
       <mask id="mask1">
         <circle cx="50" cy="50" r="40" fill="white" />
       mask>
     defs>
     <rect x="10" y="10" width="80" height="80" fill="blue" mask="url(#mask1)" />
   svg>
   

6. Texte ():
   SVG prend également en charge l’affichage de texte. Vous pouvez spécifier la police, la taille et la couleur du texte. Par exemple:

   xmlCopy code
   <svg width="200" height="100">
     <text x="10" y="30" font-family="Arial" font-size="20" fill="red">Hello, SVG!text>
   svg>
   

7. Animation:
   SVG prend en charge l’animation via SMIL ou JavaScript. Par exemple, pour animer un cercle en faisant varier sa couleur:

   xmlCopy code
   <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
     <circle cx="50" cy="50" r="40" fill="blue">
       <animate attributeName="fill" values="blue;red;green;blue" dur="4s" repeatCount="indefinite" />
     circle>
   svg>
   

En utilisant ces fonctionnalités avancées et en combinant différentes techniques, vous pouvez créer des illustrations complexes, des graphiques interactifs et des animations époustouflantes en SVG. Cette technologie est largement utilisée pour la création de cartes, de graphiques de données, de jeux, d’interfaces utilisateur et bien plus encore sur le web moderne.