How SVG Fill Controls Vector Shape Interior Colors

The SVG fill property defines the interior color, gradient, pattern, or transparency of scalable vector shapes. By targeting the enclosed paths of elements such as <circle>, <rect>, <path>, and <polygon>, the fill property determines how vector geometry renders inside its boundary lines. This guide explains the core mechanisms of the fill property, including supported color values, CSS integration, opacity controls, and the fill-rule algorithm for complex shapes.

Understanding the Fill Mechanism

Vector graphics consist of coordinates and path commands that define borders. The fill property tells the SVG renderer what paint source to apply inside those enclosed coordinates. By default, most SVG shapes use a solid black fill (#000000) if no fill attribute is explicitly defined.

Supported Color Formats

The fill property accepts any standard CSS color value, special keywords, or references to SVG paint servers:

Color Keywords: Standard named colors such as fill="crimson" or fill="transparent".
Hexadecimal Values: Standard 3-, 6-, or 8-digit hex codes, such as fill="#2563eb".
RGB and HSL Functional Notations: Functional definitions including alpha channels, such as fill="rgb(37, 99, 235)" or fill="hsl(217, 91%, 60%)".
The none Keyword: Removes the interior paint entirely (fill="none"), rendering the shape transparent so only the stroke or background remains visible.
The currentColor Keyword: Inherits the CSS color value of the parent element, enabling dynamic theme switching via standard CSS.

Paint Servers (url() references): Applies advanced graphics defined within <defs>, such as linear gradients, radial gradients, or repeating patterns:

<svg viewBox="0 0 100 100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#4facfe" />
      <stop offset="100%" stop-color="#00f2fe" />
    </linearGradient>
  </defs>
  <circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>

Presentation Attributes vs. CSS Styling

The fill property can be declared in two primary ways:

As an SVG Presentation Attribute:

<rect width="100" height="50" fill="#10b981" />

Through Inline or External CSS:
```
.my-shape {
  fill: #10b981;
  transition: fill 0.3s ease;
}
```
Applying fill through CSS overrides presentation attributes and allows interactive behaviors, such as dynamic state changes on :hover or smooth color transitions.

Managing Transparency with Fill Opacity

To control the transparency of a shape’s interior without altering the opacity of its outline (stroke), use the fill-opacity property:

<rect width="100" height="100" fill="#e11d48" fill-opacity="0.5" stroke="#000" stroke-width="4" />

Values range from 0.0 (fully transparent) to 1.0 (fully opaque). This keeps the stroke crisp and solid while making the inner area translucent.

Determining Complex Interiors with `fill-rule`

For complex paths that self-intersect or contain nested cutouts (such as donut shapes or icons), the browser uses the fill-rule property to determine which areas are considered “inside” the shape:

nonzero (Default): Draws a ray from a point to infinity and counts path directions (clockwise vs. counter-clockwise). If the net count is zero, the point is outside; otherwise, it is filled.
evenodd: Draws a ray from a point to infinity and counts the total number of path crossings. If the count is odd, the area is filled; if even, it is left transparent.