Using Animated SVG as page background

[smpa01]

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 following

For example, the following xsa.svg returns an error in Power BI

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="l.1" svg 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>

However, the following svg gets exported and renders the animation at the page background

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" id="svg1" version="1.1" viewBox="49.595489 30.040314 84.135223 84.305336" height="84.305336mm" width="84.135223mm">
    	
    	
    	<defs>
    		<style>
    			.logo{
    				stroke-dasharray: 800;
    				stroke-dashoffset: 0;
    				animation: dash 100s linear forwards;			
    			}
    			
    			@keyframes dash {
    				from {
    					stroke-dashoffset: 800;
    				}
    				to {
    					stroke-dashoffset: 0;
    				}
    			}
    		</style>
    	</defs>
    	
      <path class="logo"
         id="logo"
         d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
    		
         style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" />
    
    </svg>

if someone can please explain why it happens would be great for me.

Thanks

[SandraCalc]

Hello, I am trying to do something similar, but i want the animation to start on mouseover, i just posted that question. Have you tried any hover solution?

Thanks

[smpa01]

@SandraCalc  if you want a mouseevent you need to develop a fully fledged custom viz. I am currently doing that, will publish my work soon. 

Coming back to the Q, the page background only accepts a .svg file (not even .html) and even if you write an inline javascript to track and trigger mouseevent, it would not work. I have tried and tested. Simply put, the javascript in background .svg does not work probably becuase it does not have javascript engine.

There is no way to hookup your mousevent to background .svg. 

If you are not inclined to develop custom viz, you need to use Power BI button which probably has on-hover trigger but you will be limited in capacity (e.g. trigger a gif on hover). There is no way in current capacity you can go nuts in Power bi in the same way you could in developing a web page. The only solution is custom viz.

Also, your background .svg has no way to talk to your data. So there is absolutely no data-driven-animation possible anyway (transition/keyframe/moseevent - nothing at all).

I will wait till @dm-p weighs on this topic.

[SandraCalc]

@smpa01 

Hi, thank you for the reply. I'm not sure i understand what you said (new to pbi, almost 0 in css javascript, not english native). You said it's not possival to have animation effects in backgroud image in pbi? But it's possible with keyframe.

___Note: I have tried to post a message explaining my problem but was marked as span (don't know why, it's my first post).___
I have already made an svg file (image made in adobe illustratos and exported to svg). It's only a background image for home page, then it will have link placed over the icons wiht button action to redirect to visuals pages. I have already made that home page with visual efects (changed svg code, in top with class name, and at bottom with some code). Got this code from animista site.
It works both opening the svg file in browser and in power bi, for the experience i made some zoom. but all the effects i tried, boucing fading etc they work. But they only work whem opening the page, ie on loading.

This is my code (the middle stuff is an icon i'm making experiences in adobe also, didn't copy the whole backgroun image)

