Open In App

SVG Property Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
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.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

SVG Property 



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