How to use svg as a preloader instead of css preloader?

I am just a beginner in javascript and three.js so please help me out. I want to use SVG logo as a preloader with a fade-in animation which should be synchronized with page loading but I’m having trouble placing SVG instead of CSS pre-loader. I want SVG animation to have 0% opacity to 100% and sync with page loading progress.
Here’s a code where I want to implement it example
Here’s the SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178 133" width="178" height="133">
<defs>
    <image width="178" height="133" id="img1" href="data:image/png;base64,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"/>
</defs>
<style>
    tspan { white-space:pre }
</style>
<use id="Background" href="#img1" x="0" y="0" />

Something like this?

https://jsfiddle.net/g6zr9tc7/

The idea is to just put the SVG into the <section> that represents the loading full-screen.

Yeah but not exactly. I also want to animate SVG to fade-in smoothly with loading progress. For example, when preloading starts opacity of logo should be 0 and when preloading reaches 100%, logo opacity should also be 100%

/cc

hey!!
I added a fade-in class to SVG but the problem is I want fade-in animation to fire when the page starts to load and end when preloading ends. Right now fade-in animation starts and runs for 10 seconds. Please help me
https://jsfiddle.net/vhLb3ruo/1/