Chapter 32: SVG Reference
SVG Reference” in the most detailed, human-teacher style possible. 😊
Just like we did for “Graphics Tutorial”, “SVG Tutorial”, “SVG Text”, “SVG Animation”, etc., I’m going to explain this slowly, clearly, with real examples, and in simple everyday English — exactly the way a good college teacher or YouTube mentor would explain it in Hyderabad.
First — What does “SVG Reference” actually mean?
When students, developers, designers or freelancers in India (especially Hyderabad, Bangalore, Pune students doing BCA/B.Tech/MCA or UI/UX courses) search or ask for “SVG Reference”, they almost always mean one of these three things:
- A complete cheat-sheet / quick-reference guide of all important SVG tags, attributes, values, and common patterns (the most common meaning).
- The official SVG specification / reference documentation (MDN, W3C, SVG 1.1 / SVG 2 docs).
- A list of the best SVG reference websites / resources people use daily (MDN, SVG Repo, Icon sets, etc.).
So in 99% of cases when someone says “bhai SVG ka reference bata do” or “SVG reference kahan se padhe?”, they want:
- A structured, easy-to-revise list of all major SVG elements + attributes
- Short explanations + real copy-paste code examples
- Common mistakes & pro tips
- Where to go for more details when stuck
That’s exactly what I’m going to give you today — a complete SVG Reference guide taught like a 2-hour classroom session.
SVG Reference – Full Cheat-Sheet Style (2026 Updated)
1. Root & Basic Structure
| Element / Attribute | Purpose / Meaning | Must-know values / examples | Important notes |
|---|---|---|---|
| <svg> | Root container of every SVG | width, height, viewBox=”0 0 100 100″, xmlns=”http://www.w3.org/2000/svg” | Always include xmlns |
| viewBox=”minX minY width height” | Defines coordinate system & makes SVG responsive | “0 0 200 200”, “0 0 24 24” (common for icons) | Most important attribute for scaling |
| preserveAspectRatio | How to handle aspect ratio when resizing | “xMidYMid meet” (default), “none”, “xMinYMin slice” | “none” = stretch like object-fit: fill |
2. Basic Shapes (Most Frequently Used)
| Shape Tag | Main attributes | Classic example code snippet | Common use |
|---|---|---|---|
| <rect> | x, y, width, height, rx, ry | <rect x=”10″ y=”10″ width=”180″ height=”100″ rx=”20″ fill=”blue”/> | Buttons, cards, backgrounds |
| <circle> | cx, cy, r | <circle cx=”100″ cy=”100″ r=”80″ fill=”red”/> | Dots, avatars, loaders |
| <ellipse> | cx, cy, rx, ry | <ellipse cx=”150″ cy=”80″ rx=”120″ ry=”60″ fill=”purple”/> | Oval highlights, eyes |
| <line> | x1,y1,x2,y2 | <line x1=”20″ y1=”20″ x2=”280″ y2=”180″ stroke=”black”/> | Axes, connectors |
| <polyline> | points=”x1,y1 x2,y2 …” | <polyline points=”20,180 100,20 200,180″ stroke=”green”/> | Graphs, zigzags |
| <polygon> | points=”…” | <polygon points=”100,10 190,90 150,190″ fill=”gold”/> | Stars, arrows, irregular shapes |
| <path> | d=”M … L … C … Z” | <path d=”M10 10 L90 90 Q150 10 190 90 Z” fill=”none” stroke=”black”/> | Almost everything complex |
3. Text & Typography
| Element / Attribute | Purpose | Example snippet | Pro tip |
|---|---|---|---|
| <text> | Basic text | <text x=”50″ y=”50″ font-size=”40″>Hello SVG</text> | y = baseline (bottom of letters) |
| <tspan> | Change style mid-sentence | <tspan fill=”red” font-weight=”bold”>SVG</tspan> | Like <span> in HTML |
| <textPath> | Text along a path/curve | <textPath href=”#curve”>Follow the curve!</textPath> | Needs <path id=”curve”> |
| text-anchor | Horizontal alignment | “start”, “middle”, “end” | “middle” for centering |
4. Fill, Stroke & Color
| Property | Controls what? | Common values / tricks | Mistake to avoid |
|---|---|---|---|
| fill | Inside color | “red”, “#ff0000”, “none”, “url(#grad1)” | Forget = black by default |
| stroke | Border color | “black”, “currentColor” | No stroke = invisible open shapes |
| stroke-width | Border thickness | 2, 10, 0.5 | Use even numbers on small icons |
| stroke-dasharray | Dashed pattern | “10 5”, “20 10 5 5” | “5 5” = nice dots |
| fill-rule | How overlapping areas fill | “nonzero” (default), “evenodd” | “evenodd” for holes |
| opacity | Whole element transparency | 0.7 | Better use fill-opacity / stroke-opacity separately |
5. Gradients & Patterns (Most Beautiful Fills)
| Type | Tag / Key attributes | Quick example | Best use |
|---|---|---|---|
| Linear Gradient | <linearGradient> x1 y1 x2 y2 | <stop offset=”0%” stop-color=”yellow”/> <stop offset=”100%” stop-color=”red”/> | Buttons, backgrounds |
| Radial Gradient | <radialGradient> cx cy r fx fy | <stop offset=”0%” stop-color=”white”/> <stop offset=”100%” stop-color=”blue”/> | Shiny orbs, glows |
| Pattern | <pattern> width height patternUnits | <circle cx=”10″ cy=”10″ r=”5″ fill=”black”/> | Dots, stripes, textures |
6. Filters (Photoshop-like Effects)
| Effect | Main primitive(s) | Quick example | Common use |
|---|---|---|---|
| Blur / Soft Shadow | <feGaussianBlur> stdDeviation | <feGaussianBlur stdDeviation=”8″/> | Shadows, glows |
| Drop Shadow | <feDropShadow> (modern) or long method | <feDropShadow dx=”6″ dy=”6″ stdDeviation=”5″/> | Cards, buttons |
| Glow | <feGaussianBlur> + <feMerge> | Repeat blur node 2–4 times | Neon text/icons |
7. Clipping & Masking
| Feature | Tag / Attribute | Quick example | Typical use |
|---|---|---|---|
| Clipping | <clipPath> + clip-path=”url(#id)” | <clipPath><circle cx=”80″ cy=”80″ r=”75″/></clipPath> | Round avatars |
| Masking | <mask> + mask=”url(#id)” | White = visible, black = hidden | Text reveal, vignette |
8. Transformations & Animation (Power Features)
| Feature | Key attribute / tag | Quick example | Common use |
|---|---|---|---|
| Transform | transform=”translate() rotate() scale() skewX()” | transform=”translate(50 30) rotate(45 100 100) scale(1.5)” | Positioning, hover effects |
| Animation (CSS) | stroke-dashoffset, @keyframes | .draw { animation: draw 3s linear forwards; } | Line drawing |
| Animation (SMIL) | <animate> / <animateTransform> | <animateTransform type=”rotate” from=”0″ to=”360″ dur=”5s” repeatCount=”indefinite”/> | Old-school infinite spin |
Final Teacher Summary – Your SVG Reference One-Page Cheat-Sheet
Print this table or save it as your quick reference:
| Category | Most important tags / attributes | One-line memory hook |
|---|---|---|
| Root | <svg>, viewBox | viewBox = magic for responsive |
| Shapes | rect, circle, ellipse, line, polyline, polygon, path | path = king of all shapes |
| Text | <text>, <tspan>, <textPath> | textPath = curved text |
| Fill / Stroke | fill, stroke, stroke-width, stroke-dasharray | no stroke = invisible line |
| Gradients | <linearGradient>, <radialGradient> | url(#id) = how to use them |
| Patterns | <pattern> width height | repeating tiles |
| Filters | <filter>, <feGaussianBlur>, <feDropShadow> | blur = soft shadow & glow |
| Clipping/Masking | <clipPath>, <mask> | clip = hard cut, mask = soft fade |
| Transform | translate, rotate(cx cy), scale, skewX/Y | order matters — right to left |
| Animation | CSS dashoffset or SMIL <animate> | dashoffset = drawing effect king |
Understood the SVG Reference now? This is your complete cheat-sheet — everything you’ll ever need for college exams, freelance gigs, or interviews.
Tell me honestly — do you want:
- A harder 30-question SVG quiz based on this reference?
- Printable one-page PDF-style reference table?
- Focus on any one section (animation, filters, gradients, etc.) with 5–10 more examples?
- Or real interview questions + answers from this reference?
Just say — we can go as deep as you want! 🚀
