HTML -SVG-Grafiken
SVG definiert vektorbasierte Grafiken im XML-Format.
Was ist SVG?
- SVG steht für Scalable Vector Graphics
- SVG wird verwendet, um Grafiken für das Web zu definieren
- SVG ist eine W3C-Empfehlung
Das HTML-<svg>-Element
Das HTML <svg>-Element ist ein Container für SVG-Grafiken.
SVG verfügt über mehrere Methoden zum Zeichnen von Pfaden, Kästchen, Kreisen, Text und Grafiken.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das
<svg>Element vollständig unterstützt.
| 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>
SVG-Rechteck
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
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
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
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 Leinwand
SVG ist eine Sprache zur Beschreibung von 2D-Grafiken in XML.
Canvas zeichnet 2D-Grafiken im Handumdrehen (mit einem JavaScript).
SVG ist XML-basiert, was bedeutet, dass jedes Element innerhalb des SVG-DOM verfügbar ist. Sie können JavaScript-Ereignishandler für ein Element anhängen.
In SVG wird jede gezeichnete Form als Objekt gespeichert. Wenn Attribute eines SVG-Objekts geändert werden, kann der Browser die Form automatisch neu rendern.
Canvas wird Pixel für Pixel gerendert. In Canvas wird die Grafik, sobald sie gezeichnet wurde, vom Browser vergessen. Soll die Position geändert werden, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise von der Grafik verdeckt wurden.
Vergleich von Leinwand und SVG
Die folgende Tabelle zeigt einige wichtige Unterschiede zwischen Canvas und SVG:
| Canvas | SVG |
|---|---|
|
|
SVG-Tutorial
Um mehr über SVG zu erfahren, lesen Sie bitte unser SVG-Tutorial .