SVG-Einführung

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 <code><img></code>-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

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

SVG steht für Scalable Vector Graphics.SVG wird verwendet, um 2D-Vektorgrafiken im XML-Format zu beschreiben.SVG kann animiert und über JavaScript interaktiv gesteuert werden.SVG-Dateien sind nicht skalierbar und werden daher beim Zoomen pixelig.SVG wird verwendet, um 3D-Grafiken zu beschreiben.