Skip to content
geeksforgeeks
  • Tutorials
    • Python
    • Java
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
    • Practice Coding Problems
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • HTML Tutorial
  • HTML Exercises
  • HTML Tags
  • HTML Attributes
  • Global Attributes
  • Event Attributes
  • HTML Interview Questions
  • HTML DOM
  • DOM Audio/Video
  • HTML 5
  • HTML Examples
  • Color Picker
  • A to Z Guide
  • HTML Formatter
Open In App
Next Article:
SVG Circle
Next article icon

SVG <animateTransform> Element

Last Updated : 31 Mar, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

SVG stands for Scalable Vector Graphics. It defines vector-based graphics and animation like in HTML Canvas.

The animateTransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.

Syntax: 
<animateTransform attributeName=''transform''/>
Attribute:
  • from: Initial value of the attribute that will be modified during the animation.
  • to: Final value of the attribute that will be modified during the animation.
  • type: It defines the type of transformation, whose values change over time.
  • dur: Duration of the animation.
  • repeatCount: The number of times an animation will take place.
  • repeatDur: The total duration for repeating an animation.
  • attributeName: The name of the CSS property that is going to be animated.
Example: HTML 
<!DOCTYPE html> <html>  <body>     <svg width="120" height="120">          <polygon points="60,30 90,90 30,90">             <animateTransform attributeName="transform"                 attributeType="XML" type="rotate"                  from="0 60 70" to="360 60 70"                 dur="10s" repeatCount="indefinite" />         </polygon>     </svg> </body>  </html>

Supported Browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Next Article
SVG Circle

R
rbbansal
Improve
Article Tags :
  • Web Technologies
  • HTML
  • HTML-SVG
  • SVG-Element

