Centering and removing white space from a SVG in an enclosing div

Question

I am facing difficulty in stretching a SVG in the X-axis, so that there is no white space visible on either side. Also, I want the point (marked in red circle in the attached picture) to touch the starting of the second div with background color of black. I have tried changing the viewbox values, but I am not able to achieve the desired result.

The below is my code.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.example {
    width: 100%;
    height: 100vh;  
}

svg {
    width: 100%;
    height: 100%;  
}

.section-two {
    width: 100%;
    height: 100vh;
    background-color: black;
}

enter image description here

user_1292848 · Answer

For that to happen, you need to do two things:

Make sure that your viewBox is correct. It needs to match the dimensions of your . It currently doesn't.
Add the following attribute to your SVG to turn off the automatic aspect-ratio-preserving scaling that SVG does.
```
preserveAspectRatio="none"
```

If we check the bounding box of your path, we get the values:

x: 2.600
y: 2.895
width: 2984.740
height: 1650.893

So that is what your viewBox needs to be set to, if you want the path to touch all four sides of the SVG's parent container.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.example {
    width: 100%;
    height: 100vh;  
}

svg {
    width: 100%;
    height: 100%;  
}

.section-two {
    width: 100%;
    height: 100vh;
    background-color: black;
}

Centering and removing white space from a SVG in an enclosing div

1 Answers