Was ist SVG?
- SVG steht für Scalable Vector Graphics
- SVG wird verwendet, Grafiken für das Web zu definieren
- SVG ist eine W3C-Empfehlung
Scalable Vector Graphics (SVG) ist ein XML-basierte Vektor-Bildformat für zweidimensionale Grafiken mit Unterstützung für Interaktivität und Animation. Die SVG-Spezifikation ist ein offener Standard, der von dem seit 1999 Wide Web Consortium (W3C) World entwickelt.
SVG-Bilder und deren Verhalten werden in XML-Textdateien definiert. Dies bedeutet, dass sie durchsucht werden können, indiziert, scripted und komprimiert. Als XML-Dateien, SVG-Bilder können mit einem beliebigen Texteditor erstellt und bearbeitet werden, sowie mit Zeichensoftware.
Alle wichtigen modernen Web-Browser-inklusive Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari und Microsoft Edge-have SVG Rendering-Unterstützung.
Das HTML - Code <svg> Element
Das HTML <svg> Element (introduced in HTML5) ist ein Container für SVG - Grafiken.
SVG hat mehrere Methoden zum Zeichnen von Pfaden, Boxen, Kreise, Text und Grafiken.
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser - Version, die das voll unterstützt <svg> Element.
| Element | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | 9.0 | 3.0 | 3.2 | 10.1 |
SVG-Kreis
Beispiel
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html> Versuch es selber " SVG Rectangle
rgb (0,0,0) ">
Beispiel
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
SVG abgerundetes Rechteck
Sorry, Ihr Browser unterstützt keine Inline-SVG.
Beispiel
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
SVG Stern
Sorry, Ihr Browser unterstützt keine Inline-SVG.
Beispiel
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG Logo
SVG Sorry, Ihr Browser unterstützt keine Inline-SVG.
Beispiel
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
Unterschiede zwischen SVG und Canvas
SVG ist eine Sprache zur Beschreibung 2D-Grafiken in XML.
Canvas zeichnet 2D - Grafiken, on the fly (with a JavaScript) .
SVG ist XML-basiert, was bedeutet, dass jedes Element innerhalb des SVG DOM zur Verfügung steht. Sie können JavaScript-Event-Handler für ein Element anhängen.
In SVG, jede gezeichnete Form als Objekt in Erinnerung hat. Wenn Attribute eines SVG-Objekt geändert werden, kann der Browser automatisch wieder machen, die Form.
Canvas ist Pixel für Pixel gerendert. In Leinwand, sobald die Grafik gezeichnet wird, wird sie durch den Browser vergessen. Wenn seine Position geändert werden soll, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die von der Grafik abgedeckt worden sein könnte.
Vergleich von Canvas und SVG
Die folgende Tabelle zeigt einige wichtige Unterschiede zwischen Canvas und SVG:
| Canvas | SVG |
|---|---|
|
|
Um mehr über SVG erfahren wollen , lesen Sie bitte unsere SVG Tutorial .