Similar Reads

    SVG Tutorial
    SVG stands for Scalable Vector Graphics and is a powerful XML-based markup language for describing two-dimensional vector graphics. It is a web standard that enables the creation of resolution-independent graphics. Unlike raster images (such as JPEG or PNG), SVG graphics maintain quality even when z
    5 min read
    SVG Introduction
    SVG stands for Scalable Vector Graphic is a XML language used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. SVG is a web standard for vector-based graphics. It is an XML format that defines graphics. In SVG files, every element and
    1 min read
    HTML SVG Basics
    SVG stands for Scalable Vector Graphics. It defines vector-based graphics in XML format. SVG graphics do not lose any quality when zoomed or resized, and every element and attribute in SVG files can be animated. Advantages of SVG: The advantages of using SVG over other image formats (like JPEG and G
    4 min read

    SVG Elements

    SVG <a> Element
    The SVG <a> element creates a hyperlink within SVG graphics. It functions similarly to the HTML <a> element. It links to external resources or other parts of the SVG document. Syntax: <a href="" target="" type="" rel="" download=""></a>SVG <a> AttributesName Description
    2 min read
    SVG <animate> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <animate> SVG element is used to animate an attribute or property of an element over time. It's normally inserted inside the element which we want to animate. Syntax: <animate att
    1 min read
    SVG <animateMotion> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The SVG <animateMotion> element let define how an element moves along a motion path. Syntax: <animateMotion values="" dur="" repeatCount="" path="" /> Attributes: keyPoints: This a
    1 min read
    SVG <animateTransform> Element
    SVG stands for Scalable Vector Graphics. It defines vector-based graphics and animation like in HTML Canvas. The animateTransform element animates a transformation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing. Syntax: <anim
    1 min read
    SVG Circle
    SVG Circle facilitates the <circle> element which can be utilized to create a circle. Basically, the  <circle> element wrapped inside the <svg> element. Syntax<svg> <circle cx="10" cy="10" r="30" stroke="black" stroke-width="3" fill="red" /> </svg>Attributes The b
    2 min read
    SVG <clipPath> Element
    The <clipPath> SVG element is used to define a clipping path that is to be used by the clip-path property. It works the same as clip-path in CSS. The clipPath element is used to put some restriction on a region such that anything drawn outside that region will neither be visible nor be drawn.S
    2 min read
    SVG defs Element
    The <defs> in SVG is used whenever we want a particular element to render only when required or when it is called. objects that are created inside <defs> element are not rendered directly they are needed to be called by <use> element to render them on the browser. Syntax: <defs
    2 min read
    SVG <desc> Element
    The <desc> element in SVG is used to provide an accessible text description to any of the available SVG elements whether it is a container or graphic element.Syntax:<desc></desc>Property Values: It does not have any property values.Below given are a few examples of the function giv
    1 min read
    SVG Ellipse Element
    The SVG <ellipse> element is used to create an ellipse. The difference between circle and ellipse is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius: Syntax: <ellipse cx="x-axis co-ordinate" cy="y-axis co-ordinate" rx="length" ry
    1 min read
    SVG <feBlend> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. <feBlend> element is used to combines two images or SVG fragments into a single graphic. It executes a pixel-wise combination of two input SVG fragments or images. Syntax: <feBlend in
    2 min read
    SVG <feComponentTransfer> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.<feComponentTransfer> element implements color manipulations on each color channel separately.The four color channel of this element are <feFuncR>, <feFuncG>,<feFuncB>,
    2 min read
    SVG <feConvolveMatrix> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <feConvolveMatrix> SVG filter primitive changes pixels in the input image with neighboring pixels to produce a resulting image. Syntax: <feConvolveMatrix in="" order="" kernelMatr
    2 min read
    SVG feDiffuseLighting Element
    The SVG <feDiffuseLighting> filter primitive lights an image using the alpha channel as a bump map. Using diffuse lighting the sides of the object facing the light are brighter and the sides facing away are darker and in shadow. Syntax : <feDiffuseLighting> Contents... </feDiffuseLigh
    2 min read
    SVG <feDisplacementMap> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <feDisplacementMap> SVG filter primitive is use to spatially displace the image content using a displacement map. It takes two inputs to produce one result. The image content to disp
    2 min read
    SVG <feDropShadow> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <feDropShadow> element works in combination with other filter primitives to add a drop shadow to the graphic. It provides a blurred, colored, and optional offset layer behind the ori
    2 min read
    SVG <feFlood> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG <feFlood> element generates a layer of continuous color that completely fills this element’s filter primitive region. Syntax: <feFlood x="" y="" width="" height="" flood-color=""
    2 min read
    SVG <feGaussianBlur> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <feGaussianBlur> element adds a smooth blur to the graphic based on the standard deviation provided in the input primitive. Syntax: <feGaussianBlur in="" stdDeviation="" edgeMode=
    1 min read
    SVG <feImage> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <feImage> SVG filter primitive fetches image data from an external source and provides the pixel data as output. Syntax: <feImage x="" y="" width="" height="" externalResourcesReq
    2 min read
    SVG <feMerge> Element
    The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially. The canonical implementation of <feMerge> is to render the entire effect into one RGBA layer, and then render the resulting layer on the output device. Syntax: <feMerge> ---- </fe
    1 min read
    SVG <feMergeNode> Tag
    The <feMergeNode> SVG element takes the result of another filter which is to be processed by its parent element i.e. feMerge element. Syntax: <feMergeNode in="" /> Attributes: in: The in attribute identifies input for the given filter primitive. Example 1: html <!DOCTYPE html> <
    1 min read
    SVG <feOffset>
    The SVG feOffset element is used to create drop shadow effects. To create drop shadow take an SVG graphic (image or element) and move the XY coordinates. Syntax: <feDropShadow dx="" dy="" stdDeviation=""/> Attributes: dx: defines x offsetdy: defines y offsetstdDeviation: defines standard devia
    1 min read
    SVG fePointLight Element
    The <fePointLight> filter primitive defines a light source which allows to create a point light effect. Syntax: <fePointLight x="" y="" z="" /> Attributes : x: It defines a x-axis coordinate in the user coordinate system.y: It defines a y-axis coordinate in the user coordinate system.z:
    1 min read
    SVG <feSpecularLighting> Element
    The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map. Syntax: <feSpecularLighting in ="" surfaceScale ="" specularConstant="" specularExponent="" kernelUnitLength="" > Attributes: in: It identifies input for the given filter primitiv
    2 min read
    SVG <feSpotLight> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <feSpotLight> SVG defines a light source which results in a spotlight effect. It defines a spotlight whose light is directed at a specific point and it only lights a limited area. Sy
    2 min read
    SVG feTile Element
    The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. Syntax: <feTile in="" x="" y="" width="" height="" /> Attributes: in: The in attribute identifies input for the given filter primitive. x: It defines x-axis coordinate in
    2 min read
    SVG <feTurbulence> Element
    The <feTurbulence> SVG filter generates noise which is helpful in simulating several natural phenomena like clouds, fire, and smoke, and in generating complex texture like marble or granite. The noise can be used to distort images and text. Perlin Turbulence function is used to generate Perlin
    2 min read
    SVG filter Element
    The SVG <filter> element is used to define filters. To identify uniquely filter use id. The filters are defined in def elements. Syntax: <filter filterUnits="units to define filter effect region" primitiveUnits="units to define primitive filter subregion" x="x-axis co-ordinate" y="y-axis co
    2 min read
    SVG <foreignObject> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <foreignObject> element of SVG includes elements from a different XML namespace. It is an extensibility point which allows user agents to offer graphical rendering features beyond th
    1 min read
    SVG <g> Element
    The SVG <g> element is a container used to group other SVG elements. Transformations applied to the <g> element are also performed on its child elements, and its attributes are inherited by its children. Syntax: <g attributes="" > <elements> </g> Attributes: core Attrib
    2 min read
    SVG <hatch> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <hatch> SVG element is used to stroke an object. It uses one or more pre-defined paths to fill an object. It repeats the path after a fixed interval in a specified direction to cover
    2 min read
    SVG <image> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files. The only image formats SVG software must support are JPEG, PNG, and ot
    1 min read
    SVG line Element
    The SVG <line> element is used to draw line. The start point and endpoints are given to draw the line. Syntax: <line x1="x-axis co-ordinate" y1="y-axis co-ordinate" x2="x-axis co-ordinate" y2="y-axis co-ordinate" > </line> Attribute: x1: x-axis start point.y1: y-axis start point.x2
    1 min read
    SVG <marker> Element
    The <marker> element in SVG is used to define the graphics that is mostly used for the drawing purpose. It may be used in graphs, charts for making arrowheads and polymarkers on a given path. Syntax: <marker></marker refX="" viewbox="" refY="" markerWidth="" markerHeight="" orient=""
    2 min read
    SVG <mask> Element
    The <mask> element defines the transparency and visibility of the input object. It applies a mask to the input object. It displays the selected portions of an element or an image on the screen while hiding the rest. SVG stands for Scalable Vector Graphic. It can be used to make graphics and an
    2 min read
    SVG <mpath> Element
    The <mpath> is the sub element for the <animateMotion> element that provides the ability to reference an external <path> element as the definition of a motion path.Syntax:<animateMotion attributes="" > <mpath xlink:href=""/></animateMotion>Attributes:xlink:href It
    2 min read
    SVG Path Element
    SVG stands for Scalable Vector Graphics. The SVG <path> element is used to define a path that starts at one point and ends at another. It allows you to create various shapes like lines, curves, and custom designs. You can use SVG paths to make basic or complex shapes, making it a flexible tool
    3 min read
    SVG <pattern> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations in HTML canvas. The <pattern> element is used to fill shapes with patterns made up of images. It fills the shapes in a tiled fashion. Syntax: <pattern> . . . </pattern> Attributes: patternUnits:
    2 min read
    SVG polygon Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <polygon> element of SVG is used to make any type of polygon on the SVG and defines a closed shape consisting of a set of connected straight line segments. Syntax: <polygon points
    2 min read
    SVG Polyline element
    The <polyline> element of SVG in HTML is used to create a shape by connecting lines through different points. It is different from <polygon> as it can be used to create open shapes. Syntax: <polyline points="Pair of points required to draw the shape" stroke="stroke color" fill="fill c
    1 min read
    SVG rect Element
    The SVG <rect> element is used to create a rectangle. We can customize the rectangle shapes:Syntax<rect x = "x-axis co-ordinate" y = "y-axis co-ordinate" width="length" height="length" rx="length" ry="length" style="style information" class="style class" ></rect>AttributesX: x-axis
    1 min read
    SVG <script> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The SVG <script> element allows adding scripts to an SVG document. Syntax: <script> // Script Here </script> Attributes: crossorigin: This defines the COS settings.href: This
    1 min read
    SVG <set> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The SVG <set> element provides an easy means of just setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably b
    1 min read
    SVG <stop> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a defined value within the gradient element. This value tells the color and position to be used within the parent element. Syntax: <stop offset="" stop-color="" stop-opacity="" />
    2 min read
    SVG <style> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The SVG <style> element allows style sheets to be embedded directly within the SVG content. Syntax: <style> Styling Content </style> Attribute: type: Type of stylesheet to be
    1 min read
    SVG <switch> Element
    The <switch> SVG element is used to evaluate attributes on its direct child elements in order and then renders the first child where these attributes evaluate to true. Other remaining children will not be rendered. Syntax: <switch attribute="" > <child 1> <child 2> <child
    1 min read
    SVG <symbol> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The SVG <symbol> element is used to define graphical template objects which can be instantiated by the <use> element. The use of symbol elements for graphics that are used multiple
    1 min read
    SVG text Element
    The SVG <text> element is used to draw text. There are some attributes to customize the text. Syntax: <text x="x-coordinates" y="y-coordinates" dx="list of lengths" dy="list of lengths" rotate="list of numbers" textlength="length" lengthAdjust="spacing" > </text> Attribute: x: x ax
    1 min read
    SVG <textPath> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <textPath> SVG element is used to render the text along with a certain path. To render text along with a certain path, enclose the text in an <textPath> element that has a href
    2 min read
    SVG <title> Element
    The <title> SVG element provides an accessible, short-text description of any SVG container element or graphics element. Text in an <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. When you hover over the element, the title of that ele
    1 min read
    SVG <tspan> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The SVG <tspan> element defines a subtext within a <text> element or another <tspan> element. It allows for adjustment of the style and/or position of that subtext as per use
    1 min read
    SVG <use> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.The SVG <use> element takes nodes from within the SVG document and duplicates them somewhere else.Syntax:<use href="" > Subtext</use>Attribute:x: x-axis coordinates the positi
    1 min read
    SVG <view> Element
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The <view> element is used to alter the attributes of viewbox of the original SVG element. It is used by referencing the element’s id as the target fragment of a URL. It provides feature
    2 min read

    SVG Properties

    SVG AElement.href Property
    The SVG AElement.href property returns an SVGAnimatedLength object corresponding to the attribute of the given A element Syntax: AElement.href Return value: This property returns SVGAnimatedLength object that can be used to get the href of the AElement. Example 1: html <!DOCTYPE html> <html
    1 min read
    SVG prefix Property
    The SVG prefix property returns prefix of the given Attr Element Syntax: string = attribute.prefix Return value: This property returns the prefix of the Attr. Example 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/sv
    1 min read
    SVG namespaceURI Property
    The SVG namespaceURI property returns namespaceURI of the given Attribute element. Syntax: namespace = attribute.namespaceURI Return value: This property returns the namespaceURI of the Attr. Example 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmln
    1 min read
    SVG DOMStringList.length Property
    The SVG DOMStringList.length property returns the length of the given DOMStringList element. Syntax: len= DOMStringList.Length Return value: This property returns the length of the DOMStringList. Example 1: HTML <!DOCTYPE html> <html> <body> <svg width="350" height=
    1 min read
    SVG ownerElement Property
    The SVG ownerElement property returns ownerElement of the given Attr Element. Syntax: name = attribute.ownerElement Return value: This property returns the ownerElement of the Attr. Example 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="ht
    1 min read
    SVG TextPathElement.startOffset Property
    The SVG TextPathElement.startOffset property returns an SVGAnimatedLength object corresponding to the attribute of the given textpath element. Syntax: TextPathElement.startOffset Return value: This property returns SVGAnimatedLength object that can be used to get the startOffset of the TextPath elem
    1 min read
    SVG localName Property
    The SVG localName property returns localName of the given Attr element. Syntax: name = attribute.localName Return value: This property returns the localName of the Attr. Example 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="http://www.w3.
    1 min read
    SVG Event.returnValue Property
    The SVG Event.returnValue property indicates whether the default action for this event has been prevented or not. Syntax: var bool = event.returnValue Return value: This property returns the boolean value of the event element. Example 1: In this example, we will use onclick event for the SVG circle
    2 min read
    SVG Event.isTrusted Property
    The SVG Event.isTrusted property is a boolean that is true when the event was generated by a user action. Syntax: var eventIsTrusted = event.isTrusted Return value: This property returns the boolean value of the event element. Example 1: In this example, we will use onclick event. html <!DOCTYPE
    2 min read
    SVG Event.currentTarget Property
    The SVG Event.currentTarget property identifies the current target for the event, as the event traverses the DOM. Syntax: var currentEventTarget = event.currentTarget Return value: This property returns the object value of the event element. Example 1: html <!DOCTYPE html> <html> <bod
    1 min read
    SVG Event.bubbles Property
    The SVG Event.bubbles property indicates whether the event bubbles up through the DOM or not. Syntax: var doesItBubble = event.bubbles Return value: This property returns the boolean value of the event element. Example 1: In this example, we will use onclick event. html <!DOCTYPE html> <htm
    2 min read
    SVG Event.composed Property
    The SVG Event.composed property indicates whether the event will propagate across the shadow DOM boundary into the standard DOM. Syntax: const isComposed = Event.composed Return value: This property returns the boolean value of the event element. Example 1: In this example, we will use onclick event
    2 min read
    SVG Event.defaultPrevented Property
    The SVG Event.defaultPrevented property returns a Boolean value indicating whether the call to Event.preventDefault() canceled the event. Syntax: var defaultWasPrevented = event.defaultPrevented Return value: This property returns the boolean value of the event element. Example 1: In this example, w
    2 min read
    SVG Element.outerHTML Property
    The SVG Element.outerHTML property returns innerHTML of the given element. Syntax: const content = element.outerHTML Return value: This property returns outerHTML of the element. Example 1: HTML <!DOCTYPE html> <html> <body> <svg width="350" height="100" xmln
    1 min read
    SVG Document.doctype Property
    The SVG Document.doctype property returns the doctype of the document. Syntax: doctype = document.doctype Return value: This property returns the doctype of the document. Example: HTML <!DOCTYPE html> <html> <body> <svg width="350" height="500" xmlns="ht
    1 min read
    SVG Document.head Property
    The SVG Document.head property returns an object which contains the information about the head of the document. Syntax: var objRef = document.head Return value: This property returns an object which contains the information about the head of the document. Example 1: HTML <!DOCTYPE html> <ht
    1 min read
    SVG Document.body Property
    The SVG Document.body property returns an object which contains the information about the body of the document. Syntax: const objRef = document.body Return value: This property returns an object which contains the information about the body of the document. Example 1: HTML <!DOCTYPE html> <
    1 min read
    SVG Document.image Property
    The SVG Document.image property returns the collection of images in the current HTML document. Syntax: var imageCollection = document.images Return value: This property returns the collection of images in the current HTML document. Example: HTML <!DOCTYPE html> <html> <body> <im
    1 min read
    SVG Document.timeline property
    The SVG Document.timeline property represents the default timeline of the current document. This timeline is automatically created when the page loads. For each document timeline is unique. Syntax: var tl = document.timeline Return value: This property returns an object which contains information ab
    1 min read
    SVG Document.scripts Property
    The SVG Document.scripts property returns the list of script element in the document. Syntax: var scriptList = document.scripts Return value: This property returns the list of script element in the document. Example 1:  HTML <!DOCTYPE html> <html> <body> <script></script
    1 min read
    SVG Document.hidden Property
    The SVG Document.hidden property returns the boolean value for the check if the page is hidden or not. Syntax: var boolean = document.hidden Return value: This property returns the boolean value if the page is hidden or not. Example: HTML <!DOCTYPE html> <html> <body> <svg width
    1 min read
    SVG Document.documentURI Property
    The SVG Document.documentURI property returns the document location as a string. Syntax: const uri = document.documentURI Return value: This property returns the document location as a string. Example: HTML <!DOCTYPE html> <html> <body> <svg width="350" height="500" xmlns="http:
    1 min read
    SVG Document.documentElement Property
    The SVG Document.documentElement property returns the root element of the document. Syntax: const element = document.documentElement Return value: This property returns the root element of the document. Example 1: HTML <!DOCTYPE html> <html> <body> <svg width="350" hei
    1 min read
    SVG LineElement.x2 Property
    The SVG LineElement.x2 property is used to return an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: LineElement.x2 Return Value: This property returns an SVGAnimatedLength object that can be used to get the "x2" value and other properties of the line eleme
    1 min read
    SVG LineElement.y2 Property
    The SVG LineElement.y2 property returns an SVGAnimatedLength object corresponding to the attribute of the given line element Syntax: LineElement.y2 Return value: This property returns SVGAnimatedLength object that can be used to get the y2 of the line element Example 1: HTML <!DOCTYPE html>
    1 min read
    SVG LineElement.x1 Property
    The SVG LineElement.x1 property returns an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: LineElement.x1 Return value: This property returns SVGAnimatedLength object that can be used to get the "x1" of the line element. Example 1: HTML <!DOCTYPE html
    1 min read
    SVG LineElement.y1 Property
    The SVG LineElement.y1 property returns an SVGAnimatedLength object corresponding to the attribute of the given line element Syntax: LineElement.y1 Return value: This property returns SVGAnimatedLength object that can be used to get the y1 of the line element Example 1: HTML <!DOCTYPE html>
    1 min read
    SVG Element.part Property
    The SVG Element.part property returns a DOMTokenList which represents the part identifiers for the given element. Syntax: let elementPartList = element.part Return value: This property returns a DOMTokenList which represents the part identifiers of the given element. Example 1: HTML <!DOCTYPE htm
    1 min read
    SVG Element.id Property
    The SVG Element.id property returns the id of the given element. Syntax: var idStr = element.id; // Get the id Return value: This property returns the id of the element. Example 1: HTML <!DOCTYPE html> <html> <body> <svg width="350" height="350" xmlns="h
    1 min read
    SVG Element.attributes Property
    The SVG Element.attributes property returns an object that contains all the attributes of the given element. Syntax: var attr = element.attributes Return value: This property returns an object that contains all the attributes of the element. Example 1: HTML <!DOCTYPE html> <html> <bod
    1 min read
    SVG Element.classList Property
    The SVG Element.classList property returns the classList of the given element. Syntax: var attr = element.classList Return value: This property returns classList of the element. Example 1: HTML <!DOCTYPE html> <html> <body> <svg width="350" height="350" xmlns
    1 min read
    SVG Element.className Property
    The SVG Element.className property is used to return the className of the given Element. Syntax: var cName = element.className Return value: This property returns the className of the Element. Example 1: HTML <!DOCTYPE html> <html> <body> <svg width="350" height="
    1 min read
    SVG Element.innerHTML Property
    The SVG Element.innerHTML property returns innerHTML of the given element. Syntax: const content = element.innerHTML Return value: This property returns innerHTML of the element. Example 1: html <!DOCTYPE html> <html> <body> <svg width="350" height="100" xmln
    1 min read
    SVG LinearGradientElement.x2 Property
    The SVG LinearGradientElement.x2 Property Returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element. Syntax: LinearGradientElement.x2 Return value: This property returns SVGAnimatedLength object that can be used get the x2 the LinearGradient element. Exam
    1 min read
    SVG LinearGradientElement.y1
    The SVG LinearGradientElement.y1 Property Returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element. Syntax: LinearGradientElement.y1 Return value: This property returns SVGAnimatedLength object that can be used get the y1 the LinearGradient element Examp
    1 min read
    SVG LinearGradientElement.y2 Property
    The SVG LinearGradientElement.y2 Property returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element Syntax: LinearGradientElement.y2 Return value: This property returns SVGAnimatedLength object that can be used get the y2 the LinearGradient element. Examp
    1 min read
    SVG LinearGradientElement.x1 Property
    The SVG LinearGradientElement.x1 Property Returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element Syntax: LinearGradientElement.x1 Return value: This property returns SVGAnimatedLength object that can be used get the x1 the LinearGradient element. Examp
    1 min read
    SVG EllipseElement.ry Property
    The SVG EllipseElement.ry property Returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element Syntax: EllipseElement.ry Return value: This property returns SVGAnimatedLength object that can be used get the ry of the Ellipse element Example 1: html <!DOCTYPE ht
    1 min read
    SVG EllipseElement.rx Property
    The SVG EllipseElement.rx property Returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element Syntax: EllipseElement.rx Return value: This property returns SVGAnimatedLength object that can be used get the rx of the Ellipse element Example 1: html <!DOCTYPE ht
    1 min read
    SVG EllipseElement.cy Property
    The SVG EllipseElement.cy property Returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element Syntax: EllipseElement.cy Return value: This property returns SVGAnimatedLength object that can be used get the cy of the Ellipse element Example 1: html <!DOCTYPE ht
    1 min read
    SVG EllipseElement.cx Property
    The SVG EllipseElement.cx property returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element Syntax: EllipseElement.cx Return value: This property returns SVGAnimatedLength object that can be used get the cx of the Ellipse element Example 1: HTML <!DOCTYPE ht
    1 min read
    SVG RectElement.y Property
    The SVG RectElement.y property returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element. Syntax: RectElement.y Return Values: This property returns SVGAnimatedLength object that can be used get the y-axis of the rect element. Example 1: HTML <!DOCTYPE html>
    1 min read
    SVG RectElement.x Property
    The SVG RectElement.x property returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element Syntax: RectElement.x Return Values: This property returns SVGAnimatedLength object that can be used get the x-axis of the rect element Example 1: HTML <!DOCTYPE html> <
    1 min read
    SVG RectElement.ry Property
    The SVG RectElement.ry property is used to return an SVGAnimatedLength object corresponding to the attribute of the given rectangle element. Syntax: RectElement.ry Return Value: This property returns an SVGAnimatedLength object that can be used to get the "ry" value and other properties of the recta
    1 min read
    SVG RectElement.width Property
    The SVG RectElement.width property returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element. Syntax: RectElement.width Return Values: This property returns SVGAnimatedLength object that can be used get the width of the rect element Example 1: HTML <!DOCTYPE html
    1 min read
    SVG RectElement.height Property
    The SVG RectElement.height property returns an SVGAnimatedLength with respect to the rect element of SVG element of the HTML web page. Syntax: RectElement.height Return Values: This property returns SVGAnimatedLength object that can be used to get the "height" of the rect element Example 1: HTML
    1 min read
    SVG RectElement.rx Property
    The SVG RectElement.rx property is used to return an SVGAnimatedLength object corresponding to the attribute of the given rectangle element. Syntax: RectElement.rx Return Values: This property returns an SVGAnimatedLength object that can be used to get the "rx" value and other properties of the rect
    1 min read
    SVG CircleElement.r Property
    SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The SVG CircleElement r property returns an SVGAnimatedLength object corresponding to the attribute of the given line element Syntax: CircleElement.r Return value: This property returns SVGAni
    1 min read
    SVG CircleElement.cy Property
    The SVG CircleElement.cy property returns an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: CircleElement.cy Return value: This property returns SVGAnimatedLength object that can be used get the cy of the circle element Example 1: HTML <!DOCTYPE html
    1 min read
    SVG CircleElement.cx Property
    The SVG CircleElement.cx property returns an SVGAnimatedLength object corresponding to the attribute of the given line element. Syntax: CircleElement.cx Return value: This property returns the SVGAnimatedLength object that can be used get the cx of the circle element. Example 1: html <!DOCTYPE ht
    1 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: HTML <!DOC
    1 min read
    SVG Stroke Properties
    The SVG offers several stroke properties to be applied to the SVG element. There are lots of properties under stroke properties which can be applied any kind of lines, text, and outlines of elements like a circle. Syntax: <elementName stroke="stroke color" stroke-width="Width of the stroke" strok
    2 min read
    SVG SpecularLighting.specularExponent Property
    The SVG SpecularLighting.specularExponent property returns the SVGAnimatedNumber object corresponding to the specularExponent component of the SpecularLighting.specularExponent element. Syntax: var a = FESpecularLighting.specularExponent Return value: This property returns the SVGAnimatedNumber obje
    2 min read
    SVG SpecularLighting.kernelUnitLengthY Property
    The SVG SpecularLighting.kernelUnitLengthY property returns the SVGAnimatedNumber object corresponding to the kernelUnitLengthY component of the FESpecularLighting.kernelUnitLengthY element. Syntax: var a = FESpecularLighting.kernelUnitLengthY Return value: This property returns the SVGAnimatedNumbe
    2 min read
    SVG UseElement.height Property
    The SVG UseElement.height property returns an SVGAnimatedLength object corresponding to the attribute of the given use element Syntax: UseElement.height Return value: This property returns SVGAnimatedLength object that can be used to get the height of the used element. Example 1: HTML <!DOCTYPE h
    1 min read
    SVG UseElement.width Property
    The SVG UseElement.width property Returns an SVGAnimatedLength object corresponding to the attribute of the given use element. Syntax: UseElement.width Return value: This property returns SVGAnimatedLength object that can be used get the width the use element. Example 1: HTML <!DOCTYPE html>
    1 min read
    SVG UseElement.x Property
    The SVG UseElement.x property returns an SVGAnimatedLength object corresponding to the attribute of the given use element Syntax: UseElement.x Return value: This property returns SVGAnimatedLength object that can be used to get the x of the use element. Example 1: HTML <!DOCTYPE html> <html
    1 min read
    SVG UseElement.y Property
    The SVG UseElement.y property returns an SVGAnimatedLength object corresponding to the attribute of the given use element. Syntax: UseElement.y Return value: This property returns SVGAnimatedLength object that can be used get the y of the use element. Example 1: HTML <!DOCTYPE html> <html
    1 min read
    SVG Window.closed Property
    The SVG Window.closed property indicates whether the referenced window is closed or not. Syntax: const isClosed = windowRef.closed Return value: This property returns the boolean value of the event element. Example 1: In this example, we will use onclick event. html <!DOCTYPE html> <html
    2 min read
    SVG Window.crypto Property
    The SVG Window.crypto property returns the Crypto object associated to the global object. Syntax: var cryptoObj = window.crypto Return value: This property returns the Crypto object associated to the global object. Example 1: html <!DOCTYPE html> <html> <body> <svg viewBox=
    1 min read
    SVG Window.history Property
    The SVG Window.history property returns a reference to the History object. Syntax: var e = window.history Return value: This property returns a reference to the History object. Example 1: In this example we will use onclick event. html <!DOCTYPE html> <html> <body> <center>
    1 min read
    SVG window.toolbar Property
    The SVG window.toolbar property returns the toolbar object through which we can check the visibility. Syntax: var tb = window.toolbar Return value: This property returns the toolbar object Example 1:  HTML <!DOCTYPE html> <html> <body> <center> <h1>GeeksforGeeks</h1
    1 min read
    SVG Window.isSecureContext Property
    The SVG Window.isSecureContext property indicates whether a context is capable of using features that require Secure Contexts. Syntax: var isSecure = window.isSecureContext Return value: This property returns the boolean value Example 1: In this example, we will use onclick event. HTML <!DOCTYPE
    1 min read
    SVG window.statusbar Property
    The SVG window.statusbar property returns the statusbar object through which we can check the visibility. Syntax: var sb = window.statusbar Return value: This property returns the statusbar object. Example 1: HTML <!DOCTYPE html> <html> <body> <center> <h1>GeeksforGeeks
    1 min read
    SVG Window.document Property
    The SVG Window.document property returns a reference to the document contained in the window. Syntax: var object = window.document Return value: This property returns a reference to the document contained in the window. Example 1: HTML <!DOCTYPE html> <html> <body> <svg viewBox=
    1 min read
    SVG Window.event Property
    The SVG Window.event property returns the event which is currently being handled by the site's code. Syntax: var e = window.event Return value: This property returns the Event which is currently being handled by the site's code. Example 1: In this example we will use onclick event. HTML <!DOCTYPE
    1 min read
    SVG window.performance Property
    The SVG window.performance property is used to gather performance information about the current document. Syntax: var p = window.performance Return value: This property returns a performance object. Example 1: HTML <!DOCTYPE html> <html> <body> <center> <h1>GeeksforGeek
    1 min read
    SVG window.menubar Property
    The SVG window.menubar property returns the menubar object through which we can check the visibility. Syntax: var mb = window.menubar Return value: This property returns the menubar object. Example 1:  HTML <!DOCTYPE html> <html> <body> <center> <h1>GeeksforGeeks</h1
    1 min read
    SVG window.scrollbars Property
    The SVG window.scrollbars property returns the scrollbars object through which we can check the visibility. Syntax: var sb = window.scrollbars Return value: This property returns the scrollbars object. Example 1: HTML <!DOCTYPE html> <html> <body> <center> <h1>GeeksforG
    1 min read
    SVG FEBlendElement.mode Property
    The SVG FEBlendElement.mode property returns the SVGAnimatedEnumeration object corresponding to the mode attribute of the FEBlendElement.mode element. Syntax: var a = FEBlendElement.mode Return value: This property returns the SVGAnimatedEnumeration object corresponding to the mode attribute of the
    1 min read
    SVG FEBlendElement.in2 Property
    The SVG FEBlendElement.in2 property returns the SVGAnimatedString object corresponding to the in2 attribute of the FEBlendElement.in2 element. Syntax: var a = FEBlendElement.in2 Return value: This property returns the SVGAnimatedString object corresponding to the in2 attribute of the FEBlendElement.
    1 min read
    SVG FEBlendElement.in1 Property
    The SVG FEBlendElement.in1 property returns the SVGAnimatedString object corresponding to the in attribute of the FEBlendElement.in1 element. Syntax: var a = FEBlendElement.in1 Return value: This property returns the SVGAnimatedString object corresponding to the in attribute of the FEBlendElement.in
    1 min read
    SVG FEDisplacementMap.scale Property
    The SVG FEDisplacementMap.scale property returns the SVGAnimatedNumber object corresponding to the scale component of the FEDisplacementMap.scale element. Syntax: var a = FEDisplacementMap.scale Return value: This property returns the SVGAnimatedNumber object corresponding to the scale component of
    1 min read
    SVG FEDisplacementMap.in2 Property
    The SVG FEDisplacementMap.in2 property returns the SVGAnimatedString object corresponding to the in2 component of the FEDisplacementMap element. Syntax: let in_prop = FEDisplacementMap.in2 Return value: This property returns the SVGAnimatedString object corresponding to the in2 component of the FEDi
    1 min read
    SVG FEDisplacementMap.in1 Property
    The SVG FEDisplacementMap.in1 property returns the SVGAnimatedString object corresponding to the in component of the FEDisplacementMap.in1 element. Syntax: var a = FEDisplacementMap.in1 Return value: This property returns the SVGAnimatedString object corresponding to the in component of the FEDispla
    1 min read
    SVG FEDisplacementMap.xChannelSelector Property
    The SVG FEDisplacementMap.xChannelSelector property returns the SVGAnimatedEnumeration object corresponding to the xChannelSelector component of the FEDisplacementMap.xChannelSelector element. Syntax: var a = FEDisplacementMap.xChannelSelector Return value: This property returns the SVGAnimatedEnume
    1 min read
    SVG FEDisplacementMap.yChannelSelector Property
    The SVG FEDisplacementMap.yChannelSelector property returns the SVGAnimatedEnumeration object corresponding to the yChannelSelector component of the FEDisplacementMap.yChannelSelector element. Syntax: var a = FEDisplacementMap.yChannelSelector Return value: This property returns the SVGAnimatedEnume
    1 min read
    SVG FEDropShadow.dx Property
    The SVG FEDropShadow.dx property returns the SVGAnimatedNumber object corresponding to the dx component of the FEDisplacementMap.dx element. Syntax: var a = FEDropShadow.dx Return value: This property returns the SVGAnimatedNumber object corresponding to the dx component of the FEDisplacementMap.dx
    1 min read
    SVG FEDropShadow.dy Property
    The SVG FEDropShadow.dy property returns the SVGAnimatedNumber object corresponding to the dy component of the FEDisplacementMap.dy element. Syntax: var a = FEDropShadow.dy Return value: This property returns the SVGAnimatedNumber object corresponding to the dy component of the FEDisplacementMap.dy
    1 min read
    SVG FEDropShadow.in1 Property
    The SVG FEDropShadow.in1 property returns the SVGAnimatedstring object corresponding to the in1 component of the FEDisplacementMap.in1 element. Syntax: var a = FEDropShadow.in1 Return value: This property returns the SVGAnimatedstring object corresponding to the in1 component of the FEDisplacementMa
    1 min read
    SVG FEDropShadow.stdDeviationX Property
    The SVG FEDropShadow.stdDeviationX property returns the SVGAnimatedNumber object corresponding to the stdDeviationX component of the FEDisplacementMap.stdDeviationX element. Syntax: var a = FEDropShadow.stdDeviationX Return value: This property returns the SVGAnimatedNumber object corresponding to t
    1 min read
    SVG FEDropShadow.stdDeviationY Property
    The SVG FEDropShadow.stdDeviationY property returns the SVGAnimatedNumber object corresponding to the stdDeviationY component of the FEDisplacementMap.stdDeviationY element. Syntax: var a = FEDropShadow.stdDeviationY Return value: This property returns the SVGAnimatedNumber object corresponding to t
    1 min read
    SVG FEGaussionBlur.in1 Property
    The SVG FEGaussionBlur.in1 property returns the SVGAnimatedString object corresponding to the in1 component of the FEGaussionBlur.in1 element. Syntax: var a = FEGaussionBlur.in1 Return value: This property returns the SVGAnimatedString object corresponding to the in1 component of the FEGaussionBlur.
    1 min read
    SVG FEGaussionBlur.stdDeviationX Property
    The SVG FEGaussionBlur.stdDeviationX property returns the SVGAnimatedNumber object corresponding to the stdDeviationX component of the FEGaussionBlur.stdDeviationX element. Syntax: var a = FEGaussionBlur.stdDeviationX Return value: This property returns the SVGAnimatedNumber object corresponding to
    1 min read
    SVG FEGaussionBlur.stdDeviationY Property
    The SVG FEGaussionBlur.stdDeviationY property returns the SVGAnimatedNumber object corresponding to the stdDeviationY component of the FEGaussionBlur.stdDeviationY element. Syntax: var a = FEGaussionBlur.stdDeviationY Return value: This property returns the SVGAnimatedNumber object corresponding to
    1 min read
    SVG FEMergeNode.in1 Property
    The SVG FEMergeNode.in1 property returns the SVGAnimatedString object corresponding to the in1 component of the FEMergeNode element. Syntax: let in_prop = FEMergeNode.in1 Return value: This property returns the SVGAnimatedString object corresponding to the in1 component of the FEMergeNode element. E
    1 min read
    SVG FEOffset.in1 Property
    The SVG FEOffset.in1 property returns the SVGAnimatedString object corresponding to the in1 component of the FEOffset.in1 element. Syntax: var a = FEOffset.in1 Return value: This property returns the SVGAnimatedString object corresponding to the in1 component of the FEOffset.in1 element. Example 1:
    1 min read
    SVG FEOffset.dx Property
    The SVG FEOffset.dx property returns the SVGAnimatedNumber object corresponding to the dx component of the FEOffset.dx element. Syntax: var a = FEOffset.dx Return value: This property returns the SVGAnimatedNumber object corresponding to the dx component of the FEOffset.dx element. Example 1: HTML
    1 min read
    SVG FEOffset.dy Property
    The SVG FEOffset.dy property returns the SVGAnimatedNumber object corresponding to the dy component of the FEOffset element. Syntax: let offset_prop = FEOffset.dy Return value: This property returns the SVGAnimatedNumber object corresponding to the dy component of the FEOffset element. Example 1: HT
    1 min read
    SVG FESpotLightElement.z Property
    The SVG FESpotLightElement.z property returns the SVGAnimatedNumber object corresponding to the z attribute of the FESpotLightElement.z element. Syntax: var a = FESpotLightElement.z Return value: This property returns the SVGAnimatedNumber object corresponding to the z attribute of the FESpotLightEl
    2 min read
    SVG FESpotLightElement.x Property
    The SVG FESpotLightElement.x property returns the SVGAnimatedNumber object corresponding to the x attribute of the FESpotLightElement.x element. Syntax: var a = FESpotLightElement.x Return value: This property returns the SVGAnimatedNumber object corresponding to the x attribute of the FESpotLightEl
    2 min read
    SVG FESpotLightElement.y Property
    The SVG FESpotLightElement.y property returns the SVGAnimatedNumber object corresponding to the y attribute of the FESpotLightElement.y element. Syntax: var a = FESpotLightElement.y Return value: This property returns the SVGAnimatedNumber object corresponding to the y attribute of the FESpotLightEl
    2 min read
    SVG FESpotLightElement.pointsAtX Property
    The SVG FESpotLightElement.pointsAtX property returns the SVGAnimatedNumber object corresponding to the pointsAtX attribute of the FESpotLightElement.pointsAtX element. Syntax: var a = FESpotLightElement.pointsAtX Return value: This property returns the SVGAnimatedNumber object corresponding to the
    1 min read
    SVG FESpotLightElement.limitingConeAngle Property
    The SVG FESpotLightElement.limitingConeAngle property returns the SVGAnimatedNumber object corresponding to the limitingConeAngle attribute of the FESpotLightElement.limitingConeAngle element. Syntax: var a = FESpotLightElement.limitingConeAngle Return value: This property returns the SVGAnimatedNum
    2 min read
    SVG FESpecularLighting.in1 Property
    The SVG FESpecularLighting.in1 property returns the SVGAnimatedString object corresponding to the in1 component of the FESpecularLighting.in1 element. Syntax: var a = FESpecularLighting.in1 Return value: This property returns the SVGAnimatedString object corresponding to the in1 component of the FES
    2 min read
    SVG FESpecularLighting.surfaceScale Property
    The SVG FESpecularLighting.surfaceScale property returns the SVGAnimatedNumber object corresponding to the surfaceScale component of the FESpecularLighting.surfaceScale element. Syntax: var a = FESpecularLighting.surfaceScale Return value: This property returns the SVGAnimatedNumber object correspon
    2 min read
    SVG FESpecularLighting.specularConstant Property
    The SVG FESpecularLighting.specularConstant property returns the SVGAnimatedNumber object corresponding to the specularConstant component of the FESpecularLighting.specularConstant element. Syntax: var a = FESpecularLighting.specularConstant Return value: This property returns the SVGAnimatedNumber
    2 min read
    SVG FESpecularLighting.kernelUnitLengthX Property
    The SVG SpecularLighting.kernelUnitLengthX property returns the SVGAnimatedNumber object corresponding to the kernelUnitLengthX component of the FESpecularLighting.kernelUnitLengthX element. Syntax: var a = FESpecularLighting.kernelUnitLengthX Return value: This property returns the SVGAnimatedNumbe
    2 min read
    SVG FESpotLightElement.pointsAtY Property
    The SVG FESpotLightElement.pointsAtY property returns the SVGAnimatedNumber object corresponding to the pointsAtY attribute of the FESpotLightElement.pointsAtY element. Syntax: var a = FESpotLightElement.pointsAtY Return value: This property returns the SVGAnimatedNumber object corresponding to the
    1 min read
    SVG FESpotLightElement.pointsAtZ Property
    The SVG FESpotLightElement.pointsAtZ property returns the SVGAnimatedNumber object corresponding to the pointsAtZ attribute of the FESpotLightElement.pointsAtZ element. Syntax: var a = FESpotLightElement.pointsAtZ Return value: This property returns the SVGAnimatedNumber object corresponding to the
    1 min read

    SVG Attributes

    SVG by Attribute
    The by attribute specifies a relative offset value for an attribute that will be modified during an animation. Syntax: by="numbers" Attribute Values: integers: Integer at which we want to set the by attribute. We will use the by attribute for adjusting the size of the shape. Example 1: HTML <!DOC
    1 min read
    SVG cx Attribute
    The cx attribute define the x-axis coordinate of a center point. Syntax: cx="x-centre" Attribute Values: length: Length at which we want to set the cx-coordinate.percentage: Percentage at which we want to set the cx-coordinate. We will use the cx attribute for setting the cx-coordinate. Example 1: h
    1 min read
    SVG cy Attribute
    The cy attribute defines the y-axis coordinate of a center point. Syntax: cyx="y-centre"Attribute Values: length: Length at which we want to set the cy-coordinate.percentage: Percentage at which we want to set the cy-coordinate.We will use the cy attribute for setting the cy-coordinate. Example 1: H
    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 elemen
    1 min read
    SVG fill-opacity Attribute
    The fill-opacity attribute is a presentation attribute defining the opacity of the paint applied to a shape. Syntax: fill-opacity="colour" Attribute Values: decimal: Decimal value at which we want to make our element opaque.percentage: Percentage at which we want to set the fill-opacity attribute. W
    1 min read
    SVG filter Attribute
    The filter attribute is used to specify the filter effects that are defined by the <filter> element which are to be applied to its elements. Syntax: filter="value" Attribute values: value: The filter values to be applied to the element We will use the filter attribute for setting the filter of
    1 min read
    SVG flood-color Attribute
    The flood-color attribute indicates what color is used to flood the current filter primitive subregion. Syntax: flood-color="color" Attribute Values: color: The color that we want to flood. We will use the flood-color attribute for setting the flood color. Example 1: html <!DOCTYPE html> <h
    1 min read
    SVG flood-opacity Attribute
    The flood-opacity attribute indicates the opacity value to use across the current filter primitive subregion. Syntax: flood-opacity="flood" Attribute Values: flood: A number or percentage indicating the opacity value to use across the current filter primitive subregion We will use the fill-opacity a
    1 min read
    SVG font-size Attribute
    The font-size attribute refers to the size of the font from baseline when multiple lines of text are set solid in a multiline layout environment. Syntax: font-size="size" Attribute Values: length: Length at which we want to set the size.percentage: Percentage at which we want to set the size. We wil
    1 min read
    SVG font-size-adjust Attribute
    The font-size-adjust attribute allows you to set the aspect value for an element that will set the x-height of the first choice font in the given substitute font. This attribute adjusts the font size x-height according to the font-family. Syntax: font-size-adjust="size" Attribute Values: decimal: De
    1 min read
    SVG font-style Attribute
    The font-style attribute is used to specify whether the text is to be rendered using a normal, italic, or oblique face style. Syntax: font-style="style" Attribute Values: The attribute can have the following values: normal: This specifies that the text should be displayed in the normal form.italic:
    1 min read
    SVG visibility Attribute
    The visibility attribute allows you to control the visibility of graphical elements. It has effect only on the following elements <a>, <altGlyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignObject>, <iframe>, <image>, <line>, <path
    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: HTML <!DOCTYPE html> <html>
    1 min read
    SVG fr Attribute
    The fr attribute defines the radius of the focal point for the linear gradient. Syntax: fr="radius" Attribute Values: length: Length at which we want to set the radius.percentage: Percentage at which we want to set the radius.We will use the fr attribute for setting the radius of the element. Exampl
    1 min read
    SVG height Attribute
    The height attribute defines the vertical length of an element. Syntax: height= "height" Attribute Values: length: Length at which we want to set the height attributepercentage: Percentage at which we want to set the height attribute We will use the height attribute for setting the height of the ele
    1 min read
    SVG keyPoints Attribute
    The keyPoints attribute specifies the duration of an animation. The elements that are using this attribute includes: <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>.Syntax:keyPoints = [;<number>]*Attribute Values: The keyPoints attribute
    1 min read
    SVG keyTimes Attribute
    The keyTimes attribute is used to specify a list of floating point numbers (Time values) between 0 and 1 (inclusive) which is used to control the pacing of the animation. The elements that are using this attribute includes <animate>, <animateColor>, <animateMotion>, and <animate
    1 min read
    SVG lengthAdjust Attribute
    The lengthAdjust attribute is used to decide the stretching of the text within the length defined by the textLength attribute. The elements which are using this attribute are <text>, <textPath>, <tref>, and <tspan>. Syntax: lengthAdjust = spacing | spacingAndGlyphs Attribute
    2 min read
    SVG letter-spacing Attribute
    The letter-spacing attribute controls spacing between text characters i.e. increasing or decreasing the space between characters in a text. Syntax: letter-spacing = keyword-values | length-values | global-values Attribute Values: The letter-spacing attribute accepts three values mentioned above and
    1 min read
    SVG lighting-color Attribute
    The lighting-color attribute represents the color of the light source for lighting filter primitives. The elements that using this attribute includes <feDiffuseLighting> and <feSpecularLighting> Syntax: lighting-color ="color" Attribute Values: The lighting-color attribute accepts the va
    1 min read
    SVG markerHeight Attribute
    The markerHeight attribute indicates the height of the viewport into which the <marker> is to be fitted when it is displayed according to the preserveAspectRatio and viewBox attributes. Only <marker> element is using this attribute. Syntax: markerrHeight = "length-percentage" | "number"
    2 min read
    SVG markerWidth Attribute
    The markerWidth attribute indicates the width of the viewport within which the <marker> is to be adjusted when it is displayed according to the preserveAspectRatio and viewBox attributes. Only <marker> element is using this attribute. Syntax: markerWidth = "length-percentage" | "number"
    2 min read
    SVG mask Attribute
    The SVG mask attribute is used to bind an element in which this attribute is defined to with the given <mask> element. It has effect mostly on the following elements. <a>, <circle>, <clipPath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker
    2 min read
    SVG media Attribute
    The media attribute shows a media query that must be matched for a style sheet to apply. Only <style> element is using this attribute.Syntax:<style media="media-query-list"> // Styling the element</style>Attribute Values: The media attribute accepts the values mentioned above and d
    2 min read
    SVG numOctaves Attribute
    The numOctaves attribute defines the number of octaves for the noise function of the <feTurbulence> primitive. Only <feTurbulence> element is using this attribute. Syntax: numOctaves = "integer" Attribute Values: The numOctaves attribute accepts the values mentioned above and described b
    1 min read
    SVG opacity Attribute
    The opacity attribute specifies the transparency of an object or of a group of objects. Syntax: opacity= "opacity" Attribute Values: decimal: The decimal at which we want to make our element opaque We will use the opacity attribute for setting the opacity of the element. Example 1: In this example w
    1 min read
    SVG operator Attribute
    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 oper
    2 min read
    SVG orient Attribute
    The orient attribute shows, how a marker is rotated when it is placed at its position on the shape. Only <marker> element is using this attribute. Syntax: orient = auto | auto-start-reverse | angle | number Attribute Values: The orient attribute accepts the values mentioned above and described
    2 min read
    SVG path attribute
    The path attribute defines a text path or the motion path along with the characters of a text are displayed or a referenced element is animated respectively. The elements that are using this attribute includes: <animateMotion> and <textPath>.Syntax:path = path-dataAttribute Values: The p
    2 min read
    SVG pathLength Attribute
    The pathLength attribute defines the total length for the path, in user units. The elements which are using this attribute are: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> Syntax: pathLength = number Attribute Values: The pathLengt
    1 min read
    SVG patternContentUnits Attribute
    The patternContentUnits attribute is used to indicate which coordinate system must be used for the contents of the <pattern> element. Syntax: patternContentUnits ="userSpaceOnUse" // Or patternContentUnits ="objectBoundingBox" Attribute Values: The patternContentUnits attribute accepts the val
    2 min read
    SVG patternTransform Attribute
    The patternTransform attribute describes a list of transform functions that are applied to a pattern. Syntax: patternTransform = "values" Attribute Values: The patternTransform attribute accepts values that are described below: Matrix: The transform function moves the object by x and y.Scale: The sc
    2 min read
    SVG patternUnits Attribute
    The patternUnits attribute specifies that which coordinate system must be used for the geometry properties of the <pattern> element. Only <pattern> element is using this attribute. Syntax: patternUnits = userSpaceOnUse | objectBoundingBox Attribute Values: The patternUnits attribute acce
    1 min read
    SVG pointer-events Attribute
    The pointer-events attribute allows us to define whether or when an element may be the target of a mouse event. It is applied on the following elements: <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <mark
    3 min read
    SVG points Attribute
    The points attribute describes a list of points for the polygon or polyline element. If it contains an odd pair of coordinates, the last one will be ignored. Elements that are using this attribute: <polyline> element<polygon> element Syntax: points = numbers Attribute Values: The points
    1 min read
    SVG pointsAtX Attribute
    The pointsAtX attribute denotes the x position in the coordinate system established by primitiveUnits attribute on the <filter> element of the point at which the light source is pointing. Only <feSpotLight> element is using this attribute. Syntax: pointsAtX = number Attribute Values: The
    1 min read
    SVG pointsAtY Attribute
    The pointsAtY attribute denotes the y position in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing. Only <feSpotLight> element is using this attribute. Syntax: pointsAtY = number Attribute Values: The
    1 min read
    SVG pointsAtZ Attribute
    The pointsAtZ attribute denotes the y position in the coordinate system established by primitiveUnits attribute on the <filter> element of the point at which the light source is pointing. The element that is using this attribute: <feSpotLight> element Syntax: pointsAtZ = number Attribute
    1 min read
    SVG r Attribute
    The r attribute defines the radius of the circle. Syntax: r="radius" Attribute Values: length: length at which we want to set the radius.percentage: percentage at which we want to set the radius.We will use the r attribute for setting the radius of the circle Example1: HTML <!DOCTYPE html>
    1 min read
    SVG radius Attribute
    The radius attribute is the radius for the operation on <feMorphology> filter primitive. If two numbers are given then the first number is the x-radius and the second number is the y-radius. If only one number is given, then it is used for both the x and y-axis. Note: A zero or negative value
    1 min read
    SVG repeatCount Attribute
    The repeatCount attribute specifies the time duration of an animation. The elements that are using this attribute includes <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>Syntax:repeatCount = number || indefiniteAttribute Values: The repeatCount
    1 min read
    SVG repeatDur Attribute
    The repeatDur attribute specifies the total duration to repeat the animation. The elements that uses this attribute are: <animate> element<animateColor> element<animateMotion> element<animateTransform> element<set> elementSyntax:repeatDur = clock-value || indefiniteAttr
    1 min read
    SVG restart Attribute
    The restart attribute is used to decide whether an animation will restart or not. The attribute is used by the <animate>, <animateColor>, <animateMotion>, <animateTransform> and <set> elements.Syntax:restart="always | whenNotActive | never"Attribute Values: This attribu
    2 min read
    SVG rotate Attribute
    The rotate attribute shows the rotation of an animated element as it travels along a specified path in an <animateMotion> element.Syntax:rotate = auto | auto-reverse | numberAttribute Values: The rotate attribute accepts the values mentioned above and described below:auto: This value allows th
    2 min read
    SVG rx Attribute
    The rx attribute defines a radius on the x-axis. Elements that are using this attribute: <ellipse> <rect> 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
    1 min read
    SVG ry Attribute
    The ry attribute defines a radius on the y-axis. Elements that are using this attribute: <ellipse><rect> Syntax: ry = "y-radius" Attribute Values: length: Length at which we want to set the y-radius.percentage: Percentage at which we want to set the y-radius.We will use the ry attribute
    1 min read
    SVG scale Attribute
    The scale attribute decides the displacement scale factor that must be used on a <feDisplacementMap> filter primitive. Only <feDisplacementMap> element is using this attribute. Syntax: scale = "number" Attribute Values: The scale attribute accepts the values mentioned above and described
    2 min read
    SVG seed Attribute
    The seed attribute denotes the starting number for the pseudo-random number generator of the <feTurbulence> filter primitive. Only <feTurbulence> element is using this attribute. Syntax: seed = "number" Attribute Values: The seed attribute accepts the values mentioned above and described
    1 min read
    SVG shape-rendering Attribute
    The shape-rendering attribute hints the renderer about the tradeoff's to be made while rendering shapes like paths, circles, or rectangles. It has effect only on the following elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>.
    2 min read
    SVG startoffset Attribute
    The startOffset attribute decides the start of the path for the initial text position. This is done after converting the path to the <textPath> element's coordinate system. Only <textPath> element is using this attribute. Syntax: startOffset = length-percentage | number Attribute Values:
    2 min read
    SVG stdDeviation Attribute
    The stdDeviation attribute explains the standard deviation for the blur operation. Only <feGaussianBlur> element is using this attribute. Syntax: stdDeviation = <number-optional-number> Attribute Values: The stdDeviation attribute accepts the values mentioned above and described below nu
    2 min read
    SVG stitchTiles Attribute
    The stitchTiles attribute indicates the behavior of the Perlin Noise tiles at the border. Only <feTurbulence> primitive is using this attribute. The feTurbulence is one of the important filter primitive of SVG which helps in simulating natural textures like clouds or smokes and many more. Synt
    2 min read
    SVG stop-color Attribute
    The stop-color attribute is used to indicate the color to be used at the stop point of a gradient. It only has an effect on the <stop> element. The default value of this attribute is "black". Syntax: stop-color = currentcolor | color | icccolor Attribute Values: This attribute accepts the valu
    1 min read
    SVG stop-opacity Attribute
    The stop-opacity attribute indicates the alpha value or opacity to be used at the stop point. It has effect only on the <stop> element. The default value is 1. Syntax: stop-opacity = opacity-value Attribute Values: The stop-opacity attribute accepts the values mentioned above and described bel
    1 min read
    SVG stroke Attribute
    The stroke attribute is an attribute defining the color used to paint the outline of the shape Syntax: stroke= "color" Attribute Values: paint: The color in which we want to paint the element. We will use the stroke attribute for setting the color of the element. Example 1: In this example, we will
    1 min read
    SVG stroke-dasharray Attribute
    The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes used to paint the outline of the shape. Syntax: stroke-dasharray="number pattern" Attribute Values: dasharray: The pattern stroke that will have. We will use the stoke-dasharray attribute for setting the patter
    1 min read
    SVG stroke-linecap Attribute
    The stroke-linecap attribute defines the shape of the stroke that is to be used at the end of the open subpath. This is the presentation attribute. Syntax: stroke-linecap="shapes" Attribute Values: butt: This attribute value indicates that the stroke does not extend beyond its two endpoints. round:
    1 min read
    SVG stroke-opacity Attribute
    The stroke-opacity attribute specifies the transparency of an object or of a group of objects. Syntax: stroke-opacity= "opacity" Attribute Values: decimal: decimal value ranging from 0-1percentage: percentage at which we want to set the opacity of the element We will use the stoke-opacity attribute
    1 min read
    SVG stroke-width Attribute
    The stroke-width attribute is an attribute defining the width of the stroke applied to the shape. Syntax: stroke-width="length" Attribute Values: length: Length at which we want to set the stroke-width attributepercentage: Percentage at which we want to set the stroke-width attribute We will use the
    1 min read
    SVG style Attribute
    The style attribute helps us to style an element using CSS declarations. It works very much similar to the style attribute of HTML. Almost all the elements are using this attribute. Syntax: style = "<style>" Attribute values: The style attribute accepts the values mentioned above and described
    1 min read
    SVG surfaceScale Attribute
    The surfaceScale attribute serve as the height of the surface. Elements that are using this attribute includes <feSpecularLighting> and <feDiffuseLighting> Syntax: surfaceScale = "number" Attribute values: The surfaceScale attribute accepts the values mentioned above and described below
    1 min read
    SVG systemLanguage Attribute
    The systemLanguage attribute express a list of many supported language tags. The elements that are using this attribute includes: <a>, <altGlyph>, <animate>, <animateColor>, <animateMotion>, <animateTransform>, <audio>, <canvas>, <circle>, <cl
    1 min read
    SVG tabindex Attribute
    The tabindex attribute allows one to control whether an element is focusable or not. It also defines the relative order in which the elements are focused. All SVG elements can be used with this attribute. Syntax: tabindex="integer" Attribute Values: integer: It is an integer that determines the rela
    1 min read
    SVG tableValues Attribute
    The tableValues attribute declares a list of numbers. These numbers are defining a lookup table of values for a color component transfer function. The elements that are using this attribute includes: <feFuncA>, <feFuncB>, <feFuncG>, and <feFuncR>. Syntax: tableValues = "list-
    2 min read
    SVG text-anchor Attribute
    The text-anchor attribute is used to align a text which is auto-wrapped or pre-formatted. The wrapping area is decided from the inline-size property with respect to a given point. In case of multiple line text, the alignment is made for each line. It has effect only on the following elements <alt
    2 min read
    SVG text-decoration Attribute
    The text-decoration attribute defines whether text is written with a strike-through, overline and/or underline. The main difference between CSS text-decoration property and SVG text-decoration attribute is that, SVG uses the 'fill' and 'stroke' values to paint the text decorations. It has effect onl
    1 min read
    SVG text-rendering Attribute
    The text-rendering attribute gives hint about what contracts should be made while rendering text. It has an effect only on the text element. Syntax: text-renderring = auto | optimizeLegibility | geometricPrecision | optimizeSpeed Attribute Values: The text-rendering attribute accepts the values ment
    1 min read
    SVG textLength Attribute
    The textLength attribute allows you to enumerate the width of the space taken by the text. By using textLength, your SVG text will be displayed at the same width. Elements that are using this attribute includes: <text>, <textPath>, <tref>, and <tspan>. Syntax: textLength = le
    1 min read
    SVG to Attribute
    The SVG to attribute indicates the initial value of an attribute. It is used with from attribute. Syntax: to = "number" Attribute Values: number: This attribute value holds the number at which we want to set the attribute. We will use the to attribute for setting the initial value. Example 1: HTML
    1 min read
    SVG transform Attribute
    The transform attribute states the list of transform definitions that are applied to an element and its children. In SVG 1.1, only these elements are allowed to use transform attribute <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <i
    2 min read
    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>
    2 min read
    SVG vector-effect Attribute
    The vector-effect attribute defines the vector effect to use when drawing an object. These effects are applied before the compositing operations of filters, masks and clips. It has effect only on the <circle>, <ellipse>, <foreignObject>, <image>, <line>, <path>,
    2 min read
    SVG visibility Attribute
    The visibility attribute allows you to control the visibility of graphical elements. It has effect only on the following elements <a>, <altGlyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignObject>, <iframe>, <image>, <line>, <path
    1 min read
    SVG width Attribute
    The width attribute defines the horizontal 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.Exa
    1 min read
    SVG word-spacing Attribute
    The word-spacing attribute in SVG is used to indicate the spacing between words. This spacing can be changed by using the length value of the attribute. When the length is mentioned without a unit identifier, the browser processes it as a width value in the current user coordinate system, otherwise,
    2 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.
    1 min read
    SVG x1 Attribute
    The x1 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that are using this attribute: <line><linearGradient> Syntax: x1 = "x1-coordinate" Attribute Values: length: Length at which we want to set the x1-coordi
    1 min read
    SVG x2 Attribute
    The x2 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that are using this attribute: <line><linearGradient> Syntax: x2 = "x2-coordinate" Attribute Values: length: Length at which we want to set the x2-coordi
    1 min read
    SVG xChannelSelector Attribute
    The xChannelSelector attribute in SVG is used to indicate color channel from in2 that is use to displace the pixels in in along the x-axis. Only <feDisplacementMap> element is using this attribute. Syntax: yChannelSelector = "R | G | B | A" Attribute Values: The attribute accepts four values a
    2 min read
    SVG xml:lang Attribute
    The xml:lang attribute in SVG is used to indicate the primary language that is used in the contents and attributes containing text content on the website. It is allowed in all XML dialects as it is a universal attribute. All elements use this attribute. Syntax: xml:lang = "language-tag" Attribute Va
    1 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 ele
    1 min read
    SVG y1 Attribute
    The y1 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that are using this attribute: <line><linearGradient> Syntax: y1 = "y1-coordinate" Attribute Values: length: :Length at which we want to set the y1-coord
    1 min read
    SVG y2 Attribute
    The y2 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate. Elements that are using this attribute: <line><linearGradient> Syntax: y2 = "y2-coordinate" Attribute Values: length: Length at which we want to set the y2-coordi
    1 min read
    SVG yChannelSelector Attribute
    The yChannelSelector attribute in SVG is used to indicate the channel from in2 that is used to displace the pixels in in along the y-axis. This attribute is used by only <feDisplacementMap> element. Syntax: yChannelSelector = "R | G | B | A" Attribute Values: The attribute accepts four values
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences