SVG Rendering Error

One of our splash images isn’t rendered correctly after updating to JUCE 5.4.1. This is how it should look like:


We get this after upgrading to JUCE 5.4.1:


Is this a known issue?


I uploaded the original SVG file for your reference (zipped due to the forum requirements): (7.2 KB)

Since you know that it used to work, I’d suggest that you bisect to find what JUCE change modified the behaviour.

Btw are both screenshots the same image? One says 7.1.3 and the other says 7.1.4…

your SVG opened in Chrome on PC do not show the background either so maybe they fixed something that shouldn’t have worked.
The fade on the reflected text works fine though.

I’ll try to track it down. The version number text is not part of the SVG itself and the SVG file is definitely the same.

1 Like

Thanks, I think you’re right. There’s definitely something dodgy in the SVG. It is made with Inkscape. I’ll try to recreate it and see what goes…

I did some further experimentation. I don’t know why Chrome didn’t display the original SVG file properly. However, I reloaded and added the gradient again in InkScape and it magically worked in Chrome. JUCE doesn’t load the gradients properly, though, and I tracked it down to line 940 in the file SVGParser.cpp which previously was:

auto gradientTransform = parseTransform (fillXml->getStringAttribute ("gradientTransform"))
                           .followedBy (transform);

which was changed to:

    auto gradientTransform = parseTransform (fillXml->getStringAttribute ("gradientTransform"));

After reverting that change, the parsing works again.


1 Like

What version of JUCE are you using?

That followedBy call was removed already, fixing this issue:

I think @stian is saying that it needs the followedBy to work correctly.

1 Like

Yes, the “fix” seems to be the problem…

1 Like

Can you post the version of the SVG that shows the correct gradient in Chrome?

It’s your commit from 11:54AM - 15 Aug 18. It worked before that…

I meant the version of the SVG which loads correctly in Chrome after this:

Did it change the actual SVG contents? The one you posted originally does not display the gradient correctly in Chrome

Oh sorry, I misunderstood you. Here’s a version that shows fine in Chrome, but not in JUCE: (7.3 KB)

I’ve just tried loading that SVG in a JUCE app and it looks like this:

That’s correct, right? I’m loading it as follows:

auto xml = R"delim(

auto svg = parseXML (xml);
logo.reset (Drawable::createFromSVG (*svg));

and then in paint():

logo->drawWithin (g, getLocalBounds().toFloat(), RectanglePlacement::centred, 1.0f);

Not quite, there’s no gradient in the reflection and the background gradient is flipped. It looks better than when loading it in Projucer, though.

Loading the image with versions of JUCE before this commit results in this:

So it looks like that change improved things. How are you loading the SVG and displaying it? What do you mean by “loading it in Projucer”?

It’s loaded in the GUI editor inside Projucer and added as resource.

I can’t see a difference between the image loaded using the method I posted above and when using the Projucer’s GUI editor, they both look like this:

As you say, this isn’t quite the same as the image you posted in the OP but it’s certainly better than before the commit in August. I’m curious as to which version of JUCE you were using before when it rendered correctly? I can’t get it to look anything like the OP using versions before JUCE 5.4.0.

Strange, it looks different in Projucer for me. Here’s a screenshot of the About component:

Anyway, the issue has been solved for my part after adding back the transform.