Добавление тени к растровой картинке средствами svg
Вопрос появился в комментариях, я счёл, что ответ на него будет полезен и оформляю отдельным ответом. Тем более, что тут будет несколько иная техника реализации.
Для обрезания изображения используется маска. Для придания формы
маске используется полигон.
<mask id="poly">
<polygon id="Logo" fill="white" points="0 0, 100 0, 100 83, 70 100, 0 100"
stroke="none" />
</mask>
Чтобы маска стала прозрачной она закрашивается в белый цвет fill="white"
Для полупрозрачной маски fill="grey"
, полностью непрозрачно - fill="black"
Для тени применяется тот же полигон со смещением, и размытием краев
фильтром Гаусса.
<filter id="filtershadow" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
</filter>
ниже полный код:
<svg width="125" height="125" viewBox="0 0 125 125" >
<defs>
<filter id="filtershadow" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
</filter>
<mask id="poly">
<polygon id="Logo" fill="white" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="none" stroke-width="1"/>
</mask>
</defs>
<g id="pic">
<polygon id="Logo" transform="translate(4 4)" fill="black" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="none" stroke-width="1" filter="url(#filtershadow)"/>
<image x="0" y="0" width="100" height="100"
xlink:href="http://placeimg.com/100/100/any"
mask="url(#poly)"/>
</g>
</svg>
Несколько изображений с тенью
Применяется приём повторного использования с командой <use>
Блок отвечающий за отрисовку изображения и размытой тени обертывается тегом группы <g id="pic">..</g>
, а затем повторно используется с указанием смещения объекта клона:
<use xlink:href="#pic" x="20" y="20"> </use>
<svg width="250" height="250" viewBox="0 0 250 250">
<defs>
<filter id="filtershadow" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
</filter>
<mask id="poly">
<polygon id="Logo" fill="white" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="white" stroke-width="4"/>
</mask>
</defs>
<g id="pic">
<polygon id="Logo" transform="translate(4 4)" fill="black" points="0 0, 100 0, 100 83, 70 100, 0 100" stroke="grey" stroke-width="2" filter="url(#filtershadow)"/>
<image x="0" y="0" width="100" height="100" xlink:href="http://placeimg.com/100/100/any"
mask="url(#poly)"/>
</g>
<use xlink:href="#pic" x="20" y="20"/>
<use xlink:href="#pic" x="40" y="40"/>
</svg>