Cut out SVGs from images with clip-path

If you want to cut out an image with the help of an SVG, the use of the CSS property clip-path is recommended. The following script triggers bumpy barriers: The SVG can be saved with the help of Illustrator, you can specify the (relative or absolute) URL of an SVG (Chrome supports up to now natively only inline SVG) and the neckline is also completely responsive.

First you create a clipping mask in Adobe Illustrator and export the SVG with the following settings:

The aspect ratios of the SVG and the image should be the same. Finally, the external SVG is referenced in the image, for example in the data-clip attribute:


Now you integrate the following script:


The result is that:

See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.