svg: clip-path

dabblet.css

/**
 * svg: clip-path
 */
.outline {
 	fill: none;
 	stroke: pink;
 	stroke-width: 2;
 	transition: stroke-width, stroke 0.6s;
 }
image:hover + .outline {
	stroke: red;
 	stroke-width: 3;
 }

dabblet.html

<svg version="1.1"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" 
 	width="600" height="600" viewBox="0 0 600 600">
 <defs>
 	<linearGradient id="glass" x1="20%" y1="0" x2="80%" y2="100%">
 		<stop offset="5%" stop-color="white" stop-opacity="0.3" />
 		<stop offset="100%" stop-color="black" stop-opacity="0.3" />
 	</linearGradient>
 	
 	<symbol id="talk">
 		<path d="M 92.8125,75 119.28125,10 92.71875,25.34375 C 84.196086,10.600143 68.254081,0.6875 50,0.6875 c -27.228694,0 -49.28125,22.052558 -49.28125,49.28125 0,27.228692 22.052556,49.3125 49.28125,49.3125 18.240139,0 34.191281,-9.900019 42.71875,-24.625" />
 	</symbol>
 	
 	<clipPath id="talk-mask">
 		<path d="M 92.8125,75 119.28125,10 92.71875,25.34375 C 84.196086,10.600143 68.254081,0.6875 50,0.6875 c -27.228694,0 -49.28125,22.052558 -49.28125,49.28125 0,27.228692 22.052556,49.3125 49.28125,49.3125 18.240139,0 34.191281,-9.900019 42.71875,-24.625" />
	</clipPath>

 </defs>

<svg x="0" y="0">
	<use x="5" y="5" width="120" height="100" xlink:href="#talk" />
	<rect x="0" y="0" width="130" height="110" fill="url(#glass)" stroke="black" rx="10" stroke-width="1" />
</svg>

<svg class="item" x="150" y="0">
	<image 
	 	width="190" height="130"
	 	clip-path="url(#talk-mask)"
		xlink:href="http://www.stevebuffoni.com/wp-content/uploads/2009/12/pattern-family-01-single1.jpg" />
	<use class="outline" width="120" height="100" xlink:href="#talk" />
</svg>

		
	


</svg>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}