<?xml version="1.0" encoding="UTF-8"?><svg
class="kenburns-top"
 id="Camada_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 141.73 148.62"><defs><style>.cls-1{fill:#e8eaec;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9,.cls-10,.cls-11,.cls-12,.cls-13,.cls-14,.cls-15,.cls-16,.cls-17,.cls-18,.cls-19,.cls-20,.cls-21,.cls-22,.cls-23,.cls-24,.cls-25,.cls-26,.cls-27,.cls-28,.cls-29,.cls-30,.cls-31,.cls-32,.cls-33,.cls-34,.cls-35,.cls-36,.cls-37,.cls-38,.cls-39,.cls-40,.cls-41,.cls-42,.cls-43,.cls-44,.cls-45,.cls-46,.cls-47,.cls-48,.cls-49,.cls-50,.cls-51,.cls-52,.cls-53,.cls-54,.cls-55,.cls-56,.cls-57,.cls-58,.cls-59,.cls-60,.cls-61,.cls-62,.cls-63,.cls-64,.cls-65,.cls-66,.cls-112{fill:#f6f7f8;}.cls-112,.cls-114,.cls-124{opacity:.03;}.cls-113{fill:#98a2ac;}.cls-113,.cls-130,.cls-163{opacity:.35;}.cls-209{fill:url(#Gradiente_sem_nome_2);}.cls-114{fill:#f5f6f7;}.cls-115{fill:#364a5d;}.cls-116{fill:#596979;}.cls-117{fill:#d9dde0;}.cls-118{fill:#8c97a2;}.cls-119{fill:#384b5f;}.cls-120{fill:#d4d8dc;}.cls-121{fill:#e6e8eb;}.cls-122{fill:#a1aab3;}.cls-123{fill:#72808d;}.cls-124{fill:#f7f8f9;}.cls-125{fill:#a9b1ba;}.cls-126{fill:#667584;}.cls-127{fill:#5f6f7e;}.cls-128{fill:#aeb6be;}.cls-128,.cls-193,.cls-202{opacity:.28;}.cls-129{fill:#5e6e7d;}.cls-129,.cls-148,.cls-186{opacity:.55;}.cls-130{fill:#97a1ab;}.cls-131{fill:#f9fafa;}.cls-132{fill:#b6bdc4;}.cls-132,.cls-187,.cls-203{opacity:.25;}.cls-133{fill:#7a8794;}.cls-134{fill:#768391;}.cls-134,.cls-136,.cls-160{opacity:.47;}.cls-135{fill:#34485b;}.cls-136{fill:#758290;}.cls-137{fill:#f4f5f6;}.cls-137,.cls-172,.cls-185{opacity:.04;}.cls-138{fill:#b7bec5;}.cls-139{fill:#eef0f1;}.cls-140{fill:#8d98a3;}.cls-141{fill:#e4e7e9;}.cls-141,.cls-155{opacity:.09;}.cls-142{fill:#838f9b;}.cls-143{fill:#7f8b98;}.cls-144{fill:#ced3d8;}.cls-145{fill:#6e7c8a;}.cls-146{fill:#677685;}.cls-147{fill:#3c4f62;}.cls-148{fill:#5c6c7c;}.cls-149{fill:#32465a;}.cls-150{fill:#73818e;}.cls-151{fill:#cdd2d7;}.cls-152{fill:#47596b;}.cls-153{fill:#5a6a7a;}.cls-154{fill:#798693;}.cls-155{fill:#e5e8ea;}.cls-156{fill:#8f9aa5;}.cls-157{fill:#9fa8b2;}.cls-158{fill:#bbc2c8;}.cls-159{fill:#e3e6e8;}.cls-160{fill:#74818f;}.cls-161{fill:#506172;}.cls-161,.cls-192,.cls-200{opacity:.59;}.cls-162{fill:#eceef0;}.cls-163{fill:#99a3ad;}.cls-164{fill:#f1f2f4;}.cls-165{fill:#687785;}.cls-166{fill:#aab2bb;}.cls-167{fill:#46586a;}.cls-168{fill:#ebedef;}.cls-169{fill:#b3bac2;}.cls-170{fill:#dcdfe3;}.cls-171{fill:#3a4d60;}.cls-172{fill:#f2f3f5;}.cls-173{fill:#4c5d6f;}.cls-174{fill:#415366;}.cls-175{fill:#919ca6;}.cls-176{fill:#c6ccd1;}.cls-177{fill:#dde0e4;}.cls-178{fill:#4a5c6d;}.cls-179{fill:#88949f;}.cls-180{fill:#485a6c;}.cls-181{fill:#a5aeb6;}.cls-182{fill:#fbfbfc;}.cls-183{fill:#bfc5cb;}.cls-184{fill:#a2abb4;}.cls-185{fill:#f3f4f5;}.cls-186{fill:#5d6d7c;}.cls-187{fill:#b4bbc3;}.cls-188{fill:#bac1c7;}.cls-189{fill:#b8bfc6;}.cls-190{fill:#f0f1f3;}.cls-191{fill:#929da7;}.cls-192{fill:#526374;}.cls-193{fill:#acb4bc;}.cls-194{fill:#7d8a96;}.cls-195{fill:#c4cacf;}.cls-196{fill:#3f5264;}.cls-197{fill:#566677;}.cls-198{fill:#9ba5ae;}.cls-199{fill:#788592;}.cls-200{fill:#516273;}.cls-201{fill:#6b7988;}.cls-202{fill:#adb5bd;}.cls-203{fill:#b5bcc3;}.cls-204{fill:#86929d;}</style>
 <linearGradient id="Gradiente_sem_nome_2" x1="4376.57" y1="1952.74" x2="4499.22" y2="1952.74" gradientTransform="translate(-1884.31 -4376.57) rotate(90) scale(1 -1)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".28" stop-color="#fafafb"/><stop offset=".6" stop-color="#edeef2"/><stop offset=".93" stop-color="#d7dae2"/><stop offset="1" stop-color="#d1d5de"/></linearGradient></defs><g id="Icons"><g><g id="Icon_Base"><g id="Icon"><g id="Sombra"><circle class="cls-204" cx="70.87" cy="75.48" r="55"/><circle class="cls-16" cx="70.86" cy="75.47" r="54.86"/><circle class="cls-5" cx="70.86" cy="75.45" r="54.75"/><circle class="cls-142" cx="70.87" cy="75.42" r="54.61"/><circle class="cls-91" cx="70.86" cy="75.41" r="54.47"/><circle class="cls-76" cx="70.86" cy="75.39" r="54.34"/><circle class="cls-8" cx="70.86" cy="75.37" r="54.22"/><circle class="cls-143" cx="70.86" cy="75.35" r="54.08"/><circle class="cls-22" cx="70.86" cy="74.26" r="46.49"/><circle class="cls-7" cx="70.87" cy="74.22" r="46.36"/><circle class="cls-6" cx="70.87" cy="74.2" r="46.24"/><circle class="cls-79" cx="70.86" cy="74.2" r="46.1"/><circle class="cls-174" cx="70.86" cy="74.18" r="45.97"/><circle class="cls-49" cx="70.87" cy="74.16" r="45.85"/><circle class="cls-196" cx="70.87" cy="74.13" r="45.71"/><circle class="cls-37" cx="70.86" cy="74.13" r="45.58"/><circle class="cls-43" cx="70.86" cy="74.11" r="45.44"/><circle class="cls-147" cx="70.86" cy="74.08" r="45.32"/><circle class="cls-44" cx="70.85" cy="74.05" r="45.19"/><circle class="cls-171" cx="70.86" cy="74.05" r="45.05"/><circle class="cls-23" cx="70.86" cy="74.03" r="44.91"/><circle class="cls-119" cx="70.85" cy="73.99" r="44.8"/><circle class="cls-101" cx="70.85" cy="73.97" r="44.66"/><circle class="cls-115" cx="70.86" cy="73.97" r="44.53"/><circle class="cls-67" cx="70.86" cy="73.95" r="44.41"/><circle class="cls-135" cx="70.86" cy="73.92" r="44.27"/><circle class="cls-111" cx="70.87" cy="73.91" r="44.14"/><circle class="cls-149" cx="70.86" cy="73.89" r="44"/><circle class="cls-26" cx="70.86" cy="73.87" r="43.88"/></g><circle id="Roda" class="cls-209" cx="68.43" cy="61.32" r="61.31"/></g></g><g class="button" id="Icon_Ajuda"><g><g><path class="cls-208" d="M70.57,54.39v9.18c0,1.18-.96,2.14-2.14,2.14h0c-1.18,0-2.14-.96-2.14-2.14v-9.18c-2.18-.41-4.26-1.46-5.94-3.14-4.46-4.46-4.46-11.7,0-16.16,4.46-4.46,11.7-4.46,16.16,0,4.46,4.46,4.46,11.7,0,16.16-1.68,1.68-3.76,2.73-5.94,3.14h0Z"/><line class="cls-208" x1="66.3" y1="54.39" x2="68.15" y2="54.39"/></g><g><path class="cls-208" d="M65.17,39.86c0-2.03,1.86-3.63,3.97-3.19,1.23,.26,2.23,1.25,2.49,2.49,.32,1.53-.43,2.92-1.64,3.58-.97,.52-1.55,1.56-1.55,2.66v1.32"/><path class="cls-208" d="M68.65,49.11c0,.12-.1,.21-.21,.21s-.21-.1-.21-.21,.1-.21,.21-.21,.21,.1,.21,.21Z"/></g></g><g><path class="cls-208" d="M82.2,42.09h4.23c1.74,0,3.15,1.41,3.15,3.15v25.1c0,1.74-1.41,3.15-3.15,3.15H50.44c-1.74,0-3.15-1.41-3.15-3.15v-25.1c0-1.74,1.41-3.15,3.15-3.15h4.17"/><polyline class="cls-208" points="57.65 73.49 55.72 78.35 68.43 78.35 81.15 78.35 79.22 73.49"/><path class="cls-208" d="M86.22,82.04l3.68,6.64c.55,1-.17,2.22-1.31,2.22H48.28c-1.14,0-1.86-1.23-1.31-2.22l3.68-6.64h35.57Z"/></g></g></g></g>
 
<style>
.kenburns-top {
	animation: kenburns-top 5s ease-out both;
}


@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }
  100% {
    transform: scale(1.25) translateY(-15px);
    transform-origin: top;
  }
}

