Q:

svg на всю высоту и ширину

Есть такой блок svg:

html,body, svg {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
}

body {
  background: #ccc;
}
<svg id="overlay" viewBox="0 0 300 300">   
  <path id="end" d='M0,0 L300,0 L300,300 L0,300 Z'/>
</svg>

Можно ли  растянуть svg на всю высоту и ширину блока  без пробелов по бокам или вверху и внизу? Сейчас он пропорционально меняет свои размеры.
Не обрезать и не ставить на фон, так как в оригинале форма не совсем квадрат, как в  примере, а волнистая поверхность. Просто  для примера:

html,body, svg {
  width: 100%; height: 100%;
   margin: 0; padding: 0;
}

body {
  background: #ccc;
}
<svg id="overlay" viewBox="0 0 300 300">   
    <path id="end" d='M0,0 L150,50 L300,0 L250,150 L300,300 L150,250 L0,300 L50,150 Z'/>
  </svg>

A:

Чтобы растянуть на всю длину без сохранения пропорций - preserveAspectRatio="none" 

html,body, svg {
  width: 100%; height: 100%;
   margin: 0; padding: 0;
 <svg id="overlay" viewBox="0 0 300 300" preserveAspectRatio="none">   
        <path id="end" d='M0,0 L150,50 L300,0 L250,150 L300,300 L150,250 L0,300 L50,150 Z'/>
      </svg>

