Forum Discussion

WishAskedSooner's avatar
WishAskedSooner
Continued Contributor
8 months ago
Solved

SVG scaling limit

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 dy...
Need Help
  • xifeng_L's avatar
    xifeng_L
    8 months ago

    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~

xifeng_L's avatar
xifeng_L
Super User
8 months ago

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's avatar
    WishAskedSooner
    Continued Contributor
    8 months ago

    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.