SVG Reference Manual

This handbook provides a quick reference for SVG elements and attributes.

Basic Shape Elements

Element	Description	Key Properties
<rect>	Rectangle	x, y, width, height, rx, ry
<circle>	Circle	cx, cy, r
<ellipse>	Ellipse	cx, cy, rx, ry
<line>	Straight line	x1, y1, x2, y2
<polyline>	Polyline	points
<polygon>	Polygon	points
<path>	Path	d

Text Elements

Element	Description	Key Properties
<text>	Text	x, y, dx, dy, text-anchor
<tspan>	Text fragment	x, y, dx, dy
<textPath>	Path text	href, startOffset

Container Elements

Element	Description	Purpose
<svg>	SVG root element	Defines SVG canvas
<g>	Group	Groups multiple elements
<defs>	Definitions	Defines reusable elements
<symbol>	Symbol	Defines reusable graphics
<use>	Use	References defined elements

Gradient Elements

Element	Description	Key Properties
<linearGradient>	Linear gradient	x1, y1, x2, y2, gradientUnits
<radialGradient>	Radial gradient	cx, cy, r, fx, fy
<stop>	Gradient color stop	offset, stop-color, stop-opacity

Filter Elements

Element	Description
<filter>	Filter container
<feGaussianBlur>	Gaussian blur
<feDropShadow>	Drop shadow
<feOffset>	Offset
<feBlend>	Blend
<feColorMatrix>	Color matrix
<feMerge>	Merge
<feFlood>	Flood
<feComposite>	Composite

Path Commands

Line Commands

Command	Name	Parameters	Example
M	moveto	x,y	M10,20
L	lineto	x,y	L50,60
H	horizontal line	x	H100
V	vertical line	y	V80
Z	closepath	none	Z

Curve Commands

Command	Name	Parameters	Description
C	cubic bezier	x1,y1 x2,y2 x,y	Two control points
S	smooth cubic bezier	x2,y2 x,y	One control point
Q	quadratic bezier	x1,y1 x,y	One control point
T	smooth quadratic	x,y	No control points
A	arc	rx,ry rot large sweep x,y	Elliptical arc

Common Attributes

Fill and Stroke

Attribute	Description	Value Examples
fill	Fill color	#3b82f6, rgb(59,130,246), none
fill-opacity	Fill opacity	0.5
fill-rule	Fill rule	nonzero, evenodd
stroke	Stroke color	#3b82f6, none
stroke-width	Stroke width	2, 2px
stroke-opacity	Stroke opacity	0.8
stroke-linecap	Endpoint style	butt, round, square
stroke-linejoin	Join style	miter, round, bevel
stroke-dasharray	Dash pattern	5,3, 10,5,2,5
stroke-dashoffset	Dash offset	10

Opacity and Visibility

Attribute	Description	Value Examples
opacity	Overall opacity	0.5
visibility	Visibility	visible, hidden
display	Display	inline, none

Transforms

Attribute	Description	Value Examples
transform	Transform	translate(10,20), rotate(45), scale(1.5)
transform-origin	Transform origin	center, 50% 50%

Transform Functions

Function	Description	Example
translate(x,y)	Translate	translate(100,50)
rotate(angle)	Rotate	rotate(45)
rotate(angle,cx,cy)	Rotate around point	rotate(45,100,100)
scale(x,y)	Scale	scale(1.5), scale(2,1)
skewX(angle)	X skew	skewX(30)
skewY(angle)	Y skew	skewY(30)
matrix(a,b,c,d,e,f)	Matrix transform	matrix(1,0,0,1,0,0)

Text Attributes

Attribute	Description	Value Examples
font-family	Font family	Arial, sans-serif
font-size	Font size	16, 16px, 1.2em
font-weight	Font weight	normal, bold, 700
font-style	Font style	normal, italic
text-anchor	Text alignment	start, middle, end
text-decoration	Text decoration	underline, line-through
letter-spacing	Letter spacing	2px
word-spacing	Word spacing	5px

Color Formats

<!-- Named colors -->
fill="red"
fill="steelblue"

<!-- Hexadecimal -->
fill="#ff0000"
fill="#f00"

<!-- RGB -->
fill="rgb(255, 0, 0)"
fill="rgb(100%, 0%, 0%)"

<!-- RGBA -->
fill="rgba(255, 0, 0, 0.5)"

<!-- HSL -->
fill="hsl(0, 100%, 50%)"

<!-- HSLA -->
fill="hsla(0, 100%, 50%, 0.5)"

viewBox and preserveAspectRatio

viewBox

<svg viewBox="min-x min-y width height">
<!-- Example -->
<svg viewBox="0 0 100 100">

preserveAspectRatio

<svg preserveAspectRatio="align meetOrSlice">

<!-- Alignment values -->
xMinYMin | xMidYMin | xMaxYMin
xMinYMid | xMidYMid | xMaxYMid
xMinYMax | xMidYMax | xMaxYMax
none

<!-- Examples -->
<svg preserveAspectRatio="xMidYMid meet">
<svg preserveAspectRatio="xMinYMin slice">
<svg preserveAspectRatio="none">

Common Filter Examples

Shadow

<filter id="shadow">
  <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#00000040"/>
</filter>

Blur

<filter id="blur">
  <feGaussianBlur stdDeviation="5"/>
</filter>

Grayscale

<filter id="grayscale">
  <feColorMatrix type="saturate" values="0"/>
</filter>

Glow

<filter id="glow">
  <feGaussianBlur stdDeviation="4" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

Animation Attributes

animate

<animate
  attributeName="attribute name"
  from="start value"
  to="end value"
  values="value1;value2;value3"
  dur="duration"
  begin="start time"
  repeatCount="repeat count|indefinite"
  fill="freeze|remove"
/>

animateTransform

<animateTransform
  attributeName="transform"
  type="translate|rotate|scale|skewX|skewY"
  from="start value"
  to="end value"
  dur="duration"
  repeatCount="indefinite"
/>

Browser Support

Feature	Chrome	Firefox	Safari	Edge
Basic shapes	✓	✓	✓	✓
Gradients	✓	✓	✓	✓
Filters	✓	✓	✓	✓
Animation (SMIL)	✓	✓	✓	✓
CSS animation	✓	✓	✓	✓

Related Resources

• MDN SVG Documentation
• W3C SVG Specification
• SVG Icon Library - Heroicons
• SVG Icon Library - Feather Icons
• SVG Editor - SVG Edit
• SVG Optimization Tool - SVGO