about-svg.de

SVG – leicht gemacht

Skalierbare Grafiken, die sauber aussehen und schnell laden

SVG ist ideal für Icons, Illustrationen und Logos – ohne Qualitätsverlust. Hier findest du Basics, Performance-Tipps und praktische Snippets für den Alltag.

Los geht’s Snippets ansehen
Inline SVG Sprites Accessibility Optimierung

Grundlagen

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Format. Es bleibt gestochen scharf, egal wie groß du es skalierst.

Inline vs. Datei

Inline SVG ist super für Styling und Animation. Als Datei eignet sich SVG, wenn du caching nutzen willst oder viele gleiche Assets hast.

ViewBox verstehen

Die viewBox definiert das Koordinatensystem und sorgt dafür, dass SVGs responsiv skalieren.

Best Practices

Performance

  • SVGs minifizieren (z.B. SVGO)
  • Unnötige Metadaten entfernen
  • Komplexe Pfade vereinfachen
  • Sprites nutzen, wenn viele Icons vorhanden sind

Accessibility

  • Dekorative SVGs: aria-hidden="true"
  • Inhaltliche SVGs: <title> + role="img"
  • Kontrast prüfen, wenn SVGs farbig sind
  • Focus-Handling für interaktive SVGs

Beispiele

Icon als Inline SVG

Kurz und flexibel – Farbe via currentColor steuerbar.

<button class="icon-btn">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2l9 18H3L12 2z" fill="currentColor" />
  </svg>
  Mehr
</button>

SVG als Bilddatei

Gut für Caching und einfache Einbindung.

<img src="/assets/logo.svg"
     width="160" height="40"
     alt="Logo von about-svg.de" />

Du willst SVGs schneller machen?

Mit ein paar Handgriffen wirken Seiten leichter, schneller und sauberer.

Zurück nach oben