SVG FILTERS TO PNG

How do you stop SVG shadows and blur from being clipped in PNG?

Expand the SVG filter region so it contains every blurred, offset, or glowing pixel before you convert. Inspect the filter's x, y, width, and height, then check whether those values use object-relative or user-space coordinates. A larger PNG cannot recover pixels that the SVG filter region has already clipped.

Preview your filtered SVG

FAST DIAGNOSIS

Find where the effect is being cut off

PNG symptom	What to inspect	First controlled test
Shadow is cut off on one side	The offset shadow extends beyond the filter region in that direction.	Expand the region toward the clipped edge, then export again at the same PNG size.
Blur has a hard rectangular edge	The blur spreads beyond the filter region and is clipped at its boundary.	Temporarily give the filter a much larger explicit region. If the hard edge disappears, reduce it carefully.
Glow disappears near the SVG edge	The filter region may be large enough, but the root SVG viewBox or another clip path may still crop the result.	Expand the viewBox in a copy after confirming the filter region itself is not the limit.
Effect size changes between objects	`filterUnits="objectBoundingBox"` ties region coordinates to each object's bounding box.	Compare with an explicit `userSpaceOnUse` region when multiple objects need one consistent margin.
Effect is present in preview but weak in the PNG	The final raster may be too small to preserve a subtle blur or highlight.	First fix clipping, then compare the intended size with a 2x export.

Separate clipping from resolution. If the effect ends at a straight boundary, inspect regions and clips first. If the complete effect is visible but looks rough, then test a larger raster size.

FILTER REGION

The four values that define the filter canvas

The <filter> element has a rectangular region controlled by x, y, width, and height. Filter output outside that region is not painted. Blur expands in every direction, while an offset or drop shadow usually needs extra space on the side it moves toward.

x

Moves the left edge of the filter region. Use a smaller value when blur or shadow is clipped on the left.

y

Moves the top edge. Use a smaller value when the effect is clipped above the object.

width

Controls how far the region reaches horizontally. Increase it when output is cut off on the right after accounting for x.

height

Controls the vertical reach. Increase it when the effect is cut off below after accounting for y.

For an object-relative region, a practical diagnostic copy might begin with x="-50%" y="-50%" width="200%" height="200%". This is a test, not a universal final setting. After confirming the cause, tighten the region enough to contain the real effect without leaving an unnecessarily large processing area.

Increasing PNG width does not enlarge the SVG filter region. The filter is evaluated as part of SVG rendering before the result is rasterized. If the SVG stage clips the shadow, 2x or 4x output only creates a larger image of the already-clipped result.

COORDINATE SYSTEM

objectBoundingBox versus userSpaceOnUse

filterUnits value	How to read the region	When it helps	Risk to check
`objectBoundingBox`	Region values are relative to the filtered element's bounding box; percentages are easy to reason about as margins around that object.	Reusable filters applied to similarly shaped objects.	Tiny, narrow, or very different bounding boxes can produce margins that feel inconsistent.
`userSpaceOnUse`	Region values use the current SVG user coordinate system.	Artwork that needs an explicit shared filter rectangle or a predictable margin in viewBox units.	A region copied to artwork with a different viewBox or transform may no longer cover the intended area.

filterUnits controls the coordinate system for the filter region. It is separate from primitiveUnits, which controls the coordinate system used by filter primitive attributes. When debugging a complex filter, read both rather than changing one and assuming every primitive follows it.

Also inspect the filter chain. A blur can expand pixels, an offset can move them, and a composite can restrict what remains. The required region must contain the final combined output, not only the original shape.

REPEATABLE WORKFLOW

Test filtered SVGs at the final raster size

Open the SVG preview and identify which edge clips the effect.
Save a diagnostic copy before changing the filter.
Expand x, y, width, and height generously in that copy.
If the effect becomes complete, reduce the extra area one edge at a time.
If clipping remains, inspect the root viewBox, nested SVG overflow, clip paths, and masks.
Convert at the final intended PNG dimensions and inspect at 100% display size.
Compare a 2x export only after the entire effect is visible.

Change one boundary at a time. This shows whether the missing pixels are caused by the filter region, the SVG viewport, or another clipping operation.

MINIMAL EXAMPLE

A drop shadow with an explicit margin

<filter id="shadow"
  filterUnits="objectBoundingBox"
  x="-30%" y="-30%" width="180%" height="180%">
  <feDropShadow dx="6" dy="8" stdDeviation="5"
    flood-color="#111827" flood-opacity="0.35" />
</filter>

The numbers above are an example, not a guaranteed fit for every shape. Larger blur, larger offsets, transformed objects, or a very small bounding box can require different margins. Always confirm the actual preview and exported PNG.

FAQ

SVG filter to PNG questions

Why is my SVG drop shadow cut off in PNG?

The shadow probably reaches beyond the filter region, the SVG viewport, or another clip. Expand the filter region first and use the direction of the clipped edge to guide the change.

Will exporting at 4x fix a clipped blur?

No. A larger raster can make a complete blur smoother, but it cannot restore filter output that the SVG renderer already clipped.

Should I always use a 200% filter region?

No. A large region is useful for diagnosis, but the final values should match the real blur and offset. Test the smallest region that still contains the complete effect.

Why does the same filter look different on two shapes?

With object-relative units, each shape's bounding box affects the region. Geometry, transforms, primitive settings, and renderer behavior can also change the result, so compare the complete SVG inputs.

Make the complete effect visible first, then choose the PNG size.

Open the SVG to PNG converter

Published September 30, 2026.