HTML5 SVG peut faire la mise à l'échelle des graphiques vectoriels

SVG Can Zoad Vector Graphics (Graphics vectoriel évolutif) est un format graphique basé sur le langage d'étiquette évolutif (XML) pour décrire les graphiques vectoriels à deux dimensions. SVG est un nouveau format graphique vectoriel à deux dimensions formulé par W3C, et il s'agit également d'une norme graphique vectorielle réseau dans la spécification. SVG suit strictement la syntaxe XML et décrit le contenu de l'image dans le langage descriptif du format de texte.

SVG fait référence aux graphiques vectoriels évolutifs

SVG est utilisé pour définir des graphiques basés sur les vecteurs pour les réseaux

SVG utilise le format XML pour définir les graphiques

Les images SVG ne perdront pas la qualité graphique lors du zoom ou de la taille de la taille

SVG est la norme de la Wanwei Network Alliance

Les normes SVG et W3C telles que DOM et XSL sont un tout

SVG est un langage qui décrit les graphiques 2D dans XML.

SVG est basé sur XML, ce qui signifie que chaque élément de SVG DOM est disponible. Vous pouvez ajouter un processeur d'événements JavaScript à un certain élément.

Dans SVG, chaque graphique dessiné est considéré comme un objet. Si l'attribut de l'objet SVG change, le navigateur peut automatiquement reproduire les graphiques.

Caractéristiques:

Résolution non dépendante

Processeur d'événements de support

L'application la plus appropriée avec de grandes zones de rendu (comme Google Map)

Une grande complexité ralentira le rendu (l'application de tout DOM excessive n'est pas rapide))

Pas adapté aux applications de jeu

Canvas dessine des graphiques 2D via JavaScript.

La toile est rendue par des pixels.

Dans Canvas, une fois le graphique dessiné, il ne continuera pas à attirer l'attention du navigateur. Si l'emplacement change, toute la scène doit également être re-draw, y compris tout objet qui pourrait avoir été couvert par des graphiques.

Caractéristiques:

Dépendances

Ne supportez pas le processeur d'événements

Capacité de rendu de texte faible

Peut enregistrer l'image de résultat au format .png ou .jpg

Le jeu à forte intensité de jeu le plus approprié, beaucoup d'entre eux seront fréquemment peints

Exemple simple:

 <svg width = 100% height = 100%> <cercle cx = 300 cy = 60 r = 50 rAME = # ff0 tram-width = 3 fill = red /> </svg>

Dans le passé, les graphiques affichés dans le navigateur, tels que JPEG, GIF, etc., étaient tous des graphiques. Dans l'image de réseau, le fichier image définit la valeur de couleur de chaque pixel dans l'image. Le navigateur doit lire ces valeurs et faire des actions correspondantes. Cette image a une forte capacité de reproduction, mais elle semblera insuffisante dans certains cas. Par exemple, lorsque le navigateur est affiché dans différentes tailles, le bord de la déchaînement est généralement généré. De plus, l'animation du bitmap est limitée à l'animation qui génère le type de livres roulants, c'est-à-dire afficher rapidement et en continu des images distinctes.

