width/height values of filter effect in example are misleading

[PoignardAzur]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feOffset

What specific section or headline is this issue about?

Example

What information was incorrect, unhelpful, or incomplete?

The example gives this code for an offset filter:

<filter id="offset" width="180" height="180">

On first read, this might suggest to users that the resulting filter will be 180px wide. This is not the case; as per the filter-effects spec:

If filterUnits is equal to objectBoundingBox, then x, y, width, height represent fractions or percentages of the bounding box on the referencing element (see object bounding box units).

The initial value for filterUnits is objectBoundingBox.

So basically, the value is interpreted as "18000%", which is visually correct but wildly oversized.

What did you expect to see?

<filter id="offset" width="180" height="180" filterUnits="userSpaceOnUse">

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/svg/reference/element/feoffset
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feOffset
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/svg/reference/element/feoffset/index.md
• Last commit: 62476ac
• Document last modified: 2025-10-27T13:18:15.000Z

[PoignardAzur]

(I took a quick look at the other effects and AFAICT none of the others define a custom filter width/height, probably because the 120% default is enough.)

[Dipanshusinghh]

@PoignardAzur I’d like to work on this issue.

The current example can indeed be a bit misleading because filterUnits defaults to objectBoundingBox, so the width and height values are interpreted relative to the bounding box instead of user-space units.

Adding filterUnits="userSpaceOnUse" seems like a clearer and more accurate example for readers expecting pixel-like dimensions. I’ll prepare a small fix for this.