How to represent x and y in svg symbol - html

Question

Based on https://css-tricks.com/svg-symbol-good-choice-icons/
I have a representation of symbols taken from svg files. The original svgs have properties like x, y, height and width.
When adding the svgs to one svg file and making them symbols, I found that adding x, y height and width attributes to <symbol> is not valid svg.
I resolved the issue for height and width, by adding them in the style attribute of the <symbol> since that one is supported. My question is, how can I go about adding the x and y attributes to the <symbol>?
The final file, is composed of only one <svg> and multiple svg <symbol>
Example original file:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
File after changing it to symbol:
<svg style="display:none;">
<symbol id="circle" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</symbol>
</svg>
In the above width and height are not valid attributes for symbol.
The symbol is used the following way:
<svg>
<use xlink:href="#circle" />
</svg>
However, in the above, it doesn't expand to take the width and the height. I also tried nesting an svg inside the symbol like this and it also doesn't respect the height and width:
<svg style="display:none;">
<symbol id="circle">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</symbol>
</svg>

Answer 1

The <symbol> element does not have x, y, width or height attributes.
Your original file:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
should be converted to:
<svg style="display:none;">
<symbol id="circle">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</symbol>
</svg>
And then reference it with a <use> as follows. If the original SVG had width and height values, then they should go in the <use>.
<svg>
<use xlink:href="#circle" width="200" height="100"/>
</svg>
If you want to position the symbol, use x and y attributes, or a transform on the <use>.
<svg>
<use xlink:href="#circle" width="200" height="100" x="300" y="50"/>
</svg>
<svg>
<use xlink:href="#circle" width="200" height="100" transform="translate(300,50)"/>
</svg>
Note that <symbol> elements do support viewBox, so if your original SVG has a viewBox, it should be added to the symbol.