Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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>
@Haprog

This comment has been minimized.

Copy link

commented Sep 11, 2014

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"/>.

@shshaw

This comment has been minimized.

Copy link

commented Sep 11, 2014

@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?
@shshaw

This comment has been minimized.

Copy link

commented Sep 11, 2014

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.

@mihnutzen

This comment has been minimized.

Copy link

commented Sep 12, 2014

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

@ctf0

This comment has been minimized.

Copy link

commented Sep 14, 2014

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

@peterhry

This comment has been minimized.

Copy link
Owner Author

commented Sep 15, 2014

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.

@ctf0

This comment has been minimized.

Copy link

commented Sep 16, 2014

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

@julia-r

This comment has been minimized.

Copy link

commented Nov 5, 2014

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".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.