Qu'est-ce que SVG?
- SVG signifie Scalable Vector Graphics
- SVG est utilisé pour définir les graphiques pour le Web
- SVG est une recommandation du W3C
Scalable Vector Graphics (SVG) est un vecteur format d'image basé sur XML pour les graphiques en deux dimensions avec le soutien de l'interactivité et de l'animation. La spécification SVG est un standard ouvert développé par le Consortium World Wide Web (W3C) depuis 1999.
Les images SVG et leurs comportements sont définis dans des fichiers texte XML. Cela signifie qu'ils peuvent être recherchés, indexés, scénarisées et compressés. Comme les fichiers XML, les images SVG peuvent être créés et édités avec un éditeur de texte, ainsi qu'avec un logiciel de dessin.
Tous les principaux navigateurs, y compris Web moderne Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari et Microsoft Edge-ont en charge le rendu SVG.
Le code HTML <svg> Element
Le code HTML <svg> élément (introduced in HTML5) est un conteneur pour les graphiques SVG.
SVG a plusieurs méthodes pour les chemins de dessin, des boîtes, des cercles, du texte et des images graphiques.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge complètement le <svg> élément.
| Élément | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
Cercle SVG
Exemple
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html> Essayez vous - même » SVG Rectangle
rgb (0,0,0) ">
Exemple
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
SVG rectangle arrondi
Désolé, votre navigateur ne supporte pas SVG en ligne.
Exemple
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
SVG étoiles
Désolé, votre navigateur ne supporte pas SVG en ligne.
Exemple
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Logo SVG
SVG Désolé, votre navigateur ne supporte pas SVG en ligne.
Exemple
<svg height="130" width="500">
<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>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
Différences entre SVG et Canvas
SVG est un langage de description graphique 2D en XML.
Canvas dessine graphiques 2D, à la volée (with a JavaScript) .
SVG est basé sur XML, ce qui signifie que chaque élément est disponible dans le SVG DOM. Vous pouvez associer des gestionnaires d'événements JavaScript pour un élément.
En SVG, chaque forme dessinée est connu comme un objet. Si les attributs d'un objet SVG sont modifiés, le navigateur peut réengendrer automatiquement la forme.
Canvas est rendu pixel par pixel. En toile, une fois que le graphique est tiré, il est oublié par le navigateur. Si sa position doit être modifiée, doit être redessinée toute la scène, y compris les objets qui auraient pu être couverts par le graphique.
Comparaison de Canvas et SVG
Le tableau ci-dessous présente quelques différences importantes entre Canvas et SVG:
| Canvas | SVG |
|---|---|
|
|
Pour en savoir plus sur SVG, s'il vous plaît lire notre SVG Tutorial .