Adding an SVG clipping path

[imbwaldo]

It'd be great to be able to add a clip-path property to the responsive image—if this isn't already a feature and I'm just overlooking it.

Here's roughly what I'm thinking in terms of the generated image code:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 820 410">
  <defs>
    <clipPath id="my-svg-clipping-path-id" clipPathUnits="userSpaceOnUse">
      <path d="M820 381.337s-168.039-64.491-409.7 0-410.3 0-410.3 0V0h820z" />
    </clipPath>
  </defs>
  <image width="100%" height="100%" preserveAspectRatio="xMinYMin slice" xlink:href="/assets/my-image.jpg" clip-path="url(#my-svg-clipping-path-id)" />
</svg>

Maybe some of those properties/attributes are unnecessary, but I'm hoping that makes a bit of sense.

As always, thanks for this add-on!

[riasvdv]

You should be able to publish the views using php artisan vendor:publish --tag=responsive-images-views and change the html of the SVG placeholder there.

[imbwaldo]

Thanks, @riasvdv. I'll give it a try, see if a mere mortal like myself can pull this off …