Nsryjdtyk

I need to stretching one of the three svg in a block. So, first and last svg must be always 100px width and second svg should be 100px, 200px, 1000px, but they must be closed to each other without between space.

 HTML

 <div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

CSS

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

  width: 500px;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

JSFIDDLE

As the container is flex, you can just add flex-grow:1; to the svg you want to grow:

 svg {

  width: 100px;

  height: 100px;

 }

 svg rect.st2 {

  fill: red;

 }

 svg rect.st1 {

  fill: green;

 }

 svg rect.st0 {

  fill: blue;

 }

 .container {

  display: flex;

 }

 

 .container svg:nth-child(2) {flex-grow:1;}

<div class="container">

  <svg viewBox="0 0 100 100">

    <rect class="st0" width="100px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 500 100" preserveAspectRatio="none">

    <rect class="st1" width="500px"  height="100px"/>

  </svg>

  <svg viewBox="0 0 100 100">

    <rect class="st2" width="100px"  height="100px"/>

  </svg>

 </div>

If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used

Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.

.container {

  display: flex;

  align-items:center;

}

svg {

  width: 100%;

  height: 100px;

}

svg:nth-child(2) {

  width: 1000px;

}

svg rect.st2 {

  fill: red;

}

svg rect.st1 {

  fill: green;

  width: 2000px;

}

svg rect.st0 {

  fill: blue;

}

JSFIDDLE