I have an SVG that's completely black on Mac but fine in Windows and Safari

General JUCE discussion
1

I don’t know what to do about it. Can anyone help? Here it is, it’s just a simple ring with a white radial blob at the top. It looks fine in Chrome and safari, but not in Projucer or my program, even if I re-add it. I don’t understand, why there would be a difference for Mac only.
Thanks,
Dave H.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 222 222" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g transform="matrix(1,0,0,1,-145.08,-119.48)">
        <g transform="matrix(1.28,0,0,1.28,0,0)">
            <g transform="matrix(0.973666,0,0,0.973666,5.26685,4.74017)">
                <path d="M200,91C249.12,91 289,130.88 289,180C289,229.12 249.12,269 200,269C150.88,269 111,229.12 111,180C111,130.88 150.88,91 200,91ZM200,103C242.497,103 277,137.503 277,180C277,222.497 242.497,257 200,257C157.503,257 123,222.497 123,180C123,137.503 157.503,103 200,103Z" style="fill:url(#_Radial1);"/>
            </g>
        </g>
    </g>
    <defs>
        <radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(265.588,0,0,265.588,200,97.0339)"><stop offset="0" style="stop-color:white;stop-opacity:1"/><stop offset="0.04" style="stop-color:rgb(177,180,185);stop-opacity:1"/><stop offset="0.08" style="stop-color:rgb(99,104,115);stop-opacity:1"/><stop offset="0.2" style="stop-color:rgb(64,70,83);stop-opacity:1"/><stop offset="0.36" style="stop-color:rgb(38,44,59);stop-opacity:1"/><stop offset="0.53" style="stop-color:rgb(12,19,36);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(0,8,26);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,139,0);stop-opacity:0.894118"/><stop offset="1" style="stop-color:rgb(9,9,9);stop-opacity:1"/></radialGradient>
    </defs>
</svg>
2

Is radialGradient supported by JUCE? As the docs point out, the SVG parser is not a full implementation of the SVG spec. I’d try removing that and seeing what happens.

3

SVG has NO spec.
This object renders fine on Windows, why is the Mac version inferior?

4

Guidelines or specs, call them what you like:
https://www.w3.org/TR/SVG11/
Your original message is a little confusing, so it works when you compile you application on Windows, but not on OSX?

5

Yes, it’s also fine looking at the svg in Safari, on the Mac.

It’s just not rendering properly in Projucer on the Mac.

Windows is ALL good.

6

I never use the Projucer to manage any of my SVGs, I’m not even sure what it does in terms of SVGs, but if I was hitting an issue like this I would create a simple app in the Projucer, place a drawable on its main component and call Drawable::createFromSVG(). If it fails to load the SVG file I’d step through the debugger and see what’s happening. Alternatively, step through the Projucer and see why it fails to do what it’s supposed to do.

7

You’re asking me to debug Juce? You’re lucky I have the time to work for Roli. :smile:

8

Well I ran out of patience and replaced the thing with a bitmap from the original artwork, it renders it perfectly and works on all systems. So now my plug-in is 99% bitmaps, and I’ll keep everything bitmaps in the future unless someone from Roli is actively working on the renderer and fixing these things - then I’ll go back to it and try again, I promise. :slight_smile:

9

It’s something wrong with our parsing of the gradient transform… I got it down to this simpler test-case which also fails, but haven’t time to look into it any more today, will have to revisit it at some point…

<svg width="100%" height="100%" viewBox="0 0 222 222" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="0" y="0" width="3000" height="3000" style="fill:url(#XXXX);"/>
    <defs>
        <radialGradient id="XXXX" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(200,0,0,200,200,100)"><stop offset="0" style="stop-color:white;stop-opacity:1"/>
        <stop offset="1" style="stop-color:rgb(100,8,26);stop-opacity:1"/></radialGradient>
    </defs>
</svg>```
2 Likes
10

Cool. Thanks man.

11

I think that Roli should think about creating a method of notifying users of progress on bugs. Especially for people who are paying for licenses. I appreciate you looking into this now Jules, but I made a post about these SVG problems a few weeks ago and got no replies. It would just be cool if there was a notification to basically say “we’re looking into it.” and then later another notification to say “issue resolved.” Because I just assumed that you guys weren’t interested in fixing the bug. I started researching ways to build my own SVG library. Thankfully I didn’t invest too much time in that side-project.

13


you could create an issue there, post it here on the forum to discuss it more publicly (and get maybe some helpful feedback), and subscribe to the progress of the issue. You will then be notified, when it is solved.

2 Likes
14

Thanks mate. I’ll do that.