How to remove white space on website from SVG symbol at botton of index.html-CodePudding

On youtube I learned how to place my SVG code inside a elements at the bottom of my index.html and whenever I want to use the SVG then I would use the tags. Doing this makes sure that my code remains clean and it worked.

Now I am finished with my project but under my footer, there is this big white space. When using chrome inspect, I can see that the white space is used for the bottom SVG's. Even when styling the SVG to visibility: hidden; , it is still showing the white space.

How should I approach this problem so that the bottom SVG's are in my index.html but not on my live server page?

In the image: the brown part is my footer and the white space underneath is what I am talking about.

enter image description here

In the first part you can see how I use the elements

<article >
                    <div >
                        <svg  width="80"><use href="#cog-icon"></use></svg>
                    </div>
                    <div ></div>
                    <div >
                        <h3><strong>Mobile first</strong></h3>
                        <p>Start with mobile and work your way up with media queries.</p>
                    </div>
                </article>

Here you see the SVG saved at the bottom

<!-- SVG 3 column top ---------------------------------------------->
<div >
<svg style="visibility: hidden;">
    <symbol id="cog-icon" 
             
            aria-hidden="true" 
            focusable="false" 
            data-prefix="fas" 
            data-icon="cog" 
            role="img" 
            viewBox="0 0 512 512" 
            xmlns="http://www.w3.org/2000/svg">
        <path   fill="white" 
                d="M487.4 315.7l-42.6-24.6c4.3-23.2 
                4.3-47 0-70.2l42.6-24.6c4.9-2.8 
                7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 
                110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 
                6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 
                85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 
                94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 
                0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 
                30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 
                15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 
                8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 
                42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 
                43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 
                0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z">
        </path>
    </symbol>
</svg>
</body>
</html>




I tried removing the bottom SVG's and the white space disappeared. But then I lost the purpose of this technique to not clutter my code with SVG-code.

I tried using an direct style on the SVG --> visiblility: hidden; but the space was still showing

I put the SVG's in a div and give the div a visibility: hidden; style but I had the same issue as above.

CodePudding user response：

To make the bottom SVG invisible you can set the height and width to 0. The CSS property visibility will hide content, but it will still take up the space on the page.

Also, to remove the white space around the icon in the top set both width and height.

<article >
  <div >
    <svg xmlns="http://www.w3.org/2000/svg"  width="80" height="80">
      <use href="#cog-icon" />
    </svg>
  </div>
  <div ></div>
  <div >
    <h3><strong>Mobile first</strong></h3>
    <p>Start with mobile and work your way up with media queries.</p>
  </div>
</article>

<!-- SVG 3 column top ---------------------------------------------->
<svg width="0" height="0" style="display:none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="cog-icon" 
             
            aria-hidden="true" 
            focusable="false" 
            data-prefix="fas" 
            data-icon="cog" 
            role="img" 
            viewBox="0 0 512 512" >
    <path fill="orange" d="M 487.4 315.7 l -42.6 -24.6 c 4.3 -23.2 4.3 -47 0 -70.2 l 42.6 -24.6 c 4.9 -2.8 7.1 -8.6 5.5 -14 c -11.1 -35.6 -30 -67.8 -54.7 -94.6 c -3.8 -4.1 -10 -5.1 -14.8 -2.3 L 380.8 110 c -17.9 -15.4 -38.5 -27.3 -60.8 -35.1 V 25.8 c 0 -5.6 -3.9 -10.5 -9.4 -11.7 c -36.7 -8.2 -74.3 -7.8 -109.2 0 c -5.5 1.2 -9.4 6.1 -9.4 11.7 V 75 c -22.2 7.9 -42.8 19.8 -60.8 35.1 L 88.7 85.5 c -4.9 -2.8 -11 -1.9 -14.8 2.3 c -24.7 26.7 -43.6 58.9 -54.7 94.6 c -1.7 5.4 0.6 11.2 5.5 14 L 67.3 221 c -4.3 23.2 -4.3 47 0 70.2 l -42.6 24.6 c -4.9 2.8 -7.1 8.6 -5.5 14 c 11.1 35.6 30 67.8 54.7 94.6 c 3.8 4.1 10 5.1 14.8 2.3 l 42.6 -24.6 c 17.9 15.4 38.5 27.3 60.8 35.1 v 49.2 c 0 5.6 3.9 10.5 9.4 11.7 c 36.7 8.2 74.3 7.8 109.2 0 c 5.5 -1.2 9.4 -6.1 9.4 -11.7 v -49.2 c 22.2 -7.9 42.8 -19.8 60.8 -35.1 l 42.6 24.6 c 4.9 2.8 11 1.9 14.8 -2.3 c 24.7 -26.7 43.6 -58.9 54.7 -94.6 c 1.5 -5.5 -0.7 -11.3 -5.6 -14.1 z M 256 336 c -44.1 0 -80 -35.9 -80 -80 s 35.9 -80 80 -80 s 80 35.9 80 80 s -35.9 80 -80 80 z" />
  </symbol>
</svg>