is there any way to use an svg (img) to crop an image?

Question

As far as I understand (by reading previously posted questions on stackoverflow) that cropping an image using svg coorindates is possible, but it is possible to crop an image by using an svg link? for example: <img src="http://imgh.us/face01.svg">

EDIT: This is what I meant: Thanks!

http://stackoverflow.com/questions/3634663/masking-an-image-with-selectable-text-with-svg-possible — rnrneverdies, Nov 14 '14 at 03:14

score 2 · Accepted Answer · answered Nov 14 '14 at 03:31

Yes. You can do it using the mask-image property. This is supported on all browsers except IE.

.masked {
    -webkit-mask-image: url(http://imgh.us/face01.svg);
    mask-image: url(http://imgh.us/face01.svg);
}

<img src="http://lorempixel.com/400/400" width="400" height="400" class="masked">

Unfortunately you will still need to make other arrangements for IE.

score 0 · Answer 2 · answered Nov 14 '14 at 06:03

You can do it all inside SVG using the image element combined with a SVG mask or a SVG filter and have it work on IE10+ (and all other browsers). Here is the filter example:

<svg width="400px" height="400px"> 
<defs>
<filter id="crop-me" x="0%" y="0%">
  <feImage xlink:href="http://imgh.us/face01.svg" result="area"/>
  <feComposite operator="in" in="SourceGraphic" in2="area"/>
</filter>
</defs>
<image filter="url(#crop-me)" xlink:href="http://lorempixel.com/400/400" x="0" y="0" width="200"  height="300"/>

</svg>

is there any way to use an svg (img) to crop an image?

2 Answers2