SVG with bottom 0 on footer and still with white space

Question

Good afternoon I have a problem in my layout, svg is in the footer position and I can’t remove the blank at the bottom of the page. I tried on the body I don’t think it’s his property.

<svg class="absolute rodape-bg" xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 100 100" preserveAspectRatio="none">
            <polygon fill="#545353" points="0,100 100,0 100,100"/>  </svg>

.absolute{
  position: absolute;
}
.rodape-bg{
  clear: both;
  position: inherit;
}

svg {
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: 100%;
    height: 30vw;
     -webkit-transform: rotate(18.3deg);
      transform: rotate(18.3deg);
     -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
  }

Answer 1

Add display: block svg. Because it is an inline element, it creates a spacing as in texts, unlike block elements.

I just think class is unnecessary .absolute, as svg already owns the property position: absolute. Also the property position: inherit class .rodape-bg is overwriting the position: absolute svg.

body{
   margin: 0;
}

.absolute{
   position: absolute;
}
.rodape-bg{
   clear: both;
   /* position: inherit; */
}

svg {
   display: block; /* propriedade adicionada */
   position: absolute;
   z-index: 2;
   bottom: 0;
   width: 100%;
   height: 30vw;
   -webkit-transform: rotate(18.3deg);
   transform: rotate(18.3deg);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
}

<svg class="rodape-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
   <polygon fill="#545353" points="0,100 100,0 100,100"/>
</svg>