SVG Property Complete Reference

Read

Discuss

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. It is a type of vector graphic that may be scaled up or down. Properties are used for passing the value to the element, there are lots of properties that can be used in SVG elements.

List of SVG Properties:

SVG Properties	Description	Example
AElement.href	It returns an SVGAnimatedLength object corresponding to the attribute of the given A element.	Try
prefix	It returns prefix of the given Attr Element.	Try
namespaceURI	It returns namespaceURI of the given Attribute element.	Try
DOMStringList.length	It returns the length of the given DOMStringList element.	Try
ownerElement	It returns ownerElement of the given Attr Element.	Try
TextPathElement.startOffset	It returns an SVGAnimatedLength object corresponding to the attribute of the given textpath element.	Try
localName	It returns localName of the given Attr element.	Try
Event.returnValue	It returns a string containing the event’s type.	Try
Event.isTrusted	This property is a boolean that is true when the event was generated by a user action.	Try
Event.currentTarget	It identifies the current target for the event, as the event traverses the DOM.	Try
Event.bubbles	It indicates whether the event bubbles up through the DOM or not.	Try
Event.composed	It indicates whether the event will propagate across the shadow DOM boundary into the standard DOM.	Try
Event.defaultPrevented	It indicates whether the event can be canceled.	Try
Element.outerHTML	It returns innerHTML of the given element.	Try
Document.doctype	It returns the doctype of the document.	Try
Document.head	It returns an object which contains the information about the head of the document.	Try
Document.body	It returns an object which contains the information about the body of the document.	Try
Document.image	It returns the collection of images in the current HTML document.	Try
Document.timeline	It represents the default timeline of the current document.	Try
Document.scripts	The SVG Document.scripts property returns the list of script element in the document.	Try
Document.hidden	It returns the boolean value for the check if the page is hidden or not.	Try
Document.documentURI	It returns the document location as a string.	Try
Document.documentElement	It returns the root element of the document.	Try
LineElement.x2	It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.	Try
LineElement.y2	It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.	Try
LineElement.x1	It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.	Try
LineElement.y1	It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.	Try
Element.part	It returns a DOMTokenList which represents the part identifiers for the given element.	Try
Element.id	It returns the id of the given element.	Try
Element.attributes	It returns an object that contains all the attributes of the given element.	Try
Element.classList	It returns the classList of the given element.	Try
Element.className	It returns the className of the given Element.	Try
Element.innerHTML	The SVG Element.innerHTML property returns innerHTML of the given element.	Try
LinearGradientElement.x2	It returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.	Try
LinearGradientElement.y1	It returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.	Try
LinearGradientElement.y2	It returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.	Try
LinearGradientElement.x1	It returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.	Try
EllipseElement.ry	It returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element.	Try
EllipseElement.rx	It returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element.	Try
EllipseElement.cy	It returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element.	Try
EllipseElement.cx	It returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element.	Try
RectElement.y	It returns an SVGAnimatedLength object corresponding to the attribute of the given rectangle element.	Try
RectElement.x	It returns an SVGAnimatedLength object corresponding to the attribute of the given rectangle element.	Try
RectElement.ry	It returns an SVGAnimatedLength object corresponding to the attribute of the given rectangle element.	Try
RectElement.width	It returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element.	Try
RectElement.height	It returns an SVGAnimatedLength with respect to the rect element.	Try
RectElement.rx	It returns an SVGAnimatedLength object corresponding to the attribute of the given rectangle element.	Try
CircleElement.r	It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.	Try
CircleElement.cy	It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.	Try
CircleElement.cx	It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.	Try
stop-opacity	It indicates the alpha value or opacity to be used at the stop point.	Try
ScriptElement.type	It returns an SVGAnimatedLength object corresponding to the attribute of the given script element.	Try
Stroke	It defines the color of a line, text or outline of an element.	Try
SpecularLighting.specularExponent	It returns the SVGAnimatedNumber object corresponding to the specularExponent component.	Try
SpecularLighting.kernelUnitLengthY	It returns the SVGAnimatedNumber object corresponding to the kernelUnitLengthY component.	Try
UseElement.height	It returns an SVGAnimatedLength object corresponding to the attribute of the given use element	Try
UseElement.width	It returns an SVGAnimatedLength object corresponding to the attribute of the given use element.	Try
UseElement.x	It returns an SVGAnimatedLength object corresponding to the attribute of the given use element	Try
UseElement.y	It returns an SVGAnimatedLength object corresponding to the attribute of the given use element.	Try
window.closed	It indicates whether the referenced window is closed or not.	Try
window.crypto	It returns the Crypto object associated to the global object.	Try
window.history	It returns a reference to the History object.	Try
window.toolbar	It returns the toolbar object through which we can check the visibility.	Try
window.isSecureContext	It indicates whether a context is capable of using features that require Secure Contexts.	Try
window.statusbar	It returns the statusbar object through which we can check the visibility.	Try
window.document	It returns a reference to the document contained in the window.	Try
window.event	It returns the event which is currently being handled by the site’s code.	Try
window.performance	It is used to gather performance information about the current document.	Try
window.menubar	It returns the menubar object through which we can check the visibility.	Try
window.scrollbars	It returns the scrollbars object through which we can check the visibility.	Try
FEBlendElement.mode	It returns the SVGAnimatedEnumeration object corresponding to the mode attribute.	Try
FEBlendElement.in2	It returns the SVGAnimatedString object corresponding to the in2 attribute.	Try
FEBlendElement.in1	It returns the SVGAnimatedString object corresponding to the in attribute.	Try
FEDisplacementMap.scale	It returns the SVGAnimatedNumber object corresponding to the scale component.	Try
FEDisplacementMap.in2	It returns the SVGAnimatedString object corresponding to the in2 component.	Try
FEDisplacementMap.in1	It returns the SVGAnimatedString object corresponding to the in component.	Try
FEDisplacementMap.xChannelSelector	It returns the SVGAnimatedEnumeration object corresponding to the xChannelSelector component.	Try
FEDisplacementMap.yChannelSelector	It returns the SVGAnimatedEnumeration object corresponding to the yChannelSelector component.	Try
FEDropShadow.dx	It returns the SVGAnimatedNumber object corresponding to the dx component.	Try
FEDropShadow.dy	It returns the SVGAnimatedNumber object corresponding to the dy component.	Try
FEDropShadow.in1	It returns the SVGAnimatedstring object corresponding to the in1 component.	Try
FEDropShadow.stdDeviationX	It returns the SVGAnimatedNumber object corresponding to the stdDeviationX component.	Try
FEDropShadow.stdDeviationY	It returns the SVGAnimatedNumber object corresponding to the stdDeviationY component.	Try
FEGaussionBlur.in1	It returns the SVGAnimatedString object corresponding to the in1 component.	Try
FEGaussionBlur.stdDeviationX	It returns the SVGAnimatedNumber object corresponding to the stdDeviationX component.	Try
FEGaussionBlur.stdDeviationY	It returns the SVGAnimatedNumber object corresponding to the stdDeviationY component.	Try
FEMergeNode.in1	It returns the SVGAnimatedString object corresponding to the in1 component.	Try
FEOffset.in1	It returns the SVGAnimatedString object corresponding to the in1 component.	Try
FEOffset.dx	It returns the SVGAnimatedNumber object corresponding to the dx component.	Try
FEOffset.dy	It returns the SVGAnimatedNumber object corresponding to the dy component.	Try
FESpotLightElement.z	It returns the SVGAnimatedNumber object corresponding to the z attribute.	Try
FESpotLightElement.x	It returns the SVGAnimatedNumber object corresponding to the x attribute.	Try
FESpotLightElement.y	It returns the SVGAnimatedNumber object corresponding to the y attribute.	Try
FESpotLightElement.pointsAtX	It returns the SVGAnimatedNumber object corresponding to the pointsAtX attribute.	Try
FESpotLightElement.limitingConeAngle	It returns the SVGAnimatedNumber object corresponding to the limitingConeAngle attribute.	Try
FESpecularLighting.in1	It returns the SVGAnimatedString object corresponding to the in1 component.	Try
FESpecularLighting.surfaceScale	It returns the SVGAnimatedNumber object corresponding to the surfaceScale component.	Try
FESpecularLighting.specularConstant	It returns the SVGAnimatedNumber object corresponding to the specularConstant component.	Try
FESpecularLighting.kernelUnitLengthX	It returns the SVGAnimatedNumber object corresponding to the kernelUnitLengthX component.	Try
FESpotLightElement.pointsAtY	It returns the SVGAnimatedNumber object corresponding to the pointsAtY attribute.	Try
FESpotLightElement.pointsAtZ	It returns the SVGAnimatedNumber object corresponding to the pointsAtZ attribute.	Try

