BESTE WEBSITE FÜR WEBENTWICKLER
HTML CSS JAVASCRIPT SQL PYTHON PHP JAVA KOTLIN GO C C++ C# Django WIE MAN W3.CSS AI Mehr 🔍 ◑ Bücher VERWEISE ÜBUNGEN
HTML5-Lektionen für Anfänger

Ua En Es

HTML SVG-Grafiken

❮ Prev Next ❯

SVG definiert vektorbasierte Grafiken im XML-Format.

Was ist SVG?

  • SVG steht für Scalable Vector Graphics
  • SVG wird zum Definieren von Grafiken für das Web verwendet
  • SVG ist eine W3C-Empfehlung

Das HTML-<svg>-Element

Das HTML-Element <svg> ist ein Container für SVG-Grafiken.

SVG verfügt über mehrere Methoden zum Zeichnen von Pfaden, Kästchen, Kreisen, Text und grafischen Bildern.

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element <svg> 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>
Try it Yourself »

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>
Try it Yourself »

SVG Rechteck mit abgerundeten Ecken

Leider unterstützt Ihr Browser kein 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>
Try it Yourself »

SVG Stern

Leider unterstützt Ihr Browser kein 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>
Try it Yourself »

SVG Logo

SVG Leider unterstützt Ihr Browser kein 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>
  Leider unterstützt Ihr Browser kein Inline-SVG.
</svg>
Try it Yourself »

Unterschiede zwischen SVG und Canvas

SVG ist eine Sprache zur Beschreibung von 2D-Grafiken in XML.

Canvas zeichnet 2D-Grafiken im Handumdrehen (mit JavaScript).

SVG ist XML-basiert, was bedeutet, dass jedes Element im 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. Sobald die Grafik im Canvas gezeichnet ist, wird sie vom Browser vergessen. Sollte sich die Position ändern, muss die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise von der Grafik verdeckt wurden.

Vergleich von Canvas und SVG

Die folgende Tabelle zeigt einige wichtige Unterschiede zwischen Canvas und SVG:

Canvas SVG
  • Auflösungsabhängig
  • Keine Unterstützung für Event-Handler
  • Schlechte Textwiedergabefunktionen
  • Sie können das resultierende Bild als .png oder .jpg speichern
  • Gut geeignet für grafikintensive Spiele
  • Auflösungsunabhängig
  • Unterstützung für Event-Handler
  • Am besten geeignet für Anwendungen mit großen Rendering-Bereichen (Google Maps)
  • Langsames Rendern, wenn komplex (alles, was das DOM häufig nutzt, wird langsam sein)
  • Nicht für Spieleanwendungen geeignet

SVG Lernprogramm

Um mehr über SVG zu erfahren, lesen Sie bitte unser SVG-Tutorial.

❮ Prev Next ❯

✍ Kommentare