</style></svg>

The i changed the last part to:

<style>
.kenburns-top {
	animation: kenburns-top 5s ease-out both;
	animation-play-state: paused; 
}

.kenburns-top:hover{
  animation-play-state: running;              /* trigger on hover */
}
@keyframes kenburns-top {
  0% {
    transform: scale(1) translateY(0);
    transform-origin: 50% 16%;
  }
  100% {
    transform: scale(1.25) translateY(-15px);
    transform-origin: top;
  }
}

</style>

Worked in web browser but not in pbi

[smpa01]

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]

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.

[v-eachen-msft]

Hi @smpa01 ,

Did you add the following codes before <svg>?

data:image/svg+xml;utf8,  

[smpa01]

@v-eachen-msft  I tried the following code in a .svg file as you suggested but could not make it to work

data:image/svg+xml;utf8,
<svg version="1.1" svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="210mm"
   height="297mm"
   viewBox="0 0 210 297" enable-background="0 0 100 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>

Also, I tried the following to test out if it works in a matrix viz and it does not

Rotating Circle:= "data:image/svg+xml;utf8,
<svg version=""1.1"" svg xmlns=""http://www.w3.org/2000/svg"" x=""0px"" y=""0px""
width=""210mm""
   height=""297mm""
   viewBox=""0 0 210 297"" enable-background=""0 0 100 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>"

 

I don't know what am I doing wrong

[aaron797]

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 · Accepted solution]

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]

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.