html css user-interface svg user-experience

SVG not taking full width of container div

Facing issue where SVG is not taking full width of parent div.

I've tried updating the viewBox and adding width and height attributes to the SVG, but neither approach has worked.

My requirement,

I want this SVG colour to change dynamically. -- ✔
I want this SVG to have dynamically text inside it. -- ✔

I have already achieved these tasks as shown in the code snippet.

I'm facing these two issues,

I need an icon, e.g. pencil icon, to be positioned next to the text within middle of the SVG. -- ❌
Now the biggest problem, the SVG must automatically adjust to the width of the parent div, as shown in the attached images. -- ❌

Image with no text and icon -- small parent div

Image with text and icon -- big parent div

I've tried this SO reference but it didn't worked out - SVG is not talking FULL 'width' of container

<div style="width:100%; height: 128px; border:1px dashed black;"> 
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 128" preserveAspectRatio="none">
    <g transform="translate(0.000000,128.000000) scale(0.050000,-0.050000)" fill="#0000FF" stroke="none">
      <path d="M358 1627 l352 -352 -347 -348 -348 -347 920 0 920 0 348 348 347 347 -353 353 -352 352 -920 0 -920 0 353 -353z"/>
    </g>
    <text x="128" y="64" font-family="Arial" font-size="10" fill="white" text-anchor="middle" alignment-baseline="middle">Updated SVG</text>
  </svg>
</div>

Solution

As @D A's comment says, this is probably the most flexible way to do it.
It will ensure easy modification.

    .breadcrumb-container {
      display: flex;
      align-items: center; /* aligns the middle vertically */
      height: 40px; /* fixed height */
    }

    .breadcrumb-tail,
    .breadcrumb-head,
    .breadcrumb-body {
      display: flex;
      align-items: center; /* vertical centering */
      justify-content: center; /* horizontal centering */
      height: 40px; /* fixed height */
      background: #0000ff; /* same color for all parts */
    }

    .breadcrumb-tail {
      --s: 20px; /* control the shape */
      line-height: 1.8; /* control the height */
      padding-inline: calc(var(--s) + 0.3em) 0.3em;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--s) 50%);
      width: 40px; /* adjust width */
    }

    .breadcrumb-body {
      width: 100px; /* adjust width */
    }

    .breadcrumb-head {
      --s: 20px; /* control the shape */
      line-height: 1.8; /* control the height */
      padding-inline: .3em calc(var(--s) + .3em);
      clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%);
      width: 40px; /* adjust width */
    }

    .breadcrumb-body span {
      color: white; /* text color */
    }

<!DOCTYPE html>
<html>
<head>
  <title>SVG</title>
<body>
  <div class="breadcrumb-container">
    <div class="breadcrumb-tail"></div>
    <div class="breadcrumb-body"><span>Updated SVG</span></div>
    <div class="breadcrumb-head"></div>
  </div>
</body>
</html>