Maison > Article > interface Web > Tutoriel SVG en ligne HTML5 et différences par rapport à Canvas

Tutoriel SVG en ligne HTML5 et différences par rapport à Canvas

零下一度original: 2017-05-15 10:41:391498parcourir

Qu'est-ce que SVG ?

SVG fait référence à ScalableGraphiques vectorielsForme (Graphiques vectoriels évolutifs)

SVG est utilisé pour définir des graphiques vectoriels pour le Web

Utilisation SVG XML Graphique de définition du format

L'image SVG ne perdra pas sa qualité graphique lorsqu'elle est agrandie ou modifiée en taille

SVG est une norme du World Wide Web Consortium

Avantages SVG

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 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

Le SVG peut être agrandi sans perdre la qualité de l'image

Prise en charge des navigateurs

Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent 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="www.php.cn/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>

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 les didacticiels SVG.

Différences SVG entre Canvas

SVG est un langage qui utilise XML pour décrire des 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 traitée comme un objet. Si l'attribut de l'objet SVG change, 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.

【Recommandations associées】

1. Recommandation spéciale : "php Programmer Toolbox" version V0.1 Télécharger

2. Tutoriel vidéo en ligne h5 gratuit

3 Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction détaillée au stockage local en html5 (photo)Article suivant：Introduction détaillée au stockage local en html5 (photo)

Articles Liés

Voir plus