svg element | SVGSVGElement object

Defines an SVG document or document fragement.

Scalable Vector Graphics: Document Structure, Section 5.11.2

DOM Information

Inheritance Hierarchy

Node

Element

SVGElement

SVGSVGElement

Members

The SVGSVGElement object has these types of members:

Events
Methods
Properties

Events

The SVGSVGElement object has these events.

Event	Description
click	Fires when the user clicks the left mouse button on the object. Note Starting with IE11, this event fires a MSPointerEvent object instead of MouseEvent. You can use the MouseEvent.pointerType property to determine the type of contact that the click originated from (touch, mouse, or pen).
dblclick	Fires when the user double-clicks the object. Note Starting with IE11, this event fires a MSPointerEvent object instead of a MouseEvent. You can use the MouseEvent.pointerType property to determine the type of contact that the click originated from (touch, mouse, or pen).
focusin	Fires for an element just prior to setting focus on that element.
focusout	Fires for the current element with focus immediately after moving focus to another element.
load	Fires immediately after the client loads the object.
mousedown	Fires when the user clicks the object with either mouse button.
mousemove	Fires when the user moves the mouse over the object.
mouseout	Fires when the user moves the mouse pointer outside the boundaries of the object.
mouseover	Fires when the user moves the mouse pointer into the object.
mouseup	Fires when the user releases a mouse button while the mouse is over the object.
onabort	Occurs when page loading is stopped before an element is loaded completely.
onerror	Occurs when an element does not load properly or a script runs incorrectly.
onload	Occurs when the browser has fully parsed the element and all of its descendants.
onresize	Occurs when the document view is being resized.
onscroll	Occurs when a document view is being moved along the x-axis, y-axis, or both axes.
onunload	Occurs when a document is removed from a window or frame.
onzoom	Occurs when the document zoom level or currentScale property changes.

Methods

The SVGSVGElement object has these methods.

Method	Description
animationsPaused	Gets a value that indicates whether this SVG document fragment is in a paused state.
checkEnclosure	Determines if the rendered content of the specified element is entirely contained within the specified rectangle.
checkIntersection	Determines if the rendered content of the specified element intersects the specified rectangle.
createEvent	Creates an event object to be used in conjunction with the dispatchEvent method.
createSVGAngle	Creates a new SVGAngle object that does not have units, that is set to 0 degrees, and that is not attached to any document.
createSVGLength	Creates a new SVGLength object that has a length of 0 user units.
createSVGMatrix	Creates a new SVGMatrix object that is set to the identity matrix and that is not attached to any document.
createSVGNumber	Creates a new SVGNumber object that has a value of zero and that is not attached to any document.
createSVGPoint	Creates a new SVGPoint object that is initialized to the point (0,0) in the user coordinate system and that is not attached to any document.
createSVGRect	Creates a new SVGRect object that has all values set to 0 user units and that is not attached to any document.
createSVGTransform	Creates a new SVGTransform object that is set to the identity matrix and that is not attached to any document.
createSVGTransformFromMatrix	Creates a matrix transform object whose values are given by the specified matrix.
deselectAll	Cancels the selection of any selected objects, including any selections of text strings and text boxes.
forceRedraw	Redraws all regions of the viewport that require updating.
getBBox	Gets the bounding box, in current user space, of the geometry of all contained graphics elements.
getComputedStyle	Returns the current computed value of the combined CSS properties for an element.
getCTM	Gets the transformation matrix that transforms from the current user units to the viewport coordinate system for the nearestViewportElement object.
getCurrentTime	Gets the current time, in seconds, relative to the start time for the current SVG document fragment.
getElementById	Gets the element that matches the specified ID from the SVG document or document fragment.
getEnclosureList	Gets the list of graphics elements whose rendered content is entirely contained within the specified rectangle.
getIntersectionList	Gets the list of graphics elements whose rendered content intersects the specified rectangle.
getScreenCTM	Gets the transformation matrix from the current user units to the screen coordinate system.
getTransformToElement	Gets the transformation matrix that transforms from the user coordinate system on the current element to the user coordinate system on the specified target element.
hasExtension	Determines if the specified extension is supported.
pauseAnimations	Pauses all currently running animations that are defined within the SVG document fragment that corresponds to this svg element.
setCurrentTime	Sets the new current time for this SVG document fragment.
suspendRedraw	Suspends redrawing a device for a specified duration.
unpauseAnimations	Resumes currently running animations that are defined within the SVG document fragment.
unsuspendRedraw	Cancels the specified suspension of redrawing operations.
unsuspendRedrawAll	Cancels all currently active suspensions of redrawing operations.

