Home › Image Tools › SVG Filter Region

Give your blur and shadow room to render

SVG Filter Region & Shadow Clipping Planner

Translate known source bounds into a filter region. Compare the default region with a chosen Gaussian-margin envelope, keep shadow inputs available before an offset, and export the same geometry you inspect.

14 worked examplesTwo region unit systemsIntermediate processing boundsLocal SVG, JSON & CSV

Plan a filter region from known bounds

All source dimensions, deviations and offsets use local user units. No SVG upload or external processing.

Worked example

Examples are optional practice data. These 14 hand-built numeric scenarios show common clipping and coordinate cases; they are not files you must upload. Choose a scenario and select Load example to fill the controls and see its expected result below. You can edit any loaded value. For your own artwork, skip the presets and enter its known SVG bounds and filter settings.

Where do I get the inputs for my own SVG?

For a simple filled rectangle with no stroke or transform, read x, y, width and height from its <rect> element. These are the source bounds before filtering. The SVG viewBox describes the canvas coordinate window; it is not automatically the shape’s bounding box.

Source bounds: enter the rectangle’s X, Y, width and height in the same local user units as the filter primitives.
Blur: read stdDeviation from <feGaussianBlur> or <feDropShadow>. Two numbers mean horizontal and vertical deviation; one number applies to both axes.
Shadow offset: read dx and dy from <feDropShadow>, or from <feOffset> in a shadow chain. This planner supports one blur or one shadow, not an arbitrary multi-filter chain.
Margin and padding: choose your own finite Gaussian multiplier, such as 3, and any extra processing padding. These are planning choices, not measurements extracted from the artwork.

For another shape, your editor’s object bounds or the SVG DOM getBBox() method can help establish the local geometry. Default geometric bounds do not include filter expansion, stroke or markers. Element and ancestor transforms are not applied by getBBox(); ensure your bounds and primitive settings refer to the same local coordinate system. This tool does not inspect the SVG for you.

Illustrative SVG source — read only

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80">
  <defs>
    <filter id="sample-shadow" filterUnits="userSpaceOnUse"
            primitiveUnits="userSpaceOnUse" x="0" y="0" width="100" height="80">
      <feDropShadow stdDeviation="2 1" dx="10" dy="-4"/>
    </filter>
  </defs>
  <rect x="20" y="30" width="40" height="20"
        fill="#c9a263" filter="url(#sample-shadow)"/>
</svg>

Enter this example: source X = 20, Y = 30, width = 40, height = 20; choose Drop shadow; set σX = 2, σY = 1, offset X = 10 and offset Y = −4; keep the original source included, choose k = 3 and leave extra padding at 0. Select Use recommended region.

The horizontal planning margin is 6 units and the vertical margin is 3 units. The recommended intermediate processing region is X = 14, Y = 23, width = 62, height = 30. The final-output envelope is 20, 23, 56 × 27. The larger processing region keeps the blur input available before its offset. Both blur envelopes remain estimates.

A Gaussian has infinite mathematical support. Your chosen k × σ margin is a finite planning estimate. This tool does not promise that every visible blur pixel fits.

1. Define the local source rectangle

Source X

Source Y

Source width

Source height

Enter the known bounding box before filtering. Stroke, markers, transforms, hidden overflow and arbitrary source alpha are not inferred.

2. Choose the effect and margin

Filter effect

Horizontal standard deviation σX

Vertical standard deviation σY

Shadow offset X

Shadow offset Y

Include the original source with the shadow

Chosen Gaussian margin multiplier k

Margin on each side is k × its axis standard deviation. k = 0 removes the planning margin; it does not disable a nonzero blur.

3. Set extra processing padding

Top

Right

Bottom

Left

Extra padding extends the recommended intermediate processing envelope. It does not change the chosen final-output estimate.

4. Compare the current filter region

Filter region mode

Region attribute units

Region X

Region Y

Region width

Region height

Changing units converts valid numbers and preserves the user-space rectangle. Primitives always use primitiveUnits="userSpaceOnUse". User-space SVG attributes are exported as bare numbers.

5. Style the synthetic preview

Source color

Shadow color

Shadow opacity

Colors and opacity affect the preview and SVG, but do not change the planned geometry. An invisible shadow still has the same geometric envelope in this model.

Compare the envelopes

Current region · X, Y, width, height

Recommended processing region · local units

Recommended · bbox percentages

Chosen final-output envelope · local units

Current / recommended rectangular region area

Current / recommended area relative to source bbox

Chosen final envelope area outside current region

Required outward region extensions to include the final envelope: . These are rectangular-envelope measurements, not alpha pixel counts or a percentage of visible blur lost.

