title: How to scale svg background for react.js app?
body: <p>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 <a href="https://stackoverflow.com/questions/39056537/why-dont-my-svg-images-scale-using-the-css-width-property/39062462?fbclid=IwAR3mizZ7iVAYtPreHzqGn2JdTrvHc-7V1CZUuY_o_5_8lQnIk3Pm0Ej_8jg">Why don&#39;t my SVG images scale using the CSS &quot;width&quot; property?</a> 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? </p>
  
  <p>My SVG background</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;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"&gt;
  &lt;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)"&gt;
      &lt;stop  offset="0" style="stop-color:#4C0082"/&gt;
      &lt;stop  offset="0.385" style="stop-color:#4C0382"/&gt;
      &lt;stop  offset="0.6165" style="stop-color:#4D0B81"/&gt;
      &lt;stop  offset="0.8074" style="stop-color:#4F1980"/&gt;
      &lt;stop  offset="0.9753" style="stop-color:#522D7E"/&gt;
      &lt;stop  offset="1" style="stop-color:#52317E"/&gt;
      &lt;stop  offset="1" style="stop-color:#52317E"/&gt;
  &lt;/linearGradient&gt;
  &lt;polyline fill="url(#SVGID_1_)" points="822.948,62.45 1303.946,548.438 674.11,919.56 259.071,124.032 "/&gt;
  &lt;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 "/&gt;
  &lt;polyline fill="#11102F" points="1398,-193 696,-193 258.103,-46.896 763.579,458.579 1008.067,314.586 "/&gt;
  &lt;polyline fill="#410069" points="1035.566,291.588 334.097,701.066 1301.061,943.584 1213.131,524.346 "/&gt;
  &lt;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)"&gt;
      &lt;stop  offset="0" style="stop-color:#4C0082"/&gt;
      &lt;stop  offset="0.385" style="stop-color:#4C0382"/&gt;
      &lt;stop  offset="0.6165" style="stop-color:#4D0B81"/&gt;
      &lt;stop  offset="0.8074" style="stop-color:#4F1980"/&gt;
      &lt;stop  offset="0.9753" style="stop-color:#522D7E"/&gt;
      &lt;stop  offset="1" style="stop-color:#52317E"/&gt;
      &lt;stop  offset="1" style="stop-color:#52317E"/&gt;
  &lt;/linearGradient&gt;
  &lt;polyline fill="url(#SVGID_2_)" points="276.948,-32.55 757.946,453.438 128.11,824.56 -286.929,29.032 "/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/o4hWy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o4hWy.png" alt="the way it looks after shrinking too much horizontally"></a></p>