SVG Tutorial
Erste Schritte mit SVG
Suche…
Bemerkungen
Scalable Vector Graphics (SVG) ist ein W3C-Standard zum Zeichnen von Vektorbildern.
Hier ist eine einfache Standalone-SVG-Datei:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="25" fill="blue"/>
</svg>
SVG kann auch in HTML eingebettet werden. In diesem Fall ist das xmlns Attribut nicht erforderlich.
Andere grafische Elemente sind:
-
<line> -
<ellipse> -
<path> -
<polygon>und<polyline> -
<text>einschließlich<tspan>Elemente wie<tspan>und<textPath>
CSS wird für das Styling verwendet, obwohl nicht alle CSS-Eigenschaften für SVG gelten und SVG selbst bestimmte Eigenschaften definiert, z. B. fill und stroke , die nicht anderweitig verwendet werden.
Formen können mit Farbverläufen oder Mustern gefüllt werden, und mit Hilfe von Filtern können zusätzliche Rastereffekte erzielt werden.
Beschneiden ist verfügbar, wenn Sie die obigen grafischen Elemente als Clippfade verwenden.
Zu Versionen des W3C-SVG-Standards:
- Die aktuelle Version ist SVG 1.1 (Second Edition).
- Das W3C arbeitet derzeit an einem Entwurf von SVG 2
Versionen
| Ausführung | Veröffentlichungsdatum |
|---|---|
| 1,0 | 2001-09-04 |
| 1.1 Erstausgabe | 2003-01-14 |
| 1.2 Winzig | 2008-12-22 |
| 1.1 Zweite Ausgabe | 2011-08-16 |
Inline-SVG
Inline SVG ermöglicht das Erstellen von SVG-Markierungen in HTML, um Grafiken im Browser zu generieren.
Bei Verwendung von SVG-Inline ist ein DOCTYPE nicht unbedingt erforderlich. Stattdessen genügt das öffnende und schließende <svg> -Tag zusammen mit einem viewBox- oder width- und height-Attribut:
<svg width="100%" height="100%">
<!-- SVG elements go here -->
</svg>
Das obige <svg> -Fragment fungiert sowohl als Container als auch als Strukturelement. Dieses Fragment legt ein eigenes Koordinatensystem fest.
Unten sehen Sie ein Beispiel für das Rendern eines SVG-Fragments mit etwas Inhalt. Es wird ein Rechteck mit "Hello World!" Erzeugt. Text darin.
<svg width="50%" viewBox="0 0 10 10">
<rect x="1" y="1" width="5" height="3" fill="teal" />
<text x="2" y="2" font-family="Palatino, Georgia, serif" font-size="3%" font-weight="bold" fill="white">Hello World!</text>
</svg>
Ergebnis:
SVG als ![]()
Sie können den Inhalt einer SVG-Datei als Bild innerhalb eines HTML-Dokuments mit einem <img> -Tag darstellen. Zum Beispiel:
<img src="my_svg_file.svg" alt="Image description">
Die Abmessungen des Bildes werden standardmäßig entsprechend den Eigenschaften width und height angezeigt, die in der SVG-Datei angegeben sind, auf die im Attribut src verwiesen wird.
Es ist erwähnenswert, dass dieser Ansatz verschiedene Einschränkungen aufweist:
- Die Browser-Unterstützung umfasst zwar nicht den Internet Explorer 8 und frühere Versionen sowie Android 2.3 und frühere Versionen.
- Sie können die einzelnen Elemente in der SVG-Datei nicht mit CSS formatieren, das sich außerhalb der SVG-Datei befindet. Alle CSS-Dateien müssen sich in der Bilddatei befinden.
- JavaScript wird nicht ausgeführt.
- Das Bild muss in einer einzigen Datei enthalten sein. Wenn die SVG-Datei beispielsweise Rasterbilder enthält, müssen diese internen Bilder als Daten-URLs codiert werden.
SVG als Hintergrundbild
Sie können eine SVG-Datei in einem HTML-Dokument anzeigen, indem Sie sie als Hintergrundbild in CSS angeben. Zum Beispiel:
.element {
background-size: 100px 100px;
background: url(my_svg_file.svg);
height: 100px;
width: 100px;
}
Wenn die in Ihrer SVG-Datei angegebenen Dimensionen größer als die Dimensionen Ihres HTML-Elements sind, kann es wünschenswert sein, die Eigenschaft background-size anzugeben, um die SVG-Komponente an das Element anzupassen.
Bei der Verwendung von SVG als <img> sollten Sie bei diesem Ansatz einige Einschränkungen beachten:
- Die Browserunterstützung umfasst weder Internet Explorer 8 und frühere Versionen noch Android 2.3 und frühere Versionen.
- Sie können die einzelnen Elemente in der SVG-Datei nicht mit CSS formatieren, das sich außerhalb der SVG-Datei befindet. Alle CSS-Dateien müssen sich in der Bilddatei befinden.