HTML5 SVG kann Vektorgrafiken skalieren

SVG können Zoad -Vektorgrafiken (skalierbare Vektorgrafiken) ein Grafikformat basieren, das auf skalierbarer Tag -Sprache (XML) basiert, um die zweidimensionalen Vektorgrafiken zu beschreiben. SVG ist ein neues zweidimensionales Vektor -Grafikformat, das von W3C formuliert wurde, und es ist auch ein Netzwerkvektorgrafikstandard in der Spezifikation. SVG folgt streng der XML -Syntax und beschreibt den Bildinhalt in der beschreibenden Sprache des Textformats.

SVG bezieht sich auf skalierbare Vektorgrafiken

SVG wird verwendet, um Vektor -basierte Grafiken für Netzwerke zu definieren

SVG verwendet das XML -Format, um Grafiken zu definieren

SVG -Bilder verlieren die Grafikqualität beim Zoomen oder ändern nicht die Größe

SVG ist der Standard der Wanwei Network Alliance

SVG- und W3C -Standards wie DOM und XSL sind ein Ganzes

SVG ist eine Sprache, die 2D -Grafiken in XML beschreibt.

SVG basiert auf XML, was bedeutet, dass jedes Element in SVG DOM verfügbar ist. Sie können einem bestimmten Element einen JavaScript -Ereignisprozessor hinzufügen.

In SVG wird jede gezogene Grafik als Objekt angesehen. Wenn sich das Attribut des SVG -Objekts ändert, kann der Browser die Grafiken automatisch reproduzieren.

Merkmale:

Nicht abhängige Lösung

Support -Event -Prozessor

Die am besten geeignete Anwendung mit großen Rendering -Bereichen (z. B. Google Map)

Eine hohe Komplexität verlangsamt das Rendering (die Anwendung eines übermäßigen DOM ist nicht schnell))

Nicht für Spielanwendungen geeignet

Leinwand zeichnet 2D -Grafiken über JavaScript.

Leinwand wird von Pixeln gerendert.

In Canvas wird die Grafik, sobald sie gezogen ist, die Aufmerksamkeit des Browsers nicht weiter erregt. Wenn sich der Standort ändert, muss die gesamte Szene auch wieder verschrieben werden, einschließlich eines Objekts, das möglicherweise von Grafiken abgedeckt wurde.

Merkmale:

Abhängigkeiten

Unterstützen Sie keinen Event -Prozessor

Schwache Fähigkeit zur Rendite von Text -Rendern

Kann das Ergebnisbild im .png- oder .jpg -Format speichern

Das am besten geeignete Spiel -intensive Spiel, von denen viele häufig bemalt sind

Einfaches Beispiel:

 <SVG Breite = 100% Höhe = 100%> <Kreis Cx = 300 Cy = 60 r = 50 Stroke =#FF0 STRECE-WIDTH = 3 FILL = rot /> < /svg>

In der Vergangenheit waren die im Browser angezeigten Grafiken wie JPEG, GIF usw. alle Grafiken. Im Gitterbild definiert die Bilddatei den Farbwert jedes Pixels im Bild. Der Browser muss diese Werte lesen und entsprechende Aktionen ausführen. Dieses Bild hat eine starke Reproduktionsfähigkeit, wird jedoch in einigen Fällen unzureichend erscheint. Wenn der Browser beispielsweise in verschiedenen Größen angezeigt wird, muss der Browser normalerweise den Wert für Pixel einfügen oder erraten, die im Originalbild nicht vorhanden sind. Darüber hinaus ist die Animation für die Bitmap auf die Animation beschränkt, die die Art der rollenden Bücher generiert, dh schnell und kontinuierlich separate Bilder anzeigen.

