Wie integriere ich ein SVG-Rechteck in eine HTML-Seite?
- Was ist SVG?
- SVG direkt in HTML einbetten
- Erklärung der Attribute des Rechtecks
- SVG als separate Datei einbinden
- Vorteile der direkten Einbettung
Was ist SVG?
SVG steht für Scalable Vector Graphics und ist ein XML-basiertes Dateiformat, das zum Darstellen von zweidimensionalen Vektorgrafiken verwendet wird. Im Gegensatz zu Rastergrafiken wie JPEG oder PNG lassen sich SVGs ohne Qualitätsverlust beliebig skalieren. SVG ist besonders gut geeignet für einfache Formen, Diagramme und Illustrationen, die klar und scharf bleiben sollen.
SVG direkt in HTML einbetten
Ein SVG kann direkt innerhalb einer HTML-Datei mit dem <svg>-Element eingefügt werden. Für ein einfaches Rechteck verwendet man das <rect>-Element. Hierbei definieren Sie die Position, Größe und weitere Eigenschaften wie Farbe und Rahmendicke.
Erklärung der Attribute des Rechtecks
Das <rect>-Element besitzt mehrere wichtige Attribute:
x und y bestimmen die Position der linken oberen Ecke des Rechtecks innerhalb des SVG-Koordinatensystems. In diesem Beispiel steht x="10" für 10 Pixel vom linken Rand und y="10" für 10 Pixel von oben.
width und height legen die Breite und Höhe des Rechtecks fest. Im Beispiel sind es 180 Pixel breit und 80 Pixel hoch.
fill definiert die Füllfarbe des Rechtecks, hier ein kräftiges Blau #3498db. Mit stroke wird die Randfarbe angegeben und stroke-width bestimmt die Linienstärke des Rahmens.
SVG als separate Datei einbinden
Alternativ kann man das SVG-Rechteck auch in einer separaten Datei speichern (z. B. rechteck.svg) und diese Datei dann über <img>, <object> oder <iframe> in die HTML-Seite integrieren. Hier ein Beispiel mit dem <img>-Tag:
<img src="rechteck.svg" alt="Ein einfaches SVG-Rechteck" width="200" height="100">Dabei muss die Datei rechteck.svg eine SVG-Grafik enthalten, die den entsprechenden Inhalt beschreibt.
Vorteile der direkten Einbettung
Das direkte Einbetten von SVG-Code in HTML hat Vorteile: Sie können die Grafik per CSS und JavaScript direkt ansprechen und verändern, ohne externe Dateien laden zu müssen. Auch die Konsolidierung des Codes an einer Stelle kann die Wartung erleichtern, besonders bei kleinen oder dynamischen Grafiken.
Zusammenfassend lässt sich sagen: Um ein SVG-Rechteck in eine HTML-Seite einzubinden, verwenden Sie das SVG-Element mit einem <rect>-Kind, definieren deren Attribute passend und platzieren das Ganze an der gewünschten Stelle im Dokument. Dadurch erhalten Sie eine flexible, skalierbare und leicht anpassbare Grafik.