SVG type Attribute

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:

html

<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <svg width="320" height="320" 
        viewBox="20 30 120 120" 
        xmlns="https://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:

html

<!DOCTYPE html>
<html>

<body>
    <div style="color: green; 
             margin-left: 50px;">

        <h1>GeeksforGeeks</h1>

        <svg viewBox="0 0 480 100" 
            xmlns="https://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:

Explore