SVG in HTML
Sie können SVG-Elemente direkt in Ihre HTML-Seiten einbetten.
SVG direkt in HTML-Seiten einbetten
Hier ist ein Beispiel für eine einfache SVG-Grafik:
und hier ist der HTML-Code:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG-Code-Erklärung:
- Ein SVG-Bild beginnt mit einem <svg>-Element
- Die Attribute width und height des Elements <svg> definieren die Breite und Höhe des SVG-Bildes
- Das <circle>-Element wird verwendet, um einen Kreis zu zeichnen
- Die Attribute cx und cy definieren die x- und y-Koordinaten des Kreismittelpunkts. Wenn cx und cy nicht gesetzt sind, wird der Mittelpunkt des Kreises auf (0, 0) gesetzt
- Das r-Attribut definiert den Radius des Kreises
- Die Attribute „Strich“ und „Strichbreite“ steuern, wie der Umriss einer Form angezeigt wird. Wir setzen den Umriss des Kreises auf einen 4px grünen "Rand".
- Das Füllattribut bezieht sich auf die Farbe innerhalb des Kreises. Wir setzen die Füllfarbe auf Gelb
- Das schließende </svg>-Tag schließt das SVG-Bild
Hinweis: Da SVG in XML geschrieben ist, müssen alle Elemente korrekt geschlossen werden!