svg in symbol tags are taking spaces in the bottom

Question

I have stacked many svg codes in symbol tags at the bottom of all my codes like--

<svg>
    <symbol id attributes>
        svg codes
    </symbol>
</svg>

and using these svgs up in use tags wherever necessary, like--

<svg>
    <use href="#id"></use>
</svg>

I am doing this to have a cleaner code cause all the svgs were making my code crowded.

But these codes residing at bottom I thought isn't showing at all, but actually these codes are taking there space at the bottom of the website.

How do I fix it?

Answer 1

The SVG that contains all the symbols referenced in the page should be hidden, so apply a display: none

Answer 2

Put all your SVG codes into a separate div with its own class, then set the CSS for that class to display:none.