# SVG Rendering Issues **URL:** \ **Category:** General JUCE discussion\ **Created:** [July 10, 2007, 4:23pm UTC](https://forum.juce.com/t/svg-rendering-issues/1889 "2007-07-10T16:23:12Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![NiallM](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/niallm/32/293_2.png) [@NiallM](https://forum.juce.com/u/NiallM)\ **Post date:** [July 10, 2007, 4:23pm UTC](https://forum.juce.com/t/svg-rendering-issues/1889/1 "2007-07-10T16:23:12Z")
I’m starting work on a simple linux audio (and possibly video) looper. Having done a quick mockup in [inkscape](http://inkscape.org/), 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: ![](http://www.niallmoody.com/images/FourTrackMockup.png) …and here’s how JUCE renders it (the sizes and positioning are a bit out, but that’s obviously my fault): ![](http://www.niallmoody.com/images/FourTrackScreenshot.png) 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. ---
**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\ **Post date:** [July 10, 2007, 4:37pm UTC](https://forum.juce.com/t/svg-rendering-issues/1889/2 "2007-07-10T16:37:22Z")
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? ---
**Author:** ![NiallM](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/niallm/32/293_2.png) [@NiallM](https://forum.juce.com/u/NiallM)\ **Post date:** [July 10, 2007, 6:58pm UTC](https://forum.juce.com/t/svg-rendering-issues/1889/3 "2007-07-10T18:58:47Z")
Okay, I’ve stuck all the SVGs in a zip file [here](http://www.niallmoody.com/images/FourTrackSVG.zip). - Niall. ---
**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\ **Post date:** [July 13, 2007, 7:55pm UTC](https://forum.juce.com/t/svg-rendering-issues/1889/4 "2007-07-13T19:55:27Z")
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. ---
**Author:** ![NiallM](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/niallm/32/293_2.png) [@NiallM](https://forum.juce.com/u/NiallM)\ **Post date:** [July 16, 2007, 6:59pm UTC](https://forum.juce.com/t/svg-rendering-issues/1889/5 "2007-07-16T18:59:21Z")
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. ---
**Author:** ![noloops](https://avatars.discourse-cdn.com/v4/letter/n/ee7513/32.png) [@noloops](https://forum.juce.com/u/noloops)\ **Post date:** [July 17, 2007, 1:06pm UTC](https://forum.juce.com/t/svg-rendering-issues/1889/6 "2007-07-17T13:06:23Z")
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 ![](http://www.noloops.ch/tmp/set.png) ---
**Author:** ![NiallM](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/niallm/32/293_2.png) [@NiallM](https://forum.juce.com/u/NiallM)\ **Post date:** [July 17, 2007, 4:43pm UTC](https://forum.juce.com/t/svg-rendering-issues/1889/7 "2007-07-17T16:43:13Z")
Aha! 😃 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. ---
**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://forum.juce.com/u/jules)\ **Post date:** [May 12, 2017, 10:27am UTC](https://forum.juce.com/t/svg-rendering-issues/1889/8 "2017-05-12T10:27:09Z")