Warum ist mein SVG-Logo abgeschnitten? Prüfe die Grenzen, bevor du die Grafik änderst

1. Vergleiche dieselbe Datei an zwei Orten

Speichere die freigegebene Quelle und erstelle eine Arbeitskopie. Öffne das exportierte SVG direkt im Browser und platziere genau diese Datei dann auf der vorgesehenen Seite oder in der Anwendung. Verwende einen kontrastreichen Hintergrund, wenn ein Teil des Logos weiß ist. Vergleiche Symbol, Schrift und äußerste Details, nicht nur die Gesamtsilhouette.

Ist die eigenständige Datei vollständig, bitte die integrierende Person, Bildcontainer, feste Maße, Zuschnitteinstellungen und Beschneidungen umgebender Elemente zu prüfen. Sende das ursprüngliche SVG und einen Screenshot des Unterschieds. Zeichne das Zeichen nicht neu, um einen abgeschnittenen Website-Bereich auszugleichen.

Fehlt in beiden Ansichten dieselbe Kante, beginne mit der exportierten Datei und ihrer Quelle. Ändere jeweils nur eine Einstellung und bewahre eine Vergleichskopie auf. So lässt sich feststellen, welche Änderung das Problem behoben hat, statt versehentlich ein anders aussehendes Logo zu akzeptieren.

2. Trenne Grafikkoordinaten von ihrem Anzeigebereich

Die SVG-viewBox beschreibt ein Rechteck mit vier Zahlen: minimales x, minimales y, Breite und Höhe. Dieses Rechteck bildet die Grafikkoordinaten in den Anzeigebereich ab. Es ist nicht einfach eine Auflösungseinstellung. Wenn nur die CSS-Breite eines Bildes geändert wird, wird dieselbe Abbildung größer oder kleiner.

Ein einfaches Beispiel: Ein rechteckiges Zeichen soll die Koordinaten von x = 0 bis 100 und y = 0 bis 40 belegen. Eine viewBox, die nur x = 0 bis 90 abdeckt, beschreibt den vorgesehenen Bereich nicht korrekt. Korrigiere den Export aus der Quelle oder lasse jemanden mit SVG-Kenntnissen Grenzen festlegen, die die freigegebene Grafik einschließen.

Prüfe die gerenderte Ausdehnung, nicht nur den zentralen Pfad. Konturen, Marker und Effekte können über die ausgewählte Geometrie hinausreichen. Verwende keinen willkürlichen universellen Rand: Zu viel Zusatzfläche lässt das Logo bei fester Anzeigebreite klein erscheinen.

Weiterführende Artikel: MDN: viewBox-Koordinaten · MDN: SVG overflow und Beschneidung am Anzeigebereich

3. Prüfe den Exportbereich in Illustrator

Stammt die Datei aus Illustrator, kehre zum ursprünglichen AI-Dokument zurück. Prüfe, welche Zeichenfläche oder Auswahl exportiert wurde und ob ihre Grenzen das gesamte freigegebene Zeichen einschließen. Suche nach benachbarten Grafiken, die nicht in diese Lieferdatei gehören.

Adobe unterscheidet SVG-Exporte nach Zeichenfläche und Objektgrenzen: Mit aktivem Use Artboards definieren Zeichenflächen die exportierten Bereiche; ohne diese Option bestimmen die gemeinsamen Objektgrenzen den Anzeigebereich. Wähle bewusst. Ein eng begrenzter Grafikexport und ein Asset mit Innenabstand sind unterschiedliche Lieferdateien.

Exportiere nach Korrektur des Bereichs erneut aus der AI-Quelle. Adobe empfiehlt, für weitere Änderungen zu dieser Quelle zurückzukehren, statt ein exportiertes SVG als neue Masterdatei zu behandeln. Importiere und speichere nicht immer wieder, bis die Vorschau zufällig richtig aussieht.

Weiterführende Artikel: Adobe: SVG-Export und Use Artboards

