Open In App
Related Articles

SVG Property Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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.hrefIt returns an SVGAnimatedLength object corresponding to the attribute of the given A element.
Try
prefixIt returns prefix of the given Attr Element.
Try
namespaceURIIt returns namespaceURI of the given Attribute element.
Try
DOMStringList.lengthIt returns the length of the given DOMStringList element.
Try
ownerElementIt returns ownerElement of the given Attr Element.
Try
TextPathElement.startOffsetIt returns an SVGAnimatedLength object corresponding to the attribute of the given textpath element.
Try
localNameIt returns localName of the given Attr element.
Try
Event.returnValueIt returns a string containing the event’s type.
Try
Event.isTrustedThis property is a boolean that is true when the event was generated by a user action.
Try
Event.currentTargetIt identifies the current target for the event, as the event traverses the DOM.
Try
Event.bubblesIt indicates whether the event bubbles up through the DOM or not.
Try
Event.composedIt indicates whether the event will propagate across the shadow DOM boundary into the standard DOM.
Try
Event.defaultPreventedIt indicates whether the event can be canceled.
Try
Element.outerHTMLIt returns innerHTML of the given element.
Try
Document.doctypeIt returns the doctype of the document.
Try
Document.headIt returns an object which contains the information about the head of the document.
Try
Document.bodyIt returns an object which contains the information about the body of the document.
Try
Document.imageIt returns the collection of images in the current HTML document.
Try
Document.timelineIt represents the default timeline of the current document.
Try
Document.scriptsThe SVG Document.scripts property returns the list of script element in the document.
Try
Document.hiddenIt returns the boolean value for the check if the page is hidden or not.
Try
Document.documentURIIt returns the document location as a string.
Try
Document.documentElementIt returns the root element of the document.
Try
LineElement.x2It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.
Try
LineElement.y2It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.
Try
LineElement.x1It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.
Try
LineElement.y1It returns an SVGAnimatedLength object corresponding to the attribute of the given line element.
Try
Element.partIt returns a DOMTokenList which represents the part identifiers for the given element.
Try
Element.idIt returns the id of the given element.
Try
Element.attributesIt returns an object that contains all the attributes of the given element.
Try
Element.classListIt returns the classList of the given element.
Try
Element.classNameIt returns the className of the given Element.
Try
Element.innerHTMLThe SVG Element.innerHTML property returns innerHTML of the given element.
Try
LinearGradientElement.x2It returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.
Try
LinearGradientElement.y1It returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.
Try
LinearGradientElement.y2It returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.
Try
LinearGradientElement.x1It returns an SVGAnimatedLength object corresponding to the attribute of the given LinearGradient element.
Try
EllipseElement.ryIt returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element.
Try
EllipseElement.rxIt returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element.
Try
EllipseElement.cyIt returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element.
Try
EllipseElement.cxIt returns an SVGAnimatedLength object corresponding to the attribute of the given ellipse element.
Try
RectElement.yIt returns an SVGAnimatedLength object corresponding to the attribute of the given rectangle element.
Try
RectElement.xIt returns an SVGAnimatedLength object corresponding to the attribute of the given rectangle element.
Try
RectElement.ryIt returns an SVGAnimatedLength object corresponding to the attribute of the given rectangle element.
Try
RectElement.widthIt returns an SVGAnimatedLength corresponding to the attribute of the given rectangle element.
Try
RectElement.heightIt returns an SVGAnimatedLength with respect to the rect element.
Try
RectElement.rxIt returns an SVGAnimatedLength object corresponding to the attribute of the given rectangle element.
Try
CircleElement.rIt returns an SVGAnimatedLength object corresponding to the attribute of the given line element.
Try
CircleElement.cyIt returns an SVGAnimatedLength object corresponding to the attribute of the given line element.
Try
CircleElement.cxIt returns an SVGAnimatedLength object corresponding to the attribute of the given line element.
Try
stop-opacityIt indicates the alpha value or opacity to be used at the stop point.
Try
ScriptElement.typeIt returns an SVGAnimatedLength object corresponding to the attribute of the given script element.
Try
StrokeIt defines the color of a line, text or outline of an element.
Try
SpecularLighting.specularExponentIt returns the SVGAnimatedNumber object corresponding to the specularExponent component.
Try
SpecularLighting.kernelUnitLengthYIt returns the SVGAnimatedNumber object corresponding to the kernelUnitLengthY component.
Try
UseElement.heightIt returns an SVGAnimatedLength object corresponding to the attribute of the given use element
Try
UseElement.widthIt returns an SVGAnimatedLength object corresponding to the attribute of the given use element.
Try
UseElement.xIt returns an SVGAnimatedLength object corresponding to the attribute of the given use element
Try
UseElement.yIt returns an SVGAnimatedLength object corresponding to the attribute of the given use element.
Try
window.closedIt indicates whether the referenced window is closed or not.
Try
window.cryptoIt returns the Crypto object associated to the global object.
Try
window.historyIt returns a reference to the History object.
Try
window.toolbarIt returns the toolbar object through which we can check the visibility.
Try
window.isSecureContextIt indicates whether a context is capable of using features that require Secure Contexts.
Try
window.statusbarIt returns the statusbar object through which we can check the visibility.
Try
window.documentIt returns a reference to the document contained in the window.
Try
window.eventIt returns the event which is currently being handled by the site’s code.
Try
window.performanceIt is used to gather performance information about the current document.
Try
window.menubarIt returns the menubar object through which we can check the visibility.
Try
window.scrollbarsIt returns the scrollbars object through which we can check the visibility.
Try
FEBlendElement.modeIt returns the SVGAnimatedEnumeration object corresponding to the mode attribute.
Try
FEBlendElement.in2It returns the SVGAnimatedString object corresponding to the in2 attribute.
Try
FEBlendElement.in1It returns the SVGAnimatedString object corresponding to the in attribute.
Try
FEDisplacementMap.scaleIt returns the SVGAnimatedNumber object corresponding to the scale component.
Try
FEDisplacementMap.in2It returns the SVGAnimatedString object corresponding to the in2 component.
Try
FEDisplacementMap.in1It returns the SVGAnimatedString object corresponding to the in component.
Try
FEDisplacementMap.xChannelSelectorIt returns the SVGAnimatedEnumeration object corresponding to the xChannelSelector component.
Try
FEDisplacementMap.yChannelSelectorIt returns the SVGAnimatedEnumeration object corresponding to the yChannelSelector component.
Try
FEDropShadow.dxIt returns the SVGAnimatedNumber object corresponding to the dx component.
Try
FEDropShadow.dyIt returns the SVGAnimatedNumber object corresponding to the dy component.
Try
FEDropShadow.in1It returns the SVGAnimatedstring object corresponding to the in1 component.
Try
FEDropShadow.stdDeviationXIt returns the SVGAnimatedNumber object corresponding to the stdDeviationX component.
Try
FEDropShadow.stdDeviationYIt returns the SVGAnimatedNumber object corresponding to the stdDeviationY component.
Try
FEGaussionBlur.in1It returns the SVGAnimatedString object corresponding to the in1 component.
Try
FEGaussionBlur.stdDeviationXIt returns the SVGAnimatedNumber object corresponding to the stdDeviationX component.
Try
FEGaussionBlur.stdDeviationYIt returns the SVGAnimatedNumber object corresponding to the stdDeviationY component.
Try
FEMergeNode.in1It returns the SVGAnimatedString object corresponding to the in1 component.
Try
FEOffset.in1It returns the SVGAnimatedString object corresponding to the in1 component.
Try
FEOffset.dxIt returns the SVGAnimatedNumber object corresponding to the dx component.
Try
FEOffset.dyIt returns the SVGAnimatedNumber object corresponding to the dy component.
Try
FESpotLightElement.zIt returns the SVGAnimatedNumber object corresponding to the z attribute.
Try
FESpotLightElement.xIt returns the SVGAnimatedNumber object corresponding to the x attribute.
Try
FESpotLightElement.yIt returns the SVGAnimatedNumber object corresponding to the y attribute.
Try
FESpotLightElement.pointsAtXIt returns the SVGAnimatedNumber object corresponding to the pointsAtX attribute.
Try
FESpotLightElement.limitingConeAngleIt returns the SVGAnimatedNumber object corresponding to the limitingConeAngle attribute.
Try
FESpecularLighting.in1It returns the SVGAnimatedString object corresponding to the in1 component.
Try
FESpecularLighting.surfaceScaleIt returns the SVGAnimatedNumber object corresponding to the surfaceScale component.
Try
FESpecularLighting.specularConstantIt returns the SVGAnimatedNumber object corresponding to the specularConstant component.
Try
FESpecularLighting.kernelUnitLengthXIt returns the SVGAnimatedNumber object corresponding to the kernelUnitLengthX component.
Try
FESpotLightElement.pointsAtYIt returns the SVGAnimatedNumber object corresponding to the pointsAtY attribute.
Try
FESpotLightElement.pointsAtZIt 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

SVG Property 



Last Updated : 17 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads