W3docs
de
Anmelden

SVG in HTML5

On this page, you can learn about embedding SVG directly into HTML pages, see an example with its explanation, which will help you to create your own.

In HTML5 können SVG-Elemente direkt in Ihre HTML-Seite eingebettet werden.

danger

Wenn das SVG in XML geschrieben ist, müssen alle Elemente ordnungsgemäß geschlossen werden!

Formelemente in SVG

SVG verfügt über einige vordefinierte Formelemente. Hier sind sie:

Beispiel zum Einbetten von SVG in eine HTML-Seite:

Beispiel zum Einbetten von SVG in eine HTML-Seite

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>
Probier es selbst »

Verstehen wir nun den Code:

  • Ein SVG-Bild beginnt immer mit einem <svg>-Tag.
  • Die Breite und Höhe des SVG-Bildes werden durch die Attribute width und height des <svg>-Elements festgelegt.
  • Das <circle>-Element zeichnet einen Kreis.
  • Die Attribute cx und cy geben die x- und y-Koordinaten des Kreismittelpunkts an. Fehlen cx und cy, wird der Mittelpunkt des Kreises auf (0, 0) gesetzt.
  • Das Attribut r wird verwendet, um den Radius des Kreises anzugeben.
  • Die Attribute stroke und stroke-width steuern das Erscheinungsbild des Umrisses einer Form. In unserem Codebeispiel haben wir den Umriss des Kreises auf einen 5px breiten lila „Rand“ eingestellt.
  • Das Attribut fill legt eine Farbe innerhalb des Kreises fest. Wir haben sie auf Pink eingestellt.
  • Das SVG-Bild wird mit dem schließenden </svg>-Tag beendet.

Practice

Übung

Was sind die Hauptmerkmale des SVG-Formats in HTML5?