HTTP/2 200
x-guploader-uploadid: AAwnv3LuYfuvGDX4RbHHAZKd71y3QIwwxLcrkp5DR2cajvhiX_0UeKeZZNJWBhyG0ygejZzc
x-goog-generation: 1760058443025216
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 164317
x-goog-meta-goog-reserved-file-mtime: 1760057008
x-goog-hash: crc32c=kVRHIg==, md5=Unx3NfQl9UaaOOLugi+DWw==
x-goog-storage-class: STANDARD
accept-ranges: none
expires: Sat, 11 Oct 2025 12:52:22 GMT
cache-control: public, max-age=3600
last-modified: Fri, 10 Oct 2025 01:07:23 GMT
etag: W/"527c7735f425f5469a38e2ee822f835b"
content-type: text/html
age: 0
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: 76c86b431d45095d1a9ef627fbbcea73
date: Sat, 11 Oct 2025 11:52:22 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
operator - SVG | MDN
html,
body,
svg {
height: 100%;
font:
20px Arial,
Helvetica,
sans-serif;
}
<svg viewBox="0 0 120 70" xmlns="https://www.w3.org/2000/svg">
<filter id="erode">
<feMorphology operator="erode" radius="0.4" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="0.8" />
</filter>
<text x="0" y="15">Normal text</text>
<text x="0" y="40" filter="url(#erode)">Thin text</text>
<text x="0" y="65" filter="url(#dilate)">Fat text</text>
</svg>
For <feComposite>operator defines the compositing operation that is to be performed.
Value
over | in | out |
atop | xor | lighter |
arithmetic
Default value
over
Animatable
Yes
over
This value indicates that the source graphic defined in the inin2
in
This value indicates that the parts of the source graphic defined in the in attribute that overlap the destination graphic defined in the in2 attribute, replace the destination graphic.
out
This value indicates that the parts of the source graphic defined in the in attribute that fall outside the destination graphic defined in the in2 attribute, are displayed.
atop
This value indicates that the parts of the source graphic defined in the in attribute, which overlap the destination graphic defined in the in2 attribute, replace the destination graphic. The parts of the destination graphic that do not overlap with the source graphic stay untouched.
xor
This value indicates that the non-overlapping regions of the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined.
lighter
This value indicates that the sum of the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute is displayed.
arithmetic
This value indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4
where:
i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1k2k3k4
For <feMorphology>operator defines whether to erode (i.e., thin) or dilate (fatten) the source graphic.
Value
erode | dilate
Default value
erode
Animatable
Yes
erode
This value thins the source graphic defined in the in
dilate
This value fattens the source graphic defined in the in attribute.
