I wonder if this is possible since I have an svg that I adapt to the screen of my web page, the problem is that when I want to use the svg for larger screens it increases its size in such a way that I can stretch it and fit the width that ends being too big and takes up half the screen.
This is the initial svg if we change the size of the screen it does not fit correctly to the right edge at certain times for this I have tried to make it look good on mobile phones, if we add the option for tablets to the css it also continues to adapt correctly, but when we change the size to desktop, we have to adjust the width again and the svg occupies half the screen and this is not what I am looking for, since I want to use it as a header.
@media (min-width: 481px) {
svg{
width: 114%;
}
}
<svg viewBox="0 0 500 500">
<path d="M0, 100 C150, 200 350,0 500, 100 L500, 00 L0, 0 Z" style="stroke:none; fill:black;">
</path>
</svg>
For this I have modified the svg a bit so that it looks correctly on desktop screens, but now I don't know how to make the change, or how to adapt it differently so that it looks correctly on each type of screen.
@media (min-width: 1025px) {
svg{
width: 125%;
}
}
<svg viewBox="0 0 500 500">
<path d="M0, 44 C210, 90 291,1 565, 70 L500, 00 L0, 0 Z" style="stroke:none;fill:black;">
</path>
</svg>
How can I make the change, so that it fits properly? is there any way to change the option d='M0, 100 C150, 200 350,0 500, 100 L500, 00 L0, 0 Z' to d="M0, 44 C210, 90 291,1 565, 70 L500, 00 L0 , 0 Z" ??
or is there any alternative to make it fit properly?
I hope I understood your question correctly:
The viewBox of the svg is too big. To make it fit the path you have I'm going to use the getBBox() method and I'm going to use the values of the path's bounding box to create the value of the viewBox.
If what you want is to stretch the svg you can give the svg the size you want for example
svg{width:100vw; height:200px;}
that is as wide as the screen but only 200px high. I'm also going to use the attribute preserveAspectRatio = "none" which tells the svg that it doesn't have to maintain the aspect ratios.Also don't forget to use a css reset to remove unwanted padding and margins.
If you still want to change the value of the d attribute, the simplest thing would be to use 2 path elements. In the css you can do something like this:
where #a and #b are the two paths