SVG Scalable Vector Graphics est un format graphique basé sur le langage de balisage extensible (XML) pour décrire des graphiques vectoriels bidimensionnels. SVG est un nouveau format de graphiques vectoriels bidimensionnels développé par le W3C et constitue également la norme de graphiques vectoriels en réseau dans la spécification. SVG suit strictement la syntaxe XML et utilise un langage descriptif au format texte pour décrire le contenu de l'image. Il s'agit donc d'un format graphique vectoriel indépendant de la résolution de l'image.
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 des graphiques
Les images SVG ne le font pas perdre la qualité graphique lorsqu'il est agrandi ou redimensionné
SVG est un standard du World Wide Web Consortium
SVG est intégré aux standards du W3C tels que DOM et XSL
SVG Avantages
Par rapport à d'autres formats d'image (tels que JPEG et GIF), les avantages de l'utilisation de SVG sont :
Les images SVG peuvent être créées via un éditeur de texte Créer et modifier
Les images SVG peuvent être recherchées, indexées, scriptées ou compressées
SVG est évolutif
Les images SVG peuvent être produites à n'importe quelle résolution avec une impression au sol de haute qualité
SVG peut être agrandi sans perdre la qualité de l'image
Fondamentalement, tous les navigateurs prennent en charge SVG, bien sûr, IE est à partir de 9 et supérieur.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG</title>
</head>
<body>
<svg width="100%" height="100%" >
<circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="black" />
</svg>
</body>
</html>
La différence entre Canvas et SVG :
SVG
SVG est une méthode utilisant XML Un langage pour décrire 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.
Caractéristiques :
Ne dépend pas de la résolution
Prend en charge les gestionnaires d'événements
Idéal pour les applications avec de grandes zones de rendu (telles que Google Maps)
Une complexité élevée ralentira le rendu (toutes les applications qui abusent du DOM ne sont pas rapides)
Ne convient pas aux applications de jeu
Canvas
Canvas dessine des graphiques 2D via JavaScript.
Le canevas est rendu pixel par pixel.
Dans Canvas, une fois le graphique dessiné, il ne recevra 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.
Caractéristiques :
Dépend de la résolution
Aucune prise en charge des gestionnaires d'événements
Faibles capacités de rendu de texte
Possibilité d'enregistrer les images de résultat au format .png ou .jpg
Idéal pour les applications gourmandes en images Jeux où de nombreux objets sont fréquemment redessinés
section suivante