SVG in HTML

Sie können das SVG-Element direkt in die HTML-Seite einbetten.

SVG direkt in HTML-Seite einbetten

Hier ist ein einfaches SVG-Beispiel:

Entschuldigung, Ihr Browser unterstützt Inline SVG nicht.

Dies ist der HTML-Code:

<!DOCTYPE html>
<html>
<body>
<h1>Mein erster SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Versuchen Sie es selbst.

SVG-Code- Erklärung:

  • SVG-Bilder beginnen mit dem <svg>-Element.
  • Die width- und height-Eigenschaften des <svg>-Elements definieren die Breite und Höhe des SVG-Bildes.
  • Das <circle>-Element wird verwendet, um Kreise zu zeichnen.
  • Die cx- und cy-Eigenschaften definieren die x- und y-Koordinaten des Zentrums des Kreises. Wenn cx und cy nicht gesetzt sind, wird das Zentrum auf (0, 0) gesetzt.
  • Die r-Eigenschaft definiert den Radius des Kreises.
  • Die stroke- und stroke-width-Eigenschaften steuern die Anzeige der Kontur eines Formes. Wir setzen den Umriss des Kreises auf eine 4-Pixel-große grüne "Kante".
  • Die fill-Eigenschaft setzt die Farbe innerhalb des Kreises. Wir setzen die Füllfarbe auf gelb.
  • </svg>-Tag schließt SVG-Bild ab

Hinweis: Da SVG mit XML geschrieben ist, müssen alle Elemente korrekt geschlossen werden!