SVG type Attribute

Last Updated : 31 Mar, 2022

The type attribute is a non-specific attribute that has a different meaning according to the context in which it used.

It defines the type of transformation, for the <animateTransform> element whose values change over time.
It defines the type of matrix operation, for the <feColorMatrix> element.
It defines the type of component transfer function, for the <feFuncG>, <feFuncB>, <feFuncR>, and <feFuncA> elements.
It defines whether the filter primitive should perform a turbulence or noise function, for the <feTurbulence> element.
It defines the content type of the element, for the <style> and <script> elements.

Syntax:

type = "value"

Attribute Values: The type attribute can be used with the following elements:

<animateTransform>: This element include type attribute with values like translate, scale, rotate, skewX, skewY.
<feColorMatrix> : This element include type attribute with values like matrix, saturate, hueRotate, luminanceToAlpha.
<feTurbulence>: This element include type attribute with values like fractalNoise, turbulence.
<feFuncR>, <feFuncG>, <feFuncB>, and <feFuncA>: These elements include type attribute with values like identity, table, discrete, linear, gamma.

Below examples illustrate the use of the type attribute.

Example 1:

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg width="320" height="320" 
        viewBox="20 30 120 120" 
        xmlns="http://www.w3.org/2000/svg"> 
  
        <polygon points="60, 30 90, 90 30, 90" fill="green"> 
  
            <animateTransform attributeName="transform" 
                attributeType="XML" type="rotate" 
                from="0 60 70" to="360 60 70"
                dur="5s" repeatCount="indefinite" /> 
        </polygon> 
    </svg> 
</body> 
  
</html> 

Output:

Example 2:

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color: green;  
             margin-left: 50px;"> 
  
        <h1>GeeksforGeeks</h1> 
  
        <svg viewBox="0 0 480 100" 
            xmlns="http://www.w3.org/2000/svg"> 
  
            <filter id="geek2" x="-20%" y="-20%" 
                width="150%" height="150%"> 
                  
                <feTurbulence type="turbulence" 
                    baseFrequency="0.05" numOctaves="5"
                    result="turbulence" /> 
                  
                <feDisplacementMap in2="turbulence" 
                    in="SourceGraphic" scale="20" /> 
            </filter> 
  
            <polygon points="50, 9 60.5, 39.5 92.7,  
                40.1 67, 59.5 76.4, 90.3 50, 71.9  
                23.6, 90.3 32.9, 59.5 7.2, 40.1 39.4,  
                39.5" style="filter: url(#geek2);"
                fill="hsl(106, 80%, 50%)" /> 
        </svg> 
    </div> 
</body> 
  
</html> 

Output:

Suggest improvement

SVG transform Attribute

SVG vector-effect Attribute

Share your thoughts in the comments

SVG Elements

SVG Properties

SVG Attributes

SVG Elements

SVG Properties

SVG Attributes

SVG type Attribute

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?