Below example will give you a brief idea that how to use the SVG Property:

Example: In this example, we will see two diagrams one will be an ellipse and another will be a circle.

HTML

<!DOCTYPE html> 
<html> 
<body> 
   <center> 
      <h1 style="text-align: center; 
                 color:green;"> 
         GeeksforGeeks 
      </h1> 
         <b> SVG Property </b> 
      <div style="width: 600px;"> 
      <div style="float: left; "> 
         <svg width="200" 
             height="200" 
             xmlns="http://www.w3.org/2000/svg"> 
            <ellipse cx="100" 
                     cy="100"
                     rx="100"
                     ry="60"
                     id="ellipse"
               onclick="outputSize();"/> 
         </svg> 
      </div> 
        
      <div style="float: right;"> 
         <svg xmlns="http://www.w3.org/2000/svg" 
              viewBox="0 0 250 250"
              width="250"
              height="250"> 
            <circle cx="150" 
                    cy="100" 
                    r="50"
                    fill="green" 
                    id="gfg" 
                    onclick="clickCircle();"/> 
         </svg> 
      </div> 
      </div> 
   </center> 
</body> 
</html>

Output:

SVG Property

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 17 Jul, 2023

SVG Document.image Property

SVG by Attribute

Nov	DEC	Jan
	02
2022	2023	2024

SVG Elements

SVG Property

SVG Attributes

SVG Elements

SVG Property

SVG Attributes

SVG Property Complete Reference

HTML

Please Login to comment...