SVG Quick Reference
This is a reference for those using SVG to dynamically build web graphics in an HTML5 environment. Since SVG is XML, these examples also include XML methods/properties as applicable for dynamic SVG. Each example includes the script code, the SVG/XML source, and an inline SVG graphic.

[ a ] <a href="myFile" target="_replace" > element(s) </a>
~ or ~
<a href="javascript:myFunction()" > element(s) </a>
Create a link element to call an external file, or fire a javascript function. Note: an <a> can have a child <title> element and a companion element, where cursor over the element will display the title.
[ adoptNode ] elemSVG = document.adoptNode(elemXML)
Used to build SVG elements from XML elements
[ appendChild ] myParent.appendChild(myElement)
Adds an element to an existing parent element
[ appendData ] myTextElem.firstChild.appendData(myString)
Adds to the end of an existing string value for text-based elements (text, tspan, textPath, desc, title, script, style).
[ appendItem ] myListObj.appendItem(myItem)
Adds a listed item to an SVG list object: SVGLengthList, SVGNumberList, SVGPathSegList, SVGPointList, SVGStringList, SVGTransformList
[ attributes ] attribMap = myElementNode.attributes
Returns a NamedNodeMap Obj (objAttrs=attribMap.length). Get name and value of each attribute node: attribName=attribNode.name attribValue=attribNode.value
[ baseVal ] [attribValue] = myElem.animatedAttrib.baseVal.value = [attribValue]
Get/Set animatable attribute/property values of an SVG element. Recommended for increased efficiency within intense animations.
[ canvas ] <canvas id="myCanvas" width="300" height="150" ></canvas>
~ vs ~
<svg id="mySVG" width="300" height="150" ></svg>
Compares performance and programming strategy in animation applications for the SVG drawing verus the Canvas Object. Note: Each element within the SVG drawing may include events. However, a canvas element may have events attached only to the entire canvas. Also, see: Convex Hull : SVG vs Canvas Rendering
[ checkEnclosure ] isEnclosed = mySVG.checkEnclosure(myElement, RectObj)
Returns true if the specified rectangle(RectObj) completely contains the rendered content of the specified element; otherwise, false
[ checkIntersection ] doesIntersect = mySVG.checkIntersection(myElement, RectObj)
Returns true if the specified rectangle(RectObj) intersects or contains the rendered content of the specified element; otherwise, false.
[ childNodes ] nodeList = myContainer.childNodes
Returns a NodeList containing the child nodes of the selected node
[ circle ] <circle cx="150" cy="150" r="100" fill="blue" ... />
Creates an SVG shape element: circle
[ className ] myElement.setAttribute("class",myClass)
myClass = myElement.getAttribute("class")
~ or ~
classNameObj = myElement.className
myClass = classNameObj.baseVal
String Object that receives a class name or set of class names. Multiple class names are separated by white space characters.
[ clear ] myList.clear()
Removes all elements from a list, creating an empty list: (PathSegList, LengthList, TransformList, PointList, StringList, NumberList)
[ clipPath ] <clipPath id="myClipPath"><svgClippingElement .../></clipPath>
creates a clipPath element
[ clip-path ] Attribute
[ clipPath ] Property
myElement.setAttribute("clip-path","url(#myClipPath)")
clipURL = myElement.getAttribute("clip-path")
~ or ~
[ clipURL = ] myElement.clipPath [ = clipURL ]
Set/Get the clip-path attribute or clipPath property for an element
[ cloneNode ] myClone = myElement.cloneNode(true)
Creates a copy of an element
[ contextMenu ]
<body oncontextmenu='return false' ...>: The default context menu becomes inactive.
Add a custom context menu(right-mouse click) over SVG. The context menu is contained within a DIV.
[ correspondingElement ] oElement = object.correspondingElement
Gets the corresponding element that this object is an instance of. Typically used with symbol events to access its individual elements within its use element
[ correspondingUseElement ] myUseElement = myUseInstance.correspondingUseElement
Gets the corresponding use element the object belongs to. Typically used with a symbol element event that requests its use element(including nested use elements).
[ createAttribute ] objAttrName = document.createAttribute(name)
A string specifying the name of the new attribute object. This name is subsequently available as the new node's nodeName property.
[ createDocumentFragment ] docFrag = document.createDocumentFragment()
Creates an empty document fragment object
[ createElementNS ] myElement = document.createElementNS("http://www.w3.org/2000/svg",elementNodeName);
creates an element for inline SVG
[ createSVGNumber ] myNumber = mySVG.createSVGNumber()
[ numValue = ] myNumber.value [ = numValue ]
Creates a new SVGNumber object that has a value of zero and that is not attached to any document.
[ createSVGRect ] myRectObj = mySVG.createSVGRect()
[ x= ]myRectObj.x[ =x ], [ y= ]myRectObj.y[ =y ], [ width= ]myRectObj.width[ =width ], [ height= ]myRectObj.height[ =height ]
Creates an SVG Rect Object that has initial values: x=0, y=0, width=0, height=0
[ currentScale ] [ nScaleFactor = ] mySVG.currentScale [ = nScaleFactor ]
Gets or sets the current scale factor, relative to the initial view (when this property is called from an outermost svg element.
[ currentTranslate ] PointXY = mySVG.currentTranslate
The current translation factor, relative to the initial view (when this property is called from an outermost svg element: set/get mySVG.currentTranslate.x and mySVG.currentTranslate.y ) .
[ data ] [ textString = ] myText.firstChild.data [ = textString ]
Get/Replace a text string within a text, tspan, textPath, script, desc, style, and title element's text node
[ defs ] <defs>...svg 'referenced' elements...</defs>
Stores SVG elements (typically contained within a <g> element) used via href calls by <use> elements,
[ deleteData ] myText.firstChild.deleteData(offset, count);
Removes characters starting at the offset location for the count value. As relating to a text string within a text, tspan, textPath, script, desc, style, and title element's text node.
[ desc ] <desc> This is a description </desc>
Information can be associated with elements. The desc element is not rendered, but can be used for searching and reading the text within the desc element.
[ display ] myElement.setAttribute("display","none/inline")
myElement.style.display="none/inline"
~ vs ~
myElement.setAttribute("visibility","hidden/visible")
myElement.style.visibility="hidden/visible"
~ or ~
[ hidden/visible = ] myElement.style.visibility [ = hidden/visible ]
When display="none", the element is not rendered. When visibility="hidden", the element is rendered but hidden(allowing hidden element pointer events to continue to function).
[ documentElement ] elemRootXML=xmlDoc.documentElement
Access the xml root element within the xml document.
[ DOMParser ] elemDocXML = new DOMParser().parseFromString(myXMLString, "text/xml")
Parse string to create XML document
[ ellipse ] <ellipse fill="blue" cx="150" cy="150" rx="50" ry="100" ... />
Creates an SVG shape element: ellipse
[ event - drag/drop ] Add event: myElement.setAttribute("ddEVT","handler")
Remove event: myElement.setAttribute("ddEVT","")+myElement.removeAttribute("ddEVT","")
~ or ~
myElement.addEventListener("ddEVT",handler,bCapture)
myElement.removeEventListener("ddEVT",handler,bCapture)
ddEVT = handler: onmousedown=startDrag(evt), onmouseup=stoptDrag(evt), onmousemove=drag(evt).
[ event - keyboard ] Add event: myElement.setAttribute("kEVT","handler")
myRemove event: myElement.setAttribute("kEVT","")+myElement.removeAttribute("kEVT")
~ or ~
myElement.addEventListener("kEVT",handler,bCapture)
myElement.removeEventListener("kEVT",handler,bCapture)
kEVT = onkeydown, onkeyup, onkeypress.
[ event - mouse ] Add event: myElement.setAttribute("mEVT","handler")
Remove event: myElement.setAttribute("mEVT","")+myElement.removeAttribute("mEVT")
~ or ~
myElement.addEventListener("mEVT",handler,bCapture)
myElement.removeEventListener("mEVT",handler,bCapture)
mEVT = onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel
[ event - SVG ] Add event : myElement.setAttribute("sEVT","handler")
Remove event : myElement.setAttribute("sEVT","") + myElement.removeAttribute("sEVT")
~ or ~
myElement.addEventListener("SVGevt",handler,bCapture)
myElement.removeEventListener("SVGevt",handler,bCapture)
sEVT = onabort, onerror, onload, onresize, *onscroll, onunload, *onzoom
SVGevt = SVGAbort, SVGError, SVGLoad, SVGResize, *SVGScroll, SVGUnload, *SVGZoom.

* shown in this example
[ farthestViewportElement ] oSVGElement = myElement.farthestViewportElement
Gets a value that represents the farthest ancestor svg element. Returns null if the current svg element is also the farthest ancestor element.
[ fill ] Attribute
[ fill ] Style
myElement.setAttribute("fill",fillWith)
fillWith = myElement.getAttribute("fill")
~ or ~
[ fillWith = ] myElement.style.fill [ = fillWith ]
Set/Get the fill value (color, currentColor, url(#Pattern), url(#Gradient), inherit) for SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
[ fill-opacity ] Attribute
[ fillOpacity ] Style
myElement.setAttribute("fill-opacity",fValue)
fValue = myElement.getAttribute("fill-opacity")
~ or ~
[ fValue = ] myElement.style.fillOpacity [ = fValue ]
Set/Get the opacity value of the fill attribute/style (a floating number value less than or equal to 1.0, or 0%-100%) of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
[ fill-rule ] Attribute
[ fillRule ] Style
myElement.setAttribute("fill-rule",ruleString)
ruleString = myElement.getAttribute("fill-rule")
~ or ~
[ ruleString = ] myElement.style.fillRule [ = ruleString ]
Set/Get the opacity value of the fill-rule attribute (nonzero, evenodd, inherit) of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
[ firstChild ] firstElem = parentElem.firstChild
Returns the top svg element contained within the parent. Returns null if there is no firstChild.
[ font ] myText.setAttribute(font-value,fontVal)
fontVal = myText.getAttribute(font-value)
~ or ~
[ fontVal = ] myText.style.fontValue [ = fontVal ]
Set/Get font values : font-family, font-size, font-style, font-weight (set fontValue: fontFamily, fontSize, fontStyle, fontWeight)
[ g ] <g>...svg element(s)...</g>
Creates the svg containter element(group).
[ getAttribute ] attribValue = myElement.getAttribute(attribName)
Returns the value of the named attribute
[ getAttributeNode ] nodeObj = myElement.getAttributeNode(attribName)
Returns the node object (name=nodeObj.name, value=nodeObj.value) of the named attribute, or Null if the named attribute cannot be found on this element.
[ getBBox ] bbRectObj = myElement.getBBox()
Returns a Rect Obj for the element's bounding box.
[ getCharNumAtPosition ] lCharNum = myText.getCharNumAtPosition(oPoint)
Gets the index of the character that the glyph cell bounding box contains at the specified point.
[ getComputedTextLength ] fTextLength = textElem.getComputedTextLength()
returns the text element length
[ getCurrentTime ] startedSeconds = mySVG.getCurrentTime()
Returns the number of seconds from when the SVG document fragment finished loading. Typically used in animation.
[ getElementById ] elemObj = mySVG.getElementById(idString)
Returns the first element that has the requested string value
[ getElementsByTagName ] elemCollection = mySVG.getElementsByTagName(nodeNameString)
Returns a Collection of the requested node's name
[ getEnclosureList ] enclosureNodeList = mySVG.getEnclosureList(oRect, beforeMe)
Returns a list of elements fully enclosed within the oRect. The argument beforeMe is a reference element to return only the elements created prior to the 'beforeMe' element. If beforeMe=null all enclosed elements are returned.
[ getEndPositionOfChar ] oEndPos = myTextElem.getEndPositionOfChar(charnum)
Returns a Point object: x=oEndPos.x y=oEndPos.y
[ getExtentOfChar ] RectObj = myTextElem.getExtentOfChar(charnum)
Gets a rectangle that defines the minimum and maximum x-coordinate and y-coordinate values in the user coordinate system where the glyph that corresponds to the specified character is rendered.
[ getIntersectionList ] intersectNodeList = mySVG.getIntersectionList(oRect, referenceMe)
Returns a list of elements fully enclosed and intersected via the oRect. The argument referenceMe is a reference element to return only the elements referencet to the 'referenceMe' element. If referenceMe=null all enclose/intersect elements are returned.
[ getItem ] listObj = myList.getItem(indexInteger)
Returns an object from a List (SVGLengthList, SVGNumberList, SVGPathSegList, SVGPointList, SVGStringList, SVGTransformList) indexInteger:0 thru myList.length-1. NOTE: The returned item is the item itself and not a copy. Any changes that are made to the item are immediately reflected in the list.
[ getNumberOfChars ] lTotalChars = ObjText.getNumberOfChars()
Returns an integer of the number of characters in the ObjText (parent element containing text: text, textContent, textPositioning, tspan, textPath).
[ getPointAtLength ] PntObj = myPath.getPointAtLength(myLength)
Returns a point object (x=PntObj.x, y=PntObj.y) along the path at the specified length.
[ getPropertyValue ] styleProperty = myElement.style.getPropertyValue(CSS string)
Returns the requested CSS value for the element's style attribute
Also see setProperty and removeProperty.
[ getRotationOfChar ] fRotationAngle = myTextElem.getRotationOfChar(charnum)
charnum=the index of the character, where the first character has an index of 0. Returns the rotation angle of a character.
[ getStartPositionOfChar ] oStartPos = myTextElem.getStartPositionOfChar(charnum)
Returns a Point object: x=oStartPos.x y=oStartPos.y
[ getSubStringLength ] subLength = myTextElem.getSubStringLength(charnum, nchars)
charNum = the index of the first character in the substring. nchars = the number of characters in the substring. Returns total text advance distance (i.e., substring length).
[ getTotalLength ] pathLength = myPath.getTotalLength()
Gets the total length of the path, as a distance in the current user coordinate system
[ glyphOrientation ] [ deg = ] myTextElem.style.glyphOrientation(Horizontal/Vertical) [ = deg ]
Gets or sets a value(deg0, deg90, deg180, deg270) that alters the orientation of a sequence of characters relative to an inline-progression-direction of horizontal or vertical.
[ hasAttribute ] binaryTrueFalse = myElement.hasAttribute(attribName)
Returns true if the element includes the requested attribute. Returns false if the attribute is not included in the SVG element.
[ hasAttributes ] binaryTrueFalse = myElement.hasAttributes()
Returns true if the element has 1 or more attributes. Returns false if the element does not have any attributes.
[ hasChildNodes ] binaryTrueFalse = myElement.hasChildNodes()
Returns true if the svg element contains 1 or more child nodes. Returns false if the element does not have any child nodes.
[ href ] HRef = myElement.href
href = HRef.baseVal
Object that receives the value of the xlink:href or href attribute. Used at elements: pattern, use, image, gradient, linearGradient, radialGradient, a, script, textPath
[ id ] Attribute
[ id ] Property
Attribute/Property
myElement.setAttribute("id",elemId)
elemId = myElement.getAttribute("id")
~ or ~
[ elemId = ] myElement.id [ = elemId ]
Get/Set id string value for SVG element
[ image ] <image href="frog.gif" x="100" y="100" width="66" height="48" ... />
Places an image file in the SVG document.
[ importNode ] cloneElem = document.importNode(myElement, true);
Clones a node from a different DOM object.
[ initialize ] myList.initialize(newListItem)
Clears current items from the list and re-initializes the list to contain the specified item: (PathSegList, LengthList, TransformList, PointList, StringList, NumberList)
[ insertBefore ] mySVG.insertBefore(newElement,targetElement)
Places an element before a target element.
[ insertData ] svgTextCharacters.insertData(offset, data);
offset = A long integer specifying the offset, in characters, at which to insert the supplied string data. data = A string containing the data that is to be inserted into the existing string.
[ insertItemBefore ] ListObj.insertItemBefore(newItem, index)
Inserts a new item into a list at a specified position. Applies to: SVGLengthList, SVGNumberList, SVGPathSegList, SVGPointList, SVGStringList, SVGTransformList
[ instanceRoot ] useRoot = myUseElement.instanceRoot
Returns the SVG root element instance of a <use> or <symbol> element.
[ item ] [ element = ] elementCollection.item(index) [ = element ]
Gets/Sets the requested item from the collection/list
[ lastChild ] lastElem = parentElem.lastChild
Returns the last element within its parent element.
[ length ] lengthInteger = SVGListCollection.length
The number of elements/attributes/items in a list or collection.
[ line ] <line x1="50" y1="50" x2="250" y2="250" stroke="crimson" stroke-width="5" ... />
Creates the basic shape element: line
[ linearGradient ] <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> </linearGradient>
The linearGradient element used for element fill attribute value.
[ marker ] Typical end-arrow marker element:
<marker id="arrowEndMarker" viewBox="0 0 8000 8000" refX="250" refY="150" markerUnits="strokeWidth" markerWidth="300" markerHeight="300" orient="auto" fill="red" stroke-linejoin="bevel" ><path stroke="RGB(0,0,0)" stroke-width="5" d="M2 59,293 148,1 243,121 151,Z" /></marker>
Create a marker element. Aligns automatically, and size is based on the stroke-width of the: line, path, polyline, or polygon.
[ marker ] myElement.style.marker= url(#myMarkerId)
Sets markers at each vertex, plus start and end points: Sets the same marker URL for marker-start, marker-mid, and marker-end.
[ marker-end ] Attribute
[ markerEnd ] Style
myElement.setAttribute("marker-end","url(#myMarkerId)") myMarkerIdURL = myElement.getAttribute("marker-end")
~ or ~
[ myMarkerIdURL = ] myElement.style.markerEnd [ = myMarkerIdURL ]
Set/Get the marker end for SVG element line, path, polyline, or polygon.
[ marker-mid ] Attribute
[ markerMid ] Style
myElement.setAttribute("marker-mid","url(#myMarkerId)") myMarkerIdURL = myElement.getAttribute("marker-mid")
~ or ~
[ myMarkerIdURL = ] myElement.style.markerMid [ = myMarkerIdURL ]
Set/Get the marker mid for SVG element path, polyline, or polygon. The mid location is any point that is not a start or end point.
[ marker-start ] Attribute
[ markerStart ] Property
myElement.setAttribute("marker-start","url(#myMarkerId)") myMarkerIdURL = myElement.getAttribute("marker-start")
~ or ~
[ myMarkerIdURL = ] myElement.style.markerStart [ = myMarkerIdURL ]
Set/Get the marker start for SVG element line, path, polyline, or polygon.
[ markerHeight ] markerElem.setAttribute("markerHeight",markerHeightNumber)
markerHeightNumber = markerElem.getAttribute("markerHeight")
~ or ~
[ markerHeightNumber = ] markerElement.markerHeight.baseVal.value [ = markerHeightNumber ]
Set/Get the marker height for the marker element.
[ markerUnits ] markerElem.setAttribute("markerUnits",myMarkerUnit)
myMarkerUnit = markerElem.getAttribute("markerUnits")
~ or ~
[ ObjEnum = ] markerElem.markerUnits [ = ObjEnum ]
Set/Get the marker units("userSpaceOnUse" or "strokeWidth"-default) for the marker element.
[ markerWidth ] markerElem.setAttribute("markerWidth",markerWidthNumber) markerWidthNumber = markerElem.getAttribute("markerWidth")
~ or ~
[ markerWidthNumber = ] markerElement.markerWidth.baseVal.value [ = markerWidthNumber ]
Set/Get the marker width for the marker element.
[ mask ] <mask id="myMask" >...white & black masking elements...</mask>
Create masking elements(slice): 1-the element to mask(fill=white), 2-the mask(fill=black), 3-the mask container(fill=color & scope) .
[ mask ] Attribute
[ mask ] Style
myElement.setAttribute("mask","url(#myMask)")
maskURL = myElement.getAttribute("mask")
~ or ~
[ maskURL = ] myElement.style.mask [ = maskURL ]
Set/Get the mask Attribute or Style URI for an element
[ nearestViewportElement ] oSVGElement = myElement.nearestViewportElement
The element that created the current viewport (typically the nearest ancestor svg element). This parameter is null if the current element is the outermost svg element.
[ newScale ] fNewScale = SVGZoomEvent.newScale
Gets the new scale value of a zoomed event.
[ newTranslate ] newTranslatePnt = SVGZoomEvent.newTranslate
Gets the new translation values, via a point object, of a zoom event. x=newTranslatePnt.x ,y=newTranslatePnt.
[ nextSibling ] nextElem = myElement.nextSibling
Gets the element that immediately follows the svgElem.
[ nodeName ] nameString = elemNode.nodeName
Gets the node name string of the element or its nodes
[ nodeType ] typeInt = elemNode.nodeType
Returns an interger(1 thru 12) that identifies the node type
[ nodeValue ] stringValue = attributeNode.nodeValue
Returns the value string for an element's attribute node
[ numberOfItems ] [ nCount = ] myList.numberOfItems [ = nCount ]
Gets or sets the number of items in a list. Applies to: SVGLengthList, SVGNumberList, SVGPathSegList, SVGPointList, SVGStringList, SVGTransformList
[ offset ] myGradientStop.setAtttibute("offset","50%")
offsetValue = myGradientStop.getAtttibute("offset")
~or~
[offsetValue] = myGradientStop.offset = [offsetValue]
The offset is a number (typically ranging from 0 through 1, or 0% thru 100%) that indicates where the gradient stop is placed. For linear gradients, the offset represents a location along the gradient vector.
[ opacity ] myElement.setAttribute("opacity",fVal)
fVal = myElement.getAttribute("opacity")
~ or ~
[ fVal = ] myElement.style.opacity [ = fVal ]
Set/Get the opacity value(0.0 thru 1.0, or 0% thru 100%) for an element
[ overflow ] myElement.setAttribute("overflow",viz)
viz = myElement.getAttribute("overflow")
~ or ~
[ viz = ] myElement.style.overflow [ = viz ]
Set/Get overflow value("hidden" or "visible"). Typically employed when symbol or svg contained elements are initially created below(0,0).
[ ownerSVGElement ] [ SVGContainer = ] myElement.ownerSVGElement [ = SVGContainer ]
Gets/Sets the nearest SVG container element of the element
[ parentNode ] parentElement = myElement.parentNode
Gets the parent element that contains the svgElem
[ path ] <path fill="none" stroke="crimson" stroke-width="3" d="...commands + x,y values.." />
Creates path element with straight and/or curved path segments, or arcs
[ path - Spiral ] <path fill="none" stroke="crimson" stroke-width="3" d="M x0 y0 S x1 y1 x2 y2.....xn yn" />
Creates a spiral path element with spiral 'smoothness' dependent upon the parameters: Points, Separation, and Revolutions
[ pathSegList ] [ oSegList = ] myPath.pathSegList [ = oSegList ]
Object that specifies or receives the contents of the d attribute of a path.
[ pathSegType ]
[ pathSeg property ]
[ nConstant = ] myPathSeg.pathSegType(pathSegTypeAsLetter) [ = nConstant ]
[ propValue = ] myPathSeg.property [ = propValue ]
Gets/Sets this segment type: (1/z, 2/M, 3/m, 4/L, 5/l, 6/C, 7/c, 8/Q, 9/q, 10/A, 11/a, 12/H, 13/h, 14/V, 15/v, 16/S, 17/s, 18/T)
Get/Set segment property Values: x, y, x1, y1, x2, y2. Arc: r1, r2 ,angle, largeArcFlag, sweepFlag.
[ pattern ] <pattern id="myPattern" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" > <circle fill="red" r="2.5" cx="5" cy="5" /> </pattern>
Create a pattern used for fill value
[ peekNode ] nextNode = xmlList.peekNode()
Iterates through list of xml elements. Returns null is there is no nextNode element
[ pixelUnitToMillimeter(X/Y) ] fPixelUnit = mySVG.pixelUnitToMillimeter(X/Y)
Floating-point that recieves the size of a pixel unit along the (x/y)-axis of the viewport.
[ pointer-events ] Attribute
[ pointerEvents ] Style
myElement.setAttribute("pointer-events",pEvt)
pEvt = myElement.getAttribute("pointer-events")
~ or ~
[ pEvt = ] myElement.style.pointerEvents [ = pEvt ]
Gets or sets a value that specifies under what circumstances a given graphics element can be the target element for a pointer event. pEvt =visiblePainted(default), visibleFill, visibleStroke, visible, painted, fill, stroke, all, none. NOTE: if element display="none", all pointer-events are inactive.
[ points ] myPoly.setAttribute("points",myPoints)
myPoints = myPoly.getAttribute("points")
~ or ~
PointList = ] myPoly.points [ = PointList ]
Set/Get polygon or polyline x,y point values.
[ polygon ] <polygon points="x1 y1 x2 y2 x3 y3..." stroke-width="2" stroke="blue" fill="none".../>
Creates a polygon element
[ polygon - Convex Hull ] <polygon points=..random generated... stroke-width="2" stroke="blue" fill="none".../>
Creates 2 random-generated convex hulls, computes their intersection points and Centroid.
[ polyline ] <polyline points="x1 y1 x2 y2 x3 y3..." stroke-width="2" stroke="blue" fill="none".../>
Creates a polyline element
[ preserveAspectRatio ] svgElem.setAttribute("preserveAspectRatio",Ratio)
Ratio = svgElem.getAttribute("preserveAspectRatio")
Set/Get aspect ratio for pattern, svg, symbol, image, marker, view elements.
[ previousScale ] fPreviousScale = SVGZoomEvent.previousScale
Gets the previous scale value of a zoom event.
[ previousSibling ] prevElem = myElement.previousSibling
Gets the element directly before mySVGElement
[ previousTranslate ] prevTransPnt = SVGZoomEvent.previousTranslate
Gets the previous translation values(prevTransPnt.x, prevTransPnt.y) of a zoom event.
[ radialGradient ] <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" >
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,250);stop-opacity:0" />
</radialGradient>
Creates the <radialGradient> element used for the fill attribute value
[ rect ] <rect fill="blue" x="100" y="100" width="100" height="80" rx="10" ry="10" ... />
Creates the basic shape: rect
[ removeAttribute ] myElement.removeAttribute(attribNameString)
Removes the attribute name and its value from the element
[ removeAttributeNode ] myElement.removeAttributeNode(attribNodeObj)
Removes the attribute node object from the element
[ removeChild ] parentElem.removeChild(childElem)
Removes the element from the parent node
[ removeItem ] ppResult = objectList.removeItem(index)
Removes an existing item from the list. Applies To SVGLengthList, SVGNumberList, SVGPathSegList, SVGPointList, SVGStringList, SVGTransformList
[ removeNamedItem ] nodeAttrRemoved = myAttributeCollection.removeNamedItem(stringName)
The string specifying the name of the attribute to remove from the element's collection. Returns the node removed from the collection. Returns Null if the named node is not an attribute.
[ removeNext ] XMLcontainer.removeNext();
Returns the selection group less 1 element. Removes the top XML node from the container element or selection group.
[ removeProperty ] myElement.style.removeProperty(CSSstring)
Removes the CSS name/value from the style attribute of the element.
Also see getPropertyValue and setProperty.
[ replaceChild ] svgCollection.replaceChild(newChild,oldChild)
Replaces an svg element with a new element
[ replaceData ] myText.firstChild.replaceData(a,b,replacementString)
Replace characters at locations a thru b, with replacementString
[ replaceItem ] ppResult = objectList.replaceItem(newItem, index)
Replaces a specified existing item in the list with a specified new item. Applies to: SVGLengthList, SVGNumberList, SVGPathSegList, SVGPointList, SVGStringList, SVGTransformList.
[ screenPixelToMillimeter(X/Y) ] fPixelSize = mySVG.screenPixelToMillimeter(XY)
Get floating-point that specifies or receives the size of a screen pixel along the x-axis of the viewport.
[ script ] <script href="myScript.js" ></script>
~ or ~
<script> ...ecmascript/javascript... </script>
Create a script element in SVG for javascript code
[ selectNodes ] xmlCollection = xmlContainer.selectNodes(nodeName)
Returns a collection of xml elements of requested node name
[ selectSingleNode ] xmlElem = myXMLcontainer.selectSingleNode("nodeName[ @id='myId' ]")
Returns a specific xml element
[ selectSubString ] myTextElem.selectSubString(charnum, nchars)
Selects the specified substring, just as if a user selected the substring interactively, starting at charnum.
[ setAttribute ] myElement.setAttribute(name, value);
Provide the string specifying the name of the attribute. If the attribute with that name already exists, its value is changed. If the attribute with that name does not exist, it is created.
[ setProperty ] myElement.style.setProperty("fill","lime")
Access the style attribute and change each existing property value.
Also see getPropertyValue and removeProperty.
[ stroke ] myElement.setAttribute("stroke",myColorString)
myColorString = svgElem.getAttribute("stroke")
~ or ~
[ strokeColor = ] myElement.style.stroke [ = strokeColor ]
Set/Get the a stroke color of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
[ stroke-dasharray ] Attribute
[ strokeDasharray ] Style
myElement.setAttribute("stroke-dasharray",dasharrayString)
dasharrayString = svgElem.getAttribute("stroke-dasharray")
~ or ~
[ dasharrayString = ] myElement.style.strokeDasharray [ = dasharrayString ]
Set/Get the CSS strokeDasharray of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
[ stroke-dashoffset ] Attribute
[ strokeDashoffset ] Style
myElement.setAttribute("stroke-dashoffset",dashoffsetValue)
dashoffsetValue = svgElem.getAttribute("stroke-dashoffset")
~ or ~
[ dashoffsetValue = ] myElement.style.strokeDashoffset [ = dashoffsetValue ]
Set/Get the CSS strokeDashoffset of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
[ stroke-linecap ] Attribute
[ strokeLinecap ] Style


myElement.setAttribute("stroke-linecap",linecapString)
linecapString = svgElem.getAttribute("stroke-linecap")
~ or ~
[ linecapString = ] myElement.style.strokeLinecap [ = linecapString ]
Set/Get the CSS strokeLinecap (butt, round, bevel) of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
butt/Default - Indicates that there should be no extra decoration at the end.
round - Indicates that there should be a half circle, its diameter equal to the line's width, at the end.
square - Indicates that there should be a straight line extending half the line's width past its endpoint.
[ stroke-linejoin ] Attribute
[ strokeLinejoin ] Style
myElement.setAttribute("stroke-linejoin",linejoinString)
linejoinString = svgElem.getAttribute("stroke-linejoin")
~ or ~
[ linejoinString = ] myElement.style.strokeLinejoin [ = linejoinString ]
Set/Get the strokeLinejoin (miter, round, bevel, inherit) of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
miter/default - Indicates that lines should be joined by extending both of their outside edges until they meet.
round - Indicates that lines should be joined by a circular arc with a radius that equals half the line width.
bevel - Indicates that lines should be joined by connecting the outer corners of the lines with a straight line segment.
[ stroke-miterlimit ] Attribute
[ strokeMiterlimit ] Style
myElement.setAttribute("stroke-miterlimit",fValue)
fValue = svgElem.getAttribute("stroke-miterlimit")
~ or ~
[ fValue = ] myElement.style.strokeMiterlimit [ = fValue ]
Set/Get the value on the ratio of the miter length to the value of the strokeWidth property (a floating number value greater than 1.0) of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
Default value = 4
[ stroke-opacity ] Attribute
[ strokeOpacity ] Style
myElement.setAttribute("stroke-opacity",fValue)
fValue = myElement.getAttribute("stroke-opacity")
~ or ~
[ fValue = ] myElement.style.strokeOpacity [ = fValue ]
Set/Get the stroke opacity value (a floating number value less than or equal to 1.0) of an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
[ stroke-width ] Attribute
[ strokeWidth ] Style
myElement.setAttribute("stroke-width",fValue)
fValue = myElement.getAttribute("stroke-width")
~ or ~
[ fValue = ] myElement.style.strokeWidth [ = fValue ]
Set/Get the CSS strokeWidth value (a floating number value or "integer+%") for an SVG element (tspan, textPath, text, path, rect, circle, ellipse, line, polyline, polygon)
[ style ] <style>.myStyleClass { fill: blue;stroke: red;stroke-width: 5;...} </style>
The style element enables you to embed style sheets directly within SVG content. The style element can be dynamically built to create CSS classes.
[ style ] myElement.setAttribute("style","stroke-width:3;stroke:red;fill:blue;opacity:0.40;...")
styleString = myElement.getAttribute("style")
~ or ~
[ value = ] myElement.style.styleName [ = value ]
The style attribute enables you to embed SVG element styles as strings directly within an SVG element. Also, rather than placing them within the style, each of the attributes can be individually included. (Also see getPropertyValue, setProperty and removeProperty)
[ svg ] <svg ...Attributes/Properties...> contained element(s) </svg>
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.
[ symbol ] <symbol ...Attributes/Properties...> contained element(s) </symbol>
Defines graphical template objects that a use element can instantiate.
Note: Symbols are best created with their center at the origin(0,0), allowing use in multible applications..
[ text ] <text font-family="arial" font-size="40" fill="blue" text-anchor="middle" x="150" y="150">ABCDEF</text>
Create a text element. Note: number of characters = myTextElement.firstChild.length
[ #text ] Element <#text/> a pseudo element
White space, new line, or carriage return pseudo element in SVG. Created when 'hand coding' the svg source. Attempting to process this node may cause errors, and it can be removed.
[ text-anchor ] Attribute
[ textAnchor ] Property
myText.setAttribute("text-anchor",anchor)
anchor = myText.getAttribute("text-anchor")
or
[ anchor= ] myText.style.textAnchor [ =anchor ]
attribute/property - anchor is start(default), middle, end.
[ textPath ] <text> <textPath href="#thePath" ... > This text follows myPath </textPath></text>
Create an element with characters that follow a path. The textPath element is a child of a text element.
[ title ] <title> This is a title </title>
One or more title elements can be placed within the svg document. It is not rendered, but can be searched and the text displayed in other applications. Note: The title, as a child of an <a>, will display the title's text on cursor over a link's child element.
[ tspan ] <text><tspan> character string within tspan </tspan></text>
Create a tspan element within a text element
[ use ] <use x="100" y="150" href="#mySymbol" width="50" height="50" />
Creates a use element as an instance of a symbol or defs element.
[ use ] - External <use x="100" y="150" href="myDefs.svg#mySymbol" width="50" height="50" />
Creates a use element as an instance of a symbol or defs extracted from an external file.
[ view ] <view id="new-viewBox" viewBox="-150 -150 600 600" />
The view element can be used as a static(preset viewBox values) to change the viewBox attributes of its parent svg element.
Note: this example manipulates the parent svg viewBox.
[ viewBox ] vbRectObj = svgElem.viewBox.baseVal (returns a Rect Object)
SET/GET: vbRectObj.x, vbRectObj.y, vbRectObj.width, vbRectObj.height
~ or ~
vbNumString = svgElem.getAttribute("viewBox")
svgElem.setAttribute("viewBox",vbNumString)
Object (or number-group string) that receives a list of four numbers that specify the minimum x-coordinate, minimum y-coordinate, width, and height values of a rectangle. The values define a rectangle in user space that is mapped to the bounds of the viewport that the element establishes. Applies to elements: pattern, svg, symbol, image, marker, and view
[ viewportElement ] oElement = myElement.viewportElement
Gets the element that established the current viewport. The returned element is often the nearest ancestor svg element.
nearestViewportElementFrame.htm
[ writing-mode ]Attribute
[ writingMode ] Style
textElem.setAttribute("writing-mode","tb")
myMode=textElem.getAttribute("writing-mode")
~ or ~
textElem.style.writingMode="tb"
myMode=textElem.style.writingMode
Text exlement character orientation: "lr"/default (left to right), or "tb" (top to bottom)
[ XMLHttpRequest ] loadXML = new XMLHttpRequest()
Loads an xml file for use in displaying inline SVG elements
[ XMLSerializer ] svgString = new XMLSerializer().serializeToString(mySVG)
Converts SVG elements to String
[ zoomAndPan ] zpNum = mySVG.zoomAndPan (0=disable,1=magnify)
~ or ~
mySVG.setAttribute("zoomAndPan","magnify/disable")
zAndP = mySVG.getAttribute("zoomAndPan")
Gets/Sets the zoomAndPan attribute of an element(svg, view).
Streamline Zoom and Pan: (1)-Mouse down to create zoom box. (2)-Use Pan Hand. (3)-contextMenu to return to Original View.
[ zoomRectScreen ] zoomRectObj = evtZoom.zoomRectScreen
Gets the zoom rectangle object following a zoom event.
Transformations and Matrices
[ consolidate ] matrixTransform = SVGTransformList.consolidate().getItem(0).matrix
Consolidates a transform list to a single item that is a matrix transform.
[ createSVGPoint ] mySVGPoint = mySVG.createSVGPoint()
Creates a new SVGPoint object that is initialized to the point (0,0) in the user viewports coordinate systems and that is not attached to any document.
When used in matrix operations, an SVGPoint is treated as a vector of the form:
The SVGPoint is very helpful when following matrix transformations: i.e., Used with screenCTM to track needed point locations at the user's screen.
[ x ]
[ y ]
[ 1 ]
[ createSVGMatrix ] matrixObj = mySVG.createSVGMatrix()
Creates a default matrix(1,0,0,1,0,0), i.e. (a,b,c,d,e,f) with scale x,y=1. Used for element transforms(translate, scale, rotate, skew)
[ createSVGTransform ] myTransformObj = mySVG.createSVGTransform()
Creates an 'empty' transform request object(an identity matrix) whereby a rotate, translate, skew, scale or matrix can be attached.
[ createSVGTransformFromMatrix ] myMatrixTransform = mySVG.createSVGTransformFromMatrix(matrix)
Creates a matrix transform object whose values are given by the specified matrix.
[ flipX ] flippedMatrix = myMatrix.flipX()
Returns a matrix equivalent to a flip about the vertical(x value) axis.
[ flipY ] flippedMatrix = myMatrix.flipY()
Returns a matrix equivalent to a flip about the horizontal(y value) axis.
[ getCTM ] myCTM = myElement.getCTM()
Returns the Current Transform Matrix object for the element.
a=myCTM.a, b=myCTM.b, c=myCTM.c, d=myCTM.d, e=myCTM.e, f=myCTM.f , i.e. matrix(a b c d e f)
[ getScreenCTM ] screenCTM = myElement.getScreenCTM()
Returns the transformation matrix of an element or its current viewport (i.e., after application of the transform attribute, if any) to the screen coordinate system: Used by screenX/Y of the MouseEvent interface.
Shown is a Drag/Drop application that performs seamlessly within differing transforms, viewports, currentScale values, and currentTranslate values.
[ getTransformToElement ] transMatrix = myElement.getTransformToElement(targetSVG)
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.
[ inverse ] Pnt = Pnt.matrixTransform(ElemScreenCTM.inverse());
Returns the inverse of an matrix. Used for transforms of an SVGPoint to an element's viewport via events: clientX, clientY.
[ matrix ] myMatrix = myTransformRequestObj.matrix
Gets the matrix that represents this transformation.
[ matrixTransform ] mySVGPointTrans = mySVGPoint.matrixTransform(myMatrix)
Applies the given 23 matrix transformation on this SVGPoint object and returns a new, transformed SVGPoint object.
[ multiply ] matrixResult = myMatrix.multiply(secondMatrix)
Post-multiplies the matrix by the specified second matrix and returns the resulting matrix. Used to append transforms(translate,rotate,scale,skew) an element.
[ rotate ] myText.setAttribute("rotate","deg1, deg2, deg3, deg4, ...")
rotationNumbs=myText.getAttribute("rotate")
~ or ~
[ NumberList = ] myText.rotate [ = NumberList ]
Object that specifies or receives a list of individual character rotation values. The last rotation value rotates all following characters.
[ rotate ] (matrix) rotatedMatrix=myMatix.rotate(myDegrees)
Post-multiplies a rotation transformation on the current matrix and returns the resulting matrix.
[ rotateFromVector ] vectorRotatedMatrix = myMatrix.rotateFromVector(x, y)
Post-multiplies the matrix by a specified rotation transformation and returns the resulting matrix.
[ scale ] scaledMatrix = myMatrix.scale(scaleFactor)
Post-multiplies the matrix by a uniform scale transformation and returns the resulting matrix
[ scaleNonUniform ] scaledMatrix = myMatrix.scaleNonUniform(scaleFactorX, scaleFactorY)
Post-multiplies the matrix by a non-uniform scale transformation and returns the resulting matrix
[ transform ] myElement.setAttribute("transform",transformListString)
transformListString = myElement.getAttribute("transform")
transformListString includes: rotate(angle,x,y), translate(x,y), scale(xScale,yScale), skewX(xAngle), skewY(yAngle), or matrix(a b c d e f)
Initialize oTransformList object for the element:
oTransformList = myElement.transform.baseVal
oTransformList includes: transformRequest.setRotate(angle,x,y), transformRequest.setTranslate(x,y), transformRequest.setScale(xScale,yScale), transformRequest.setSkewX(angleX), transformRequest.setSkewY(angleY), transformRequest.setMatrix(matrix)