Ширина svg с ширину родительского элемента?

Question

[yadscreech]

Всем хай
В общем, нужно чтобы svg картинка (тегом img или кодом, не важно), была шириной с родительский блок-обёртки, в свою очередь родительский блок был шириной дочернего блока с текстом, проблема в том что эти родительские блоки все разной ширины, svg адаптироваться почему-то не хочет, либо растягивает, либо просто с своей шириной стоит
Кто гуру верстки или просто я чет не заметил/затупил, хелп

КотПен - https://codepen.io/screech/pen/aboBpae

Код так -

<ul class="nav">
  <li>
    <span class="fs">Одно</span>
    <span>
      <svg width="100" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 100 20"  xml:space="preserve">
<path d="M50.4,20C33.6,13.3,16.8,6.7,0,0h100C83.5,6.7,67,13.3,50.4,20z" style="fill: #ab1353;"/>
</svg>
    </span>    
  </li>
  <li>
    <span class="fs">Два слова</span>
    <span>
      <svg width="100" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 100 20"  xml:space="preserve">
<path d="M50.4,20C33.6,13.3,16.8,6.7,0,0h100C83.5,6.7,67,13.3,50.4,20z" style="fill: #ab1353;"/>
</svg>
    </span>    
  </li>
  <li>
    <span class="fs">Почти три</span>
    <span>
      <svg width="100" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 100 20"  xml:space="preserve">
<path d="M50.4,20C33.6,13.3,16.8,6.7,0,0h100C83.5,6.7,67,13.3,50.4,20z" style="fill: #ab1353;"/>
</svg>
    </span>    
  </li>
  <li>
    <span class="fs">Три слова в меню</span>
    <span>
      <svg width="100" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 100 20"  xml:space="preserve">
<path d="M50.4,20C33.6,13.3,16.8,6.7,0,0h100C83.5,6.7,67,13.3,50.4,20z" style="fill: #ab1353;"/>
</svg>
    </span>    
  </li>
</ul>

.nav {
  display: flex;
  width: 700px;
  justify-content: space-between;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  border-radius: 10px
}
.nav li {
  list-style: none;  
  display: flex;
  flex-direction: column;
}
.fs {
  box-shadow: 0 2px 5px rgba(255,0,0,0.5);
  padding: 0.5em 1em;
  border-radius: 5px;
}

Answer 1

[xonar]

У вас в svg уже прописаны размеры, оно и не будет растягиваться в данном случае.

<svg width="100" height="20"
ширину, высоту убираем и будет растягиваться.