SVG ClipPaths

by Nikolay Petrov

HTML

<svg class="defs">
    <defs>
        <clipPath id="heart-clip">
            <path id="heart" d="M4 4c1129,0 2258,0 3387,0 0,629 0,1257 0,1885 -492,0 -984,0 -1476,0 -1,216 -421,218 -421,0 -496,0 -993,0 -1490,0 0,-628 0,-1256 0,-1885z"/>
        </clipPath>
    </defs>
</svg>

<div class="demo heart">
    <svg width="3300" height="3300">
        <image xlink:href="http://lorempixel.com/output/city-q-c-300-300-4.jpg" width="3300" height="3300" />
    </svg>
</div>

CSS

.defs {
    position: absolute;
    width: 0;
    height: 0;
}
.demo {
    text-align:center;
}
.heart image {
    clip-path: url(#heart-clip);
}