W3docs
de
Anmelden

SVG-Einführung

On this page, you can find useful information about SVG. Particularly, you can learn what SVG is, what its advantages are, and how you create SVG images.

SVG (Scalable Vector Graphics) definiert vektorbasierte Grafiken im XML-Format. Um damit zu arbeiten, benötigen Sie grundlegende Kenntnisse in HTML und XML.

SVG wird zur Definition vektorbasierter Grafiken für das Web verwendet. Jedes Element und jedes Attribut in SVG-Dateien kann animiert werden. SVG ist eine W3C-Empfehlung. Es integriert sich in andere W3C-Standards wie DOM und XSL.

Vorteile der Verwendung von SVG

Die Verwendung von SVG gegenüber anderen Bildformaten wie JPEG und GIF bietet viele Vorteile. Insbesondere:

  • SVG-Bilder können mit jedem Texteditor erstellt und bearbeitet werden.
  • SVG-Bilder können skriptbasiert verarbeitet, indiziert, durchsucht und komprimiert werden.
  • Sie können SVG-Bilder in hoher Qualität in jeder Auflösung drucken.
  • SVG-Bilder können skaliert und gezoomt werden.
  • SVG-Grafiken verlieren beim Zoomen oder Ändern der Größe keine Qualität.
  • SVG ist ein offener Standard.

Erstellen von SVG-Bildern

Sie können SVG-Bilder mit jedem Texteditor erstellen. Das Erstellen mit einem Zeichenprogramm wie Inkscape ist jedoch oft geeigneter.

Einbetten von SVG in HTML

SVG-Dateien verwenden die .svg-Erweiterung und werden von allen modernen Browsern unterstützt. Sie können sie in HTML mit dem `<img>`-Tag oder als Inline-Markup einbetten. Eine grundlegende SVG-Struktur sieht wie folgt aus:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Übungen

Übung

Was können Sie über SVG in HTML aussagen?