0

I spent hour trying to fit an svg into a window:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 20">
         <path d="M 0 0 C 5.6667 0 11.3333 0 16 0 C 25 11 8 8 16 20 L 16 20 L 0 20" 
         fill="#00ffff"/>
    </svg>

i can't fit it correctly if i modify the viewBox it will either too small you can see its edges or too big you need to scroll down to see the rest of it; and if you minimize the browser it will be worst, i made it little bit close to the window size you need to scroll just a bit almost prefect but when i resized the browser window its height became too small i don't know what to do, and is there a dynamic way to change the viewBox, or i have to keep trying until i find the correct one in the future ones, please help; the questions are: 1- how to get the correct viewBox dynamically; 2- how to make it to maintain its perfect size even when we resize the browser;

it think it all css;

ahmed hassaine
  • 19
  • 1
  • 1
    Quite unclear, do you want to shrink, like https://jsfiddle.net/65q7vzsw/ – Kaiido Jun 29 '21 at 05:27
  • @Kaiido omg thank you bro that is what i was look for, can you tell me how did you get the` viewBox` so i wont keep trying patterns all day until i find the right one. – ahmed hassaine Jun 29 '21 at 06:44
  • 2
    For the viewBox https://stackoverflow.com/questions/29002472/find-svg-viewbox-that-trim-whitespace-around But the most important bit in the fiddle for you is `preserveAspectRatio=none`. – Kaiido Jun 29 '21 at 06:45
  • @Kaiido thank very much you bro, i spent the whole last night fixing these and i couldn't find a solution the community of web design is bit a weak i guess, can you give me your instagram or discord or something so i can text you,i wanna collaborate with other programmers. <3 – ahmed hassaine Jun 29 '21 at 21:56

0 Answers0