Forum Discussion

smpa01's avatar
smpa01
Community Champion
6 years ago
Solved

Using Animated SVG as page background

Hello experts,   I am trying to use an animated SVG as my page background. I have started newly with svg animation.   I noticed that for some of the animation returns an error in power bi as foll...
Need Help
  • dm-p's avatar
    dm-p
    6 years ago

    Hi smpa01,

    The issue is the SVG code itself. If you load the image into a web browser such as Chrome, you'll see the following:

     

    It's a bit more forgiving in other editors, but Power BI Desktop has the same issue.

    You need to remove the orphaned svg attribute in column 24. This can then be added as a background in Desktop, e.g.:

    Looks like the placement is a bit off, but definitely possible.

    Here's my tweaked version of your SVG:

     

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="l.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="210mm"
   height="297mm"
   viewBox="0 0 210 297" enable-background="new 0 0 1B8 100" xml:space="preserve"> 
<circle
       style="fill:#ffffff;fill-opacity:1;stroke:#2a8071;stroke-width:2.64583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:5.29166668, 5.29166667999999962;stroke-dashoffset:0;stroke-opacity:1"
       id="path819"
       cx="92"
       cy="106"
       r="61.232143" >
       <animateTransform    id="path819"
                   			attributeName="transform"
                     		attributeType="XML"
                     		type="rotate"
                     		from ="0 92 106"
                     		to = "360 92 106"
                     		dur ="10s"
                     		repeatCount = "indefinite"/>
</circle>

    
</svg>

     

    Thanks for such a cool question! I never even thought that these would work, so I've learned a bunch too 🙂

    Cheers,

    Daniel

    If my post solves your challenge, then please consider accepting as a solution to help other forum members find the answer more quickly 🙂

aaron797's avatar
aaron797
Advocate I
6 years ago

I am not sure if this is the case, however i had issues with my svg icons not showing up in power bi, until i replaced the "#" from the colour codes to "%23" due to how the encoding works. e.g  #ffffff should be %23ffffff.

 

dm-p's avatar
dm-p
Super User
6 years ago

Hi smpa01,

The issue is the SVG code itself. If you load the image into a web browser such as Chrome, you'll see the following:

 

It's a bit more forgiving in other editors, but Power BI Desktop has the same issue.

You need to remove the orphaned svg attribute in column 24. This can then be added as a background in Desktop, e.g.:

Looks like the placement is a bit off, but definitely possible.

Here's my tweaked version of your SVG:

 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="l.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="210mm"
   height="297mm"
   viewBox="0 0 210 297" enable-background="new 0 0 1B8 100" xml:space="preserve"> 
<circle
       style="fill:#ffffff;fill-opacity:1;stroke:#2a8071;stroke-width:2.64583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:5.29166668, 5.29166667999999962;stroke-dashoffset:0;stroke-opacity:1"
       id="path819"
       cx="92"
       cy="106"
       r="61.232143" >
       <animateTransform    id="path819"
                   			attributeName="transform"
                     		attributeType="XML"
                     		type="rotate"
                     		from ="0 92 106"
                     		to = "360 92 106"
                     		dur ="10s"
                     		repeatCount = "indefinite"/>
</circle>

    
</svg>

 

Thanks for such a cool question! I never even thought that these would work, so I've learned a bunch too 🙂

Cheers,

Daniel

If my post solves your challenge, then please consider accepting as a solution to help other forum members find the answer more quickly 🙂

  • smpa01's avatar
    smpa01
    Community Champion
    6 years ago

    OMG !!! dm-p you are at the top of the list of my favourite person of 2020. Thank you mate !!! 

    You made it work ......I spent so much time and it was rendering perfectly on Mozilla firefox but power BI was throwing an error.

     

    BTW for the positioning you need to change the "image Fit" to Fit. Please take a look below

     

    Needless to say it opens a lot many oppotunities now.

     

     

     

     

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="l.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="210mm"
   height="297mm"
   viewBox="0 0 210 297" enable-background="new 0 0 1B8 100" xml:space="preserve"> 
<circle
       style="fill:#ffffff;fill-opacity:1;stroke:#2a8071;stroke-width:2.64583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:5.29166668, 5.29166667999999962;stroke-dashoffset:0;stroke-opacity:1"
       id="path819"
       cx="92"
       cy="106"
       r="61.232143" >
       <animateTransform    id="path819"
                   			attributeName="transform"
                     		attributeType="XML"
                     		type="rotate"
                     		from ="0 92 106"
                     		to = "360 92 106"
                     		dur ="10s"
                     		repeatCount = "indefinite"/>
</circle>

    <circle
       r="44.601192"
       cy="106.5"
       cx="92.98214"
       id="circle821"
       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:8;stroke-dashoffset:0;stroke-opacity:1">
       
  <animateTransform    id="circle821"
                   			attributeName="transform"
                     		attributeType="XML"
                     		type="rotate"
                     		from ="0 92 106"
                     		to = "-360 92 106
                            "
                     		dur ="10s"
                     		repeatCount = "indefinite"/>
</circle>
</svg>

     

     

     

    I will try to post more here on this thread as I create more

    aaron797thanks for your two cents...will keep that in the mix from now on.