Das Vektordiagramm wird angegeben, um die für jeden Pixelwert erforderlichen Anweisungen anstelle des angegebenen Wertes selbst zu bestimmen, der einen Teil dieser Schwierigkeiten überwindet. Beispielsweise liefern die Vektorgrafiken keine Pixelwerte mehr für einen Durchmesser von einem Zoll, sondern geben den Browser an, einen Durchmesser mit einem Zoll -Kreis zu erstellen und dann den Browser (oder Stecker -In -) den Rest durchzuführen. Dadurch werden viele Einschränkungen für die Gittergrafik unter Verwendung von Vektorgrafiken beseitigt, solange der Browser weiß, dass er einen Kreis zeichnen muss. Wenn das Bild dreimal so groß wie die normale Größe angezeigt werden muss, wird der Browser verwendet, um einen Kreis gemäß der richtigen Größe zu zeichnen, ohne die gemeinsame Insertionsmethode des Gitterbildes durchzuführen. In ähnlicher Weise können die vom Browser empfangenen Anweisungen an die externen Informationsquellen (wie die Anwendung und die Datenbank) einfacher zu binden sein

Im HTML -System ist die am häufigsten verwendete Vektoring -Technologie SVG und HTML5 -neu hinzugefügte Leinwandelemente. Beide Technologien unterstützen das Zeichnen von Vektorkarten und Gitter.

