Chapter 31: SVG Reference
SVG Reference (or “SVG cheat sheet / quick reference guide”).
A good SVG reference is like your personal cheat sheet or dictionary that you keep open while coding. It helps you quickly remember:
- which attributes exist for each element
- what values they accept
- which elements can contain other elements
- which properties are animatable
- common gotchas and best practices
I’m going to act like your patient teacher who is giving you a structured, detailed SVG reference that you can actually use every day — explained clearly with short examples, tables, and tips.
Think of this as your “SVG desk reference” printed in friendly teacher language.
────────────────────────────── SVG Quick Reference – 2026 Edition (What actually matters in real projects)
1. Root element – <svg>
Must-have attributes (almost always)
Most common gotcha: Forget viewBox → scaling & responsiveness breaks on different screen sizes.
Best practice 2026:
→ Makes SVG scale like an image while keeping internal coordinates 0–100.
2. Basic Shapes – Quick lookup table
| Element | Required attributes | Most used optional attributes | Notes / Gotchas |
|---|---|---|---|
| <rect> | width, height | x, y, rx, ry, fill, stroke | rx/ry = rounded corners |
| <circle> | r | cx, cy, fill, stroke | Center-based (cx/cy) |
| <ellipse> | rx, ry | cx, cy | rx=ry → perfect circle |
| <line> | x1 y1 x2 y2 | stroke, stroke-width, stroke-linecap | No fill — only stroke |
| <polyline> | points=”x1,y1 x2,y2 …” | stroke, fill=”none” | Open path — no auto close |
| <polygon> | points=”x1,y1 x2,y2 …” | fill, stroke | Auto-closes last → first point |
| <path> | d=”M … L … C … Z” | fill, stroke, stroke-dasharray | Most powerful — can do everything |
3. Text & <textPath> quick reference
<textPath> – curved text
Tip: startOffset=”50%” centers text on path — most common trick.
4. Fill & Stroke – Quick cheats
| Goal | Attribute / Value example | CSS alternative |
|---|---|---|
| Solid color | fill=”#2196F3″ | fill: #2196F3; |
| No fill | fill=”none” | fill: none; |
| Inherit parent color | fill=”currentColor” | fill: currentColor; |
| Dashed stroke | stroke-dasharray=”10 5″ | stroke-dasharray: 10 5; |
| Rounded line ends | stroke-linecap=”round” | stroke-linecap: round; |
| Rounded corners | stroke-linejoin=”round” | stroke-linejoin: round; |
| Semi-transparent stroke only | stroke=”#000″ stroke-opacity=”0.4″ | stroke: rgba(0,0,0,0.4); |
5. Gradients – Quick patterns you reuse
Horizontal linear
|
0 1 2 3 4 5 6 7 8 9 |
<linearGradient id="horiz"> <stop offset="0%" stop-color="#FFEB3B"/> <stop offset="100%" stop-color="#F44336"/> </linearGradient> |
Radial with highlight
|
0 1 2 3 4 5 6 7 8 9 |
<radialGradient id="orb" cx="40%" cy="40%" r="70%" fx="35%" fy="35%"> <stop offset="0%" stop-color="white" stop-opacity="0.9"/> <stop offset="100%" stop-color="#673AB7"/> </radialGradient> |
6. Common filters – Copy-paste ready
Soft drop shadow (modern 2026 way)
|
0 1 2 3 4 5 6 7 8 |
<filter id="shadow"> <feDropShadow dx="4" dy="6" stdDeviation="4" flood-opacity="0.4"/> </filter> |
Outer glow
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<filter id="glow"> <feGaussianBlur stdDeviation="6" result="blur"/> <feMerge> <feMergeNode in="blur"/> <feMergeNode in="SourceGraphic"/> </feMerge> </filter> |
7. Transformations – Quick reminder
Order matters — right-to-left execution
CSS version (most used in 2026):
|
0 1 2 3 4 5 6 7 8 9 10 |
.icon:hover { transform: scale(1.2) rotate(15deg); transform-origin: center; transition: transform 0.4s ease; } |
8. Clipping vs Masking – 30-second reminder
9. Animation – Most reused snippets (CSS 2026)
Pulse effect
|
0 1 2 3 4 5 6 7 8 9 10 |
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } } .pulse { animation: pulse 2s infinite ease-in-out; } |
Draw path
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
.draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 3s linear forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } |
10. Scripting – 3 most common snippets
Change color on click
|
0 1 2 3 4 5 6 7 8 |
document.getElementById('myShape').addEventListener('click', () => { this.setAttribute('fill', '#' + Math.floor(Math.random()*16777215).toString(16)); }); |
Get path length for dash animation
|
0 1 2 3 4 5 6 7 8 |
const path = document.querySelector('path'); path.style.strokeDasharray = path.getTotalLength(); path.style.strokeDashoffset = path.getTotalLength(); |
Create circle dynamically
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
const svg = document.querySelector('svg'); const ns = "http://www.w3.org/2000/svg"; const c = document.createElementNS(ns, "circle"); c.setAttribute("cx", "150"); c.setAttribute("cy", "150"); c.setAttribute("r", "60"); c.setAttribute("fill", "#FF5722"); svg.appendChild(c); |
This is your SVG Reference — a living cheat sheet.
Print it, bookmark it, copy it into your notes — come back to it whenever you forget an attribute name, get confused about stroke-linecap vs stroke-linejoin, or wonder how to center text properly.
Which part of this reference do you think you’ll use most often? Or would you like me to expand one section (e.g. more animation snippets, more filter examples, scripting patterns)?
Tell me — we can keep refining your personal SVG reference together! 🚀
