SVG-Schatten abgeschnitten? Filter und Viewport prüfen

Ein abgeschnittener SVG-Schatten kann an zwei verschiedene Grenzen stoßen. Der Filterbereich begrenzt, wo der Effekt berechnet wird; der SVG-Viewport oder ein übergeordneter Container kann danach das gerenderte Ergebnis beschneiden. Vergrößere zuerst den Filterbereich. Wenn der Schatten weiterhin am Bildrand endet, prüfe den Viewport und seine Beschneidungsregeln.

Du musst ein SVG mit intakten Pfaden nicht erneut nachzeichnen. Dieser Leitfaden ändert den Arbeitsbereich des Effekts und die sichtbare Zeichenfläche, während dieselbe ursprüngliche Silhouette erhalten bleibt.

Zwei Grenzen, ein unveränderter Pfad

Wir erstellten eine kleine Silhouette von Hand und öffneten drei Varianten in einem Browser. Jede verwendet denselben Pfad und dieselben feDropShadow-Einstellungen: dx="22", dy="18" und stdDeviation="12". Die Aufnahme unten zeigt tatsächliches Browser-Rendering, keine PerfectVector-Konvertierung.

In der ersten Variante verläuft der Filterbereich von (50, 50) bis (210, 180). Das erzeugt eine harte Abschneidung entlang der rechten und unteren Schattenkante. In der zweiten wächst der Bereich von (-20, -20) bis (300, 280), doch das SVG zeigt weiterhin nur 0 0 240 220. Die rechte Schattenkante erreicht jetzt den Viewport-Rahmen und wird dort abgeschnitten.

Die dritte Variante behält den größeren Filterbereich und ändert die viewBox in -20 -20 320 300. Auch width und height werden zu 320 und 300, sodass alle drei Demonstrationen eine SVG-Einheit pro CSS-Pixel behalten. Der zusätzliche Raum enthält den sichtbaren Schatten, ohne den Pfad zu skalieren.

Erweitere den Filterbereich im richtigen Koordinatensystem

Die <filter>-Attribute x, y, width und height definieren seinen Bereich. Ihre Standardwerte sind -10%, -10%, 120% und 120%: Ein gewisser Rand ist bereits vorhanden, kann aber für einen bestimmten Versatz und eine bestimmte Unschärfe zu klein sein. MDN dokumentiert diese Standardwerte.

Prüfe filterUnits, bevor du die Zahlen änderst:

• objectBoundingBox, der Standard, interpretiert den Bereich relativ zum Begrenzungsrahmen des gefilterten Elements. Ein prozentualer Rand hängt von den Abmessungen der Form ab.
• userSpaceOnUse lässt dich den Bereich im aktuellen Benutzerkoordinatensystem des Elements definieren, das den Filter referenziert. Das ist nützlich, wenn du die Grafikkoordinaten kennst.

Diese Regeln gelten für den Bereich, wie die filterUnits-Referenz beschreibt. Sie ändern nicht automatisch die Einheiten für Versatz oder Unschärfe des Schattens.

primitiveUnits steuert Längenwerte innerhalb von Filterprimitiven. Sein Standard ist userSpaceOnUse; wir setzen es im Beispiel explizit, damit 22, 18 und 12 diese Bedeutung behalten. Ein Wechsel zu objectBoundingBox würde ändern, wie diese Werte interpretiert werden. MDN unterscheidet Primitiveinheiten von Filterbereichseinheiten.

Prüfe bei deiner eigenen Datei die Grenzen des gefilterten Objekts oder der Gruppe und füge dann ausreichend Raum in den Richtungen hinzu, in die sich der Schatten erstreckt. Die Zahlen unten passen zu dieser Demonstration. Sie sind kein universeller Schattenrand. Wenn du die Unschärfe erhöhst, den Schatten verschiebst oder die gefilterte Gruppe transformierst, prüfe das Ergebnis erneut.

