Dans Scalable Vector Graphics (SVG), l'élément <circle> est utilisé pour créer un cercle. Voici quelques façons d’utiliser l’élément <circle> en SVG :

Cercle de base :

 XML
 <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Cet exemple crée un cercle avec un centre en (50, 50), un rayon de 40, une bordure noire d'une épaisseur de 3 et un remplissage rouge.

Cercle dynamique :

Vous pouvez utiliser JavaScript pour modifier dynamiquement les attributs du cercle :

 XML
 <svg width="100" height="100">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  <script>
    // Example of changing the circle's color on click
    document.getElementById('myCircle').addEventListener('click', function() {
      this.setAttribute('fill', 'blue');
    });
  </script>
</svg>

Cercle animé :

Animez le cercle à l'aide des animations SVG :

 XML
 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red">
    <animate attributeName="r" from="40" to="20" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

Dans cet exemple, le rayon du cercle est animé pour passer de 40 à 20 sur une durée de 2 secondes, et l'animation se répète indéfiniment.

Dégradés :

Vous pouvez utiliser des dégradés pour le remplissage du cercle :

 XML
 <svg width="100" height="100">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="url(#grad1)" />
</svg>

Cet exemple utilise un dégradé radial pour le remplissage du cercle, passant du blanc au bleu.

Ce ne sont là que quelques exemples, et il existe de nombreux autres attributs et propriétés que vous pouvez utiliser pour personnaliser les cercles en SVG.