SVG scale/viewbox problems


It looks like some SVGs loaded by JUCE are positioned outside of their viewbox and at the wrong scales.

This can be seen in the JUCE Demo - some of the icons appear much larger than the others.

In the Introjucer it looks like this (using document-save.svg from in JUCE Demo):

This seems to be the culprit:

newState.transform = RectanglePlacement (placementFlags)
                        .getTransformToFit (Rectangle<float> (viewboxXY.x, viewboxXY.y, vwh.x, vwh.y),
                                            Rectangle<float> (newState.width, newState.height))
                        .followedBy (newState.transform);

Simply removing the above seems to fix it.

It makes the same image look like this in Introjucer:

And it also makes all the different SVG icons in the JUCE Demo look consistent in size.

Cheers, Yair

btw - +1 to request for clipPath support. apparently our designer uses this and currently I'm working around it by rastering to png any svg that looks wrong, but it would be nicer if I didn't have to..


Ok.. but by removing that whole chunk of code you'd break any files that actually use the preserveAspectRatio attribute. I think the mistake was just that it was applying these constraints to files that didn't specify the preserveAspectRatio flag, so what I've done now is to check for the attribute's existance before using it.

Re: clipping to path, I vaguely remember that being tricky to implement, but if you want to have a go, let me know how you get on!


Cool I checked your fix and it works well for the SVGs I'm using

wrt clip path, I saw that you wrote that the graphics classes support that now (, so probably not too tricky, but I won't get to have a go at it anytime soon.