Chapter 17: SVG Fill
SVG Fill Attributes basically means all the ways you can control the color / pattern / gradient / transparency / rule that fills the inside of SVG shapes (rectangle, circle, ellipse, polygon, closed path, text, etc.).
The most important thing to remember right from the start:
- stroke = border / outline
- fill = inside color / pattern
Almost every closed shape (and even some open ones if you force it) uses fill.
1. The Main Fill Attribute – fill
This is the one you use 90% of the time.
|
0 1 2 3 4 5 6 |
<circle cx="100" cy="100" r="80" fill="red" /> |
Possible values for fill:
| Value type | Example | What it does |
|---|---|---|
| Named color | red, blue, lime, purple | Standard CSS color names (140+ available) |
| Hex | #ff0000, #00f, #f0f8ff | Most common in code |
| RGB | rgb(255, 0, 0), rgb(0 255 0 / 0.5) | Modern syntax allows alpha |
| HSL | hsl(120, 100%, 50%), hsla(240,100%,50%,0.7) | Great for themes & adjustments |
| Current color | currentColor | Uses the inherited color property (very useful) |
| none | none | Transparent – no fill at all |
| URL reference | url(#myGradient), url(#pattern1) | Points to gradient or pattern defined in <defs> |
2. Quick Copy-Paste Playground (Try These One by One)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<svg width="600" height="400" viewBox="0 0 600 400"> <!-- 1. Basic named color --> <rect x="20" y="20" width="150" height="100" fill="tomato" stroke="black" stroke-width="4"/> <!-- 2. Hex with opacity --> <circle cx="300" cy="70" r="60" fill="#00bfff88" stroke="#00688b" stroke-width="6"/> <!-- 3. CurrentColor magic (changes with CSS) --> <style> .current-demo { color: purple; } .current-demo:hover { color: orange; } </style> <text x="300" y="180" font-size="50" text-anchor="middle" fill="currentColor" class="current-demo"> Hover Me! </text> <!-- 4. No fill – only stroke --> <ellipse cx="150" cy="250" rx="120" ry="60" fill="none" stroke="green" stroke-width="10"/> </svg> |
3. Fill-Rule – The Hidden Boss Attribute (fill-rule)
This decides which parts get filled when paths cross or overlap (very important for complex shapes, stars, letters with holes, etc.).
Two main values:
| Value | What it means | Best for | Example shape result |
|---|---|---|---|
| nonzero (default) | Counts winding direction – odd crossings = fill, even = hole | Most normal shapes | Solid star without center hole |
| evenodd | Fills only odd crossings – creates holes where paths overlap | Shapes with intentional holes (donut, letters O, complex icons) | Star with empty center, O with hole |
Real example everyone should try:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<svg viewBox="0 0 200 200" width="200" height="200"> <!-- Star with crossing lines --> <path d="M100,10 L40,198 L190,78 L10,78 L160,198 Z" fill="gold" stroke="orange" stroke-width="3"/> <!-- Same star but evenodd --> <path d="M100,10 L40,198 L190,78 L10,78 L160,198 Z" fill="gold" fill-rule="evenodd" stroke="darkorange" stroke-width="3" transform="translate(0,100)"/> </svg> |
→ Top star = solid gold (nonzero default) → Bottom star = gold with white hole in middle (evenodd)
4. Fill-Opacity (Separate Control)
You can control transparency of fill only (stroke stays separate).
|
0 1 2 3 4 5 6 7 8 |
<rect x="20" y="20" width="200" height="120" fill="purple" fill-opacity="0.4" stroke="black" stroke-width="5"/> |
→ Purple fill is 40% opaque, border full opaque
You can also use alpha in color: fill=”rgba(128,0,128,0.4)” or fill=”#80008066″
5. Fill with Gradients & Patterns (Most Beautiful Part)
Instead of solid color → fill=”url(#someId)”
Linear Gradient Example
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<svg viewBox="0 0 300 200"> <defs> <linearGradient id="myGrad" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="yellow"/> <stop offset="50%" stop-color="orange"/> <stop offset="100%" stop-color="red"/> </linearGradient> </defs> <rect x="20" y="20" width="260" height="160" rx="20" fill="url(#myGrad)"/> </svg> |
Radial Gradient (Shiny Ball Effect)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<radialGradient id="shine"> <stop offset="0%" stop-color="white"/> <stop offset="70%" stop-color="dodgerblue"/> <stop offset="100%" stop-color="navy"/> </radialGradient> <circle cx="150" cy="100" r="80" fill="url(#shine)"/> |
Pattern Fill (Repeating Texture)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
<defs> <pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="4" fill="black"/> </pattern> </defs> <rect width="300" height="200" fill="url(#dots)"/> |
→ Polka-dot fill!
6. Teacher’s Quick Summary Table (Exam/Interview Style)
| Property / Attribute | Controls what? | Most common values | Can be animated? |
|---|---|---|---|
| fill | Inside color / gradient / pattern | red, #ff0000, url(#grad), none | Yes |
| fill-rule | How overlapping areas are filled | nonzero (default), evenodd | No |
| fill-opacity | Transparency of fill only | 0–1, 0.5, 0.75 | Yes |
| paint-order | Order: fill / stroke / markers | normal, stroke fill, markers stroke fill | No |
7. Final Tips from Your Teacher 😄
- Default fill = black — always set it or you get surprise black shapes
- Use currentColor when you want fill to follow text/icon color scheme
- evenodd is your friend for icons with holes (Font Awesome, Material icons use it a lot)
- For glass / overlay effect → low fill-opacity + backdrop-filter (CSS)
- Practice: Take any icon from svgrepo.com → change fill, fill-rule, add gradient — see magic!
Understood SVG fill attributes fully now? Want to go deeper: animated fill change? Conic gradient? Mesh gradient (new)? Or full icon recoloring project? Just tell me — we keep building your SVG skills! 🚀
