title: How to setup SVG's viewbox, width and height which is scalable and responsive
body: <p>I am new to SVG design. 
  Struggling to scale, zoom in/out with container and make it responsive to all the devices.</p>
  
  <p>Is it even possible to design SVG in a way that fits in all the devices and handles browsing zoom in/out functionality?</p>
  
  <p>I have tried to play with viewport and viewbox for each breakpoint.</p>
  
  <p>e.g. for Desktop, I have SVG to fit in a container. should scale and zoom in and out with the container(svgClass).</p>
  
  <pre><code>.svgClass {
   background-image: url('assets/svg/desktop-svg.svg');
   width: "100%";
   height: 800px;
   position: absolute;
  }
  
  &lt;div class="svgClass"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Sample SVG</p>
  
  <p>---desktop-svg.svg---</p>
  
  <pre><code>&lt;svg width="1400" height="800" viewbox="0 0 1121 641"&gt;
  -----
  &lt;/svg&gt;
  </code></pre>
  
  <p>It fits well with 100% browser zoom, but if in case of zoom in and zoom out SVG gets displaced.</p>
  
  <p>To handle zoom in, I have increased viewport height="1400" and width="800" compared to viewbox (0 0 1121 641). which worked fine but zoom out still fails.</p>
  
  <p>Had tried out: Removed width and height from viewport, also tried with setting auto and 100% with width and height. No success.   </p>
  
  <p>How to design SVG which can scale with the container and stay responsive, second do we need to setup viewport and viewbox for each device?</p>