test.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="100%">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .container {         
          font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
          display: flex;
          flex-direction: row;
          align-items: center;
          margin: 0;
          width: 100%;
          color: #ef690c;
          position: relative; 
        }
        .container::before {
          z-index: -1;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #ff963e40;
          border-radius: 0.2em;
        }

        .icon {
          font-size: 2em;
          margin-left: 0.75em;
          margin-right: 0.5em;
          transform: translateY(-0.06em);
        }

        .code {
          font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
          font-size: 0.85em;
          border-radius: 0.2em;
          padding-top: 0.1em;
          display: inline-block;
          padding-bottom: 0.1em;
          margin-bottom: -0.2em;
          padding-right: 0.4em;
          padding-left: 0.4em;
          mix-blend-mode: difference;
          background: #f67f182b;
          font-weight: 600;
          transform: translateY(-0.06em);
          opacity: 0.9;
        }

        .text {
          font-size: 1em;
          margin-right: 0.75em;
          line-height: 1.3;
        }

        .icon, .text {
          mix-blend-mode: exclusion;
        }


      </style>
      <div class="container">
        <span class="icon">⚠</span>
        <p class="text">This project is still in a very early stage and may very well contain bugs, so make sure to back up your <span class="code">~/.ssh/config</span> file before running the script for safety's sake!</p>
      </div>
    </div>
  </foreignObject>

  <script>
    var container = document.querySelector(".container");
    var svg = document.querySelector("svg");

    svg.style.height = container.clientHeight || 150;

    window.addEventListener("resize", function () {
      svg.style.height = container.clientHeight || 150;
    })
  </script> 
</svg>