# Bug: SVG radial gradients not drawn correctly (with potential fix!)

**URL:** <https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690>\
**Category:** General JUCE discussion\
**Created:** [July 24, 2018, 7:57am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690 "2018-07-24T07:57:50Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![PixelPacker](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/pixelpacker/32/9869_2.png) [@PixelPacker](https://forum.juce.com/u/PixelPacker)\
**Post date:** [July 24, 2018, 7:57am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/1 "2018-07-24T07:57:50Z")

</div>

I’m using JUCE fe6fa12f551357c2ba5a5cf1ca6041d084c9dee8 (latest master) and there appears to be a problem when rendering SVG radial gradients. I’m 100% certain, that this used to work correctly in earlier versions of JUCE, more precisely it worked in 90bbda1f195b4cf940f54f7f41986e0d5d68c9ec  
. Here are some screenshots:

It’s supposed to look like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/4/4bf09809fa4e9fc2caaea64238957871fd06967e.jpg)

But it looks like this in the Projucer and my app:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/0/040843d1bb46c3218278dc3f436e825d11bdadaf.png)

I’m using “Normal” blending. This is the SVG:

```
<?xml version="1.0" encoding="UTF-8"?>
<svg width="635px" height="254px" viewBox="0 0 635 254" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <radialGradient cx="50.000298%" cy="50.0005245%" fx="50.000298%" fy="50.0005245%" r="50.0001489%" gradientTransform="translate(0.500003,0.500005),scale(1.000000,0.997848),translate(-0.500003,-0.500005)" id="radialGradient-1">
            <stop stop-color="#B3D3E6" offset="0%"></stop>
            <stop stop-color="#A9CDE1" offset="25.38%"></stop>
            <stop stop-color="#8EBED2" offset="68.62%"></stop>
            <stop stop-color="#76B1C5" offset="100%"></stop>
        </radialGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="backdrop-outlines" transform="translate(121.000000, 129.000000)" fill="url(#radialGradient-1)" fill-rule="nonzero">
            <path d="M36.228,0 L11.07,0 C4.983,0 0,4.991 0,11.093 L0,36.307 C0,42.408 4.983,47.4 11.07,47.4 L36.228,47.4 C42.318,47.4 47.298,42.408 47.298,36.307 L47.298,11.093 C47.299,4.992 42.318,0 36.228,0 Z" id="glow"></path>
        </g>
    </g>
</svg>

```

It may be worth noting, that the svg is using a transformed gradient.

I tried with the CoreGraphics and the OpenGL renderer. The OpenGL Renderer yields the expected results, the CoreGraphics renderer does not. Therefore parsing is correct.

I noticed, that when parsing the SVG gradient, the FillType::transform member is set for radial gradients, but for linear gradients the transform appears to be applied to the points during parsing.

In CoreGraphicsContext::drawGradient() applyTransform() AND state-\>fillType.transform.transformPoints() is called. Maybe this transforms the radial gradient twice? If I change CoreGraphicsContext::drawGradient() to:

```
void CoreGraphicsContext::drawGradient()
{
    flip();
    applyTransform (state->fillType.transform);
    CGContextSetAlpha (context, state->fillType.getOpacity());

    const ColourGradient& g = *state->fillType.gradient;

    CGPoint p1 (convertToCGPoint (g.point1));
    CGPoint p2 (convertToCGPoint (g.point2));

    //state->fillType.transform.transformPoints (p1.x, p1.y, p2.x, p2.y);

    if (state->gradient == 0)
        state->gradient = createGradient (g, rgbColourSpace);

    if (g.isRadial)
        CGContextDrawRadialGradient (context, state->gradient, p1, 0, p1, g.point1.getDistanceFrom (g.point2),
                                     kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
    else
        CGContextDrawLinearGradient (context, state->gradient, p1, p2,
                                     kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
}

```

The output looks correct.

Best,  
Ben

Update: The CoreGraphics and related SVG parsing code code is ancient - so not sure what’s going on here.

---

<div class="post-metadata">

