CSS Fill: A Complete Guide to SVG Color Filling

What is the CSS Fill Property?

The CSS fill property defines how SVG text content and the interior canvas of SVG shapes are filled or painted. When present in a CSS rule, it overrides the element's fill attribute defined directly in the SVG markup.

This property applies specifically to SVG shapes and text content elements, including <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, and <text> elements.

Mastering SVG properties like fill is essential for creating performant, scalable graphics for modern websites. Our web development services help businesses leverage these techniques to build fast, visually compelling digital experiences.

Fill vs. Stroke: Understanding the Difference

While fill controls the interior color of a shape, the complementary stroke property controls the color of the line drawn around the object's perimeter. Together, these two properties form the foundation of SVG coloring. A shape can have both a fill and a stroke, or either one alone.

Syntax and Accepted Values

The fill property accepts a variety of value types:

Color Values

• Named colors (red, blue, transparent)
• Hexadecimal values (#ff0000)
• RGB/RGBA values (rgb(255, 0, 0))
• HSL/HSLA values (hsl(120deg, 100%, 50%))
• Modern color functions like oklch and color-mix

Special Keywords

• none: No fill is painted; areas remain transparent
• context-fill: Uses fill from a context element
• context-stroke: Uses stroke from a context element

URL Values

One of the most powerful features is referencing paint server elements:

• Linear gradients: fill: url(#linearGradient1)
• Radial gradients: fill: url(#radialGradient1)
• Patterns: fill: url(#dotPattern)

With fallback: fill: url(#gradient) blue;

Understanding color theory and SVG fundamentals is crucial for creating visually cohesive websites. Professional SEO services often incorporate optimized SVG graphics to improve page performance and visual appeal.

Working with Fill Opacity

The fill-opacity property controls the transparency of the fill independently:

/* Full opacity (default) */
.shape-1 { fill: #3498db; fill-opacity: 1; }

/* 50% opacity */
.shape-2 { fill: #3498db; fill-opacity: 0.5; }

/* 25% opacity */
.shape-3 { fill: #3498db; fill-opacity: 0.25; }

You can also achieve similar effects using RGBA or HSLA colors with alpha channels. Unlike the background-color property in CSS, fill-opacity specifically targets SVG shape interiors without affecting any stroke applied to the element.

Fill Rules for Complex Shapes

When dealing with complex SVG shapes that have overlapping paths, the fill-rule property determines which areas are considered "inside" the shape:

• nonzero (default): Uses winding direction to determine inside/outside
• evenodd: Alternates between inside and outside based on path overlap

.complex-shape-1 { fill: #9b59b6; fill-rule: nonzero; }
.complex-shape-2 { fill: #9b59b6; fill-rule: evenodd; }

This is particularly important when working with self-intersecting paths or star-shaped polygons where the visual result depends heavily on which fill rule you choose.

Paint Order: Layering Fills and Strokes

The paint-order property controls the order in which fill and stroke are painted:

/* Fill before stroke (default) */
.shape-1 { paint-order: fill; }

/* Stroke before fill */
.shape-2 { paint-order: stroke; }

This affects how strokes overlap fills and is particularly useful for text and icon styling. When working with SVG icons, controlling paint order helps achieve cleaner visual results, especially when strokes are used for subtle outlining effects.

Using CSS with SVG Fill

Inline CSS

<rect x="10" y="10" width="180" height="180" style="fill: #3498db;"/>

Embedded CSS in SVG

<svg width="200" height="200">
 <defs>
 <style>
 .shape { fill: #3498db; stroke: #2c3e50; }
 .shape:hover { fill: #2980b9; }
 </style>
 </defs>
 <rect class="shape" x="10" y="10" width="180" height="180"/>
</svg>

External CSS

.icon { fill: #3498db; transition: fill 0.3s ease; }
.icon:hover { fill: #2980b9; }

CSS enables powerful interactive effects including hover states, transitions, and animations that can transform SVG fill colors smoothly over time.

Pattern Fills: Creating Complex Textures

SVG patterns are defined in <defs> and can create complex textures:

<defs>
 <pattern id="dotPattern" viewBox="0 0 10 10" width="10%" height="10%">
 <circle cx="5" cy="5" r="3" fill="#3498db"/>
 </pattern>
 <linearGradient id="brandGradient">
 <stop offset="0%" stop-color="#3498db"/>
 <stop offset="100%" stop-color="#9b59b6"/>
 </linearGradient>
</defs>

<circle cx="100" cy="100" r="80" style="fill: url(#dotPattern);"/>
<rect x="220" y="20" width="160" height="160" style="fill: url(#brandGradient);"/>

Patterns and gradients open up creative possibilities for data visualization, backgrounds, and decorative elements that would be difficult to achieve with solid colors alone.

Leverage AI-powered development workflows to automate SVG optimization and pattern generation at scale.

Common Use Cases

Icons and UI Elements

.ui-icon { fill: currentColor; }
.ui-icon:hover { fill: #3498db; }

Data Visualization

.bar { fill: #3498db; }
.bar:hover { fill: #2980b9; }
.bar.highlighted { fill: #e74c3c; }

Illustrations

.illustration-bg { fill: #ecf0f1; }
.illustration-shadow { fill: rgba(0, 0, 0, 0.1); }

The fill property is essential for building scalable icon systems, creating compelling data visualizations, and designing detailed SVG illustrations that look sharp at any size.

Conclusion

The CSS fill property is fundamental for SVG graphics. Key takeaways:

1. Fill accepts any CSS color value plus URL references to patterns and gradients
2. Default fill is black; the property is inherited by child elements
3. Use fill-opacity for transparency without affecting stroke
4. Choose appropriate fill-rule for complex self-intersecting shapes
5. Leverage CSS for dynamic, responsive styling

Master the fill property and related properties like stroke to create visually compelling SVG graphics that scale perfectly across all devices.

For businesses looking to implement optimized SVG graphics and improve their web performance, partnering with experienced web development professionals can ensure your visual assets are both beautiful and performant.

Sources

1. MDN Web Docs - CSS fill Property
2. MDN Web Docs - SVG Fills and Strokes Tutorial
3. GeeksforGeeks - CSS fill Property