HTML SVG (Scalable Vector Graphics): SVG ist ein XML-basiertes Vektorformat, das verwendet wird, um Grafiken und Animationen auf Webseiten darzustellen. Im Gegensatz zu Rastergrafiken wie JPEG oder PNG können SVGs ohne Qualitätsverlust skaliert werden, was sie ideal für responsive Designs macht. In diesem Artikel erfahren Sie, wie Sie SVGs in HTML verwenden, ihre Vorteile sowie grundlegende und fortgeschrittene Techniken zur Erstellung von SVG-Grafiken.
1. Einfügen von SVG in HTML
SVG-Grafiken können direkt in HTML-Dokumente eingebettet oder als externe Dateien verlinkt werden.
1.1. Direktes Einfügen von SVG
Sie können SVG-Code direkt in Ihrem HTML-Dokument verwenden. Hier ist ein einfaches Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>SVG Beispiel</title>
<style>
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Ein einfaches SVG</h1>
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="blue" />
</svg>
</body>
</html>1.2. Einfügen von externen SVG-Dateien
Sie können auch SVG-Dateien als externe Ressourcen einfügen. Dies kann entweder mit dem <img>-Tag oder dem <object>-Tag geschehen.
Mit dem <img>-Tag
<img src="grafik.svg" alt="Eine externe SVG-Grafik">Mit dem <object>-Tag
<object type="image/svg+xml" data="grafik.svg">Ihr Browser unterstützt kein SVG</object>2. Grundlegende SVG-Elemente
SVG bietet eine Vielzahl von grundlegenden Elementen, mit denen Sie Formen und Pfade erstellen können.
2.1. Rechteck
<rect x="10" y="10" width="100" height="50" fill="green" />2.2. Kreis
<circle cx="50" cy="50" r="40" fill="red" />2.3. Linie
<line x1="0" y1="0" x2="200" y2="100" stroke="black" stroke-width="2" />2.4. Pfad
Das <path>-Element ermöglicht komplexe Formen. Hier ist ein Beispiel:
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="transparent" stroke="purple" />3. SVG-Attribute
SVG-Elemente unterstützen viele Attribute, die Ihnen helfen, das Aussehen und Verhalten der Grafiken anzupassen.
3.1. Füllfarbe
Das fill-Attribut gibt die Füllfarbe eines Elements an.
<rect x="10" y="10" width="100" height="50" fill="orange" />3.2. Umrandung
Das stroke-Attribut definiert die Farbe der Umrandung, und das stroke-width-Attribut legt die Dicke der Umrandung fest.
<circle cx="100" cy="100" r="50" fill="yellow" stroke="black" stroke-width="2" />3.3. Transparenz
Mit dem opacity-Attribut können Sie die Transparenz eines SVG-Elements steuern.
<rect x="10" y="10" width="100" height="50" fill="blue" opacity="0.5" />4. Animationen in SVG
SVG unterstützt Animationen über SMIL (Synchronized Multimedia Integration Language) oder CSS. Hier ist ein einfaches Beispiel für eine SVG-Animation:
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red">
<animate attributeName="r" from="50" to="100" dur="1s" begin="0s" repeatCount="indefinite" />
</circle>
</svg>Häufig gestellte Fragen
Was ist der Hauptvorteil von SVG?
SVG-Grafiken sind skalierbar und verlieren beim Vergrößern oder Verkleinern nicht an Qualität. Sie sind ideal für responsive Designs und können einfach animiert werden.
Kann ich SVGs mit CSS stylen?
Ja, Sie können SVGs mit CSS stylen, genau wie HTML-Elemente. Sie können Farben, Schriftarten und andere Stile anpassen.
Unterstützen alle Browser SVG?
Ja, die meisten modernen Browser unterstützen SVG. Ältere Browser, die SVG nicht unterstützen, können jedoch alternative Inhalte anzeigen, wenn Sie das <object>-Tag verwenden.
Wie kann ich SVGs animieren?
SVG-Animationen können mit SMIL-Elementen innerhalb des SVG-Codes oder mit CSS und JavaScript erstellt werden.
Wie kann ich komplexe Formen in SVG erstellen?
Verwenden Sie das <path>-Element, um komplexe Formen und Linien zu erstellen. Mit dem d-Attribut können Sie Pfadkommandos wie M, L, C usw. verwenden, um verschiedene Formen zu zeichnen.