Site navigation

Need a fair amount of help with SVGs

Audio Plugins
#1

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.

#2

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.

1 Like
#3

Gradients work just fine.

#4

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.

#5

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

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.

1 Like
#6

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

#7

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

1 Like
#8

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

1 Like
#9

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.

7 Likes