4. Prüfe Beschneidungen und Effekte separat

Ein Beschneidungspfad kann Teile einer Zeichnung ausblenden, selbst wenn die äußeren SVG-Grenzen großzügig sind. Prüfe Beschneidungsgruppen in einer Quellkopie. Vorübergehendes Deaktivieren der betreffenden Beschneidung kann die Ursache aufzeigen, aber lösche nicht jede Beschneidung: Manche sind für das freigegebene Design wesentlich.

Auch ein Filter hat einen definierten Bereich. Unschärfe und Schatten können über das gefilterte Objekt hinausreichen; prüfe daher Filterbereich und Koordinatensystem, wenn nur der Effekt abgeschnitten ist. Eine größere Außenfläche repariert nicht unbedingt einen kleineren inneren Filterbereich.

Dieselbe Vorsicht gilt bei einer Maske oder einer bewusst zugeschnittenen Illustration innerhalb eines Logos. Finde die verantwortliche Grenze, bewahre beabsichtigte Konstruktionen und vergleiche jede Korrektur mit der freigegebenen Referenz. overflow auf visible zu setzen ist keine vollständige Lieferstrategie: Das Ziel-Layout kann das Ergebnis weiterhin beschneiden.

Weiterführende Artikel: MDN: Beschneidungspfade · MDN: Filterbereiche · MDN: Filterkoordinatensysteme

5. Prüfe die Korrektur, ohne die Marke zu verändern

Prüfe den korrigierten Export in der vorgesehenen Anzeigegröße und vergrößert. Die große Ansicht macht abgeschnittene Kurven sichtbar; die kleine zeigt, ob die Platzierung weiterhin funktioniert. Vergleiche Proportionen, Abstände, Konturwirkung und freigegebene Innenabstände.

Teste das tatsächliche Ziel erneut. Halte die Dateinamen von Original und Korrektur unterscheidbar und bitte den Empfänger, die alte Datei zu ersetzen, statt sich auf einen Screenshot der korrigierten Version zu verlassen. Tritt der Fehler nur noch in einer Anwendung auf, dokumentiere diese Einschränkung, statt universelle Kompatibilität zu versprechen.

Die frühere SVG-Datei schnitt die untere Kontur an der Exportgrenze ab. Diese Ersatzdatei wurde aus der freigegebenen Quelle exportiert und im Browser sowie im vorgesehenen Header geprüft. Die Grafik selbst ist unverändert; verwende die neue SVG-Datei statt des vorherigen Anhangs.

6. Verpacke die geprüfte Grafik

Sobald die Quell-SVG korrekt ist, kann logopack.app helfen, das Übergabepaket zu organisieren. Prüfe auch die ausgewählten Ausgabedateien: Eine saubere Quelle ist ein Ausgangspunkt, kein Ersatz für die Prüfung jedes Ergebnisses.

Mit einem kostenlosen Konto lässt sich die bereitgestellte Demo ausprobieren, während ihre SVG-Grafik unverändert bleibt. Der Export eigener Grafiken erfordert einen kostenpflichtigen Tarif. Prüfe vor dem Export die aktuellen Tarife und bewahre separat vorbereitete, lieferantenspezifische Dateien auf.

Weiterführende Artikel: Generator öffnen · Aktuelle Tarife ansehen

Bevor du die Ersatzdatei versendest

• ✓Dieselbe SVG-Datei wurde allein und am Zielort getestet.
• ✓Die verantwortliche Begrenzung wurde ermittelt, nicht vermutet.
• ✓Symbol, Schriftzug, Konturen und freigegebene Effekte sind vollständig.
• ✓Keine beabsichtigte Beschneidung oder Maske wurde ungeprüft entfernt.
• ✓Die Ersatzdatei entspricht der freigegebenen Grafik und ihren Abständen.
• ✓Der Empfänger weiß, welche Datei die alte ersetzt.