Gib auch dem SVG-Viewport Raum

Speichere dieses vollständige Beispiel als shadow.svg und öffne es in einem Browser. Das ist exakt das SVG des dritten Zustands, das auch als eigenständige Datei geprüft wurde:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

Die viewBox hat vier Werte: minimales x, minimales y, Breite und Höhe. Sie bildet dieses Rechteck aus Benutzerkoordinaten auf den SVG-Viewport ab. Wenn du ihre Abmessungen erhöhst und die dargestellte Breite und Höhe beibehältst, erscheint die Grafik kleiner; es entsteht kein Layout-Raum außerhalb des Elements. MDN erklärt die viewBox-Abbildung.

Um die beiden Fehler zu reproduzieren, ändere in einer Kopie des Beispiels nur diese Werte:

1. Für den mittleren Zustand lässt du den Filter unverändert, setzt aber an der Wurzel width="240", height="220" und viewBox="0 0 240 220".
2. Für den ersten Zustand behältst du diesen kleineren Viewport und setzt zusätzlich den Filter auf x="50", y="50", width="160" und height="130".
3. Stelle das vollständige Beispiel wieder her und vergleiche die rechten und unteren Kanten. Die Pfaddaten ändern sich nie.

Wenn deine gesamte Zeichnung außerhalb der Zeichenfläche liegt, folge den umfassenderen Prüfungen für leere SVGs. Wenn die Zeichnung sichtbar ist, ihre Abmessungen aber beim Import wechseln, prüfe die Beziehung zwischen SVG-Einheiten und Größe, bevor du die Geometrie anpasst.

Warum overflow bei Inline-SVG helfen kann, aber das Dateiproblem verfehlt

Das Beispiel setzt overflow="hidden" explizit, damit sich seine Viewport-Grenze reproduzieren lässt. Bei einem Inline-SVG kann overflow="visible" diese Viewport-Beschneidung entfernen. Es kann keine Pixel wiederherstellen, die bereits am Filterbereich verworfen wurden, und ein übergeordnetes Element mit eigener Beschneidung kann das Ergebnis weiterhin verbergen. CSS kann zudem das SVG-Präsentationsattribut überschreiben. Die SVG-overflow-Referenz beschreibt diese Beschneidungsregeln.

Prüfe den tatsächlichen Einbettungsweg. Ein Inline-SVG auf einer großzügigen Seite, ein eigenständiges SVG und ein über ein HTML-Bildelement geladenes SVG haben nicht dasselbe umgebende Layout. Unsere Aufnahme der drei Zustände verwendet Bildelemente und gibt der fest vorgegebenen Datei intern genügend Zeichenflächenraum. Verwende diesen Ansatz, wenn das SVG als eigenständiges Bild weitergegeben werden muss: Halte den Effekt innerhalb seiner vorgesehenen Grenzen und öffne dann genau diese Datei in ihrer Zielumgebung erneut.

Wenn es allein korrekt aussieht, aber innerhalb einer Karte abgeschnitten wird, prüfe overflow, Beschneidung und Maskierung der Karte. Wenn es nur in einem bestimmten Editor oder Exporter fehlschlägt, vergleiche eine vereinfachte Kopie und prüfe die Filterunterstützung dieser Anwendung. Der Leitfaden zu SVG-Darstellungsänderungen behandelt dieses separate Importproblem.

Erhalte die Geometrie und baue den Effekt separat neu auf

Ein gerenderter Schlagschatten ergänzt das Erscheinungsbild des Pfads; er verwandelt die Unschärfe nicht in eine weitere bearbeitbare Kontur. Behalte eine SVG-Masterdatei mit der ursprünglichen Geometrie. Prüfe bei einem Schneideablauf die Pfadumrisse separat: Der sichtbare Schatten ist keine zusätzliche Schnittlinie.

