SVG-Grafiken lassen sich ohne Qualitätsverlust vergrößern oder verkleinern. Für ein sauberes Ergebnis kommt es jedoch nicht nur auf width und height an: Entscheidend ist ein korrektes viewBox-Attribut. Es definiert das interne Koordinatensystem und ermöglicht eine responsive Skalierung.

SVG online skalieren

Für eine schnelle Größenänderung können Sie einen Online-Dienst verwenden. Laden Sie dabei nur Dateien hoch, die keine vertraulichen Informationen, internen Entwürfe oder nicht freigegebenen Inhalte enthalten.

SVG mit dem Online-Resize-Tool skalieren

SVG manuell responsiv machen

Eine typische Ausgangsdatei beginnt beispielsweise so:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 800 600"
     width="800"
     height="600">
  ...
</svg>

Für eine flexible Einbindung im Web können feste Abmessungen entfernt und per CSS gesteuert werden. Das Seitenverhältnis bleibt durch die viewBox erhalten:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 800 600"
     role="img"
     aria-labelledby="svg-title">
  <title id="svg-title">Beschreibung der Grafik</title>
  ...
</svg>
.responsive-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 800px;
}

Was bedeutet viewBox?

Die vier Werte stehen für min-x, min-y, Breite und Höhe des internen Koordinatensystems. Bei viewBox="0 0 800 600" wird also eine Zeichenfläche im Verhältnis 4:3 beschrieben. Ein fehlerhaftes oder fehlendes viewBox ist eine häufige Ursache dafür, dass SVG-Dateien beim responsiven Einbinden abgeschnitten oder verzerrt erscheinen.

Checkliste für gute Ergebnisse

  • Originaldatei vor Änderungen sichern.
  • viewBox beibehalten oder korrekt aus den tatsächlichen Grafikgrenzen ableiten.
  • Breite und Höhe proportional ändern, um Verzerrungen zu vermeiden.
  • Grafik in schmalen und breiten Ansichten testen.
  • Unnötige Metadaten und überflüssige Pfadpunkte vor dem Einsatz im Web entfernen.
  • Für informative Grafiken einen zugänglichen Namen über <title> oder geeigneten Alternativtext bereitstellen.

Wichtig: Eine größere SVG-Ausgabe erzeugt keine neuen Details. Die Darstellung bleibt scharf, doch eingebettete Rasterbilder oder bereits ungenaue Pfade werden dadurch nicht verbessert.