If you want to cut out an image using an SVG, it's recommended to use the CSS property `clip-path` . The following script removes several obstacles: SVGs can be saved using Illustrator, you can specify the (relative or absolute) URL of an SVG (Chrome currently only natively supports inline SVGs), and the cutout 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.:
1e4823ee95525ce0e04bb693c48e0e35
Now you integrate the following script:
1e4823ee95525ce0e04bb693c48e0e35
The result is that:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.