Update your settings

Hello all. 
I've tried my hand on making an animated svg widget, which I'll be using as a loading/please wait indicator. Just download the attached document and you'll be able to edit it with a text editor. Change the svghmi extension to .svg if your text editor supports svg formatting. To use svg widget in a project, copy it to /UserFiles/SVGControls
The codepen I've taken the svg code from: 
https://codepen.io/nikhil8krishnan/pen/rVoXJa
Runtime demonstration: 
https://media.giphy.com/media/YIhePjt6w3CMthfIng/giphy.gif
I'd like to explore more but I wanted to ask if there's some reference document that siemens made for developing svg widgets before doing more trial-error runs.
Edit: I've found some info in TIA help under Visualizing processes (RT Unified) > Configuring screens > Configuring objects > Dynamic widgets  
Restrictions on SVG graphics
The SVG graphics support the SVG 1.2 Tiny standard. Note the following
restrictions when using SVG graphics:
The CSS definitions are converted to inline attributes.
Embedded scripts and non-local URLs are not supported in the SVG graphics and
are removed from the original graphics during conversion when imported into the
TIA Portal.
The use of SVG graphics with embedded animations is not supported.
The use of large SVG graphics affects performance due to the load associated
with the increased characters.
Migration of SVG graphics from WinCC V7 to TIA Portal is not supported.
The following SVG characteristics are not supported:
Scripting
Interactivity
Styling
Expandability - no ForeignObjects
Animations
If screen items have the value "None" for the "Scale background graphic"
property, set the following SVG attributes to display SVG graphics:
Width: Pixel or percent
Height: Pixel or percent