**Author:** ![yairadix](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/yairadix/32/1114_2.png) [@yairadix](https://forum.juce.com/u/yairadix)\
**Post date:** [July 24, 2018, 10:35am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/2 "2018-07-24T10:35:50Z")

</div>

I don’t think that the SVG parsing code is ancient. It was definitely updated in the last years.

---

<div class="post-metadata">

**Author:** ![PixelPacker](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/pixelpacker/32/9869_2.png) [@PixelPacker](https://forum.juce.com/u/PixelPacker)\
**Post date:** [July 24, 2018, 10:42am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/3 "2018-07-24T10:42:55Z")

</div>

True. The version that was working was from about August 2017. I looked through the commits related to juce\_SVGParser.cpp and the CoreGraphics renderer and found nothing obvious - which does not mean it’s not there of course.

---

<div class="post-metadata">

**Author:** ![PixelPacker](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/pixelpacker/32/9869_2.png) [@PixelPacker](https://forum.juce.com/u/PixelPacker)\
**Post date:** [July 24, 2018, 1:38pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/4 "2018-07-24T13:38:05Z")

</div>

Update: It has nothing to do with the gradient transform. It has to do with the parent beeing transformed. For testing I use the following svg:

```
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="16 16 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient">
            <stop stop-color="#ff0000" offset="0%"></stop>
            <stop stop-color="#00ff00" offset="100%"></stop>
        </radialGradient>
    </defs>
    <g transform="translate(16.000000, 16.000000)">
        <rect width="32" height="32" fill="url(#radialGradient)" />
    </g>
</svg>

```

Projucer:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/7/7448f5132dfcfc733d0a74fb160d1988d342d5d9.png)

Chrome / Quicklook / Sketch:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/e/eadb6089de19616e7ed95670241253cff030b5f5.jpg)

If I remove the transform from the parent (and shift the view box):

```
<?xml version="1.0" encoding="UTF-8"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="50%" id="radialGradient">
            <stop stop-color="#ff0000" offset="0%"></stop>
            <stop stop-color="#00ff00" offset="100%"></stop>
        </radialGradient>
    </defs>
    <g>
        <rect width="32" height="32" fill="url(#radialGradient)" />
    </g>
</svg>

```

The Projucer yields the intended result:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/9/9c153ae379e7640e41675b4e7e143d98d8c30bb9.png)

