SVG scaling limit

[WishAskedSooner]

Hi Experts!

There seems to be a size limit to how big an SVG will scale when loaded as a custom icon in a button.

I need to load an SVG that will serve as a partial background that will be dynamic (linked to bookmarks to hide/show) which is why I am not loading it in the Canvas background. However, as I stated above when I use a button (no action) and size the button to anything over ~550 pixels wide, the SVG stops scaling even though SVGs are technically infinitely scalable. I have played around with padding, to no avail. Something that is also annoying is there seems to be no way to position the SVG at the top of the button even though I have Text turned off.

I tried loading the SVG into an Image visual which does scale all the way up, but not having any experience with Image visuals, it seems to behave like it is interactable which I don't actually want. This SVG needs to serve as a background only.

So I am stuck on how to go about doing this in PBI.

Any hints? TIA!

[danextian]

Hi @WishAskedSooner 

I find that SVG scales if you use viewbox.

Please see the attached pbix.

[alish_b]

Hey @WishAskedSooner ,

Did you try using the Fill option instead of the Icon button in the Button under Style>Fill? It scales better than the Icon option. But if there was any other requirement that prevented that option, do let us know.

Hope it helps!

[xifeng_L · Accepted solution]

Hi @WishAskedSooner 

The use of the newly updated Image Visual can meet your needs. As for what you said about appearing interactive, I did not mention it here.

You can create the measure and used in Image Visual, such as :

TechBG_BlueCyan = 
VAR ShowBackground = 1  // SELECTEDVALUE( Table[IsShow], 1 )
VAR SvgVisible =
    "<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'>" &
    "<defs>" &
        "<linearGradient id='techGrad1' x1='0%' y1='0%' x2='100%' y2='100%'>" &
            "<stop offset='0%' stop-color='#0f172a' />" &
            "<stop offset='50%' stop-color='#0b3b5e' />" &
            "<stop offset='100%' stop-color='#06b6d4' />" &
        "</linearGradient>" &
    "</defs>" &
    "<rect width='100%' height='100%' fill='url(#techGrad1)' />" &
    "</svg>"

VAR SvgHidden =
    "<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900'>" &
    "<rect width='100%' height='100%' fill='transparent' />" &
    "</svg>"

RETURN
    "data&colon;image/svg+xml;utf8," &
    IF( ShowBackground = 1, SvgVisible, SvgHidden )

And , You can use the measure to control the hide/show, don't need bookmark.

Did I answer your question? If yes, pls mark my post as a solution and appreciate your Kudos !

Thank you~

[WishAskedSooner]

All great answers! Thanks!

I tested the Image visual, and it is not interactive if Action is Off. I didn't realize the Image visual had been re-designed. I recall playing with it a while ago without the results I was looking for which is why I defaulted to a button. I really should stay more up to date on PBI developments.

@xifeng_L, I really like the suggestion of loading the SVG into a measure versus Bookmarks which I truly loathe.

Honestly, the fact that the Image visual has been re-designed is truly transformational. Good design is hard to achieve without SVGs. And a visual that can properly host them is a gamechanger.