osbo.com | SVG | Attributes | operator

The operator SVG attribute specifies the compositing operation that is to be performed.

over | in | out | atop | xor | lighter | arithmetic

over

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feImage href="/assets/svg/HappyFace.svg"/> <feComposite in2="SourceGraphic" k1="1" k2="0.5" k3="0.5" k4="0.25" operator="arithmetic"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feImage href="/assets/svg/HappyFace.svg"/> <feComposite in2="SourceGraphic" operator="atop"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feImage href="/assets/svg/HappyFace.svg"/> <feComposite in2="SourceGraphic" operator="in"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feImage href="/assets/svg/HappyFace.svg"/> <feComposite in2="SourceGraphic" operator="lighter"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feImage href="/assets/svg/HappyFace.svg"/> <feComposite in2="SourceGraphic" operator="out"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feImage href="/assets/svg/HappyFace.svg"/> <feComposite in2="SourceGraphic" operator="over"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feImage href="/assets/svg/HappyFace.svg"/> <feComposite in2="SourceGraphic" operator="xor"/> </filter> </defs> <circle cx="50%" cy="50%" filter="url(#myid)" r="50vh"/> </svg>

in

in2

k1

k2

k3

k4

World Wide Web Consortium (W3C)

The operator SVG attribute specifies a keyword indicating whether to erode (thin) or dilate (fatten) the source graphic.

erode | dilate

erode

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feMorphology operator="dilate" radius="10"/> </filter> </defs> <text dominant-baseline="middle" filter="url(#myid)" font-family="sans-serif" font-size="500" text-anchor="middle" x="50%" y="50%">text</text> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="myid"> <feMorphology operator="erode" radius="10"/> </filter> </defs> <text dominant-baseline="middle" filter="url(#myid)" font-family="sans-serif" font-size="500" text-anchor="middle" x="50%" y="50%">text</text> </svg>

in

radius

World Wide Web Consortium (W3C)