SVG Fill

Learn how the fill attribute paints the interior of SVG shapes using named colors, hex, rgb, and hsl values, and how fill-opacity controls transparency.

The fill Attribute

Every SVG shape element — <rect>, <circle>, <ellipse>, <polygon>, and <path> — has an interior region that the browser paints using the fill attribute. If you omit fill entirely, SVG defaults to solid black, which is why an unstyled shape often renders as a black silhouette. You can set fill directly as a presentation attribute on the element, override it with an inline style attribute, or target it from an external or embedded stylesheet using CSS.

Basic Fill Colors

<!DOCTYPE html>
<html>
<body>

<svg width="220" height="120" viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="60" fill="tomato" />
  <circle cx="150" cy="40" r="30" fill="steelblue" />
  <polygon points="40,110 70,80 100,110" fill="mediumseagreen" />
</svg>

</body>
</html>

Color Value Formats

SVG accepts the same color syntaxes as CSS. You can use one of the 147 predefined color keywords like coral or steelblue, a six-digit (or shorthand three-digit) hex code, functional rgb()/rgba() notation, or hsl()/hsla() for hue-based adjustments. The special keyword none removes the fill entirely, leaving only a visible stroke if one is set, and currentColor lets a shape inherit the surrounding CSS color value.

  • Named colors — fill="coral" or fill="steelblue"
  • Hex codes — fill="#ff6347" or the shorthand fill="#f00"
  • rgb() / rgba() — fill="rgb(70,130,180)" for precise channel control, or rgba() to add transparency
  • hsl() / hsla() — fill="hsl(200,70%,50%)" for easy hue, saturation, and lightness tweaking
  • fill="none" — paints nothing, useful for outline-only shapes
  • fill="currentColor" — inherits the CSS color property from the surrounding context

Comparing Color Formats

<!DOCTYPE html>
<html>
<body>

<svg width="260" height="80" viewBox="0 0 260 80" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="15" width="50" height="50" fill="coral" />
  <rect x="75" y="15" width="50" height="50" fill="#4682b4" />
  <rect x="140" y="15" width="50" height="50" fill="rgb(60,179,113)" />
  <rect x="205" y="15" width="50" height="50" fill="hsl(280,60%,55%)" />
</svg>

</body>
</html>

Fill Opacity and Transparency

The fill-opacity attribute controls how transparent the fill paint is, independent of the shape's stroke. It accepts a number between 0 (fully transparent) and 1 (fully opaque), or an equivalent percentage such as 50%. This differs from the general opacity attribute, which fades the entire element — fill, stroke, and everything nested inside it — as a single unit.

Overlapping Circles with fill-opacity

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="160" viewBox="0 0 200 160" xmlns="http://www.w3.org/2000/svg">
  <circle cx="80" cy="70" r="55" fill="red" fill-opacity="0.5" />
  <circle cx="120" cy="70" r="55" fill="green" fill-opacity="0.5" />
  <circle cx="100" cy="110" r="55" fill="blue" fill-opacity="0.5" />
</svg>

</body>
</html>
Note: Layering semi-transparent shapes with fill-opacity is the classic technique for drawing Venn diagrams and color-blend illustrations — where two circles overlap, the browser composites the colors automatically.
AttributePurpose
fillSets the paint (color, gradient, pattern, or none) used to fill a shape's interior
fill-opacityControls the transparency of just the fill paint, from 0 to 1
fill-ruleDetermines which regions count as 'inside' for shapes with overlapping or self-intersecting paths
opacityFades the entire element, including both fill and stroke, together

Exercise: SVG Fill

If no fill is specified on an SVG shape, what color does it render with by default?

Keep Going

SVG Interview QuestionsPractice real questions asked for SVGFrontend Developer SalarySee what Frontend Developer roles pay in the marketAuto Apply for JobsApply to open roles related to SVG and tweak your resume