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 🙂

smpa01's avatar
smpa01
Community Champion
4 years ago

When I started out with animation my perception was that whatever works in the browser should work in the background .svg too. But unfortunately, that is not the case.

 

I am saying keyframe will work but keyframe animation on hover will not work. Why?  I don't know. My best guess is, .kenburns-top:hover pseudo class in CSS does not select elements when the mouse cursor is currently over them in PBI the same way it otherwise would in a browser.  I wish there was a full-fledged browser of some sort or an observable-style notebook there in the canvas, so that I could connect my data and do as I please the same way I can in the browser. But at the moment, it is just a fantasy and the custom viz is the only route to fulfilling all your crazy data-viz dreams. It works on-load cause there is no :hover pseudo-class there.

 

But if you develop something that is not on-hover it will work. Please take a look at these non-data driven1 non-data driven2  and data-driven animations.

 

Also, like you, I started with illustrator back then and now thankfully I am in a position to completely replace illustrator's capacity with javascript and d3 for my data task.  But while we are still on this and till you continue to use this, please stick to the following setting for exporting SVG. Tick responsive if you need one. Else, if you rely on illustrator's in-built capacity to generate a svg, it does not spit out the best one. 

 

 

 

 

Good luck !!!

SandraCalc's avatar
SandraCalc
Frequent Visitor
4 years ago

Than you!! Those reports are fabulous!! 
About illustrator, in fact i'm also new to these concepts, haven´t heard about svg untill few weeks ago. I'll take in consideration what you said.
In fact i'm new to this whole world.