{ freetool24 }
Image Tools

SVG-Leitfaden für Entwickler: Skalierbare Grafiken, die überall funktionieren

Erfahre, wie SVG funktioniert, wie du SVG-Dateien für das Web optimierst, wann du Inline- vs. externe Einbindung nutzt und wie du SVGs mit CSS und JavaScript animierst und manipulierst.

7 Min. Lesezeit

Bunte Vektorillustrationen auf einem Bildschirm

SVG (Scalable Vector Graphics) ist das einzige Bildformat, das von Browsern nativ als strukturiertes, stilisierbares und skriptfähiges XML verstanden wird. Ein Logo im SVG-Format wird auf einem 1×-Monitor, einem 4K-Display und einem gedruckten Werbeplakat gestochen scharf dargestellt – alles aus derselben Datei. Wer SVG versteht, wird zu einem fähigeren Frontend-Entwickler.

Was SVG besonders macht

Rasterformate (JPEG, PNG, WebP) speichern Bilder als Pixelraster. Vergrößert man sie, entsteht Unschärfe. SVG hingegen speichert Bilder als mathematische Beschreibungen von Formen:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

Das ergibt einen blauen Kreis mit dem Text „Hello" – in jeder Größe, perfekt scharf.

Wann sollte man SVG verwenden:

  • Logos und Icons (müssen in jeder Größe scharf bleiben)
  • Illustrationen und Diagramme
  • Charts und Datenvisualisierungen (D3.js gibt SVG aus)
  • Animationen und interaktive Grafiken
  • UI-Icons (deutlich besser als Icon-Fonts)

Wann sollte man SVG NICHT verwenden:

  • Fotografien und komplexe fotorealistische Bilder (JPEG/WebP verwenden)
  • Screenshots (PNG verwenden)
  • Wenn das SVG Tausende von Knoten enthält (wird langsamer als Canvas)

Grundlegende SVG-Elemente

Formen

<!-- Rechteck -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- Kreis -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- Ellipse -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- Linie -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- Polygon -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- Polylinie (offene Form) -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

Pfade – die universelle Form

Das <path>-Element kann beliebige Formen über eine Minisprache aus Bewegen-, Linien-, Kurven- und Bogenbefehlen beschreiben:

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

Pfadbefehle:

  • M x,y — Bewegen zu (Stift hoch)
  • L x,y — Linie zu
  • H x — Horizontale Linie
  • V y — Vertikale Linie
  • Q cx,cy x,y — Quadratische Bézierkurve
  • C cx1,cy1 cx2,cy2 x,y — Kubische Bézierkurve
  • A rx,ry rot large-arc sweep x,y — Bogen
  • Z — Pfad schließen

Pfade schreibt man selten von Hand – Design-Tools exportieren sie. Sie lesen zu können hilft jedoch beim Debuggen und Optimieren.

Das viewBox-Attribut: responsive SVGs

Das viewBox-Attribut ist der Schlüssel zu responsiven SVGs:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Inhalt wird in einem 200×100-Koordinatenraum gezeichnet -->
</svg>

Ohne width/height am Element füllt das SVG seinen Container wie ein responsives Bild. Setzt man in CSS width: 100%, skaliert es einwandfrei.

.logo svg {
  width: 100%;
  height: auto;
}

Drei Möglichkeiten, SVG im Web einzubinden

1. Externe Datei (<img>)

<img src="logo.svg" alt="Firmenlogo" width="200" height="80">

✅ Einfach, gecacht, funktioniert überall
❌ Kein CSS-Styling, kein Scripting

2. CSS-Hintergrund

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ Gut für dekorative Icons
❌ Kein CSS-Styling der SVG-Interna, keine Barrierefreiheit

3. Inline SVG (am leistungsfähigsten)

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Weiter
</button>

✅ Volle CSS-Kontrolle, skriptfähig, nutzt currentColor zur Vererbung der Textfarbe
❌ Nicht gecacht, erhöht die HTML-Größe

Für Icons in UI-Komponenten ist Inline SVG die beste Wahl. Sprite-Sheets (ein einzelnes <svg> mit <symbol>-Elementen und <use>-Referenzen) ermöglichen Caching mit Gestaltbarkeit.

SVG mit CSS stylen

Inline SVGs reagieren auf CSS wie jedes HTML-Element:

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* steuert currentColor */
}

.icon:hover {
  color: #1d4ed8;
}

Im SVG verwendet man currentColor anstelle von fest kodierten Farben:

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

So wird die Icon-Farbe vollständig durch CSS gesteuert – Dark Mode, Hover-Zustände und Theming funktionieren einfach.

CSS-Animationen auf SVG

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray und stroke-dashoffset sind die mächtigsten Animationseigenschaften von SVG – sie ermöglichen Zeichenanimationen, bei denen Pfade scheinbar von selbst gezeichnet werden.

SVG-Dateien optimieren

Design-Tools exportieren SVGs mit unnötigen Metadaten, Kommentaren und Editor-IDs. Ein typisches exportiertes SVG kann 15 KB groß sein; optimiert könnte es 3 KB sein.

Was entfernt werden sollte:

  • <?xml version="1.0"?>-Deklaration (bei Inline-Einbindung nicht benötigt)
  • xmlns:xlink, xmlns:dc, Adobe/Inkscape-Metadaten-Namespaces
  • id-Attribute, die nur vom Editor verwendet werden
  • Kommentare und Leerzeichen
  • Redundante Gruppenelemente <g>
  • Standard-Attributwerte (fill="black", opacity="1")

Tools wie SVGO automatisieren das. Wenn du für Plattformen ohne SVG-Unterstützung eine Rasterversion benötigst, konvertiere sie mit unserem SVG to PNG-Konverter in PNG.

Barrierefreiheit

SVGs, die als bedeutungsvoller Inhalt eingesetzt werden, brauchen barrierefreie Beschreibungen:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Umsatzdiagramm</title>
  <desc id="desc">Balkendiagramm, das den monatlichen Umsatz zeigt, der von 10.000 € im Januar auf 45.000 € im Juni 2026 gestiegen ist</desc>
  <!-- Diagramminhalt -->
</svg>

Dekorative SVGs (Icons neben beschrifteten Buttons) sollten vor Screenreadern verborgen werden:

<svg aria-hidden="true" focusable="false">...</svg>

Kurzreferenz: nützliche SVG-Attribute

Attribut Funktion
viewBox="x y w h" Definiert das Koordinatensystem
fill Füllfarbe der Form (none, Hex, currentColor)
stroke Konturfarbe
stroke-width Konturstärke
stroke-linecap Linienendenstil: butt, round, square
stroke-linejoin Eckenstil: miter, round, bevel
opacity Transparenz des Elements (0–1)
transform translate(), rotate(), scale(), skew()
clip-path Inhalt auf eine Form zuschneiden
filter SVG-Filter anwenden (Blur, Schlagschatten usw.)

SVG ist eines der am meisten unterschätzten Werkzeuge des Webs. Wer das Koordinatensystem und das Styling-Modell einmal verstanden hat, kann Icons, Illustrationen, Charts und Animationen erstellen, die in jeder Größe perfekt aussehen und dynamisch auf Benutzerinteraktionen reagieren.

Zurück zu allen ArtikelnTools durchsuchen