SVG en ligne HTML5
HTML5 prend en charge le SVG en ligne.
Qu'est-ce que SVG ?
SVG signifie Scalable Vector Graphics
SVG est utilisé pour définir des graphiques vectoriels pour le Web
SVG utilise le format XML pour définir les graphiques
La qualité graphique des images SVG ne sera pas perdue lors de l'agrandissement ou de la modification de la taille
SVG est un standard du World Wide Web Consortium
Avantages SVG
Par rapport à d'autres formats d'image (tels que JPEG et GIF), l'utilisation de SVG les avantages sont :
Les images SVG peuvent être créées et modifiées via un éditeur de texte
Les images SVG peuvent être recherchées, indexées, scriptées ou compressées
SVG est évolutif
Les images SVG peuvent être imprimées en haute qualité à n'importe quelle résolution
SVG peut être agrandi sans perte de qualité de l'image
Prise en charge des navigateurs
Internet Explorer 9+, Firefox, Opera, Chrome , et Safari prend en charge le SVG en ligne.
Intégrer du SVG directement dans des pages HTML
En HTML5, vous pouvez intégrer des éléments SVG directement dans des pages HTML :
Exemple
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Résultat :
Désolé, votre navigateur ne prend pas en charge le SVG en ligne.Pour en savoir plus sur les didacticiels SVG, veuillez visiter le Tutoriel SVG.
La différence entre SVG et Canvas
SVG est un langage qui utilise XML pour décrire les graphiques 2D.
Canvas utilise JavaScript pour dessiner des graphiques 2D.
SVG est basé sur XML, ce qui signifie que chaque élément du DOM SVG est disponible. Vous pouvez attacher un gestionnaire d'événements JavaScript à un élément.
En SVG, chaque forme dessinée est considérée comme un objet. Si les propriétés d'un objet SVG changent, le navigateur peut automatiquement reproduire le graphique.
Le canevas est rendu pixel par pixel. Dans Canvas, une fois qu'un graphique est dessiné, il n'attire plus l'attention du navigateur. Si sa position change, la scène entière doit être redessinée, y compris tous les objets qui auraient pu être recouverts par des graphiques.
Comparaison de Canvas et SVG
Le tableau suivant répertorie certaines des différences entre Canvas et SVG.
| Toile | SVG | ||||
|---|---|---|---|---|---|
|
|
