Skip to content
Related Articles

Related Articles

SVG operator Attribute

Improve Article
Save Article
Like Article
  • Last Updated : 31 Mar, 2022

The operator attribute either defines the compositing operation or morphing operation to be performed. The elements that are using this attribute includes: <feComposite> and <feMorphology>.

Syntax:

operator = erode|dilate|over|arithmetic|out|atop|xor|lighter|in

Attribute Values: The operator attribute accepts the values mentioned above and described below

  • over: It shows that the source graphic defined in the in attribute is placed over the destination graphic defined in the in2 attribute.
  • in: It shows that the parts of the source graphic defined in the in attribute replace the destination graphic defined in the in2 attribute.
  • out: It shows that the parts of the source graphic defined in the in attribute are displayed.
  • atop: It shows that the parts of the source graphic which overlap the destination graphic, replace the destination graphic.
  • xor: It shows that the non-overlapping regions of the source graphic defined in the in attribute are combined with the destination graphic defined in the in2 attribute.
  • lighter: It shows that the sum of the source graphic and the destination graphic defined in the in and in2 attribute respectively, is displayed.
  • arithmetic: It shows that the source graphic and the destination graphic defined in the in and in2 attribute respectively are combined using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4
  • erode: It thins the source graphic defined in the in attribute.
  • dilate: It fattens the source graphic defined in the in attribute.

Below examples illustrate the use of operator attribute.

Example 1:

HTML




<!DOCTYPE html>
<html>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <svg viewBox="0 0 420 70"
        xmlns="http://www.w3.org/2000/svg">
         
        <filter id="thin">
            <feMorphology operator="erode" radius="0.4" />
        </filter>
 
        <text x="10" y="20" fill="green" filter="url(#thin)">
            Thin text
        </text>
    </svg>
</body>
 
</html>

Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <svg viewBox="0 0 420 70"
        xmlns="http://www.w3.org/2000/svg">
 
        <filter id="fat">
            <feMorphology operator="dilate" radius="0.8" />
        </filter>
 
        <text x="10" y="20" fill="green" filter="url(#fat)">
            Fat text
        </text>
    </svg>
</body>
 
</html>

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!