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,..."/>
  </g>
</svg>

What chrome shows shows:
image

What the Projucer shows:
image

This is v5.3.2 of the projucer.

https://github.com/WeAreROLI/JUCE/commit/121b42d507c662ad6f85a84fee931ac74cabb777

1 Like

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()));
else
di->setTransform (transform.followedBy(di->getTransform()));

This appears to be working for my test case.

Best,
Ben

Here’s a reproduction of the new issue:

SVG:





How it should look:
image

What JUCE displays:
image

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

Can you check if this fixes the issue?

https://github.com/WeAreROLI/JUCE/commit/b8b77df0ed04fbb0147322cba172114cfdb2adfc

Almost there!

SVG:

<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="/>
    </g>
</svg>

Chrome:
image

Projucer:
image

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.
Ben

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!