Using Animated SVG as page background

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 🙂