In HTML5 können Sie SVG-Elemente direkt in Ihre HTML-Seiten einbetten.
Embed SVG direkt in HTML-Seiten
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> Versuch es selber " SVG Code explanation:
- Ein SVG - Bild beginnt mit einem <svg> Element
- Die Höhe und Breite des <svg> Element die Breite und Höhe des SVG - Datei definieren
- Der <circle> Element wird verwendet , um einen Kreis zu zeichnen
- Die cx und cy Attribute definieren die x- und y-Koordinaten der Mitte des Kreises. Wenn cx und cy weggelassen werden, in der Mitte des Kreises wird auf (0, 0)
- Die r Attribut definiert den Radius des Kreises
- Die Hub und Hub-Breite Attribute steuern, wie die Kontur einer Form erscheint. Wir setzen den Umriss des Kreises zu einem 4px grünen "Grenze"
- Das fill - Attribut bezieht sich auf die Farbe im Inneren des Kreises. Wir setzen die Füllfarbe auf gelb
- Das Schließen </svg> Tag schließt das SVG - Bild
Hinweis: Da SVG in XML geschrieben wird, müssen alle Elemente richtig geschlossen werden!