Will man ein Bild mit Hilfe eines SVGs ausstanzen, empfiehlt sich der Einsatz der CSS-Property clip-path. Das folgende Script löst etwas holprigen Barrieren: Die SVGs können mit Hilfe von Illustrator abgespeichert werden, man kann die (relative oder absolute) URL eines SVGs angeben (Chrome unterstützt bis dato nativ ausschließlich Inline-SVGs) und der Ausschnitt ist außerdem komplett responsive.
Zunächst legt man in Adobe Illustrator eine Schnittmaske an und exportiert das SVG mit den folgenden Einstellungen:
Dabei sollte die Seitenverhältnisse des SVGs und des Bildes gleich sein. Schließlich referenziert man am Bild z.B. im Attribut data-clip die externe SVG:
1e4823ee95525ce0e04bb693c48e0e35
Nun bindet man folgendes Script ein:
1e4823ee95525ce0e04bb693c48e0e35
Als Resultat erhält man damit:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.