How to embedd an SVG File into another SVG - svg

Question

I want to reference another SVG file in my main SVG file and show it there.
The "svg1.svg":
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg id="main"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path id="testPath"
d="M 100 350 q 150 -300 300 0"
stroke="blue"
fill="none" />
</svg>
The "referencing.svg":
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100">
<g transform="translate(20,20)">
<circle r="10"
stroke="black"
fill-opacity="20%" />
<use xlink:href="svg1.svg#main"
x="10" />
</g>
</svg>
The referencing.svg should show the content of the svg1.svg but its not showing up at all. Both Svg-Files are in the same local Folder.
The validator at https://validator.w3.org/check says the Syntax is correct.
Am I missing something or does it not work like this at all?