Einführung in HTML SVG
Die Verwendung von Bildern in HTML ist für multimediale Websites hervorragend geeignet. Alles, was Sie tun müssen, ist, dem HTML-Code und der Bratsche einen Tag hinzuzufügen. Ihr Browser zeigt dann das gewünschte Bild an und fügt sogar einen Link hinzu. In Situationen, in denen Sie wissen, dass das Bild oder Diagramm vergrößert wird, wird es etwas problematisch, da ein JPG.webp oder PNG keine weiteren Details mehr anzeigt, wenn es über seine Auflösung hinaus vergrößert wird. SVG ist die Lösung für dieses Problem. SVG steht für Scalable Vector Graphics. Wie der Name schon sagt, können diese beliebig vergrößert werden und die Details verschwinden nie. SVGs sind nicht nur für die Web-Technologie geeignet, sondern auch für HTML.
SVG ist nützlich für Diagramme, Vektoren, Diagramme und Grafiken im Browser. Erfahren Sie hier ausführlich, wie Sie sie verwenden können.
Syntax zum Einbetten von SVG in HTML
Ähnlich wie bei der Verwendung von Canvas in HTML5 gibt es ein einfaches Tag, mit dem Sie SVG in HTML5-Seiten einbetten können. Die Syntax lautet wie folgt:
…. …. …. ….
Beispiele für SVGs in HTML
Schauen wir uns nun einige Beispielvektoren an, die in HTML5 erstellt und eingebettet werden können:
Beispiel 1 - Zeichnen eines Rechtecks über SVG in HTML
Code:
Sorry but this browser does not support inline SVG.
Ausgabe:
Beispiel 2 - Zeichnen eines Quadrats mit abgerundeten Ecken in SVG
Für ein Quadrat mit abgerundeten Ecken müssen wir den Radius der Ecken mit rx, ry definieren, abgesehen von der Größe und den Abmessungen des Quadrats.
Code:
Sorry but this browser does not support inline SVG.
Ausgabe:
Beispiel # 3 - Zeichnen eines Kreises in SVG mit darin enthaltenen Umrissen und Farben
Code:
Sorry but this browser does not support inline SVG.
Ausgabe:
Beispiel # 4 - Zeichnen einer geraden Linie mit SVG in HTML5
Wir können das Tag verwenden, um eine gerade Linie in HTML5-SVGs zu zeichnen. Farbe, Linienstärke und Position können ebenfalls definiert werden.
Code:
Ausgabe:
Beispiel # 5 - Eine Sonnenfinsternis über SVG in HTML5 zeichnen
Wir können das Tag verwenden, um eine Sonnenfinsternis in HTML5-SVGs zu zeichnen. Die Farbe und Position der Sonnenfinsternis kann auch zusammen mit dem Radius definiert werden.
Code:
Sorry but this browser does not support inline SVG.
Ausgabe:
Beispiel # 6 - Erstellen eines Polygons mit SVG in HTML5
Das Tag kann in SVGs zum Erstellen von Polygonen verwendet werden. Im Tag müssen die Positionen der einzelnen Punkte angegeben werden. Füllfarben, Konturdicken usw. können ebenfalls im Code definiert werden.
Code:
Sorry but this browser does not support inline SVG.
Ausgabe:
Beispiel # 7 - Erstellen einer Polylinie mit SVG in HTML5
Mit Polylinie wird eine Form gezeichnet, die nur aus einer geraden Linie besteht. Beachten Sie, dass auch diese Leitungen angeschlossen werden müssen. Hier ist ein Beispiel für eine Implementierung von Polylinien in HTML5.
Code:
Sorry but this browser does not support inline SVG.
Ausgabe:
Beispiel # 8 - Zeichnen von Text mit SVG in HTML5
Text kann in jeder SVG in vielen Situationen erforderlich sein, z. B. beim Beschriften eines Diagramms usw. Glücklicherweise gibt es in SVG ein Tag, das verwendet werden kann. Der Text kann an einer beliebigen Position in der SVG-Datei festgelegt werden und Sie können auch die Farbe und andere Details anpassen.
Code:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Ausgabe:
Beispiel # 9 - Zeichnen eines Sterns mit SVG in HTML5
Nachdem wir mit den Grundlagen fertig sind, erstellen wir einen Stern, der mit Hilfe von SVG erstellt wird.
Code:
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
Ausgabe:
Beispiel # 10 - Verwenden eines linearen Verlaufs in SVG
Sie können lineare und radiale Verläufe in SVG verwenden. Der Farbverlauf muss im Tag verschachtelt sein. Dieses Tag wird dann im SVG-Tag markiert, um seine Verwendung zu kennzeichnen. Schauen wir uns ein Beispiel an, in dem Gradient in einer Sonnenfinsternis verwendet wird.
Code:
Sorry but this browser does not support inline SVG.
Ausgabe:
Fazit
Bei Sites, an denen Diagramme und Grafiken verwendet werden sollen, sind SVGs ein Lebensretter. Die meisten modernen Webbrowser unterstützen auch SVG und sind nicht nur skalierbar. Ein weiterer Vorteil von SVG ist die Dateigröße. Da es sich nur um ein Stück Code handelt, können SVGs im Vergleich zu herkömmlichen Bildern einen sehr geringen Speicherbedarf und eine sehr geringe Bandbreite aufweisen.
Empfohlene Artikel
Dies ist eine Anleitung zu HTML SVG. Hier diskutieren wir die Einführung und die 10 wichtigsten Beispiele für HTML-SVG mit Erläuterungen und Code-Implementierung. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -
- HTML5 Neue Elemente
- SVG gegen EPS
- HTML-Blöcke
- HTML-Frames