Mit clip-path SVGs aus Bildern ausstanzen

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.

Zurück