Understanding CSS Fill for SVG Graphics

Introduction

The fill CSS property is crucial for web development. It defines how SVG shapes and text are filled or painted. This property overrides the fill attribute of an SVG element, making it a powerful tool for creating visually appealing graphics.

Specification

The fill property is defined in the CSS Fill and Stroke Module Level 3. This specification ensures consistency across different browsers and platforms. By following this specification, web developers can confidently use the fill property to create stunning SVG graphics that work seamlessly across various devices and browsers.

Description

The fill property in CSS determines how the interior areas of SVG shapes and text content are painted. It applies to shapes like circles, rectangles, and polygons, as well as text elements. When the fill property is applied, it takes precedence over the fill attribute specified directly within the SVG element.

Understanding the fill property is essential for any web developer or designer looking to leverage the full potential of SVG graphics in their projects.

Syntax

The syntax for the fill property in CSS is straightforward and flexible:

/* Keywords */
fill: none;
fill: context-fill;
fill: context-stroke;

/* Color values */
fill: red;
fill: hsl(120deg 75% 25% / 60%);

/* URL values */
fill: url(#gradientElementID);
fill: url(star.png);

/* URL values with fallback */
fill: url(#gradientElementID) blue;
fill: url(star.png) none;

/* Global values */
fill: inherit;
fill: initial;
fill: revert;
fill: revert-layer;
fill: unset;

Explanation of Syntax

• Keywords:
  • none: No fill is applied, making the interior areas transparent.
  • context-fill: Uses the fill value from a context element.
  • context-stroke: Uses the stroke value from a context element.
• Color values:
  • You can specify a color using named colors (e.g., red), HSL values (e.g., hsl(120deg 75% 25% / 60%)), or other valid CSS color values.
• URL values:
  • You can reference an SVG paint server element (e.g., linearGradient, radialGradient, or pattern) using the url() function.
  • Example: fill: url(#gradientElementID);
• URL values with fallback:
  • You can provide a fallback color in case the referenced URL does not resolve.
  • Example: fill: url(#gradientElementID) blue;
• Global values:
  • inherit: Inherits the value from the parent element.
  • initial: Sets the value to its initial (default) value.
  • revert: Reverts the value to the user agent’s default.
  • revert-layer: Reverts the value to the value set in the previous cascade layer.
  • unset: Resets the value to its natural value, which means it acts as either inherit or initial, depending on whether the property is inherited or not.

Values

The fill property in CSS can take on various values, each designed to offer different ways to paint or fill the interior of SVG shapes and text content.

Keywords

• none: No fill is applied; the interior of the shape remains transparent.

  fill: none;

• context-fill: Uses the fill value from a context element.

  fill: context-fill;

• context-stroke: Uses the stroke value from a context element.

  fill: context-stroke;

Color Values

You can specify the fill color using any valid CSS color value.

• Named Colors:

  fill: red;

• Hexadecimal Values:

  fill: #ff0000;

• RGB Values:

  fill: rgb(255, 0, 0);

• HSL Values:

  fill: hsl(0deg 100% 50%);

• HSLA Values with Alpha Transparency:

  fill: hsl(120deg 75% 25% / 60%);

URL Values

You can reference an SVG paint server element, such as a gradient or pattern, using the url() function.

• Linear Gradient:

  fill: url(#gradientElementID);

• Image:

  fill: url(star.png);

• URL with Fallback: If the referenced URL does not resolve, you can provide a fallback color.

  fill: url(#gradientElementID) magenta;
  fill: url(star.png) none;

Global Values

These values are used to control the inheritance and resetting of the fill property.

• inherit: Inherits the value from the parent element.

  fill: inherit;

• initial: Sets the value to its initial (default) value.

  fill: initial;

• revert: Reverts the value to the user agent’s default.

  fill: revert;

• revert-layer: Reverts the value to the value set in the previous cascade layer.

  fill: revert-layer;

• unset: Resets the value to its natural value, which means it acts as either inherit or initial, depending on whether the property is inherited or not.

  fill: unset;

Summary

The fill property in CSS offers a wide range of values, from simple colors to complex patterns and gradients. By understanding and utilizing these values, web developers and designers can create visually appealing and dynamic SVG graphics that enhance the user experience on the web.

Formal Definition

The fill property in CSS is a fundamental tool for defining how SVG shapes and text content are filled or painted. It is crucial for creating visually appealing graphics on the web. Here is the formal definition of the fill property:

Initial Value

The initial value of the fill property is black.

Applies To

The fill property applies to SVG shapes and text content elements, including:

• <circle>
• <ellipse>
• <path>
• <polygon>
• <polyline>
• <rect>
• <text>
• <textPath>
• <tref>
• <tspan>

It does not apply to other SVG, HTML, or pseudo-elements.

Inherited

Yes, the fill property is inherited from the parent element.

Computed Value

The computed value of the fill property is as specified, but with <color> values computed and <url> values made absolute.

Animation Type

The animation type is by computed value type.

Formal Syntax

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>* )

Explanation of Formal Syntax

• <paint>: Represents the various ways to define the fill style.
  • none: No fill is applied.
  • <image>: Represents an image or gradient.
    • <url>: A URL reference to an SVG paint server element, such as <linearGradient>, <radialGradient>, or <pattern>.
    • <gradient>: A gradient fill.
  • <svg-paint>: Represents an SVG paint definition.
    • child: A child element.
    • child( <integer> ): A child element with an integer index.
• <url>: Represents a URL reference.
  • <url()>: A URL function.
    • url( <string> <url-modifier>* ): A URL with optional modifiers.
    • <url-token>: A URL token.
  • <src()>: A source function.
    • src( <string> <url-modifier>* ): A source with optional modifiers.

This formal definition ensures that the fill property can be used consistently and effectively across different browsers and platforms, providing web developers with a reliable tool for creating dynamic and visually appealing SVG graphics.

Examples

The fill property in CSS offers a variety of ways to customize the appearance of SVG elements. Below are some practical examples to demonstrate how to use the fill property effectively.

Defining Fill Values for SVG Elements

In this example, we will demonstrate how to declare the fill property and observe its effect on SVG shapes. We will also show how the CSS fill property takes precedence over the fill attribute within the SVG.

Using Fill Keyword Values

This example demonstrates using keyword values for the fill property.

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 using 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, 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.

Fills and Fallbacks

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.

polygon:nth-of-type(1) {
  fill: url(#myGradient) blue;
}

polygon:nth-of-type(2) {
  fill: url(#myGradient) none;
}

Results

The first polygon is filled with the gradient. If the gradient reference fails, it falls back to blue. The second polygon is also filled with the gradient, but if the reference fails, it falls back to no fill.

These examples illustrate the flexibility and power of the fill property in CSS, allowing you to create dynamic and visually appealing SVG graphics.

SVG Elements Supported

The fill property can be used with various SVG elements:

1. <circle>
2. <ellipse>
3. <path>
4. <polygon>
5. <polyline>
6. <rect>
7. <text>
8. <textPath>
9. <tref>
10. <tspan>

Specifications

The fill property is defined in the CSS Fill and Stroke Module Level 3. This ensures that it works consistently across different browsers.

Browser Compatibility

The fill property is widely supported:

• Google Chrome: Full support.
• Mozilla Firefox: Full support.
• Safari: Full support.
• Microsoft Edge: Full support.
• Opera: Full support.
• Internet Explorer: Partial support from version 9.

Ensuring Cross-Browser Compatibility

To ensure your SVG graphics look great across all browsers:

1. Test Across Different Browsers: Regularly test your SVG graphics.
2. Use Fallbacks: Provide fallback values for the fill property.
3. Stay Updated: Keep your browser versions up to date.

See Also

For more on creating dynamic SVG graphics, check out these related topics:

• SVG fill Attribute
• Presentation Properties: Like clip-rule, color-interpolation-filters, etc.
• Opacity
• Background Color
• Color Values
• Basic Shape

By exploring these topics, you can create even more stunning and engaging graphics for the web.

Summary

The fill property is a powerful tool for creating visually appealing SVG graphics. By understanding its usage and ensuring browser compatibility, you can create dynamic and engaging web experiences.