SVG <clipPath> Element Last Updated : 15 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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.Syntax<clipPath> ... </clipPath>AttributesclipPathUnits: This attribute defines the coordinate system for the <clipPath> element's content.Below given are a few examples of the function given above.Example 1: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta property="viewport" content= "width=device-width, initial-scale=1.0" /> <title>SVG clipPath Element</title> <style> @keyframes animation1 { from { width: 4px; height: 4px; } to { width: 150px; height: 150px; } } rect { animation: animation1 10s ease-in-out; } </style> </head> <body> <div style="width: 300px; height: 300px;"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> SVG clipPath Element </h2> <svg width="500" height="500" transform="translate(100, 0)"> <clipPath id="gfg"> <rect width="4" height="4"></rect> </clipPath> <path id="path" d="M10, 30 A20, 20, 0, 0, 1, 50, 30 A20, 20, 0, 0, 1, 90, 30 Q90, 60, 50, 90 Q10, 60, 10, 30 Z" /> <use fill="green" clip-path="url(#gfg)" href="#path" /> </svg> </div> </body> </html> Output: Example 2: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta property="viewport" content= "width=device-width, initial-scale=1.0" /> <title>SVG clipPath Element</title> <style> @keyframes star { from { r: 0 } to { r: 500px } } #gfg circle { animation: star 25s ease; } </style> </head> <body> <div style="width:300px; height:300px;"> <h1 style="color:green"> GeeksforGeeks </h1> <h2>SVG clipPath Element</h2> <svg width="500" height="500" transform="translate(60, -40)"> <clipPath id="gfg"> <circle /> </clipPath> <path id="star" d=" M 85.000 105.000 L 105.000 119.641 L 102.321 95.000 L 125.000 85.000 L 102.321 75.000 L 105.000 50.359 L 85.000 65.000 L 65.000 50.359 L 67.679 75.000 L 45.000 85.000 L 67.679 95.000 L 65.000 119.641 z" /> <use clip-path="url(#gfg)" href="#star" fill="red" /> </svg> </div> </body> </html> Output: Browsers Supported: The following browsers are supported by this SVG element:Chrome 1Edge 12Firefox 1.5Opera 9Safari 3 Comment More infoAdvertise with us Next Article SVG defs Element T tarun007 Follow 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 ElementsSVG <a> ElementThe 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> ElementSVG 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> ElementSVG 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> ElementSVG 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 CircleSVG 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> ElementThe <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 ElementThe <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> ElementThe <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 ElementThe 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> ElementSVG 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> ElementSVG 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> ElementSVG 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 ElementThe 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> ElementSVG 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> ElementSVG 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> ElementSVG 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> ElementSVG 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> ElementSVG 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> ElementThe <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> TagThe <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 ElementThe <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> ElementThe <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> ElementSVG 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 ElementThe <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> ElementThe <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 ElementThe 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> ElementSVG 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> ElementThe 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> ElementSVG 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> ElementSVG 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 ElementThe 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> ElementThe <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> ElementThe <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> ElementThe <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 ElementSVG 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> ElementSVG 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 ElementSVG 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 elementThe <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 ElementThe 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> ElementSVG 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> ElementSVG 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> ElementSVG 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> ElementSVG 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> ElementThe <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> ElementSVG 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 ElementThe 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> ElementSVG 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> ElementThe <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> ElementSVG 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> ElementSVG 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> ElementSVG 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 PropertiesSVG AElement.href PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 propertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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="https 1 min read SVG Document.documentElement PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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.y1The 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertySVG 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertiesThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 PropertyThe 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 AttributesSVG by AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 attributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 AttributeThe 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 Like