Chapter 16: SVG Fill

SVG Fill — one of the most important things when you’re coloring shapes in SVG!

Imagine we’re sitting together with the code editor open, and I’m your patient teacher who’s going to explain everything step by step, like we’re building colorful drawings from scratch. We’ll go slow, with many copy-paste examples.

What does “fill” actually mean in SVG?

fill = the color (or pattern/gradient) that paints the inside of a shape.

• Applies to: closed shapes like <rect>, <circle>, <ellipse>, <polygon>, <path> (when closed with Z), and also to text (<text>, <tspan>, <textPath>)
• Does not apply to: open paths like <line>, <polyline> (they have no “inside” — only stroke)
• Default value: black (#000000)

You set it in two main ways:

1. As an attribute directly on the element (most common when learning):

   HTML

   PHP

   0 1 2 3 4 5 6

   <circle cx="100" cy="100" r="60" fill="orange" />

2. As a CSS property (very powerful for styling many elements at once):

   CSS

   PHP

   0 1 2 3 4 5 6

   .my-shape { fill: #2196F3; }

   HTML

   PHP

   0 1 2 3 4 5 6

   <rect class="my-shape" x="20" y="20" width="160" height="100" />

Basic fill values (colors)

SVG accepts almost all the same color formats as CSS:

Super useful trick — currentColor This makes SVG icons change color automatically when you style the parent element.

Hover → color changes magically!

Fill opacity (separate control)

You can control transparency of only the fill (without affecting stroke) using:

• fill-opacity=”0.5″ (attribute)
• fill-opacity: 0.7; (CSS)

Example:

Advanced fills: Gradients & Patterns

The real power starts here — fill can reference paint servers (special definitions in <defs>).

1. Linear Gradient (straight color transition)

2. Radial Gradient (circular/spreading from center)

3. Pattern (repeating tiles — like dots, stripes, checkerboard)

fill-rule — The “which parts are inside?” rule (very important!)

For complex paths (especially ones that cross themselves or have holes), fill-rule decides what counts as “inside”.

Two main values:

Classic example — star with hole:

With evenodd → center hole stays empty. With nonzero → center fills (depending on path direction).

Here are visual comparisons of fill-rule behavior (imagine seeing these side by side):

• Left: star with evenodd (hole visible)
• Right: same path with nonzero (center filled)

Quick Cheat Sheet

Common beginner mistakes

• Forget fill → defaults to black (not transparent!)
• Set fill=”none” but want background → use <rect> behind or CSS background
• Use fill on <line> or <polyline> → does nothing (they’re open)
• Gradient/pattern not showing → forgot id or wrong url(#id)
• Complex path fills wrong → try switching fill-rule

Mini practice for you

1. Make a rectangle with a horizontal rainbow gradient
2. Create a circle with radial gradient (white center → dark edge)
3. Draw a star <polygon> or <path> and use evenodd vs nonzero to see the difference

Paste your code here if you want feedback — I’ll check it like we’re debugging together 😊

Any part still confusing? Gradients? Patterns? currentColor? fill-rule weirdness? Just tell me — we’ll zoom in with more examples until it’s crystal clear! 🚀