There is such a svg in the code on the background, and it stretches to the whole page as expected, but the path inside it for some reason does not fill the entire screen:

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .bg { width: 100%; height: 100%; } .bg svg { width: 100%; height: 100%; } 
 <div class="bg"> <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 500 330"> <path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/> </svg> </div>

How to make the path inside the svg for the entire width and height of the screen?

    1 answer 1

    To understand where the borders of the svg are, add a border to the svg file header.

    style="border:1px solid red;" After adjusting the proportions and sizes, this red frame will not be needed, erase it.

    In order for svg to occupy the entire container space we add inside the svg file width="100%" , height="100%" and the command preserveAspectRatio="none"

     <style> html, body { width: 100%; height: 100%; } </style> <div class="bg"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 330" preserveAspectRatio="none" style="border:1px solid red;" > <path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/> </svg> </div>

    • Thanks, and the scrolling is small on both axes, is it because of what? - user3178479 February
    • @ user3178479 takes a very long time to explain how svg is positioned and scaled in this particular example. Remove the width height in body styles and the scroll bar disappears - Alexandr_TT
    • one
      come, thanks! - user3178479
    • @ user3178479 not for that :) Ask any questions on svg, do not hesitate. You can also ask in the chat on svg, if I can explain in words, I will answer chat.stackexchange.com/rooms/70612/svg-chat - Alexandr_TT