Einführung in HTML5 SVG 2D 1 - SVG (Skalierbare Vektorgrafik)

In der Vergangenheit waren Grafiken in Browsern wie JPEG, GIF usw. Bitmaps, und diese Bildformate basierten auf Raster. In einem Rasterbild definiert die Bilddatei den Farbwert jedes Pixels im Bild. Der Browser muss diese Werte lesen und entsprechende Maßnahmen ergreifen. Diese Art der Bildreproduktionsfähigkeit ist relativ stark, wird jedoch in einigen Fällen unzureichend erscheint. Wenn beispielsweise ein Browser ein Bild an verschiedenen Größen anzeigt, wird normalerweise eine gezackte Kante erzeugt, und der Browser muss Werte für Pixel einfügen oder erraten, die im Originalbild nicht vorhanden sind. Dies führt zu Bildverzerrungen. Darüber hinaus beschränkt sich die Animation für Bitmaps auf die Erzeugung von geschnittenen Buchanimationen, dh das Anzeigen einzelner Bilder auf schnelle und kontinuierliche Weise.

Das Vektordiagramm überwindet einige dieser Schwierigkeiten, indem sie Anweisungen angeben, die erforderlich sind, um die Werte jedes Pixels zu bestimmen, anstatt die Werte selbst anzugeben. Anstatt beispielsweise Pixelwerte für einen Kreis mit einem Zolldurchmesser bereitzustellen, geben Vektorgrafiken den Browser an, einen Kreis mit einem Zolldurchmesser zu erstellen und dann den Browser (oder Plugin) den Rest durchzuführen. Dies beseitigt viele Einschränkungen der Rastergrafik. Mit Vector -Grafiken weiß der Browser nur, dass er einen Kreis ziehen muss. Wenn das Bild dreimal so groß wie die normale Größe angezeigt werden muss, zeichnet der Browser einfach den Kreis auf der richtigen Größe, ohne die übliche Einfügungsmethode von Rasterbildern durchzuführen. In ähnlicher Weise können vom Browser empfangene Anweisungen leichter an externe Informationsquellen (z. B. Anwendungen und Datenbanken) gebunden sein. Um das Bild zu animieren, muss der Browser nur Anweisungen zur Manipulation von Eigenschaften (z. B. Radius oder Farbe) erhalten.

Im HTML -System sind die am häufigsten verwendeten Technologie zum Zeichnen von Vektorgrafiken die neu hinzugefügten Leinwandelemente in SVG und HTML5. Beide Technologien unterstützen das Zeichnen von Vektor- und Rasterdiagrammen.

Skalierbare Vektorgrafiken (skalierbare Vektorgrafiken, kurz SVG) ist eine Sprache, die mit XML zweidimensionale Grafiken beschreibt (SVG folgt die XML-Syntax ausschließlich). SVG ermöglicht drei Arten von Grafikobjekten: Vektorgrafikformen (z. B. Pfade aus geraden Linien und Kurven), Bildern und Text. Grafikobjekte (einschließlich Text) können gruppiert, gestylt, konvertiert und zu zuvor gerenderten Objekten kombiniert werden. Das SVG -Funktionssatz enthält verschachtelte Transformationen, Ausschnittpfade, Alpha -Masken und Vorlagenobjekte.

SVG -Zeichnungen sind interaktiv und dynamisch. Beispielsweise können Skripte verwendet werden, um Animationen zu definieren und auszulösen. Dies ist im Vergleich zu Flash sehr leistungsfähig. Flash ist eine binäre Datei, und es ist schwierig, dynamisch zu erstellen und zu ändern. Während SVG eine Textdatei ist, sind dynamische Operationen recht einfach. Darüber hinaus bietet SVG direkt relevante Elemente zum Abschluss von Animationen, die sehr bequem zu betreiben sind.