Le diagramme vectoriel est spécifié pour déterminer les instructions requises pour chaque valeur de pixels au lieu de la valeur spécifiée elle-même, qui surmonte une partie de ces difficultés. Par exemple, les graphiques vectoriels ne fournissent plus de valeurs de pixels pour un diamètre d'un pouce, mais disent au navigateur de créer un cercle de diamètre d'un pouce, puis de laisser le navigateur (ou la fiche) faire le reste. Cela élimine de nombreuses restrictions sur les graphiques de réseau; Si l'image doit être affichée trois fois la taille normale, le navigateur est utilisé pour dessiner un cercle en fonction de la taille correcte sans avoir à effectuer la méthode d'insertion commune de l'image de réseau. De même, les instructions reçues par le navigateur peuvent être plus faciles à lier aux sources d'informations externes (comme l'application et la base de données).

Dans le système HTML, la technologie de vectorisation la plus couramment utilisée est les éléments de toile nouvellement ajoutés SVG et HTML5. Les deux technologies prennent en charge les cartes vectorielles de dessin et le réseau.

Le graphique de vecteur de mise à l'échelle (SVG (SVG) est un langage qui décrit les graphiques à deux dimensions (SVG suit strictement la syntaxe XML). SVG permet trois types d'objets graphiques: les graphiques vectoriels (tels que des chemins composés de linéaire et des courbes), des images et des textes. Les objets graphiques (y compris le texte) peuvent être emballés, stylisés, transformés et combinés en objets précédemment présentés. Les ensembles de fonctions SVG incluent la conversion imbriquée, les chemins de cisaillement, les masques alpha et les objets de modèle.

Le dessin SVG est interactif et dynamique. Par exemple, vous pouvez utiliser des scripts pour définir et déclencher des animations. Ceci est très puissant par rapport à Flash. Flash est un fichier binaire, qui est plus difficile à créer et à le modifier. SVG est un fichier texte et le fonctionnement dynamique est assez facile. De plus, SVG fournit directement des éléments connexes pour compléter l'animation, ce qui est très pratique à fonctionner.

SVG est compatible avec d'autres normes Web et prend directement en charge le modèle d'objet de document DOM. Ceci est également très puissant par rapport à la toile dans HTML5 (note ici, le SVG utilise également une toile similaire pour afficher les graphiques SVG. Vous constaterez que de nombreuses fonctionnalités sont un peu similaires à la toile de HTML5; dans l'article s'il est Pas clairement indiqué qu'il s'agit de la toile de SVG, il fait référence à l'élément de toile dans HTML5). Par conséquent, il peut être pratique d'utiliser le script pour réaliser de nombreuses applications avancées de SVG. Et les éléments graphiques de SVG prennent essentiellement des événements standard dans DOM. Un grand nombre de programmes de traitement d'événements (tels que OnMouseOver et OnClick) peuvent être alloués à n'importe quel objet graphique SVG. Bien que la vitesse de rendu de SVG ne soit pas aussi bonne que l'élément de toile, il est très flexible dans l'opération DOM.

SVG peut être considéré comme un protocole ou une langue;

SVG n'est pas quelque chose dans HTML5, mais c'est aussi l'une des techniques techniques de la page, et mettons-la sur ce sujet.

Par rapport à d'autres formats d'image, SVG présente de nombreux avantages (de nombreux avantages proviennent des avantages de la carte vectorielle):

• Le fichier SVG est Pure XML, qui peut être lu et modifié par de nombreux outils (tels que le bloc-notes).

• Par rapport aux images JPEG et GIF, SVG est plus petit et plus comprimé.

• Le SVG est évolutif et peut être agrandi lorsque la qualité de l'image est diminuée.

• Le texte de l'image SVG est facultatif et il est également disponible (adapté à la fabrication de cartes).

• SVG peut fonctionner avec la technologie Java.

• SVG est la norme de l'ouverture.

Le principal concurrent de SVG est Flash. Par rapport à Flash, le plus grand avantage de SVG est qu'il est compatible avec d'autres normes (telles que XSL et DOM) et qu'il est pratique de fonctionner, tandis que Flash est une technologie privée impopulaire. D'autres, comme les formats de stockage et les graphiques dynamiques, SVG occupe également un grand avantage.

Le navigateur qui prend en charge HTML5 et SVG n'est pas au centre de la discussion ici. Pour les navigateurs qui soutiennent directement SVG, SVG utilise principalement deux côtés et deux façons.

Intérieur uni à HTML

SVG est l'élément HTML standard, écrivez-le directement sur HTML.

 <? xml version = 1.0 Encoding = utf-8?> <! doctype html> <html> <ead> <! - <meta content = text / html; -> <itle> ma première page SVG </ title> </ head> <body> <svg xmlns = http://www.w3.org/2000/svg version = 1.1 width = 200px height = 200px> <st> x = 0 y = 0 Largeur = 100% Hauteur = 100% Fill = Aucun TRAD = Black /> <Circle Cx = 100 Cy = 100 R = 50 Style: Black; > </ body> </html>

Veuillez noter que le début de la déclaration XML au début et l'espace de nom du SVG, XMLN, version de version, etc., en considérant principalement le problème de la compatibilité;

Fichier SVG indépendant

SVG indépendant fait référence à la fourniture d'un format de fichier graphique vectoriel en élargissant l'extension de fichier SVG. Ce fichier SVG est intégré dans le navigateur.

1. Le fichier / page SVG indépendant, le modèle défini est essentiellement comme ce qui suit:

 <svg width = 100% height = 100%> <! - SVG Marquage ici .-> </svg>

Enregistrez ces fichiers texte dans des fichiers avec SVG comme une extension, tels que Sun.svg.

2.HTML fait référence au fichier SVG externe.

Utilisez des éléments d'objet ou d'IMG pour intégrer les graphiques SVG, par exemple, l'exemple suivant:

 <! Implémentez le code de secours ici, ou affichez un message: -> <p> Votre navigateur ne prend pas en charge la mise à niveau vers un navigateur moderne. = 10 largeur = 30 hauteur = 30 traits = remplissage noir = largeur de course transparente = 5 /> <rad = 10 rx = 10 largeur = 30 hauteur = 30 TROKE = Black Fill = Transparent-track-width = 5 /> <Circle Cx = 25 Cy = 75 r = 20 traits = Red Fill = Viette de course transparente = 5 /> <Ellipse Cx = 75 Rx = 20 Ry = 5 S Troke = Red Fill = Transparent-AVC-Width = 5 /> <line x1 = 10 x2 = 50 y1 = 110 y2 = 150 traits = remplissage orange = largeur de course transparente = 5 /> <points de polyligne = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 TRAD = TROUP ORANGE = Largeur de course transparente = 5 /> <Points Polygon = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 TRAP = Green Fill = Transparent-track-width = 5 /> <chemin D = M20, 230 Q40, 205 50, 230 T90, 230 FILL = Aucun TRAP = Blue Stroke-Width = 5 / SVG>

Cet exemple tire beaucoup de formes: rectangles normaux, rectangles avec coins arrondis, rond, ovales, droits, pliants, polygones et chemin. Ce sont des éléments graphiques de base. Bien qu'il existe de nombreuses façons de dessiner un graphique, comme les rectangles peuvent être implémentés avec RECT, ou peuvent être implémentés avec le chemin, mais nous devons toujours essayer de garder le contenu du SVG court et intelligent, facile à lire.