-
-
Save peterhry/afac4906f2b330509fc7 to your computer and use it in GitHub Desktop.
<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 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
andwidth
/height
attributes onimage
- 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".
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"/>
.