Skip to content
Related Articles

Related Articles

Improve Article

SVG type Attribute

  • Last Updated : 14 Dec, 2020
Geek Week

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :