SVG renderer ignores the surrounding space

General JUCE discussion
1

It seems that the new SVG renderer ignores the intentional padding around the drawing and stretches the drawing to the edges. For example, I have an icon that consists of a 100x100 transparent rectangle and a 60x60 drawing in the center, so there is padding around the drawing to the edges that is 20. The new renderer ignores the transparent rectangle and stretches the drawing to 100x100. So icons inside my buttons are now stretched from edge to edge, ugly.

What am I missing? How do I get the previous behavior? Is there an option for the new renderer?

2

What you’re describing sounds like the intentional behaviour of the DrawableComponent, which is meant to replicate the behaviour of the old Drawable implementation.

The new Drawable implementation however does no stretching by default, so if you don’t wrap your Drawable and just paint it using the draw function, the padding should be preserved.

Currently we’re not aware of a regression in this regard, but if you can share a concrete code example and SVG file that demonstrates otherwise, we will take a look.

3

I just paint Drawable using draw function, not using a DrawableComponent, and that’s why I don’t understand why the stretching is happening.
I’ll try to make a minimal example.

4

Example, JUCE 9.0.2

svgs are exported from Affinity Designer, they are the same in every way except that the background rectangle is 100% transparent in svg 000 and 99% transparent black in svg 001

svg-test.zip (11.4 KB)

clang macos/linux and clangcl on windows - results like this:

Screenshot 2026-09-09 at 16.24.51
Screenshot 2026-09-09 at 16.24.511208×662 30 KB

1 Like
5

@attila Any updates on this? Thanks

6

It’s currently being investigated.

7

Thank you for the repro project and the issue report.

A change was released on develop that adds a new BoundsToEnclose parameter to DrawableButton.

You can fix the button issue in your repro project by supplying BoundsToEnclose::contentBounds.

As for the other component instead of this

drawable->drawWithin (g,
                      getLocalBounds().toFloat(),
                      juce::RectanglePlacement::centred,
                      1.0f);

you should use

const RectanglePlacement placement { juce::RectanglePlacement::centred };

drawable->draw (g,
                1.0f,
                placement.getTransformToFit (drawable->getContentBounds(),
                                             getLocalBounds().toFloat()));

The drawWithin function will fit the drawable bounds implicitly, but with the second approach you can use drawable->getContentBounds() to specify that you want to fit the content bounds instead.

To explain a bit about the issue. In your example SVGs you use the hidden rectangle to add padding to the image. Since JUCE 9 invisible elements will likely not be included in the drawable bounds as lunasvg will omit these objects from its draw list. We don’t have a simple patch for this behaviour.

On the other hand, for layout purposes, you should use the SVG’s viewBox property, and prior this commit there was no easy way to do this.

2 Likes
8

Great! Thanks for the explanation and instructions.