HTML5 SVG 2D Einführung 1 – SVG (Skalierbare Vektorgrafiken) Übersicht

HTML5 SVG 2D Einführung 1 – SVG (Skalierbare Vektorgrafiken) Übersicht_html5 Tutorial-Tipps

WBOY

Freigeben： 2016-05-16 15:50:07

Original

1597 Leute haben es durchsucht

Bitmaps und Vektorgrafiken
Früher waren alle in Browsern angezeigten Grafiken wie JPEG, GIF usw. Bitmaps, und diese Bildformate basierten auf Rastern. In einem Rasterbild definiert die Bilddatei den Farbwert jedes Pixels im Bild. Der Browser muss diese Werte lesen und entsprechend handeln. Die Wiedergabefähigkeit dieser Art von Bildern ist relativ gut, erscheint jedoch in manchen Situationen unzureichend. Wenn ein Browser beispielsweise ein Bild in unterschiedlichen Größen anzeigt, entstehen häufig gezackte Kanten, und der Browser muss Werte für Pixel interpolieren oder erraten, die im Originalbild nicht vorhanden sind. Darüber hinaus beschränkt sich das Animieren von Bitmaps bestenfalls auf die Erstellung von „Flip-Book“-Animationen, bei denen einzelne Bilder in schneller Folge angezeigt werden.

Vektorgrafiken überwinden einige dieser Schwierigkeiten, indem sie die Anweisungen angeben, die zur Bestimmung des Werts jedes Pixels erforderlich sind, anstatt die Werte selbst anzugeben. Anstatt beispielsweise Pixelwerte für einen Kreis mit einem Durchmesser von einem Zoll anzugeben, weisen Vektorgrafiken den Browser an, einen Kreis mit einem Durchmesser von einem Zoll zu erstellen und den Browser (oder das Plug-in) den Rest erledigen zu lassen. Dadurch werden viele Einschränkungen von Rastergrafiken aufgehoben; bei Vektorgrafiken weiß der Browser nur, dass er einen Kreis zeichnen muss. Wenn ein Bild in dreifacher Größe angezeigt werden muss, zeichnet der Browser einfach den Kreis in der richtigen Größe, ohne die übliche Interpolation von Rasterbildern durchführen zu müssen. Ebenso erhält der Browser Anweisungen, die einfacher mit externen Informationsquellen wie Anwendungen und Datenbanken verknüpft werden können. Um ein Bild zu animieren, erhält der Browser lediglich Anweisungen zur Manipulation von Eigenschaften wie Radius oder Farbe.
Im HTML-System ist SVG und das neu hinzugefügte Canvas-Element von HTML5 die am häufigsten verwendete Technologie zum Zeichnen von Vektorgrafiken. Beide Technologien unterstützen das Zeichnen von Vektor- und Rasterbildern.

SVG-Übersicht
Scalable Vector Graphics (kurz SVG) ist eine Sprache, die XML verwendet, um zweidimensionale Grafiken zu beschreiben (SVG folgt strikt der XML-Syntax). SVG erlaubt drei Arten von Grafikobjekten: Vektorgrafikformen (z. B. Pfade, die aus geraden Linien und Kurven bestehen), Bilder und Text. Grafikobjekte (einschließlich Text) können gruppiert, gestaltet, transformiert und zu zuvor gerenderten Objekten kombiniert werden. Der SVG-Funktionsumfang umfasst verschachtelte Transformationen, Beschneidungspfade, Alphamasken und Vorlagenobjekte.

SVG-Zeichnungen sind interaktiv und dynamisch. Sie können beispielsweise Skripte verwenden, um Animationen zu definieren und auszulösen. Dies ist im Vergleich zu Flash sehr leistungsfähig. Flash ist eine Binärdatei, die schwierig dynamisch zu erstellen und zu ändern ist. SVG ist eine Textdatei und die dynamische Bearbeitung ist recht einfach. Darüber hinaus stellt SVG direkt relevante Elemente zur Vervollständigung der Animation bereit, was sehr bequem zu bedienen ist.

