gistfile1.html

<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 560 1388">
  <defs>
    <mask id="canTopMask">
      <image width="560" height="1388" xlink:href="img/can-top-alpha.png"></image>
    </mask>
  </defs>
  <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>

You can simplify file management by inlining the PNG and JPG as data URIs within the SVG. Then the SVG will also work as an external file like <img src="image.svg"/>.

@Haprog Smart idea. Would be great to have a grunt or equivalent process to automate this:

• Convert JPEG & PNG to Data URI
• Generate SVG with proper viewbox and width/height attributes on image
• Create a PNG fallback for browsers without SVG support?

I wrote a basic tool to do this: http://codepen.io/shshaw/full/tKpdl

Works in the latest versions of Chrome, Firefox and Safari. Feel free to improve or adapt.

you can use a Path instead of a png mask . just the inner path is required (outline of the image) . and this way you can save the extra request http://codepen.io/Mihnutzen/pen/AqDFf

am kinda new into this ,but cant we use the (css clip-path) instead ?

At this time IE doesn’t support CSS clip-path. The other benefit of using an alpha mask is that you can have translucent areas.

i just noticed that as mentioned in this article ,thanx for the headsup

This works very well for me. But when I uses the jquery show() and hide() functions on it, the masking does not work sometimes. Does anyone have an idea why this might be? The same happens when I add and remove a class with "display: none".