Bug: images in SVGs are not positioned correctly


SVG file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
  <g fill="none" fill-rule="evenodd">
    <rect width="200" height="200" fill="#13FC3C"/>
    <image width="57" height="44" x="71" y="78" xlink:href="data:image/png;base64,..."/>

What chrome shows shows:

What the Projucer shows:

This is v5.3.2 of the projucer.



Thanks so much…Much appreciated!


Update: my proposed fix does not solve the problem!

thanks a ton - also for the swiftness!

Unfortunately this breaks something else: Now transforms on images are no longer working. This is because DrawableImage::setBoundingBox() two lines below also computes a transform and sets it. Perhaps you do it the other way around and then combine the two transforms:

di->setBoundingBox ({ (float) xml->getDoubleAttribute (“x”, 0.0), (float) xml->getDoubleAttribute (“y”, 0.0),
(float) xml->getDoubleAttribute (“width”, 0.0), (float) xml->getDoubleAttribute (“height”, 0.0) });

if (additionalTransform != nullptr)
di->setTransform (transform.followedBy (*additionalTransform).followedBy(di->getTransform()));
di->setTransform (transform.followedBy(di->getTransform()));

This appears to be working for my test case.



Here’s a reproduction of the new issue:


How it should look:

What JUCE displays:

This is with the develop branch containing your changes (but NOT the changes I suggested).


Can you check if this fixes the issue?


Almost there!


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68" height="233" viewBox="0 0 68 233">   
    <g id="frame-000">
	    <image y="2" x="5"  width="3"  height="209" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAADRCAIAAACGvJ/MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACJJREFUeNpi/M8ABUwMo6xR1ihrlDXKGmWNskZZqCyAAAMA1B0CocxdYnsAAAAASUVORK5CYII="/>
	    <!-- workaround for JUCE bug, actually y="2" x="8" -->
	    <image y="2" x="8"  width="52" height="209" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAADRCAIAAACGvJ/MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACRJREFUeNpiNPvPAAFMDAyjrFHWKGuUNcoaZY2yRlkoLIAAAwCL4gLXH3n9gwAAAABJRU5ErkJggg=="/>
	    <image y="2" x="60" width="3"  height="209" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAADRCAIAAACGvJ/MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACVJREFUeNpiZBD6zwAGTAwwMMoaZY2yRlmjrFHWKGuUBQEAAQYAZP4Cs/DoF9UAAAAASUVORK5CYII="/>



It’s three tree pixel wide images. The middle one is supposed to be stretched to fill the space between the outer ones.

“fun” bonus fact: Sketch does not correctly export the preserveAspectRatio attribute. As a result the exported svg does not display the same in chrome as in sketch.

Thanks for your persistence.


OK, this commit fixes the image that you provided and seems to be doing the right thing with transforms etc. Do you have any other images that aren’t working correctly?


Looks all good now. Thanks a lot!