Wenn deine Quelle nur als PNG oder JPG vorliegt, kann PerfectVector vor dem Hinzufügen des Effekts SVG-Geometrie rekonstruieren. Konvertiere die Grafik ohne Schatten in Vektoren und prüfe dann Umriss, Lücken und unerwünschte Hintergrundformen in einem Editor. Füge dort den Schatten hinzu und teste seine Grenzen mit den oben beschriebenen Prüfungen.

Verwende eine Quelle ohne eingebrannte Unschärfe, wenn eine verfügbar ist. Das Nachzeichnen eines zu einer Rastergrafik zusammengefassten Bildes kann weder die ursprünglichen Filtereinstellungen wiederherstellen noch belegen, wo der Designer das Ende der sauberen Silhouette vorgesehen hat. Bei einer einfachen Bildmarke ohne saubere Quelle kann manuelles Neuzeichnen die besser kontrollierbare Wahl sein. Der Überblick zur Bildvektorisierung erklärt, was Nachzeichnen rekonstruiert.

Prüfe die ausgelieferte Datei

Öffne das exportierte SVG selbst, nicht nur die Zeichenfläche des Editors. Bestätige, dass der gewünschte Schatten in der endgültigen Darstellungsgröße hineinpasst und die Ausgabe weiterhin die benötigten Pfade enthält. Prüfe auch die tatsächliche Webseite oder Zielanwendung, weil eine umgebende Beschneidung oder ein nicht unterstützter Filter das Symptom wieder hervorrufen kann.

Lass nicht standardmäßig einen riesigen Filterbereich als Reparatur stehen. Ein Bereich weit über den Bedarf des Effekts hinaus macht die Datei schwerer verständlich; außerdem behebt er keine äußere Beschneidungsgrenze. Verwende einen bewusst gewählten Rand, behalte die ungefilterte Quelle und prüfe nach Änderungen an Unschärfe oder Versatz erneut.

FAQ

Warum ist der Schatten nach dem Erhöhen der Filterbreite noch abgeschnitten? Der SVG-Viewport, ein übergeordneter Container, ein Beschneidungspfad oder eine Maske kann eine weitere Grenze setzen. Prüfe neben Breite und Höhe auch x und y des Filters und untersuche dann, woran die verbleibende Abschneidung ausgerichtet ist.

Ändert filterUnits den Unschärferadius? filterUnits steuert das Koordinatensystem des Filterbereichs. primitiveUnits steuert Längenwerte innerhalb der Filterprimitive, einschließlich Versatz und Unschärfeeinstellungen des Schattens. Halte beides bei der Dateidiagnose getrennt.

Kann ich die Beschneidung durch erneutes Vektorisieren des SVG beheben? Wenn das SVG bereits brauchbare Pfade hat, repariere stattdessen Filterbereich oder Viewport. Vektorisierung gehört in einen vorgelagerten Schritt, wenn die Quelle Rastergrafik ist; sie stellt die ursprünglichen Schattenparameter nicht wieder her.

Quellen

1. MDN: filter-Element — Definiert das Filterelement und den standardmäßigen Rand seines Bereichs.
2. MDN: filterUnits — Erklärt Begrenzungsrahmen- und Benutzerkoordinaten für den Filterbereich.
3. MDN: primitiveUnits — Unterscheidet Primitivlängen vom äußeren Filterbereich.
4. MDN: viewBox — Beschreibt die Abbildung von Benutzerkoordinaten auf den sichtbaren SVG-Viewport.
5. MDN: overflow — Dokumentiert Viewport-Beschneidung, Inline-SVG-Standardwerte und CSS-Vorrang.

Beginnst du mit einer Silhouette, die nur als Rasterbild vorliegt? Bereite mit PerfectVector SVG-Pfade vor, prüfe zuerst den rekonstruierten Umriss, füge dann deinen Schatten hinzu und öffne das endgültige SVG erneut, um beide Grenzen zu prüfen.