Need a fair amount of help with SVGs

[Wiznat]

Hello hello,
First, most of my questions aren’t too code related but more about working with SVGs them self. Im working on incorporating SVG images into my gui at the moment, and the first big issue Im having is that my SVG exported out of Illustrator is not loading correctly into JUCE. When I preview the SVG through the just the mac preview it looks fine, but when I load it into JUCE, gradients are missing, outlines are gone, text is messed up, etc… I assume this has to do with how my Illustrator file is setup and exported rather than an issue of JUCE. Could anyone explain is there something in particular I need to make sure my SVG is exporting correctly?

My second question is how efficient are SVGs? So I had most of my Gui set up with png versions before, and my cpu while running the plugin was never peaking past ~25%. When I loaded in my very broken SVG version of my background, turning a dial peaks my cpu usage at almost 80%. I assume something must be very wrong here, because I can’t imagine SVG drawing would cause that much of a difference, but hopefully someone can help me out.

[kamedin]

The SVG implementation in Juce is not complete -I don’t know of all missing parts, but gradients are one of them. Also it’s better to convert all text to paths before importing. As for efficiency, they’re realized as paths, so complex shapes increase the workload. Of course you shouldn’t convert them in paint() -they should be available somewhere as Drawables or Paths. I always optimize them before importing -there are some sites that do it for you.

[reFX]

Gradients work just fine.

[Wiznat]

I managed to get some of the gradients working properly by adjusting their groupings in Illustrator, but I haven’t quite figured out why it decides to draw them properly for some and not for others, guess just trial and error for now. And one of the big issues I figured out was that there was a png hiding around in my background layer, which did not play friendly with JUCE, so taking that out helped some as well.

And in regards to drawing them, I believe I’m doing it correctly.
I created a unique_ptr,
Assigned the ptr in the editor constructor with Drawable::createFromImageData(x_svg, x_svgSize),
addAndMakeVisibly(*drawable).
So definitely not doing anything directly in the paint function.
I think some of the bog down might be coming from causing to many repaints since all the components lay on top of the background SVG, but idk maybe that assumption is incorrect.

[kamedin]

At least all the alpha gradients I’ve tried have been read as solids.

@Wiznat

I think some of the bog down might be coming from causing to many repaints since all the components lay on top of the background SVG, but idk maybe that assumption is incorrect.

Every repaint of something not opaque above the background will cause it to repaint too. Try setBufferedToImage (true) on the background -this avoids calling paint() for indirect repaints.

[reFX]

@kamedin

At least all the alpha gradients I’ve tried have been read as solids.

Hasn’t this been fixed recently? Or maybe I’m thinking our own fork?

[kamedin]

You’re right, just checked and it works. It seems to have been added in April. Nice!

[Wiznat]

Bro thank you so much, just that one line brought down my cpu usage 30% lmao

[yairadix]

When having problems with JUCE’s support of SVG files, I recommend also trying svg-simplify, a tool that improves svg files compatibility which I made specifically for using svg files in JUCE projects.

[Wiznat]

Hey, I just got around to installing this, however I don’t understand is there an executable that I then bring the SVG into and it gives me a simplified version? Or does it work some other way. I see the unix executable in the .local/bin but opening it just gives me

[yairadix]

yes it would simplify the svg file you specify in-place (and hopefully I remembered to save the previous in a backup file). if there’s another way you’d like it to work you can file an issue and I think I’ll be responsive

[Wiznat]

Oh no worries Im sure it works fine lol, just more or less my lack of understanding lol. I guess thats more my question how do I use the program. The only executable I see after installing is the one in the local/bin but nothing seems to happen/ I cant do anything more after running it. My screenshot above is what I get from running the executable.

[yairadix]

yeah so just give it the path to your svg and it will “simplify” it

[Wiznat]

Ah okay got it, thanks for the quick replies !