Die Skalierungsvektorgrafik (SVG (SVG) ist eine Sprache, die die zweidimensionalen Grafiken beschreibt (SVG folgt streng der XML -Syntax). SVG ermöglicht drei Arten von Grafikobjekten: Vektorgrafiken (z. B. Pfade aus linearem und Kurven), Bilder und Texten. Grafikobjekte (einschließlich Text) können gepackt, stilisiert, transformiert und in die zuvor vorgestellten Objekte kombiniert werden. Zu den SVG -Funktionssets gehören verschachtelte Umwandlung, Scherpfade, Alpha -Masken und Vorlagenobjekte.

SVG -Zeichnung ist interaktiv und dynamisch. Beispielsweise können Sie Skripte verwenden, um Animationen zu definieren und auszulösen. Dies ist im Vergleich zu Flash sehr leistungsfähig. Flash ist eine binäre Datei, die schwieriger zu erstellen und zu ändern ist. SVG ist eine Textdatei, und der dynamische Betrieb ist recht einfach. Darüber hinaus bietet SVG direkt verwandte Elemente, um die Animation zu vervollständigen, die sehr bequem zu betreiben ist.

SVG ist mit anderen Webstandards kompatibel und unterstützt das Dokumentobjektmodell DOM direkt. Dies ist im Vergleich zu den Leinwand in HTML5 auch sehr leistungsfähig (hier beachten Sie hier, dass die SVG auch eine ähnliche Leinwand verwendet, um die SVG -Grafiken anzuzeigen. Sie werden feststellen Nicht klar, dass es sich um die Leinwand von SVG handelt, es bezieht sich auf das Canvas -Element in HTML5). Daher kann es bequem sein, das Skript zu verwenden, um viele erweiterte Anwendungen von SVG zu erreichen. Und die Grafikelemente von SVG unterstützen im Grunde standardmäßige Ereignisse in DOM. Eine große Anzahl von Ereignisverarbeitungsprogrammen (z. B. Onmouseover und Onclick) kann jedem SVG -Grafikobjekt zugewiesen werden. Obwohl die Rendergeschwindigkeit von SVG nicht so gut ist wie das Canvas -Element, kann er in der DOM -Operation sehr flexibel ist.

SVG kann als Protokoll oder Sprache sein;

SVG ist in HTML5 nicht etwas, aber es ist auch eine der technischen Techniken auf der Seite und lasst es uns zu diesem Thema setzen.

Im Vergleich zu anderen Bildformaten hat SVG viele Vorteile (viele Vorteile stammen aus den Vorteilen der Vektorkarte):

• Die SVG -Datei ist reine XML, die durch viele Tools (z. B. Notepad) gelesen und geändert werden kann.

• Im Vergleich zu JPEG- und GIF -Bildern ist SVG kleiner und komprimiert.

• SVG ist skalierbar und kann vergrößert werden, wenn die Bildqualität verringert wird.

• Der Text im SVG -Bild ist optional und auch verfügbar (geeignet für die Erstellung von Karten).

• SVG kann mit der Java -Technologie laufen.

• SVG ist der Standard der Offenheit.

Der Hauptkonkurrent von SVG ist Flash. Im Vergleich zu Flash ist der größte Vorteil von SVG, dass es mit anderen Standards (wie XSL und DOM) kompatibel ist und bequem zu bedienen ist, während Flash eine unpopuläre Privattechnologie ist. Andere, wie Speicherformate und dynamische Grafiken, nutzen auch einen großen Vorteil.

Der Browser, der HTML5 und SVG unterstützt, ist hier nicht der Schwerpunkt der Diskussion. Für Browser, die SVG direkt unterstützen, verwendet SVG hauptsächlich zwei Seiten und zwei Möglichkeiten.

Innere mit HTML vereint

SVG ist das Standard -HTML -Element. Schreiben Sie es einfach direkt an HTML.

 <? -> <titels> Meine erste SVG -Seite </title> </head> <body> <Svg xmlns = http://www.w3.org/2000/svg Version = 1.1 width = 200px height = 200px> <st> x = 0 y = 0 Breite = 100% Höhe = 100% FILL = keiner Strich = schwarz/> <Kreis Cx = 100 Cy = 100 r = 50 Stil: Schwarz; > < /body> < /html>

Bitte beachten Sie, dass der Beginn der XML -Anweisung zu Beginn und der Namensraum der SVG, XMLNs, Versionsversion usw. hauptsächlich das Problem der Kompatibilität berücksichtigt.

Unabhängige SVG -Datei

Das unabhängige SVG bezieht sich auf die Bereitstellung eines grafischen Vektor -Dateiformats, indem die SVG -Dateierweiterung erweitert wird. Diese SVG -Datei ist in den Browser eingebettet.

1. Die unabhängige SVG -Datei/Seite, die definierte Vorlage ist im Grunde den folgenden:

 <SVG Breite = 100% Höhe = 100%> <!-SVG Markup hier .-> </SVG>

Speichern Sie solche Textdateien in Dateien mit SVG als Erweiterung wie Sun.svg.

2.html verweist auf die externe SVG -Datei.

Verwenden Sie Objekt- oder IMG -Elemente, um die SVG -Grafiken einzubetten, z. B. das folgende Beispiel:

 <! Implementieren Sie den Fallback-Code hier oder zeigen Sie eine Nachricht an:-> <p> Ihr Browser unterstützt das Upgrade auf einen modernen Browser nicht. = 10 Breite = 30 Höhe = 30 Strich = Schwarz Füll = transparente Schlaganfall-Breite = 5/> <rad = 10 rx = 10 Breite = 30 Höhe = 30 Trke = Schwarz Füll = transparente Schlaganfall-Width = 5/> <Kreis Cx = 25 cy = 75 r = 20 Strich = Rotfüllung = transparente Stroke-Width = 5/> <ellipse cx = 75 rx = 20 ry = 5 s try 10 x2 = 50 y1 = 110 y2 = 150 Strich = Orangenfüllung = transparente Schlaganfall-Breite = 5/> <Polyline-Punkte = 6 0 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145 STROKE = Orange Fill = Transparente Schlaganfall-Breite = 5/> <Polygonpunkte = 50 160 55 180 60 65 205 305 205 40 180 45 18 0 Strich = grüne Füllung = transparente Schlaganfall-Width = 5/> <Pfad D = M20, 230 Q40, 205 50, 230 T90, 230 FILL = keiner Schlaganfall = blaue Schlaganfall-Breite = 5/SVG>

Dieses Beispiel zeichnet viele Formen: normale Rechtecke, Rechtecke mit abgerundeten Ecken, rund, oval, gerade, Faltung, Polygon und Pfad. Dies sind grundlegende grafische Elemente. Obwohl es viele Möglichkeiten gibt, eine Grafik zu zeichnen, wie z. B. Rechtecke, können mit Rektion implementiert werden oder mit Pfad implementiert werden, aber wir sollten trotzdem versuchen, den Inhalt des SVG kurz und intelligent und intelligent zu halten, einfach zu lesen.