SVG Filter Region Attributes
The filter element's x, y, width, and height attributes define the bounding region within which all filter effects are rendered.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Default Filter Region Sizing
The filter element's x, y, width, and height default to -10%, -10%, 120%, and 120% respectively under objectBoundingBox units, meaning the filter region extends 10% beyond the filtered element's bounding box on all sides — enough for a small blur but often too tight for larger effects like wide shadows or glows.
- Defaults of -10%/-10%/120%/120% extend the region 10% beyond the bounding box
- This default margin is enough for small blurs but too tight for larger effects
- Wide shadows, glows, or displacement effects often need a larger explicit region
Widening the Region for Large Effects
Explicitly setting a larger region, such as x="-50%" y="-50%" width="200%" height="200%", prevents a large feGaussianBlur or feDropShadow effect from being clipped at the filter's edge, which otherwise produces a visibly hard-edged cutoff exactly where the default region boundary falls.
- A wider region like -50%/-50%/200%/200% accommodates larger blur or glow effects
- Without a wider region, large effects get a visibly hard-edged cutoff
- This cutoff falls exactly at the default region boundary, making the bug obvious
Frequently Asked Questions
Why does my glow effect have a visible square cutoff around it?
The default filter region only extends 10% beyond the element's bounding box, so a wide glow gets clipped exactly at that boundary, producing a visible hard edge.
What's a safe filter region size for a strong blur or shadow?
A region of roughly -50% to 200% in x/y/width/height is a common safe starting point for strong blurs, though very large stdDeviation values may need an even wider region.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG