Fixing color bleed in SVGs

This guide explains why some SVGs show unwanted "color bleed" and how you can fix it.

Color bleed looks like:

• gaps between flush edges of adjoining elements
• halos, in which color from covered elements shows around the edges of a covering element

As an example, compare these zoomed-in screenshots of 2 SVGs:

The first screenshot shows color from the black rectangle bleeding through in 3 locations. The second screenshot is the desired look. Let's figure out how to achieve that look…

Why color bleed happens

When SVGs are rasterized, the edges of shapes are anti-aliased so that they look smoother when displayed on a rigid grid of pixels. Because the smoothed edges aren't fully opaque, their color blends with whatever is underneath.

The following example shows two grey circles. The right circle perfectly covers a same-sized red circle. Even though we'd expect the red circle to be invisible, the red peeks through as a halo.

Color bleed is less pronounced on displays with a high pixel density because those displays have smaller pixels and the anti-aliasing only affects the pixels that intersect with an edge.

Preventing color bleed

You can prevent color bleed by creatively tweaking shapes to eliminate overlapping edges. Lets look at some examples.

Example 1

The following graphic shows 3 ways to construct the same cross shape. Below each cross is an outlined "x-ray" view that reveals the construction.

The left construction uses 5 squares arranged flush like tiles. This is bad because the center square shares an edge with each of the 4 abutting squares. The black background bleeds through the abutments because anti-aliasing makes an imperfect fit.

The last two constructions are good because no elements share any edge. The middle construction uses two overlapping rectangles, and the right uses a single path.

Example 2

This graphic shows a black parallelogram covered by two trapezoids. The problem areas are where the shapes share portions of their edges, highlighted in red (3x). By using the alternative construction shown in the last image, we can eliminate the color bleed seen in the first image.

We made two important changes:

• Where the teal and yellow trapezoids meet flush, we changed the flat edge of the teal trapezoid into a triangular flap that sits underneath the yellow trapezoid. This makes the shapes overlap instead of abut, so that the yellow trapezoid's edge only blends with the teal trapezoid and not the black parallelogram.
• Reshape the black parallelogram so that it no longer shares any edges with the shapes that cover it.

Summary

Color bleed happens when shapes have overlapping and anti-aliased edges. When overlapping shapes share an edge, the edge will show color from both shapes. When abutting shapes share an edge, the joint will let the background show.

To resolve color bleed, select an approach depending on whether the issue is with overlapping or abutting shapes:

• For overlapping shapes: Trim or shrink the covered shape to remove the shared edge.
• For abutting shapes: Make them overlap by adding a flap to the lower shape. If the shapes are the same color, combine them into a single shape (union operator).