How to scale svg background for react.js app? - css

Question

I have a problem with scaling my background svg image. I would expect it to scale to every browser window size, but right now it doesn't scale vertically no matter what params I set. I already tried removing width and height directly in svg file as stated in Why don't my SVG images scale using the CSS "width" property? and attempted to adjust viewBox and preserveAspectRatio manually, but the image at some point of scaling always ends up with messed up height (for example 1/3 of the full height for mobile devices). Am I doing something wrong with the image or should I simply create another one for different ratios?
My SVG background
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="162.3691" y1="646.5293" x2="893.0117" y2="646.5293" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)">
<stop offset="0" style="stop-color:#4C0082"/>
<stop offset="0.385" style="stop-color:#4C0382"/>
<stop offset="0.6165" style="stop-color:#4D0B81"/>
<stop offset="0.8074" style="stop-color:#4F1980"/>
<stop offset="0.9753" style="stop-color:#522D7E"/>
<stop offset="1" style="stop-color:#52317E"/>
<stop offset="1" style="stop-color:#52317E"/>
</linearGradient>
<polyline fill="url(#SVGID_1_)" points="822.948,62.45 1303.946,548.438 674.11,919.56 259.071,124.032 "/>
<polyline fill="none" points="111.374,570.263 560.868,-4.484 -31.051,-20.646 -66.404,551.071 -30.041,569.253 111.374,570.263
-338.119,1145.007 "/>
<polyline fill="#11102F" points="1398,-193 696,-193 258.103,-46.896 763.579,458.579 1008.067,314.586 "/>
<polyline fill="#410069" points="1035.566,291.588 334.097,701.066 1301.061,943.584 1213.131,524.346 "/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-247.6929" y1="273.7153" x2="482.9502" y2="273.7153" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)">
<stop offset="0" style="stop-color:#4C0082"/>
<stop offset="0.385" style="stop-color:#4C0382"/>
<stop offset="0.6165" style="stop-color:#4D0B81"/>
<stop offset="0.8074" style="stop-color:#4F1980"/>
<stop offset="0.9753" style="stop-color:#522D7E"/>
<stop offset="1" style="stop-color:#52317E"/>
<stop offset="1" style="stop-color:#52317E"/>
</linearGradient>
<polyline fill="url(#SVGID_2_)" points="276.948,-32.55 757.946,453.438 128.11,824.56 -286.929,29.032 "/>
</svg>

Answer 1

Have you tried adding it as a background image via CSS?
.mainElement {
width: 100vw;
height: 100vh;
background: url("https://pixabay.com/get/57e7d0424a50a914ea9d8578c52f317a123ec3e45659704174267cd495/witch-1751025.svg") no-repeat center center;
background-size: cover;
}
<div class="mainElement"></div>
You might want to look into this post https://css-tricks.com/perfect-full-page-background-image/

Answer 2

Take a look at preserveAspectRatio and ensure your html, body, and svg elements are all taking up 100% height of the viewport.
html {
height: 100%;
}
body {
margin: 0;
background: #4C0082;
height: 100%;
}
svg {
height: 100%;
width: 100%;
}
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 960 560">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="162.3691" y1="646.5293" x2="893.0117" y2="646.5293" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)"> <stop offset="0" style="stop-color:#4C0082"/> <stop offset="0.385" style="stop-color:#4C0382"/> <stop offset="0.6165" style="stop-color:#4D0B81"/> <stop offset="0.8074" style="stop-color:#4F1980"/> <stop offset="0.9753" style="stop-color:#522D7E"/> <stop offset="1" style="stop-color:#52317E"/> <stop offset="1" style="stop-color:#52317E"/></linearGradient><polyline fill="url(#SVGID_1_)" points="822.948,62.45 1303.946,548.438 674.11,919.56 259.071,124.032 "/><polyline fill="none" points="111.374,570.263 560.868,-4.484 -31.051,-20.646 -66.404,551.071 -30.041,569.253 111.374,570.263 -338.119,1145.007 "/><polyline fill="#11102F" points="1398,-193 696,-193 258.103,-46.896 763.579,458.579 1008.067,314.586 "/><polyline fill="#410069" points="1035.566,291.588 334.097,701.066 1301.061,943.584 1213.131,524.346 "/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-247.6929" y1="273.7153" x2="482.9502" y2="273.7153" gradientTransform="matrix(0.8443 -0.5359 0.5359 0.8443 -42.54 93.5288)"> <stop offset="0" style="stop-color:#4C0082"/> <stop offset="0.385" style="stop-color:#4C0382"/> <stop offset="0.6165" style="stop-color:#4D0B81"/> <stop offset="0.8074" style="stop-color:#4F1980"/> <stop offset="0.9753" style="stop-color:#522D7E"/> <stop offset="1" style="stop-color:#52317E"/> <stop offset="1" style="stop-color:#52317E"/></linearGradient><polyline fill="url(#SVGID_2_)" points="276.948,-32.55 757.946,453.438 128.11,824.56 -286.929,29.032 "/>
</svg>