SVG ist mit anderen Webstandards kompatibel und unterstützt direkt das Document Object Model DOM. Dies ist auch ein sehr wichtiger Punkt im Vergleich zum Canvas in HTML5 (beachten Sie hier, dass SVG intern auch einen ähnlichen Canvas verwendet, um SVG-Grafiken anzuzeigen. Später werden Sie feststellen, dass viele Funktionen dem Canvas von HTML5 etwas ähneln; im Artikel Wenn es Es wird nicht explizit angegeben, dass es sich um die Leinwand von SVG handelt, es bezieht sich auf das Canvas-Element in HTML5. Daher können viele erweiterte SVG-Anwendungen einfach mithilfe von Skripten implementiert werden. Darüber hinaus unterstützen SVG-Grafikelemente grundsätzlich Standardereignisse im DOM. Jedem SVG-Grafikobjekt können eine Reihe von Event-Handlern (z. B. „onmouseover“ und „onclick“) zugewiesen werden. Obwohl die Rendering-Geschwindigkeit von SVG nicht so hoch ist wie die von Canvas-Elementen, besteht der Vorteil darin, dass DOM-Operationen sehr flexibel sind. Dieser Vorteil kann den Geschwindigkeitsnachteil vollständig ausgleichen.

SVG ist sowohl ein Protokoll als auch eine Sprache; es ist sowohl ein Standardelement von HTML als auch ein Bildformat.
SVG ist nichts in HTML5, gilt aber als eine der beliebtesten Webtechnologien und wird daher vorerst in dieses Thema aufgenommen.

Vergleich von SVG und anderen Bildformaten
Im Vergleich zu anderen Bildformaten hat SVG viele Vorteile (viele Vorteile ergeben sich aus den Vorteilen von Vektorgrafiken):
• SVG The Die Datei ist reines XML und kann von vielen Tools (z. B. Notepad) gelesen und geändert werden.
• SVG ist kleiner und komprimierbarer als JPEG- und GIF-Bilder.
• SVG ist skalierbar, kann ohne Verlust der Bildqualität vergrößert werden und kann in jeder Auflösung mit hoher Qualität gedruckt werden.
• Text in SVG-Bildern ist optional und durchsuchbar (ideal zum Erstellen von Karten).
• SVG kann mit Java-Technologie ausgeführt werden.
• SVG ist ein offener Standard.

Vergleich von SVG und Flash
Der Hauptkonkurrent von SVG ist Flash. Im Vergleich zu Flash besteht der größte Vorteil von SVG darin, dass es mit anderen Standards (wie XSL und DOM) kompatibel und einfach zu bedienen ist, während Flash eine proprietäre Technologie ist, die nicht Open Source ist. Auch in anderen Aspekten wie dem Speicherformat und dynamisch generierten Grafiken bietet SVG große Vorteile.

Wie SVG dargestellt wird
Der Browser, der HTML5 und SVG unterstützt, steht hier nicht im Mittelpunkt der Diskussion. Grundsätzlich reicht es aus, den neuesten Chrome- oder FireFox-Browser (IE) zu installieren Benutzer installieren bitte einfach IE9. Für Versionen vor IE9 müssen Sie das SVG-Plugin installieren, das hier übersprungen wird. Bei Browsern, die SVG direkt unterstützen, verwendet SVG hauptsächlich zwei Darstellungsmethoden auf beiden Seiten.

Inline in HTML
SVG ist ein Standard-HTML-Element, das direkt in HTML geschrieben werden kann. Siehe folgendes Beispiel:

Code kopieren

Das Der Code lautet wie folgt:

🎜>
;/svg>

Speichern Sie eine solche Textdatei als Datei mit einer SVG-Erweiterung, z. B. sun.svg. Eine solche Datei kann direkt mit einem Browser geöffnet oder als Referenz eingebettet werden Seiten. 2.HTML verweist auf externe SVG-Dateien. Verwenden Sie einfach Objekt- oder IMG-Elemente, um SVG-Grafiken einzubetten, wie zum Beispiel das folgende kleine Beispiel:

Code kopieren

Der Code lautet wie folgt:

Tatsächlich kann SVG auch in andere XML-Dokumente eingefügt werden, oder es kann wie andere XML-Dokumente mit XML-bezogenen Technologien formatiert und überprüft werden. Dies ist nicht der Punkt und wird hier weggelassen. Die Rendering-Reihenfolge von SVG

SVG wird strikt in Übereinstimmung mit der Reihenfolge der definierten Elemente gerendert, was sich von HTML unterscheidet, das auf Z-Index-Werten basiert, um die Ebenensteuerung zu steuern . In SVG werden vorne geschriebene Elemente zuerst und hinten geschriebene Elemente zuletzt gerendert. Das später gerenderte Element überdeckt das vorherige Element, obwohl es aufgrund des Transparenzeffekts manchmal so aussieht, als wäre es nicht abgedeckt, SVG wird jedoch tatsächlich in strenger Reihenfolge gerendert.
Hinweis: SVG ist in XML definiert, daher wird die Groß-/Kleinschreibung beachtet, was sich von HTML unterscheidet.

Praktische Referenz
:
Offizielle Dokumentation:
http://www.w3.org/TR/SVG11/

Skriptindex:
http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum:
https://developer.mozilla.org/en/ SVG

Beliebte Referenz:
http://www.chinasvg.com/