Properties

The SVGSVGElement object has these properties.

Property	Description
className	Gets the names of the classes that are assigned to this object.
clipPath	Sets or retrieves a reference to the SVG graphical object that will be used as the clipping path.
contentScriptType	Gets the default scripting language of the current document fragment.
contentStyleType	Gets the default style sheet language of the current document.
currentScale	Gets or sets the current scale factor, relative to the initial view (when this property is called from an outermost svg element.
currentTranslate	Gets or sets the current translation factor, relative to the initial view (when this property is called from an outermost svg element).
currentView
externalResourcesRequired	Gets a value that indicates whether referenced resources that are not in the current document are required to correctly render a given element.
farthestViewportElement	Gets a value that represents the farthest ancestor svg element.
focusable	Determines if an element can acquire keyboard focus (that is, receive keyboard events) and be a target for field-to-field navigation actions (such as when a user presses the Tab key).
height	Gets or sets the height of an element.
mask	Sets or retrieves a value that indicates a SVG mask.
nearestViewportElement	Gets a value that indicates which element established the current viewport.
ownerSVGElement	Gets the nearest ancestor svg element.
pixelUnitToMillimeterX	Gets or sets the size of a pixel unit along the x-axis of the viewport.
pixelUnitToMillimeterY	Gets or sets the size of a pixel unit along the y-axis of the viewport.
preserveAspectRatio	Gets an XML value that indicates whether to force uniform graphic scaling.
requiredExtensions	Gets a white space-delimited list of required language extensions.
requiredFeatures	Gets or sets a white space-delimited list of feature strings.
screenPixelToMillimeterX	Gets or sets the size of a screen pixel along the x-axis of the viewport.
screenPixelToMillimeterY	Gets or sets the size of a screen pixel along the y-axis of the viewport.
style	Gets a style object.
systemLanguage	Gets or sets a comma-separated list of language names.
useCurrentView	Gets or sets a value that indicates whether the current innermost SVG document fragment is the standard view (that is, based on attributes of the svg element such as viewBox) or a custom view (that is, a hyperlink into a particular view or other element.
viewBox	Gets a value that indicates how a graphic scales to fit a container element.
viewport	Gets or sets the current viewport.
viewportElement	Gets the element that established the current viewport.
width	Defines the width of an element.
x	Gets or sets the x-coordinate value.
xmlbase	Gets or sets the `base` attribute on the element.
xmllang	Gets or sets a value that specifies the language that is used in the contents and attribute values of an element.
xmlspace	Gets or sets a value that indicates whether white space is preserved in character data.
y	Gets or sets the y-coordinate value.
zoomAndPan	Gets the zoomAndPan attribute of an element.

Standards information

Scalable Vector Graphics: Document Structure, Section 5.11.2

Remarks

Note In addition to the attributes, properties, events, methods, and styles listed above, SVG elements also inherit core HTML attributes, properties, events, methods, and styles.

If an SVG document is likely to be referenced as a component of another document, you might want to include a viewBox attribute on the outermost svg element of the referenced document. This attribute provides a convenient way to design SVG documents to scale-to-fit into an arbitrary viewport.

svg elements can appear in the middle of SVG content. You can use these elements to embed SVG document fragments within other SVG document fragments. You can also use svg elements within the middle of SVG content to establish a new viewport.

In all cases, you must declare an SVG namespace so that all SVG elements are identified as belonging to the SVG namespace. Typically, you can declare an SVG namespace as follows:


<svg xmlns="http://www.w3.org/2000/svg" ... >