In Openlayers eine selbst erzeugte SVG als hinzufügen

[JavaScriptNoob]

Hallo zusammen,

ich habe mir mit Javascript eine SVG erstellt

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttributeNS(null, 'x', 0);
        rect.setAttributeNS(null, 'y', 0);
        rect.setAttributeNS(null, 'height', 500);
        rect.setAttributeNS(null, 'width',  500);
        rect.setAttributeNS(null, 'fill', "white");
	svg.appendChild(rect);

und möchte diese nun in Openlayers einbinden, sodass diese wenn man zoomt auch größer und kleiner wird ! Meine erste Lösung war es, das ganze
als Overlay hinzuzufügen aber da bleibt die Grafik immer gleich groß und das hilft mir nicht.

Bei meinen Recherchen habe ich zwar viele Beispiele gefunden, wie man eine SVG als URL eingebinden kann aber nie eine dynamisch erzeugte.

https://openlayers.org/en/latest/examples/static-image.html

Kann mir da einer weiterhelfen?

[JavaScriptNoob]

Vielleicht ein wenig konkreter...

Warum funktioniert dieser Code nicht?

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttributeNS(null, 'x', 0);
        rect.setAttributeNS(null, 'y', 0);
        rect.setAttributeNS(null, 'height', 500);
        rect.setAttributeNS(null, 'width',  500);
        rect.setAttributeNS(null, 'fill', "white");
        svg.appendChild(rect);

        var s = 'data:image/svg+xml;base64,' + window.btoa(new XMLSerializer().serializeToString(document.getElementById("svg")));

        var imageLayer = new ol.layer.Image({
            source: new ol.source.ImageStatic({
                url: s,
                imageSize: [550, 700],

                projection: map.getView().getProjection(),
                imageExtent: ol.extent.applyTransform([8.4371433, 46.449992, 9.4371433, 47.449992], ol.proj.getTransform("EPSG:4326", "EPSG:3857"))
            })
        });

        map.addLayer(imageLayer);

Warum wird die SVG nicht auf der Karte angezeigt? Gebe ich in der url einen Link zu einem Bild hin funktioniert es. Im Internet habe ich gefunden, dass man eine inline SVG so zu einer URL machen kann.

https://stackoverflow.com/questions/28450471/convert-inline-svg-to-base64-string

Die Größe der Grafik bei ImageSize stimmt ebenfalls.