Heim >Web-Frontend >H5-Tutorial >HTML5-SVG-Studienführer – SVG-Grundlagen_HTML5-Tutorial-Fähigkeiten

HTML5-SVG-Studienführer – SVG-Grundlagen_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:47:011727Durchsuche

Baidu-Enzyklopädie:

SVG Scalable Vector Graphics ist ein auf Extensible Markup Language (XML) basierendes Grafikformat zur Beschreibung zweidimensionaler Vektorgrafiken. SVG ist ein neues zweidimensionales Vektorgrafikformat, das vom W3C entwickelt wurde und auch der Netzwerk-Vektorgrafikstandard in der Spezifikation ist. SVG folgt strikt der XML-Syntax und verwendet eine Beschreibungssprache im Textformat zur Beschreibung von Bildinhalten. Daher handelt es sich um ein Vektorgrafikformat, das unabhängig von der Bildauflösung ist.

Was ist SVG?

SVG steht für Scalable Vector Graphics
SVG wird verwendet, um vektorbasierte Grafiken für das Web zu definieren
SVG verwendet das XML-Format, um Grafiken zu definieren
SVG-Bilder werden vergrößert oder in der Größe geändert. Die Grafikqualität geht nicht verloren
SVG ist ein Standard des World Wide Web Consortium
SVG ist ein integraler Bestandteil von W3C-Standards wie DOM und XSL

Der Unterschied zwischen

Canvas und SVG:
 SVG
 SVG ist eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet.
SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. Sie können einem Element einen JavaScript-Ereignishandler hinzufügen.
 In SVG wird jede gezeichnete Form als Objekt betrachtet. Ändern sich die Eigenschaften eines SVG-Objekts, kann der Browser die Grafik automatisch reproduzieren.
Funktionen:
Nicht abhängig von der Auflösung
Unterstützt Ereignishandler
Am besten geeignet für Anwendungen mit großen Rendering-Bereichen (z. B. Google Maps)
Hohe Komplexität verlangsamt das Rendering (alle Anwendungen, die DOM übermäßig nutzen). sind nicht schnell)
 Nicht für Spieleanwendungen geeignet
Canvas
Canvas zeichnet 2D-Grafiken über JavaScript.
Canvas wird Pixel für Pixel gerendert.
Sobald die Grafik im Canvas gezeichnet ist, erhält sie nicht mehr die Aufmerksamkeit des Browsers. Wenn sich die Position ändert, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise von Grafiken verdeckt wurden.
Funktionen:
Auflösungsabhängig
Keine Unterstützung für Event-Handler
Schwache Textwiedergabefunktionen
Möglichkeit, Ergebnisbilder im .png- oder .jpg-Format zu speichern
Am besten für bildintensive Anwendungen, Spiele wo viele Objekte häufig neu gezeichnet werden

SVG-Beispiel:


Code kopieren
Der Code lautet wie folgt:




Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn