How to scale svg background for react.js app?

0
votes

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>

the way it looks after shrinking too much horizontally

2
cssreactjssvg

2 Answers

1
votes

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/

0
votes

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>