Introduction à SVG

SVG (Scalable Vector Graphics) définit des graphiques vectoriels au format XML. Pour l'utiliser, vous devez avoir des connaissances de base en HTML et XML.

SVG est utilisé pour spécifier des graphiques vectoriels pour le Web. Chaque élément et attribut dans les fichiers SVG peut être animé. SVG est une recommandation du W3C. Il s'intègre à d'autres normes du W3C, comme le DOM et XSL.

Avantages de l'utilisation de SVG

L'utilisation de SVG plutôt que d'autres formats d'image, tels que JPEG et GIF, présente de nombreux avantages. Notamment :

• Les images SVG peuvent être générées et modifiées avec n'importe quel éditeur de texte.
• Les images SVG peuvent être scriptées, indexées, recherchées et compressées.
• Vous pouvez imprimer des images SVG avec une haute qualité à n'importe quelle résolution.
• Les images SVG peuvent être mises à l'échelle et zoomées.
• Les graphiques SVG ne perdent pas en qualité lors du zoom ou du redimensionnement.
• SVG est un standard ouvert.

Création d'images SVG

Vous pouvez créer des images SVG avec n'importe quel éditeur de texte. Cependant, leur création avec un logiciel de dessin, comme Inkscape, est souvent plus adaptée.

Intégration de SVG dans HTML

Les fichiers SVG utilisent l'extension .svg et sont pris en charge par tous les navigateurs modernes. Vous pouvez les intégrer dans HTML à l'aide de la balise <code><img></code> ou de balises en ligne. Une structure SVG de base ressemble à ceci :

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Pratique

Que pouvez-vous dire sur SVG dans HTML ?

SVG signifie Scalable Vector Graphics.SVG est utilisé pour décrire des graphiques vectoriels 2D au format XML.SVG peut être animé et interactif via JavaScript.Les fichiers SVG ne sont pas évolutifs et pixelisent donc lors du zoom.SVG est utilisé pour décrire des graphiques 3D.