HTML5 inline SVG
HTML5 supporte SVG en ligne.
Qu'est-ce que SVG?
- SVG moyens Scalable Vector graphiques (Scalable Vector Graphics)
- SVG pour les graphiques utilisés pour définir le réseau vectoriel
- SVG utilise format XML définition graphiques
- l'image SVG pour agrandir ou changement dans la taille de sa qualité d'image ne sera pas perdu
- SVG est un Wide Web Consortium norme mondiale
SVG avantage
Comparé à d'autres formats d'image (tels que JPEG et GIF), en utilisant les avantages de SVG:
- Les images SVG peuvent être créés et modifiés à l'aide d'un éditeur de texte
- Les images SVG peuvent être recherchés, indexés, scriptés ou compressées
- SVG est évolutive
- Les images SVG peuvent être imprimés dans une résolution de haute qualité
- SVG peut être exagérée dans la qualité de l'image ne diminue pas
support du navigateur
Internet Explorer 9+, Firefox, Opera, Chrome et Safari support inline SVG.
Le SVG intégré directement dans la page HTML
En HTML5, vous serez en mesure de SVG éléments directement dans la page HTML:
Exemples
<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>
Essayez »
Résultats:
Désolé, votre navigateur ne supporte pas les SVG en ligne.En savoir plus sur SVG tutoriel, s'il vous plaît visitez SVG tutoriel .
SVG et Canvas différence entre les deux
SVG est un graphisme 2D en utilisant la description XML langue.
Toile pour dessiner des graphiques 2D en utilisant JavaScript.
SVG basé sur XML, ce qui signifie que chaque élément dans le DOM SVG est disponible. Vous pouvez joindre gestionnaires d'événements JavaScript pour un élément.
En SVG, chacun réputé tirer des objets graphiques. Si les objets changements propriété SVG, le navigateur peut automatiquement reproduire les graphiques.
Canvas est rendu pixel par pixel. Dans la toile, une fois que le graphique est dessiné est terminée, il ne sera pas continuer à être l'attention du navigateur. Si la position est modifié, toute la scène doit également être redessiné, y compris les objets qui ont pu être couverts avec des graphiques.
Comparaison des SVG et Canvas
Le tableau ci-dessous présente quelques-unes des différences entre la toile et SVG.
Canvas | SVG |
---|---|
|
|