@jules : do you recall why [linear svg gradients points are transformed, but for radial gradients the transform is stored](https://github.com/WeAreROLI/JUCE/blame/master/modules/juce_gui_basics/drawables/juce_SVGParser.cpp#L943) ?

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\
**Post date:** [July 24, 2018, 1:40pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/5 "2018-07-24T13:40:53Z")

</div>

I guess this is just some subtle mistake where it’s not quite following the SVG spec in terms of how things are transformed.

---

<div class="post-metadata">

**Author:** ![PixelPacker](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/pixelpacker/32/9869_2.png) [@PixelPacker](https://forum.juce.com/u/PixelPacker)\
**Post date:** [July 24, 2018, 1:46pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/6 "2018-07-24T13:46:37Z")

</div>

For me removing the if and using the else block for both cases fixes the issue. I’m a little bit worried though, that the CoreGraphics renderer and the OpenGL renderer yield different results. What do you think is the correct way to fix this ?

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\
**Post date:** [July 24, 2018, 2:19pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/7 "2018-07-24T14:19:06Z")

</div>

Right… very odd. I guess the CoreGraphics renderer could be wrong, though it does seem bizarre that a bug wouldn’t have been found after so many years. It deserves some more attention though, I’ll take a look when I get chance.

---

<div class="post-metadata">

**Author:** ![PixelPacker](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/pixelpacker/32/9869_2.png) [@PixelPacker](https://forum.juce.com/u/PixelPacker)\
**Post date:** [July 30, 2018, 9:40am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/8 "2018-07-30T09:40:14Z")

</div>

Can you give a hint on when you may find the time? A client is waiting for me right now. If you’re uber-bussy, I can apply my “workaround” locally and hope that nothing else breaks.

Thanks & Best,  
Ben

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\
**Post date:** [July 30, 2018, 9:42am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/9 "2018-07-30T09:42:20Z")

</div>

Unlikely to happen before next week, I’m a bit busy right now!

---

<div class="post-metadata">

**Author:** ![jrlanglois](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/jrlanglois/32/21372_2.png) [@jrlanglois](https://forum.juce.com/u/jrlanglois)\
**Post date:** [August 5, 2018, 3:34pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/10 "2018-08-05T15:34:54Z")

</div>

> [@pixelpacker](#):
>
> @jules : do you recall why [linear svg gradients points are transformed, but for radial gradients the transform is stored](https://github.com/WeAreROLI/JUCE/blame/master/modules/juce_gui_basics/drawables/juce_SVGParser.cpp#L943) ?

The changes were added for this post: [SVG linear gradient with transform problem](https://forum.juce.com/t/svg-linear-gradient-with-transform-problem/11240)

---

<div class="post-metadata">

**Author:** ![PixelPacker](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/pixelpacker/32/9869_2.png) [@PixelPacker](https://forum.juce.com/u/PixelPacker)\
**Post date:** [August 7, 2018, 11:04am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/11 "2018-08-07T11:04:50Z")

</div>

Interesting. Thanks!

---

<div class="post-metadata">

**Author:** ![PixelPacker](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/pixelpacker/32/9869_2.png) [@PixelPacker](https://forum.juce.com/u/PixelPacker)\
**Post date:** [August 13, 2018, 8:34am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/12 "2018-08-13T08:34:16Z")

</div>

@jules : any updates on this ?

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\
**Post date:** [August 13, 2018, 8:42am UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/13 "2018-08-13T08:42:48Z")

</div>

Sorry, haven’t had chance to look at it yet!

---

<div class="post-metadata">

**Author:** ![ed95](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/ed95/32/7635_2.png) [@ed95](https://forum.juce.com/u/ed95)\
**Post date:** [August 15, 2018, 12:54pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/14 "2018-08-15T12:54:57Z")

</div>

This should be fixed in [4d4fd5e](https://github.com/WeAreROLI/JUCE/commit/4d4fd5ea3f7be35cf57c5b13706e0d84bd56e708).

---

<div class="post-metadata">

**Author:** ![PixelPacker](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/pixelpacker/32/9869_2.png) [@PixelPacker](https://forum.juce.com/u/PixelPacker)\
**Post date:** [August 15, 2018, 4:09pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/15 "2018-08-15T16:09:19Z")

</div>

Thanks, awesome!

---

<div class="post-metadata">

**Author:** ![Chi79](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/chi79/32/6077_2.png) [@Chi79](https://forum.juce.com/u/Chi79)\
**Post date:** [July 18, 2019, 2:28pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/16 "2019-07-18T14:28:25Z")

</div>

This fix actually stops the radial gradient being displayed for me.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/juce/original/2X/3/3d9592cd8aede866993f6d865e0a84d57f17b2cb.png)  
Reverting the fix lets it show correctly - although not in the projucer file explorer - in the project.

Here is the SVG:

````auto
<svg
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:cc="http://creativecommons.org/ns#"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  id="svg8"
  version="1.1"
  viewBox="0 0 87.995399 86.877441"
  height="86.877441mm"
  width="87.995399mm">
 <defs
    id="defs2">
   <linearGradient
      id="linearGradient2467">
     <stop
        id="stop2463"
        offset="0"
        style="stop-color:#f6f97f;stop-opacity:1;" />
     <stop
        id="stop2465"
        offset="1"
        style="stop-color:#feff81;stop-opacity:0" />
   </linearGradient>
   <radialGradient
      gradientUnits="userSpaceOnUse"
      gradientTransform="matrix(0.73411329,1.5698127,-3.9182804,1.8323599,520.85518,-266.56917)"
      r="43.4977"
      fy="125.44496"
      fx="112.01121"
      cy="125.44496"
      cx="112.01121"
      id="radialGradient2473"
      xlink:href="#linearGradient2467" />
   <meshgradient
      y="81.209465"
      x="52.891968"
      gradientUnits="userSpaceOnUse"
      id="meshgradient2579">
     <meshrow
        id="meshrow2593">
       <meshpatch
          id="meshpatch2595">
         <stop
            id="stop2597"
            style="stop-color:#ffffff;stop-opacity:1"
            path="c 29.3318,0 58.6636,0 87.9954,0" />
         <stop
            id="stop2599"
            style="stop-color:#f6f97f;stop-opacity:1"
            path="c 0,28.9591 0,57.9183 0,86.8774" />
         <stop
            id="stop2601"
            style="stop-color:#ffffff;stop-opacity:1"
            path="c -29.3318,0 -58.6636,0 -87.9954,0" />
         <stop
            id="stop2603"
            style="stop-color:#f6f97f;stop-opacity:1"
            path="c 0,-28.9591 0,-57.9183 -1.42109e-14,-86.8774" />
       </meshpatch>
     </meshrow>
   </meshgradient>
 </defs>
 <metadata
    id="metadata5">
   <rdf:RDF>
     <cc:Work
        rdf:about="">
       <dc:format>image/svg+xml</dc:format>
       <dc:type
          rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
       <dc:title></dc:title>
     </cc:Work>
   </rdf:RDF>
 </metadata>
 <g
    transform="translate(-52.891968,-81.209462)"
    id="layer1">
   <g
      id="g2606">
     <rect
        style="opacity:1;fill:url(#radialGradient2473);fill-opacity:1;fill-rule:nonzero;stroke:url(#meshgradient2579);stroke-width:1.53999996;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
        id="rect815"
        width="86.455399"
        height="85.33744"
        x="53.661968"
        y="81.979462"
        ry="5.7761183" />
   </g>
 </g>
</svg>```
````

---

<div class="post-metadata">

**Author:** ![Chi79](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/chi79/32/6077_2.png) [@Chi79](https://forum.juce.com/u/Chi79)\
**Post date:** [July 18, 2019, 3:50pm UTC](https://forum.juce.com/t/bug-svg-radial-gradients-not-drawn-correctly-with-potential-fix/28690/18 "2019-07-18T15:50:06Z")

</div>

…hmm after playing around a bit more it appears the fix works for some gradients but breaks others.