SVG Rendering Issues

#1

I’m starting work on a simple linux audio (and possibly video) looper. Having done a quick mockup in inkscape, I figured I’d just save the various gui elements as SVGs and use them directly in the app. Only, that doesn’t look very good…

Here’s the mockup:

…and here’s how JUCE renders it (the sizes and positioning are a bit out, but that’s obviously my fault):

Am I doing something wrong? Has anybody else used inkscape SVGs in JUCE?

I can cheat the missing arrows by including explicit triangles in the SVG files, and the record buttons and sliders don’t have to be SVG, but I don’t know what I can do about the horrible antialiasing in the others. I’d rather not resort to using bitmap images if I can avoid it.

  • Niall.
#2

I don’t understand why it’s doing that nasty aliasing… It shouldn’t be capable of that. Can you send me the svg file to have a go?

#3

Okay, I’ve stuck all the SVGs in a zip file here.

  • Niall.
#4

had a quick look at this - the aliasing is because your images have lots of transparent overlapping layers, and as juce renders these over the top of each other, the anti-aliased pixels at the edges build up and get more opaque.

Unfortunately the fix for this is to change the whole rendering model (which is actually something I had planned anyway), but it’s a major redesign. Alternatively, you could clean up your svg so that there’s no overlaps, and that should render ok.

#5

That sounds like a bit more work than I was intending (the whole point of using Inkscape was to make it trivial to turn the mockup into a functioning gui). I think I’ll leave it for now, maybe use bitmaps for the time being and just fix the size of the main window.

  • Niall.
#6

Hi Niall,

I made an Implementation of the game “SET” as an exercise. Thereby i
used Inkscape to vectorise the bitmaps of the cards, to inluded the
zipped svg-Files with the binarybuilder.
You can see the result below (it’s even better on my mac).

I noticed that juce works best with svg-Files with not outlines and no
trancparency. And the “bitmap vectorize” function of Inkscape seems
to create svgs which are great for juce.

You can also automatically simplify the created paths with Inkscape.
To save the end-result for juce, its best to use "save plain svg"
option (not “Inkscape svg”).

Jan

set.png554x688

#7

Aha! :smiley: Getting rid of the outlines makes things look a lot nicer. In case anyone else has the same problem, here’s what I did to convert my images to a more Juce-friendly format:

1.) Make a copy of the shape (Ctrl-D for duplicate), and disable the outline. This gives you the inside of the shape.
2.) Select the original shape, and select the menu item Path->Stroke to Path (Ctrl-Alt-C). This gives you the outline of the shape, as a separate path.
3.) Resize the inside of the shape to fit properly inside the outline.

I think I’m going to experiment with keeping the transparency, since I’d like to let my users load their own background image behind the controls.

Thanks!

  • Niall.
#8