Why is my SVG logo's soft shadow cut off even though the artwork fits the viewBox?

Distinguish the three relevant boundaries

An SVG logo can involve at least three different geometric boundaries: the original artwork, the SVG viewport defined in relation to its viewBox, and the region where an SVG filter is evaluated.

The viewBox controls how the SVG's coordinate space maps into its displayed viewport. It does not automatically guarantee enough room for every shadow or blur generated by a filter.

MDN's SVG filter documentation explains that a filter is evaluated only within its filter region. Content the filter would paint beyond that region is clipped.

This creates a distinctive symptom: the logo's sharp path edges remain complete, but its soft shadow ends abruptly along a straight boundary.

First determine whether the cutoff occurs near the artwork, the filter region or the outer SVG viewport. These boundaries can overlap, but they are not interchangeable.

If the logo itself is cropped, inspect the viewBox and viewport. If only the blurred effect is truncated while the original geometry remains intact, inspect the filter region first.

Inspect the filter attributes

Find the filter definition used by the affected SVG element. The relevant attributes include x, y, width, height and filterUnits.

MDN documents default filter-region values of -10%, -10%, 120% and 120%. These provide a margin around the element, but a sufficiently broad blur or offset shadow can extend beyond it.

The filterUnits attribute determines how the filter region's coordinates are interpreted. Its default is objectBoundingBox, where values describe fractions or percentages of the referenced element's bounding box. With userSpaceOnUse, the region is expressed in the applicable user coordinate system.

Do not change units and numeric values simultaneously without recording both. A value meaningful in bounding-box fractions may not mean the same thing in user-space coordinates.

Individual filter primitives can also have subregions. If expanding the outer filter region does not resolve the cutoff, inspect whether a primitive is imposing its own boundary.

Hypothetical example: a shadow around a round mark

Hypothetical example; no SVG was rendered or edited. A fictional circular brand mark uses a soft shadow that extends down and right.

Candidate A uses the default filter region. The stipulated result shows a sharp cutoff through the shadow's lower-right fade while the circle itself remains complete.

Candidate B expands the filter region to x="-40%" y="-40%" width="180%" height="180%", following the type of enlarged region illustrated by MDN. In the hypothetical comparison, the shadow can extend farther without encountering the original filter boundary.

Candidate C uses the expanded filter region but places the circle close to the outer SVG viewport edge. The shadow is still cut off at the viewport boundary.

Under these assumptions, B isolates the filter-region cause. C demonstrates why enlarging the filter region cannot automatically repair clipping imposed by another boundary.

The percentages are illustrative diagnostic values, not a universal logo-export preset.

Make the smallest justified correction

Preserve the original SVG and create a working copy. Change only the filter-region bounds for the first comparison, keeping the logo geometry, viewBox and shadow parameters fixed.

Inspect the result at the same displayed size. If the abrupt shadow edge moves outward or disappears while the original logo remains unchanged, that supports the filter-region diagnosis.

If the cutoff persists at the outer viewport, inspect the viewport, overflow behavior and placement context separately. Do not enlarge the viewBox indiscriminately: adding excessive coordinate space can make the logo appear smaller in its destination.

If a primitive subregion is responsible, correct that specific boundary instead of repeatedly expanding the outer filter.

Open the actual delivered SVG in the intended viewer or application. Different importers may rasterize, simplify or reinterpret effects, so a correct browser rendering does not prove equivalent editability elsewhere.

Retain the approved logo geometry and any required clear space. A soft shadow may be decorative, but it should not alter the mark's proportions or become a substitute for production artwork.

The acceptance condition is that the intended shadow fades naturally without clipping and the complete logo remains correctly positioned at its destination size.

Record your own observations

The filled rows are illustrative examples. Use the blank row for your own files and observations.

Download the editable CSV worksheet

What the references establish

• MDN — Applying Effects with SVG Filters: Explains filter-region clipping, default margins, enlarged-region examples and primitive subregions.
• MDN — filterUnits: Defines objectBoundingBox and userSpaceOnUse coordinate interpretation for filter-region attributes.
• MDN — SVG filter Element: Documents filter attributes and their default region values.