Open In App

SVG type Attribute

Last Updated : 31 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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:



Previous Article
Next Article

Similar Reads

SVG FETurbulenceElement.type Attribute
The SVG FETurbulenceElement.type property returns the SVGAnimatedEnumeration object corresponding to the type component of the FETurbulencee.type element. Syntax: var a = FETurbulenceElement.type Return value: This property returns the SVGAnimatedEnumeration object corresponding to the type component of the FETurbulencee.type element. Example 1: C/
1 min read
SVG &lt;svg&gt; Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG graphics are supported by the &lt;svg&gt; element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles. Syntax: &lt;svg width="x" height="y"&gt; sh
2 min read
SVG ScriptElement.type Property
The SVG ScriptElement.type property returns an SVGAnimatedLength object corresponding to the attribute of the given script element. Syntax: ScriptElement.type Return value: This property returns SVGAnimatedLength object that can be used to get the type of the script element. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;
1 min read
SVG from Attribute
The from attribute indicates the initial value of an attribute, it is used with to attribute. Syntax: from="number" Attribute Values: number: number at which we want to set from attributeWe will use the from attribute for setting the initial value. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;svg viewBox=&quot;0 0 1000
1 min read
SVG fill Attribute
The fill attribute can be used in two things. For shapes and text, it's a presentation attribute that defines the color used to paint the element. For animation it defines the final state of the animation. Syntax: fill= "colour" Attribute Values: paint: The color in which we want to paint the element. We will use the fill attribute for setting the
1 min read
SVG viewBox Attribute
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can set the coordinates as well as width and height. Syntax: viewBox = "min-x min-y width height" Attribute Values: min-x: It is used to set the horizontal axis. It is used to make the SVG move on a horizontal axis (i.e Left and Right).min-y: I
4 min read
SVG y Attribute
The y attribute defines the y-axis coordinate in the user coordinate system. Syntax: y = "y-coordinate" Attribute Values: length: length at which we want to set the x-axis. percentage: percentage at which we want to set the x-axis. We will use the y attribute for setting the y coordinate for the elements. Example 1: Group of rectangle elements with
1 min read
SVG x Attribute
The x attribute defines an x-axis coordinate in the user coordinate system. Syntax: x = "x-coordinate" Attribute Values: length: Length at which we want to set the x-axis.percentage: Percentage at which we want to set the x-axis.We will use the x attribute for setting x coordinate for the elements. Example 1: Rectangle element with the different x-
1 min read
SVG rx Attribute
The rx attribute defines a radius on the x-axis. Elements that are using this attribute: &lt;ellipse&gt; &lt;rect&gt; Syntax: rx = "x-radius" Attribute Values: length: Length at which we want to set the x-radius.percentage: Percentage at which we want to set the x-radius.We will use the rx attribute for setting the radius on the x-axis. Example 1:
1 min read
SVG width Attribute
The width attribute defines the vertical length of an element. Syntax: width= "width" Attribute Values: length: Length at which we want to set the width attribute. percentage: Percentage at which we want to set the width attribute. We will use the width attribute for setting the width of the element. Example 1: In this example we will use the width
1 min read