Alle RessourcenRatgeber

SVG abgeschnitten oder zu viel leerer Rand? Die viewBox richtig prüfen

Finde die Ursache abgeschnittener SVGs und großer leerer Ränder. Prüfe viewBox, Konturstärken und Masken, bevor du ein korrektes Logo erneut vektorisierst.

Von VectoKitNeuer Ratgeber 3 Min. Lesezeit

Kurzantwort

Ein abgeschnittenes oder winzig dargestelltes SVG hat häufig ein Zeichenflächenproblem. Prüfe viewBox, Transformationen, Schnittmasken und Konturstärken. Passe im Vektoreditor die Seite an das beabsichtigte Motiv an und behalte nötige Abstände. Öffne den Export erneut. Korrekte Pfade müssen dafür nicht gelöscht oder neu gezeichnet werden.

1: Ein zu kleiner Bildausschnitt schneidet das Motiv ab. 2: das vollständige Motiv mit passenden Grenzen. Die Vektorpfade sind unverändert.

Was die viewBox festlegt

Die vier Werte beschreiben kleinsten x-Wert, kleinsten y-Wert, Breite und Höhe im Koordinatensystem der Grafik. Sie entsprechen nicht zwangsläufig der sichtbaren CSS-Breite und -Höhe. Wer nur die äußere Breite ändert, vergrößert möglicherweise die Anzeige, ohne die falschen inneren Grenzen zu korrigieren.

Beobachtung	Mögliche Ursache	Prüfen
Ohr oder Buchstabenkante fehlt	Motiv außerhalb der Grenzen	viewBox und Pfadposition
Kleines Logo mit breitem Rand	Zu große Zeichenfläche	Seite an Motiv anpassen
Dicke Kontur abgeschnitten	Linienbreite nicht berücksichtigt	Abstand für Konturen und Effekte
Editor korrekt, Export falsch	Maske oder Beschnitt	Struktur der Exportdatei

Ohne Verzerrung reparieren

Dupliziere das Original und öffne es in einem Vektoreditor.
Markiere das Motiv. Suche nach weit entfernten Restobjekten, die seine Begrenzung künstlich vergrößern.
Passe Seite oder Zeichenfläche an die gewünschten Formen an. Plane bewusste Ränder und Konturstärken ein.
Prüfe Schnittpfade und Masken. Eine größere viewBox hebt deren Einschränkungen nicht automatisch auf.
Exportiere erneut als SVG. Öffne genau diese Datei im Browser bei schmaler und breiter Anzeige.

1: zu viel leerer Außenraum. 2: eine passend begrenzte Zeichenfläche um dasselbe Vektormotiv.

Keine universellen Ersatzwerte verwenden

Reicht ein einfaches Motiv tatsächlich von x=20 bis 220 und y=30 bis 130, beschreibt 20 30 200 100 diese Begrenzung. Ragen Konturen oder Effekte darüber hinaus, brauchst du zusätzlichen Platz. Übertrage solche Beispielzahlen nicht blind auf andere Dateien: Jedes Motiv besitzt eigene Koordinaten.

Der SVG-Design-Check unterstützt die Strukturprüfung. Nach der visuellen Reparatur reduziert der SVG-Optimierer unnötiges Markup. Er ersetzt aber keine gezielte Korrektur der Zeichenfläche. Behalte die viewBox bei und vergleiche den Export.

Abschließende Kontrolle

Keine wichtige Form trifft eine unbeabsichtigte Beschnittkante.
Transparente Außenräume sind gewollt.
Linienenden, Schatten und Rundungen bleiben sichtbar.
Auf schmalen Displays stimmt das Seitenverhältnis.
Die tatsächliche Exportdatei wurde überprüft.

Häufige Fragen

Entfernen width und height den leeren Rand?

Nicht zwingend. Diese Attribute steuern die Anzeigegröße. Die internen Koordinatengrenzen können weiterhin große Ränder enthalten.

Hilft erneutes Vektorisieren?

Nicht bei bereits korrekten Pfaden. Repariere zuerst die Dokumentgrenzen. Erneutes Nachzeichnen verändert die Geometrie unnötig und übernimmt unter Umständen denselben unerwünschten Rand.