Error exporting page containing SVG

[FedericoBoccaccioLavorativo]

I cannot share the complete code for the project.
In the area to be exported, and there is no alternative to this, I have

<svg id="arrowSvgContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
	<defs>
		<marker id="puntaFreccia" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="7" orient="auto">
			<polygon points="0 0, 10 5, 0 10"></polygon>
		</marker>
		<marker id="puntaFrecciaHover" viewBox="0 0 10 10" refX="10" refY="5" markerUnits="strokeWidth" markerWidth="7" markerHeight="5" orient="auto">
			<polygon points="0 0, 10 5, 0 10"></polygon>
		</marker>
	</defs>
</svg>

which is modified via js by adding elements such as
<path d="M 338,599 L 333,599 Q 328,599 324,595..." class="freccia" marker-end="url(#puntaFreccia)" id="..."></path>
And I use CSS like

div.rombo
{
	height: var(--dimRombo);
	width: var(--dimRombo);
	rotate: 45deg;
	flex-shrink: 0;
	margin-right: 3px;
	margin-top: 1px;
}
div.vuoto
{
	border: 2px solid var(--coloreRombo);
	background-color: transparent;
}
.commento-fluttuante
{
	position: absolute; /* Rende il rettangolo fluttuante e posizionabile */
	left: var(--x, 0px); /* Usa --x per la posizione orizzontale, default 0px */
	top: var(--y, 0px); /* Usa --y per la posizione verticale, default 0px */
	width: var(--w, 300px);
	height: var(--h, 150px);
	background-color: #fcf8e3; /* Sfondo chiaro per il rettangolo */
	padding: 15px 10px 10px 10px; /* Spazio per il titolo in alto, e padding generico */
	box-sizing: border-box; /* Include padding e border nella larghezza/altezza */
	display: flex; /* Per centrare o organizzare il contenuto interno */
	flex-direction: column; /* Essenziale per gestire l'allineamento verticale con justify-content */
	color: var(--col-testo,#4CAF50);
	font-size: var(--dimFontStd);
}
.bordo-ombreggiato
{
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2); /* Una leggera ombra per l'effetto fluttuante */
}
.bordo-tratteggiato
{
	border: 2px dashed var(--coloreBordo, #8B4513); /* Bordo tratteggiato */
}

Which is ignored, at least the rotation part. I apply this CSS to empty divs, with the sole purpose of displaying squares rotated by 45°. Which I have incorrectly called a rhombus.
And here and there are also pseudo-elements that seem to be interpreted correctly. And animations/transitions that are ignored.
Animations are not essential, although they are welcome in SVG, but I would at least like the static graphics to be identical.

My goal is to export the page content to PNG and SVG.

Git: https://github.com/tsayen/dom-to-image
script src: https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js

After a few attempts, I arrive at

// Funzioni per l'esportazione, definite a livello globale
function EsportaPng(scala=1)
{
	const node = document.querySelector('.containerSql');
	const scale = scala;
	const options =
	{
		width: node.clientWidth * scale,
		height: node.clientHeight * scale,
		style:
		{
			transform: 'scale(' + scale + ')',
			transformOrigin: 'top left'
		}
	};

	domtoimage.toPng(node, options).then(
	function (dataUrl)
	{
		const link = document.createElement('a');
		link.download = 'container-sql@'+scala+'X.png';
		link.href = dataUrl;
		link.click();
		console.log('Immagine PNG a '+scala+'X generata.');
	})
	.catch(function (error)
	{
		console.error('Si è verificato un errore durante la generazione della PNG.', error);
	});
}

function EsportaSVG()
{
	const node = document.querySelector('.containerSql');
	domtoimage.toSvg(node).then(
	function (dataUrl)
	{
		const link = document.createElement('a');
		link.download = 'container-sql.svg';
		link.href = dataUrl;
		link.click();
		console.log('Immagine SVG generata.');
	})
	.catch(function (error)
	{
		console.error('Si è verificato un errore durante la generazione dell\'SVG.', error);
	});
}

Which I call from button onClick.

But I got an error for both PNG and SVG.

Si è verificato un errore durante la generazione della PNG.

error { target: img, isTrusted: true, srcElement: img, currentTarget: img, eventPhase: 2, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, … }
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
explicitOriginalTarget: <img src='data:image/svg+xml;charset=utf-8,<svg xmlns="http:…'>
isTrusted: true
originalTarget: <img src='data:image/svg+xml;charset=utf-8,<svg xmlns="http:…'>
returnValue: true
srcElement: <img src='data:image/svg+xml;charset=utf-8,<svg xmlns="http:…'>
target: <img src='data:image/svg+xml;charset=utf-8,<svg xmlns="http:…'>
timeStamp: 3376
type: "error"
<get isTrusted()>: function isTrusted()
<prototype>: EventPrototype { composedPath: composedPath(), stopPropagation: stopPropagation(), stopImmediatePropagation: stopImmediatePropagation(), … }

An error that I find unclear, but it seems to be related to the fact that I am trying to export a document that links to images (in my case) or fonts external to my server.
I am actually working on the company server, but I wonder what would happen if I tried to run it locally.
Anyway, this is the first problem: it refuses to work if there are external images. What's more, these images are outside the area of interest.

I embed the images, but the problems change.
Now it doesn't digest the svg content.