SVG ist mit anderen Webstandards kompatibel und unterstützt direkt das Dokumentobjektmodell DOM. Dies ist auch ein sehr leistungsstarker Punkt im Vergleich zu den Leinwand in HTML5 (beachten Sie hier, dass SVG auch etwas Ähnliches wie Leinwand verwendet, um SVG -Grafiken anzuzeigen. Später werden Sie feststellen, dass viele Merkmale der Leinwand in HTML5 ein bisschen ähnlich sind. Wenn der Artikel nicht eindeutig angibt, dass es sich um die Leinwand von SVG handelt, räumen Sie das CAN -Element im CAN -Element im CAN -Element. Daher können viele erweiterte Anwendungen von SVG einfach mit Skripten implementiert werden. Darüber hinaus unterstützen die grafischen Elemente von SVG im Wesentlichen Standardereignisse in der DOM. Eine große Anzahl von Ereignis -Handlern wie Onmouseover und Onclick kann jedem SVG -grafischen Objekt zugewiesen werden. Obwohl die Rendergeschwindigkeit von SVG nicht so gut ist wie das Canvas -Element, ist es besser, da die DOM -Operation sehr flexibel ist und dieser Vorteil den Nachteil der Geschwindigkeit vollständig ausgleichen kann.

SVG kann sowohl ein Protokoll als auch eine Sprache sein; Es ist sowohl ein Standardelement von HTML als auch ein Bildformat.

SVG ist in HTML5 nicht etwas, sondern auch eine der beliebten Technologien für die Seite. Lassen Sie es uns in dieses Thema einfügen.

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

• SVG -Dateien sind reines XML und können durch viele Tools (z. B. Notepad) gelesen und geändert werden.

• SVG ist kleiner und kompressibler als JPEG- und GIF -Bilder.

• SVG ist skalierbar, kann ohne Abbau der Bildqualität vergrößert und bei jeder Auflösung mit hoher Qualität gedruckt werden.

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

• SVG kann mit der Java -Technologie laufen.

• SVG ist ein offener Standard.

Der Hauptkonkurrent von SVG ist Flash. Im Vergleich zu Flash ist der größte Vorteil von SVG, dass er mit anderen Standards (wie XSL und DOM) kompatibel ist und einfach zu bedienen ist, während Flash eine unbefristete Quell -Privattechnologie ist. SVG hat auch einen großen Vorteil in anderen Aspekten wie Speicherformaten, dynamischer Grafikgenerierung usw.

In Bezug auf Browser, die HTML5 und SVG unterstützen, steht hier nicht der Schwerpunkt der Diskussion. Grundsätzlich ist es fast mit dem neuesten Chrome- oder Firefox-Browser fertig (IE-Benutzer müssen IE9 installieren. Was die Versionen vor IE9 betrifft, werde ich es hier überspringen, wenn Sie SVG-Plug-Ins installieren müssen). Für Browser, die SVG direkt unterstützen, verwendet SVG hauptsächlich zweiseitige und zweiseitige Rendering-Methoden.

SVG ist ein Standard -HTML -Element. Schreiben Sie es einfach direkt in HTML und siehe das folgende Beispiel:

<? xml Version = "1.0" coding = "utf-8"?>

<! DocType html>

<html>

<kopf>

<!-<meta content = "text /html; charset = utf-8" http-äquiv = "content-type" />->

<titels> Meine erste SVG -Seite </title>

</head>

<body>

<Svg xmlns = "http://www.w3.org/2000/svg" Version = "1.1"

width = "200px">

<rect x = "0" y = "0"

fill = "keine" stroke = "schwarz"/>

<Kreis cx = "100" Cy = "100" r = "50"

style = "stroke: schwarz; füllen: rot;"/>

</svg>

</body>

</html>

Bitte beachten Sie, dass der Beginn der XML -Erklärung, die sich mit dem SVG -Namespace XMLNs, der Versionsversion und anderen Teilen bezieht, hauptsächlich unter Berücksichtigung von Kompatibilitätsproblemen. Diese Teile sind in HTML5 im Grunde nicht erforderlich (es ist besser, es selbst zu tun, ob sie es schreiben oder nicht).

Das unabhängige SVG bezieht sich auf die Bereitstellung von Vektorgrafikdateiformaten mithilfe von SVG -Dateierweiterungen. Einbetten Sie diese SVG -Datei in den Browser ein und Sie können sie verwenden.

1. Unabhängige SVG -Dateien/Seiten sind die definierten Vorlagen im Grunde genommen mit den folgenden:

<Svg>

<!- ​​SVG Markup hier. ->

</svg>

Speichern Sie solche Textdateien in Dateien mit SVG als Erweiterung wie Sun.svg. Solche Dateien können direkt im Browser geöffnet und durchsucht oder auf anderen Seiten als Referenz eingebettet werden.

2. HTML Referenzen externe SVG -Dateien.

Verwenden Sie einfach das Objekt- oder IMG -Element, um das SVG -Diagramm einzubetten, z. B. das folgende kleine Beispiel:

<! DocType html>

<html>

<kopf>

<titels> Meine erste SVG -Seite </title>

</head>

<body>

<Objektdaten = "sun.svg" type = "bild/svg+xml"

width = "300px">

<!-Fallback-Code hier implementieren oder eine Nachricht anzeigen:->

<P> Ihr Browser unterstützt SVG nicht - bitte upgrade auf einen modernen Browser. </p>

</Object>

<img src = "sun.svg" />

</body>

</html>

Tatsächlich kann SVG auch in andere XML-Dokumente platziert oder mit XML-bezogenen Technologien wie anderen XML-Dokumenten formatiert und verifiziert werden. Dies ist nicht der Punkt, also wird es hier weggelassen.

SVG wird ausschließlich in der Reihenfolge der Definition von Elementen gerendert, was sich von HTML unterscheidet, die die Hierarchie durch Z-Index-Werte kontrolliert. In SVG werden die vorne geschriebenen Elemente zuerst und die im Rücken geschriebenen Elemente später wiedergegeben. Die späteren Elemente werden die vorherigen Elemente überschreiben. Obwohl er manchmal von Transparenz betroffen ist und nicht überschrieben zu sein scheint, wird SVG tatsächlich ausschließlich in Reihenfolge der Sequenz gerendert.

HINWEIS: SVG ist in XML definiert, so dass es sich bei der HTML unterscheidet.

Offizielles Dokument: 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/