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