Die Verwendung von Bildern in HTML eignet sich hervorragend für multimediareiche Websites. Alles, was Sie tun müssen, ist, dem HTML-Code ein Tag hinzuzufügen, und viola, Ihr Browser zeigt das Bild Ihrer Wahl an und fügt sogar einen Link hinzu. Etwas beunruhigend wird es, wenn Sie wissen, dass das Bild oder Diagramm vergrößert wird, da ein JPG- oder PNG-Bild keine weiteren Details anzeigt, sobald es über die 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 so weit wie nötig vergrößert werden, und die Details verschwinden nie. SVGs gibt es nicht nur in der Webtechnologie, aber ihre Verwendung in HTML ist wirklich nett. SVG eignet sich für Diagramme, Vektoren, Diagramme und Grafiken im Browser.
Syntax der Einbettung 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.
Syntax:
<svg width="width here" height="height here "> …. …. …. …. </svg>
Im Folgenden finden Sie einige Beispiele für Vektoren, die in HTML5 erstellt und eingebettet werden können:
Code:
<!DOCTYPE html> <html> <body> <svg width="500" height="600"> <rect width="400" height="200" style="fill:rgb(0,0,200);stroke-width:5;stroke:rgb(255,0,0)"/> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Ausgabe:
Für ein Quadrat mit abgerundeten Ecken müssen wir neben der Größe und den Abmessungen des Quadrats auch den Radius der Ecken mithilfe von rx und ry definieren.
Code:
<!DOCTYPE html> <html> <body> <svg width="500" height="500"> <rect x="100" y="100" rx="30" ry="30" width="300" height="300" style= "fill:green stroke:blue; stroke-width:5 ; opacity:0.5" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Ausgabe:
Code:
<!DOCTYPE html> <html> <body> <svg width= "400" height= "400"> <circle cx= "100" cy= "100" r="90" stroke= "red" stroke-width="1" fill="grey" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Ausgabe:
Wir können die
Code:
<html> <body> <svg width= "400" height= "400"> <line x1 = "5" y1 = "5" x2 = "300" y2 = "300" style = "stroke:yellow; stroke-width:3"/> </svg> </body> </html>
Ausgabe:
Wir können die
Code:
<!DOCTYPE html> <html> <body> <svg height="300" width="300"> <ellipse cx="150" cy="100" rx="120" ry="70" style="fill:brown; stroke:green; stroke-width:3" /> Sorry but this browser does not support inline SVG.</svg> </body> </html>
Ausgabe:
Der Tag
Code:
<!DOCTYPE html> <html> <body> <svg height="300" width="600" > <polygon points="10,10 250,250 200,300" style="fill: red; stroke: black; stroke-width: 2" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Ausgabe:
Polylinie wird verwendet, um eine Form zu zeichnen, die nur aus einer geraden Linie besteht. Beachten Sie, dass auch diese Leitungen angeschlossen werden müssen. Hier ist ein Beispiel für eine Polylinienimplementierung in HTML5.
Code:
<!DOCTYPE html> <html> <body> <svg height="300" width="600"> <polyline points="10,10 60,60 70,100 80,120 300,200 250,300" style="fill: none; stroke: black; stroke-width: 3" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Ausgabe:
Der Text kann in vielen Situationen für jede SVG-Datei erforderlich sein, beispielsweise zum Beschriften eines Diagramms usw. Glücklicherweise gibt es einen
Code:
<!DOCTYPE html> <html> <body> <svg height="300" width="500"> <text x="10" y="20" fill="purple" transform="rotate(30 20,40)">Here is an example, it's very examply </text> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Ausgabe:
Da wir nun mit den Grundlagen fertig sind, erstellen wir einen Stern, der mit Hilfe von SVG erstellt wird.
Code:
<!DOCTYPE html> <html> <body> <svg width="400" height="400"> <polygon points="110,10 50,198 200,78 30,78 170,198" style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Ausgabe:
Sie können in SVG-HTML-Canvas lineare und radiale Farbverläufe verwenden. Der Farbverlauf muss in der
Code:
<!DOCTYPE html> <html> <body> <svg height="300" width="400"> <defs> <linearGradient id="gr1" x1="0%" y1="60%" x2="100%" y2="0%"> <stop offset="5%" style="stop-color:rgb(255,255,3);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="125" cy="150" rx="100" ry="60" fill="url(#gr1)" /> Sorry but this browser does not support inline SVG. </svg> </body> </html>
Ausgabe:
Bei Websites, auf denen Diagramme und Diagramme verwendet werden sollen, sind SVGs ein Lebensretter. Die meisten modernen Webbrowser unterstützen auch SVG und sind nicht nur skalierbar. Ein weiterer Vorteil der Verwendung von SVG ist die Dateigröße. Da es sich nur um ein bisschen Code handelt, können SVGs im Vergleich zu herkömmlichen Bildern einen sehr geringen Speicherbedarf und eine sehr geringe Bandbreite haben.
Das obige ist der detaillierte Inhalt vonHTML SVG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
