SVG: Radial gradients are not being correctly rendered when filling a 'path' element



I’m developing a commercial vector drawing program for Windows 10 that uses Scaleable Vector Graphics (SVG) as it’s native file format. I ran across this issue when testing the SVG output of my app. I found this bug in several browsers, and Brave (version 0.19.88) is one of them.

Steps to reproduce the problem:
Create an SVG image file –

  1. Draw a closed path object that does not have a square bounding box. Width is longer than height in this case.

  2. Draw a rectangle that exactly matches the bounding rectangle of the closed path object.

  3. Place the rectangle behind the closed path object and align the rectangle with the bounding rectangle of the path object.

  4. Apply the same offset radial gradient to both objects, making sure that gradientUnits=“objectBoundingBox” and gradientTransform =[identity matrix] (i.e. no transform).

What is the expected behavior?

The radial gradient should fill both the rectangle and the closed path elements (objects) exactly the same since the bounding rectangles of both objects are identical. Placing the path on top of the gradient, it should appear as though the radial gradient is seamlessly rendered across both objects.

What went wrong?

In Brave (and any of the browsers derived from the Chromium code base), it appears as though the bounding box of the path element is either not being calculated or applied correctly to the path object when filling the path with a radial gradient. This is being rendered correctly in Firefox, the Microsoft browsers and in Inkscape.

Here is an image illustrating the bug:

I reported the issue to the Chromium project. You can get a copy of the .svg file that reproduces the problem in their bug database here:

closed #2

Fixed on