Heim > Artikel > Web-Frontend > HTML5-Inline-SVG-Tutorial und Unterschiede zu Canvas

HTML5-Inline-SVG-Tutorial und Unterschiede zu Canvas

零下一度Original: 2017-05-15 10:41:391448Durchsuche

Was ist SVG?

SVG bezieht sich auf SkalierbareVektorgrafikenForm (Skalierbare Vektorgrafiken)

SVG wird verwendet, um vektorbasierte Grafiken für das Web zu definieren

SVG-Verwendung XMLFormatdefinitionsgrafik

SVG-Bild verliert seine Grafikqualität nicht, wenn es vergrößert oder in der Größe geändert wird

SVG ist ein Standard des World Wide Web Consortium

SVG-Vorteile

Im Vergleich zu anderen Bildformaten (wie JPEG und GIF) bietet die Verwendung von SVG folgende Vorteile:

SVG-Bilder können mit einem Texteditor erstellt und geändert werden

SVG-Bilder können durchsucht, indiziert, mit Skripts versehen oder komprimiert werden

SVG ist skalierbar

SVG-Bilder können mit hoher Qualität in jeder Auflösung gedruckt werden

SVG kann vergrößert werden ohne Einbußen bei der Bildqualität

Browser-Unterstützung

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen Inline-SVG.

SVG direkt in HTML-Seiten einbetten

In HTML5 können Sie SVG-Elemente direkt in HTML-Seiten einbetten:

Beispiel

<!DOCTYPE html>
<html>
<body>
<svg xmlns="www.php.cn/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>

Ergebnis:

Leider unterstützt Ihr Browser kein Inline-SVG.

Um mehr über SVG-Tutorials zu erfahren, besuchen Sie bitte SVG-Tutorials.

SVG-Unterschiede zwischen Canvas

SVG ist eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet.

Canvas verwendet JavaScript zum Zeichnen von 2D-Grafiken.

SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. Sie können einem Element einen JavaScript-Ereignishandler anhängen.

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

Leinwand wird Pixel für Pixel gerendert. Sobald eine Grafik im Canvas gezeichnet ist, erregt 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.

【Verwandte Empfehlungen】

1. Besondere Empfehlung: „php Programmer Toolbox“ V0.1 Version herunterladen

2. Kostenloses h5-Online-Video-Tutorial

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonHTML5-Inline-SVG-Tutorial und Unterschiede zu Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Vorheriger Artikel：Detaillierte Einführung in Localstorage in HTML5 (Bild)Nächster Artikel：Detaillierte Einführung in Localstorage in HTML5 (Bild)

In Verbindung stehende Artikel

Mehr sehen