Еще SVG-фильтры обработки изображений

Покажем несколько примеров svg-фильтров, позволяющих обрабатывать изображения. Для начала - исходное изображение чайника без применения фильтров.

А теперь приведем примеры изображений обработанных фильтрами и коды этих фильтров.

Пример 1. Классическая сепия.

Ниже код фильтра сепии:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 900 600"> <defs> <filter id="myFilter1"> <fecolormatrix type="matrix" values="0.343 0.669 0.119 0 0 0.249 0.626 0.130 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0" /> </defs> <image filter="url(#myFilter1)" xlink:href="/picture/grafika/chaynik.jpg" width="100%" height="100%" /> </svg>

Пример 2. Комбинация нескольких фильтров - выделение контура.

Код фильтра приведен ниже:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 900 600"> <defs> <filter id="myFilter2"> <fecolormatrix type="saturate" values="0" /> <feColorMatrix type="luminanceToAlpha" /> <feConvolveMatrix order="5" kernelMatrix=" 1 1 1 1 1 1 -2 -2 -2 1 1 -2 2 -2 1 1 -2 -2 -2 1 1 1 1 1 1"></feConvolveMatrix> </defs> <image filter="url(#myFilter2)" xlink:href="/picture/grafika/chaynik.jpg" width="100%" height="100%" /> </svg> Пример 3. Вариация предыдущего фильтра .

Полный код применения фильтра:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 900 600"> <defs> <filter id="myFilter3"> <fecolormatrix type="saturate" values="0" /> <feConvolveMatrix order="5" kernelMatrix=" 1 1 1 1 1 1 -2 -2 -2 1 0 0 2 0 0 1 -2 -2 -2 1 1 1 1 1 1"></feConvolveMatrix> </defs> <image filter="url(#myFilter3)" xlink:href="/picture/grafika/chaynik.jpg" width="100%" height="100%" /> </svg>