# Cross-Browser image masking with SVG

Given the lack of cross browser & inconsistent support for CSS clip-path & mask-image . This seemed like a solid simple approach.

Use jQuery to swap out the original IMG with an SVG equivalent.
SVG contains masking path. More about SVG paths .

Add 'data-mask' attribute to IMGs. Include svg path coords i.e. data-mask="M424.313,250.873c0..."

Tested in: IE9,10,11 & Edge. Chrome, Safari, Opera & FF. Android & iOS.

Non-JS users will see original image (Graceful Degradation)

Or only apply this technique to SVG supported browsers using Modernizer "if (Modernizr.inlinesvg) {}"

SVG contains title & desc elements for accessibility. See here

## What the JS does...

    <img src="x.jpg" width="320" height="240" title="abc..." alt="abc..." data-mask="...">

becomes...

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="svgMask" width="320" height="240" viewBox="0 0 320 240">
    	<defs><clipPath id="maskID0"><path d="..." /></clipPath></defs>
    	<title>abc...</title>
    	<desc>abc...</desc>
    	<image clip-path="url(#maskID0)" width="320" height="240" xlink:href="x.jpg" />
    </svg>

Original rectangular image here

Follow: @jim_savage