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!