svg guide

SVG Reference Guide

Basic Shape Elements

Element	Description
<rect>	Rectangle
<circle>	Circle
<ellipse>	Ellipse
<line>	Straight line
<polyline>	Connected lines (open)
<polygon>	Connected lines (closed)
<path>	Complex shapes via path data

Presentation Attributes

• fill, stroke, opacity
• stroke-width, stroke-linecap, stroke-linejoin
• font-family, font-size, text-anchor

DOM Hierarchy

Document
└── <svg> (SVGSVGElement)
    ├── <g> (SVGGElement)
    │   ├── <rect> (SVGRectElement)
    │   └── <circle> (SVGCircleElement)
    ├── <defs> (SVGDefsElement)
    │   └── <linearGradient> (SVGLinearGradientElement)
    ├── <text> (SVGTextElement)
    └── <path> (SVGPathElement)
  

tagName vs nodeName

Property	Applies To	Element Nodes	Other Nodes
tagName	Element nodes only	"DIV", "SPAN"	undefined
nodeName	All node types	"DIV", "SPAN"	"#text", "#comment"

Why the # in nodeName?

The # prefix in nodeName indicates a non-element node type:

• #text — Text node
• #comment — Comment node
• #document — Document node

🎨 Interactive SVG Examples