Known-geometry diagram

SourceEffect estimateCurrent regionRecommended

Actual synthetic SVG filter preview

The selected filter is applied to a filled rectangle. Browser sampling and clipping can differ from the planning envelopes. This is not your original artwork.

Local user-unit rectangle coordinates
Envelope	X	Y	Width	Height

Save the current region plan

Exports use the current region, effect and styles. Select “Use recommended region” to export the chosen processing envelope. The SVG contains only controlled numeric geometry; it does not contain uploaded artwork.

Inspect filter markup

Filter markup for the current region

Inspect complete SVG

Complete synthetic SVG

Inspect JSON report

Calculated JSON report

Why SVG shadows get cut off

A filter has a rendering region. A shadow or blur may extend beyond the source geometry, so a region that looks large enough for the unfiltered artwork can still cut into the result. A wider filter region does not remove clipping from a surrounding SVG viewport, clipPath or parent container.

Keep intermediate inputs available

For an offset shadow, this planner estimates the Gaussian envelope before the offset, then the same envelope after translation. Its recommended processing rectangle contains both. The final output envelope can be smaller: shadow-only output omits the visible source, but still needs that source as an intermediate input. Extra padding extends the processing rectangle.

Understand the Gaussian margin choice

A nonzero Gaussian has no exact finite support. A 3σ or 4σ margin expresses your own finite planning choice. It is not a threshold calculation for a known image, and it does not certify a renderer’s implementation. The numeric region conversion is separate from that estimate.

Use the result

Enter the known local source bounds and effect settings.
Choose a Gaussian multiplier and any extra padding.
Compare the final output and intermediate processing envelopes with the current region.
Select the recommended region or set a custom one. Changing region units preserves valid geometry.
Export the SVG or filter markup, then test it with the real artwork, surrounding layout and target browsers.

Frequently asked questions

Do I need the worked examples to use this tool?

No. The presets are optional numeric practice scenarios, not required files. Choose an example and select Load example to fill the controls, inspect its expected result and edit the values. For real artwork, enter its own known local source bounds and filter settings.

Where do the example numbers come from?

They are hand-built rectangle dimensions and filter settings chosen to demonstrate default-region clipping, unit conversion, padding and other specific cases. They are not extracted from uploaded artwork. The own-SVG input guide shows how to map rect attributes, standard deviations and shadow offsets to the fields.

Does this guarantee an unclipped Gaussian blur?

No. An ideal Gaussian has infinite support. The chosen k times standard deviation gives a finite planning margin, not a guarantee that every visible blurred pixel is retained. Actual renderers and alpha content can differ.

Why can the recommended processing region be larger than the visible output envelope?

Intermediate primitives need their input before an offset. A shadow-only final envelope may exclude its original source, but clipping that input early can remove the shadow. The planner includes both the pre-offset blur envelope and shifted envelope in its recommended processing region.

How are objectBoundingBox values converted?

X and Y percentages are measured from the known source bounding-box origin, with horizontal values scaled by its width and vertical values by its height. Width and height percentages scale independently. Primitive standard deviations and offsets remain local user units.

What does the SVG default region option mean?

It means the object-bounding-box default rectangle: x -10%, y -10%, width 120% and height 120%. When userSpaceOnUse is selected, the tool converts that rectangle to bare user-unit numbers; it does not use viewport-relative percentages.

Does shadow-only output use feDropShadow?

No. feDropShadow includes the source graphic. Shadow-only output uses an explicit SourceAlpha blur, offset, flood and composite chain, without merging SourceGraphic.

Are envelope areas measurements of visible pixels?

No. They are rectangular geometry areas. A union bounding rectangle can contain empty gaps, and colors or opacity do not change this geometry model. The synthetic preview is not an alpha analysis of an uploaded image.

Will changing region units move the filter region?

When inputs are valid, changing the unit selector converts the displayed region numbers while preserving the current user-space rectangle. Fix invalid inputs before converting units.

Which source graphics can be planned?

Use a known, nonzero local bounding box. The tool does not inspect arbitrary SVG, strokes, markers, transforms, alpha content, clip paths, parent clipping or external styles. The preview uses only a synthetic filled rectangle.

What are the limits and precision?

Source width and height range from 0.01 to 1000000 user units. Standard deviations range from 0 to 100000, offsets and source origins from -1000000 to 1000000, and sigma multiplier from 0 to 10. JavaScript floating-point arithmetic is used; displayed values use 12 significant digits, while reports and generated SVG retain computed Number precision.

References: Filter Effects rendering region, Gaussian blur, Drop shadow and objectBoundingBox coordinate system and SVG local geometry bounds.