Bug: images in SVGs are not positioned correctly

General JUCE discussion
1

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.

2

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

1 Like
3

Thanks so much…Much appreciated!

4

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

5

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

6

Can you check if this fixes the issue?

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

7

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

8

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?

9

Looks all good now. Thanks a lot!