Als je een afbeelding wilt uitsnijden met behulp van een SVG-bestand, is het aan te raden de CSS-eigenschap `clip-path` te gebruiken. Het volgende script neemt een aantal obstakels weg: SVG's kunnen worden opgeslagen met Illustrator, je kunt de (relatieve of absolute) URL van een SVG opgeven (Chrome ondersteunt momenteel alleen inline SVG's), en de uitsnijding is bovendien volledig responsief.
Eerst maakt u een uitknipmasker in Adobe Illustrator en exporteert u de SVG met de volgende instellingen::
De beeldverhouding van de SVG en de afbeelding moeten hetzelfde zijn. Tot slot wordt de externe SVG in de afbeelding opgenomen, bijvoorbeeld in het `data-clip` attribuut.:
1e4823ee95525ce0e04bb693c48e0e35
Nu integreer je het volgende script::
1e4823ee95525ce0e04bb693c48e0e35
Het resultaat is dat:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.