SVG in HTML5
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:
- Rechteck
<rect> - Kreis
<circle> - Ellipse
<ellipse> - Linie
<line> - Polylinie
<polyline> - Polygon
<polygon> - Pfad
<path>
Beispiel zum Einbetten von SVG in eine HTML-Seite:
Beispiel zum Einbetten von SVG in eine HTML-Seite
html
<!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>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
Was sind die Hauptmerkmale des SVG-Formats in HTML5?