Was ist SVG?

SVG, oder Skalierbare Vektorgrafik, ist ein Vektorbildformat auf XML-Basis für zweidimensionale Grafiken.

Hauptmerkmale:

• Skalierbarkeit: Bilder bleiben bei jeder Vergrößerung scharf, da sie durch mathematische Formeln und nicht durch Pixel beschrieben werden.
• XML-Format: Die Struktur der SVG-Dateien wird durch Tags beschrieben, ähnlich wie HTML. Das macht sie lesbar und bearbeitbar im Text.
• Interaktivität: Möglichkeit, interaktive Elemente mit JavaScript hinzuzufügen.
• Animation: Unterstützung für die Animation von Elementen mit CSS oder JavaScript.
• Zugänglichkeit: Möglichkeit, Inhalte für Menschen mit Einschränkungen zu beschreiben.
• Leichtgewicht: SVG-Dateien können kleiner sein als Rasterbilder bei gleicher Qualität.

Verwendungsmöglichkeiten für SVG:

• Einbettung in HTML über das <svg>-Tag:

  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg>
  

• Verwendung als Hintergrundbild in CSS:

  .element {
    background-image: url('image.svg');
  }
  

• Über das <img>-Tag:

  <img src="image.svg" alt="Mein SVG-Bild">
  

• Über das <object>- oder <iframe>-Tag.

SVG eignet sich perfekt für Logos, Symbole, Illustrationen, Diagramme und Grafiken, bei denen Klarheit in verschiedenen Größen und Interaktivität wichtig sind.