# SVG renderer ignores the surrounding space **URL:** \ **Category:** General JUCE discussion\ **Created:** [September 4, 2026, 1:49pm UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429 "2026-09-04T13:49:02Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![losslessgo](https://avatars.discourse-cdn.com/v4/letter/l/46a35a/32.png) [@losslessgo](https://forum.juce.com/u/losslessgo)\ **Post date:** [September 4, 2026, 1:49pm UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429/1 "2026-09-04T13:49:02Z")
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? ---
**Author:** ![attila](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/attila/32/11206_2.png) [@attila](https://forum.juce.com/u/attila)\ **Post date:** [September 4, 2026, 2:35pm UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429/2 "2026-09-04T14:35:04Z")
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. ---
**Author:** ![losslessgo](https://avatars.discourse-cdn.com/v4/letter/l/46a35a/32.png) [@losslessgo](https://forum.juce.com/u/losslessgo)\ **Post date:** [September 4, 2026, 5:55pm UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429/3 "2026-09-04T17:55:44Z")
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. ---
**Author:** ![losslessgo](https://avatars.discourse-cdn.com/v4/letter/l/46a35a/32.png) [@losslessgo](https://forum.juce.com/u/losslessgo)\ **Post date:** [September 9, 2026, 2:39pm UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429/4 "2026-09-09T14:39:01Z")
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](https://forum.juce.com/uploads/short-url/m34fDrsmwJHj9Z4ks8aAwLx0j1o.zip) (11.4 KB) clang macos/linux and clangcl on windows - results like this: ![Screenshot 2026-09-09 at 16.24.51](https://us1.discourse-cdn.com/flex026/uploads/juce/original/3X/6/1/61d979552bb266981baa8fbaad54c96c3639665b.png) ---
**Author:** ![losslessgo](https://avatars.discourse-cdn.com/v4/letter/l/46a35a/32.png) [@losslessgo](https://forum.juce.com/u/losslessgo)\ **Post date:** [September 14, 2026, 11:58am UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429/5 "2026-09-14T11:58:02Z")
@attila Any updates on this? Thanks ---
**Author:** ![attila](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/attila/32/11206_2.png) [@attila](https://forum.juce.com/u/attila)\ **Post date:** [September 14, 2026, 3:50pm UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429/6 "2026-09-14T15:50:27Z")
It’s currently being investigated. ---
**Author:** ![attila](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/attila/32/11206_2.png) [@attila](https://forum.juce.com/u/attila)\ **Post date:** [September 16, 2026, 12:58pm UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429/7 "2026-09-16T12:58:10Z")
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 ```auto drawable->drawWithin (g, getLocalBounds().toFloat(), juce::RectanglePlacement::centred, 1.0f); ``` you should use ```auto 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. ---
**Author:** ![losslessgo](https://avatars.discourse-cdn.com/v4/letter/l/46a35a/32.png) [@losslessgo](https://forum.juce.com/u/losslessgo)\ **Post date:** [September 18, 2026, 8:51am UTC](https://forum.juce.com/t/svg-renderer-ignores-the-surrounding-space/69429/8 "2026-09-18T08:51:18Z")
Great! Thanks for the explanation and instructions.