<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  <defs>
    <linearGradient id="lg">
      <stop offset="0%" stop-color="darkblue" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>

    <mask id="mask">
      <rect width="" height="" fill="#000" />
      <path d="M22,126  C24,126 14,90 49,83 L295,0 550,79 C550,80 576,79 572,129 L572,350 C572,360 577,380 542,380 L50,380 C50,380 26,383 22,360z" fill="#fff" />
    </mask>

    <mask id="border">
      <rect width="100%" height="100%" fill="#fff" />

      <rect width="592px" height="50px" x="0" y="130" fill="#000" />
      <rect width="10px" height="60px" x="0" y="180" fill="#000" />
    </mask>
  </defs>

  <rect width="585" height="250" x="3" y="145" fill="none" stroke="url(#lg)" stroke-width="6" ry="14" mask="url(#border)" />

  <image href="https://apprenticestarterpack.co.uk/wp-content/uploads/2017/07/Whats-the-difference-between-sheet-detail-random-orbit-and-belt-sander.jpg" width="100%" height="100%" x="0" y="0" preserveAspectRatio="none" mask="url(#mask)" />

</svg>