SVG : Sauriez-Vous me Guider ?

Je viens d’ouvrir une image SVG avec mon éditeur de texte et je me trouve face à quelque chose de tout à fait lisible ! Dans cet article, explorons ce format puissant, ses avantages et comment le maîtriser pour créer des graphiques performants et élégants.

Introduction au format SVG

Le format SVG (Scalable Vector Graphics) est un standard ouvert du W3C (World Wide Web Consortium) qui permet de créer des images vectorielles en deux dimensions en utilisant un langage basé sur XML. Contrairement aux formats bitmap comme JPEG ou PNG, qui sont composés de pixels, le SVG décrit des graphiques en termes de formes géométriques (points, lignes, courbes, etc.). Grâce à cela, les images SVG peuvent être redimensionnées à l'infini sans perte de qualité, ce qui en fait une solution idéale pour les sites web, les applications mobiles et l'impression.

Le SVG est largement utilisé pour des icônes, des logos, des cartes, des infographies et des graphiques interactifs. Son caractère modifiable et léger en fait un choix privilégié des développeurs et designers.

Avantages et inconvénients du format SVG

Avantages :

• Scalabilité : Le SVG peut être agrandi ou réduit sans aucune perte de qualité. Cela garantit que les images restent nettes, peu importe leur taille ;
• Fichiers légers : Comparé aux images bitmap, les fichiers SVG sont souvent plus légers, ce qui améliore les temps de chargement ;
• Interactivité : Le SVG peut être animé ou modifié en temps réel à l'aide de CSS, de JavaScript et de la balise d’animation <animate> ;
• Édition simple : Puisqu'il s'agit d'un fichier texte, un SVG peut être édité avec n'importe quel éditeur de texte, tout comme un code HTML.

Inconvénients :

• Complexité pour les images détaillées : Pour des images complexes avec de nombreux détails (comme des photographies), les fichiers SVG peuvent devenir lourds et difficiles à gérer. Le SVG n’est pas fait pour les images matricielles ;
• Compatibilité partielle : Bien que le support des fichiers SVG soit largement répandu sur les navigateurs modernes, certains anciens navigateurs ou systèmes peuvent ne pas prendre en charge toutes les fonctionnalités du SVG.

Structure d'un fichier SVG

Un fichier SVG est écrit en XML. Il est composé d'éléments qui définissent des formes, des couleurs, des dégradés, du texte, et d'autres éléments graphiques. Voici un exemple de structure basique d'un fichier SVG :

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="#003CDC" />
</svg>

Dans cet exemple :

• <svg> est l'élément racine qui contient l'image SVG. Il spécifie la taille de la zone de dessin avec les attributs width et height.
• <circle> est un élément graphique représentant un cercle. Il définit son centre avec cx et cy, et son rayon avec r. L'attribut fill spécifie la couleur de remplissage.

Source de cet exemple.

Construction d'une image SVG avec du code

Il est possible de créer un fichier SVG à partir de zéro en écrivant directement du code XML. Prenons un exemple plus complexe où nous créons un rectangle, une ellipse et du texte.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <!-- Rectangle -->
  <rect x="50" y="20" width="200" height="100" fill="#003CDC" stroke="#000F41" stroke-width="3"/>
  
  <!-- Ellipse -->
  <ellipse cx="150" cy="85" rx="80" ry="30" fill="#FFC800" stroke="#000F41" stroke-width="3"/>
  
  <!-- Texte -->
  <text x="150" y="45" font-family="Arial" font-size="20" fill="white" text-anchor="middle">
    SVG Exemple
  </text>
</svg>

Cet exemple présente trois éléments principaux :

• Un rectangle (<rect>) avec des dimensions et des couleurs définies.
• Une ellipse (<ellipse>) avec un rayon horizontal et vertical différent.
• Un texte (<text>) centré horizontalement au-dessus du rectangle avec des propriétés de police personnalisées.

Liste des éléments possibles.

Le code SVG peut être directement intégré dans un fichier HTML, ce qui permet un rendu immédiat sur un navigateur. Source de cet exemple.

Utilisation de CSS et JavaScript pour animer et styliser un SVG

L'un des grands avantages du SVG est sa capacité à être stylisé et animé via CSS et JavaScript. Vous pouvez, par exemple, changer les couleurs, ajouter des animations de transitions ou interagir avec l'utilisateur.

Exemple d'animation avec la balise animate :

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="#FFC800">
    <animate attributeName="fill" from="#FFC800" to="#003CDC" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

Ici, le cercle change progressivement de couleur de jaune à bleu toutes les cinq secondes, en boucle infinie, grâce à l'élément <animate>. Source de cet exemple.

Exemple d’animation avec CSS :

<div class="area">
  <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    <rect class="roundsquare" width="10" height="10">
    </rect>
 </svg>
</div>

.area {
  width: 100px;
}

.roundsquare {
  fill: #003CDC;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-name: roundsquare, pulse;
  rx: 5;
}

@keyframes pulse {
  0% { fill: #003CDC; }
  50% { fill: #FFC800; }
  100% { fill: #003CDC; }
}

@keyframes roundsquare {
  0% { rx: 0; }
  50% { rx: 5; }
  100% { rx: 0; }
}

C’est l’animation CSS qui permet ici de modifier la forme et la couleur de notre élément SVG. Source de cet exemple.

Exemple d'interaction avec JavaScript :

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="#003CDC" id="myRect"/>
</svg>

document.getElementById("myRect").addEventListener("click", () => {
  this.setAttribute("fill", "#FFC800");
});

Dans cet exemple, un rectangle change de couleur lorsque l'utilisateur clique dessus. JavaScript est utilisé pour ajouter cette interactivité. Source de cet exemple.

Conclusion

Le format SVG est un outil puissant et polyvalent pour les graphismes sur le web. Grâce à sa scalabilité, son interactivité et sa légèreté, il est idéal pour les logos, les icônes, les illustrations et les animations. Bien qu'il puisse être complexe à gérer pour des images très détaillées, le SVG reste un incontournable pour tout développeur ou designer souhaitant créer des visuels flexibles et optimisés. Le fait de pouvoir écrire du code pour générer des graphiques SVG en fait également un excellent choix pour ceux qui souhaitent comprendre et contrôler chaque aspect de leur design.