fill

none

No fill is painted; the areas inside the stroke, if any, are transparent.

context-fill

Uses the paint value of fill from a context element.

context-stroke

Uses the paint value of stroke from a context element.

<color>

The color of the fill as any valid CSS <color> value.

<url>

A URL reference to an SVG paint server element, such as a <linearGradient>, <radialGradient>, or <pattern>. The resource reference can optionally be followed by a <color> or none, which will be used as a fallback if the referenced paint server doesn't resolve.

fill = 
  <paint>  

<paint> = 
  none         |
  <image>      |
  <svg-paint>  

<image> = 
  <url>       |
  <gradient>  

<svg-paint> = 
  child               |
  child( <integer> )  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

This example demonstrates how a fill is declared, the effect of the property, and how the CSS fill property takes precedence over the fill attribute.

HTML

We have an SVG with two complex shapes defined using the SVG <polygon> and <path> elements. Both have the fill attribute set to #000 (equivalent to the default, black). We add a dark grey stroke of #666 using the SVG stroke attribute but could have used the stroke property.

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="#666"
    fill="#000" />
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="#666"
    fill="#000" />
</svg>

CSS

We set fill values on the shapes in the SVG.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

path {
  fill: red;
}
polygon {
  fill: hsl(0deg 100% 50% / 60%);
}

Results

The CSS fill property value overrides the SVG fill attribute value, resulting in both shapes being filled with a red color; the polygon's red is translucent.

This example demonstrates using keyword values for fill.

HTML

We include three <path> elements and a <marker> element that adds a <circle> to every path point. We set the circle marker to be black with a grey fill with the SVG stroke and fill attributes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 90">
  <path d="M 10 44.64 L 30 10 L 70 10 L 90 44.64 L 70 79.28 L 30 79.28 Z" />
  <path d="M 100 44.64 L 80 10 L 120 10 L 140 44.64 L 120 79.28 L 80 79.28 Z" />
  <path
    d="M 150 44.64 L 130 10 L 170 10 L 190 44.64 L 170 79.28 L 130 79.28 Z" />
  <marker
    id="circle"
    markerWidth="12"
    markerHeight="12"
    refX="6"
    refY="6"
    markerUnits="userSpaceOnUse">
    <circle cx="6" cy="6" r="3" stroke-width="2" stroke="black" fill="grey" />
  </marker>
</svg>

CSS

We set different stroke and fill colors on each path. The first path, the one with a red border, has its fill set to none. We set the circle marker's stroke and fill to the same color as the stroke of the element they're marking, using the context-stroke value.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

path {
  stroke-width: 2px;
  marker: url(#circle);
}
path:nth-of-type(1) {
  stroke: red;
  fill: none;
}
path:nth-of-type(2) {
  stroke: green;
  fill: lightgreen;
}
path:nth-of-type(3) {
  stroke: blue;
  fill: lightblue;
}
circle {
  stroke: context-stroke;
  fill: context-stroke;
}

Results

Note how the first path has a transparent background because the fill is none, overriding the default fill of black. The circles are filled with the color of the stroke. If you change the value to context-fill, the circles will be transparent, lightgreen and lightblue instead of red, green, and blue.

This example demonstrates how to include a url() value with a fallback as a fill value.

HTML

We have an SVG containing two <polygon> stars and a <linearGradient> that goes from green to gold to red.

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="5%" stop-color="green" />
      <stop offset="50%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon points="80,10 50,100 120,40 40,40 110,100" />
  <polygon points="180,10 150,100 220,40 140,40 210,100" />
</svg>

CSS

We set fill values on the polygons in the SVG, providing a url() value and a fallback.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
}

polygon:first-of-type {
  fill: url("#myGradient") magenta;
}
polygon:last-of-type {
  fill: url("#MISSINGIMAGE") magenta;
}

Results

The first star has a gradient as a background. The second star uses the fallback value, as the element referenced in the url() does not exist.

• SVG fill attribute
• Presentation properties: fill, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, and vector-effect
• opacity
• background-color
• <color>
• <basic-shape> data type