fill

fill paints the interiors of SVG shapes and SVG text. It does not give an ordinary HTML box a background. CSS declarations override a shape’s fill presentation attribute when the cascade selects them.

Use currentColor for a shape

The SVG’s color supplies currentColor to its circle. Changing color changes the circle’s fill, while the surrounding label is normal HTML.

<svg viewbox="0 0 100 100" role="img" aria-label="Green circle">
  <circle cx="50" cy="50" r="35" fill="red"></circle>
</svg>
<p>The CSS fill overrides the red attribute.</p>

svg {
  width: 100px;
  height: 100px;
  color: #0f766e;
}
circle {
  fill: currentColor;
}

Reference an SVG gradient

The gradient is defined in defs and referenced by its ID. A CSS linear-gradient() is not a valid fill paint value; SVG uses its own paint server here.

<svg
  viewbox="0 0 220 100"
  role="img"
  aria-label="Rectangle blending from blue to green"
>
  <defs>
    <lineargradient id="paint">
      <stop offset="0" stop-color="#2563eb"></stop>
      <stop offset="1" stop-color="#0f766e"></stop>
    </lineargradient>
  </defs>
  <rect x="10" y="10" width="200" height="80" rx="8"></rect>
</svg>

svg {
  width: 220px;
  max-width: 100%;
  height: 100px;
}
rect {
  fill: url(#paint) #2563eb;
}

Values and defaults

The initial value is black and fill is inherited. Color values, currentColor, and none are common choices. None means no interior paint; a separate stroke may still draw the outline. Url(#id) references a paint server such as an SVG gradient or pattern. The optional color after the URL is a fallback if that reference cannot be used.

Fill applies to SVG shapes such as circle, rect, path, and polygon, and to SVG text. For an open path, the fill calculation closes the subpath between its endpoints even if the stroke remains open. Fill-rule determines how overlapping subpaths define the interior.

Common mistakes

Do not write fill:linear-gradient(…). Do not expect a CSS selector in the host document to select internal shapes of an SVG loaded through img; inline SVG is part of the document, while that image is a separate resource. Give a meaningful SVG an accessible name, or hide a decorative icon from assistive technology.

Learn color for currentColor and img for image alternatives.

Sources and browser support

MDN: fill describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.