Unable to render attached svg file

I wanted to use the attached svg file pink-favorite.svg.txt (410 Bytes)
in one of my projects, but this particular file is not rendered. Though it appears perfect in Finder preview. I have a replacement of this file blue svg.svg.txt (591 Bytes)
which is rendered correctly. I am not good at svg format. Can anyone suggest whether there is problem with the svg file? I debugged Drawable::createFromSVG and could not find substantial errors, so I am guessing that it has something to do with the dimensions and co-ordinates of the svg.

I came across several posts mentioning that there has been issue with svg parsing starting JUCE 5.1.

Is the parsing issue for svg fixed?

1 Like

Are you using the latest version from the develop branch? I know there have been a number of commits for the SVG parser, I don’t think any have been merged to the main branch.

I am using JUCE 5.1.1. I will try using development branch.

I just pulled the latest changes from the develop branch & the pink-favorite is still drawing incorrectly for me:
23 PM
12 PM

1 Like

I’m also having general SVG issues. I just received a nice crisp SVG from our graphic designer. It shows beautifully in Finder & Chrome & Safari. However when drawing in JUCE it looks like some of the bounds/coordinates of different elements are incorrect.

I can’t post that particular SVG but maybe I can get a trimmed down version to share.

I tried using the code from develop branch but the svg was not rendered.

You could try digging into the SVG files - first run them through Sketch with the “SVGO Compressor” plugin, then load into your text editor and compare them. You might even have some luck playing around with things in Sketch. I find some SVG parsers don’t like Groups.

You could also open the blue one in Sketch (or another SVG editor e.g. BoxySVG) and change it to a pink heart…

1 Like

I tried loading our product’s SVG into Sketch and exporting wth & w/o the SVGO Compressor, both times the bounds of the different elements were very wacky! Looked like the coordinates/sizes of the elements got jumbled up. Great tool though for looking at the layers and poking around. I think I’m closer to understanding what’s wrong with our original SVG.

Our SVG has some embedded image (bitmap) elements. These seem to be the culprit. In JUCE these seem to be painted a bit to the right and down, just like if you were adding 10 or so to the x & y position.

1 Like

Thanks everybody for valuable suggestions. I will try to modify it using Sketch. It is possible that the svg files which I attached had an embedded image as mentioned in RustyPine’s post.

For any SVG editing I highly recommend Inkscape. It’s a bit clunky on macOS as it needs to run in the X11 environment - but it’s an incredible piece of software. Albeit being free and open-source, it can definitely rival some commercial competitors.

To clean-up an SVG with inkscape, open it and select File -> Clean-up Document and then re-save. There is also a “Path -> Trace Bitmap…” feature where you can easily convert any embedded bitmaps to paths.


I really like Inkscape but since updating to Sierra it no longer runs on my Mac :cry:

doesn’t scale properly with Windows HDPI either…

Hmm it works great on my Mac (10.12.4).

Thanks! Inkspace works on Sierra (10.12.6)

Inkspace is working for me. I edited the old file to fill it up with desired colour. However, I could not determine what went wrong with the new svg.

Inkscape now got a nice homebrew make scripts which makes it nice except it’s not in applications so you open it up as any other /etc/bin.

I do so some fixes on Inkscape however I really think juce should prioritize SVG fixes. @yairadix made some fixes on SR repo which IMHO is better especially when the “incompatible” SVG could be resulted from Illustrator many designers use.

1 Like