Simple Image Masking SVG Technique without Photoshop
by muthu[ Edit ] 2014-02-27 12:00:12
Simple SVG Image Masking Technique
------------------------------------------------ DEMO --------------------------------------------------
---------------------------------------------HTML5 & SVG ---------------------------------------------
<h2>Masking</h2>
<h3>Luminance Mask</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="213">
<image x="5" y="0" xlink:href="mum_baby.jpg" width="284" height="213"/>
<rect x="295" y="1" width="282" height="211" fill="black" stroke="black"/>
<ellipse cx="441" cy="101.5" rx="113.6" ry="85.2" fill="white" filter="url(#filter2)"/>
</svg>
<h3>Alpha Mask</h3>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="578" height="213">
<image x="5" y="0" xlink:href="mum_baby.jpg" width="284" height="213"/>
<rect x="295" y="1" width="282" height="211" fill="none" stroke="black"/>
<ellipse cx="441" cy="101.5" rx="113.6" ry="85.2" fill="black" filter="url(#filter2)"/>
</svg>
<br>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="568" height="426">
<mask id="mask1">
<ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter2)"/>
</mask>
<image xlink:href="mum_baby.jpg" width="568" height="426" mask="url(#mask1)"/>
</svg>
<svg width="0" height="0">
<defs>
<filter id="filter2">
<feGaussianBlur stdDeviation="10"/>
</filter>
<filter id="filter">
<feGaussianBlur stdDeviation="0.03"/>
</filter>
<filter id="filter2">
<feGaussianBlur stdDeviation="5"/>
</filter>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
<circle cx=".5" cy=".5" r=".35" fill="white" />
</mask>
</defs>
</svg>
----------------------------------------------- IMAGES -----------------------------------------------
