SVG фильтры

SVG фильтры позволяют добавлять различные графические эффекты SVG графике.

<defs> и <filter>

Все SVG фильтры определяются внутри элемента <defs>. Элемент <defs> это сокращение от английского слова "definitions" (пер. "определения") и содержит определение специальных элементов (таких как фильтры).

Элемент <filter> предназначен для определения SVG фильтра. У элемента <filter> должен быть задан обязательный атрибут id, который идентифицирует фильтр. Графический объект затем указывает на этот фильтр.

Элементы SVG фильтров

В SVG доступны следующие элементы фильтров:

<feBlend> - фильтр для комбинирования изображений
<feColorMatrix> - фильтр для трансформации цветов
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feMerge>
<feMorphology>
<feOffset> - фильтр для создания теней
<feSpecularLighting>
<feTile>
<feTurbulence>
<feDistantLight> - фильтр для освещения
<fePointLight> - фильтр для освещения
<feSpotLight> - фильтр для освещения

С любым элементом SVG можно использовать любое количество фильтров!

В данной главе Учебника по SVG графике мы всего лишь продемонстрируем несколько примеров использования SVG фильтров, чтобы вы смогли себе представить возможности SVG графики.

Эффект размытия

Фильтр <feGaussianBlur>.

Пример

Используем элемент <feGaussianBlur>, чтобы создать эффект размытия:

SVG код:


<svg height="110" width="110">
   <defs>
     <filter id="f0" x="0" y="0">
       <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
     </filter>
   </defs>
   <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f0)" />
</svg>

Объяснение:

Атрибут id элемента <filter> определяет уникальное имя фильтра
Эффект размытия создается при помощи элемента <feGaussianBlur>
Часть in="SourceGraphic" определяет, что эффект создается для всего элемента
Атрибут stdDeviation определяет размер размытия
Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром "f1"

Создание тени (<feOffset>)

Для создания эффекта тени используется элемент <feOffset>. Идея состоит в том, что берется графический объект SVG (изображение или графический элемент) и немного сдвигается в XY плоскостях.

Пример

Сначала сдвигается прямоугольник (при помощи элемента <feOffset>), а затем оригинальный прямоугольник накладывается на сдвинутое изображение (при помощи элемента <feBlend>):

SVG код:


<svg height="120" width="120">
   <defs>
     <filter id="f1" x="0" y="0" width="200%" height="200%">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
     </filter>
   </defs>
   <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

Объяснение:

Атрибут id элемента <filter> определяет уникальное имя фильтра
Атрибут filter элемента <rect> связывает ссылкой элемент с фильтром "f1"

Теперь сдвинутое изображение делаем размытым (при помощи элемента <feGaussianBlur>):

SVG код:


<svg height="140" width="140">
   <defs>
     <filter id="f2" x="0" y="0" width="200%" height="200%">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)" />
</svg>

Объяснение:

Атрибут stdDeviation элемента <feGaussianBlur> определяет размер размытия

Теперь делаем тень черной:

SVG код:


<svg height="140" width="140">
   <defs>
     <filter id="f3" x="0" y="0" width="200%" height="200%">
       <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>

Объяснение:

Значение атрибута in элемента <feOffset> изменено на "SourceAlpha", которое использует альфа-канал вместо всего RGBA набора пикселя для создания размытия

Теперь обработаем тень как цвет:

SVG код:


<svg height="140" width="140">
   <defs>
     <filter id="f4" x="0" y="0" width="200%" height="200%">
       <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
       <feColorMatrix result="matrixOut" in="offOut" type="matrix"
       values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
       <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
   </defs>
   <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>

Объяснение:

Фильтр <feColorMatrix> используется для трансформации цветов сдвинутого изображения в сторону черного цвета. Три значения '0.2' в матрице умножаются на значения красного, зеленого и синего каналов. Уменьшение их значений сдвигает цвет в сторону черного (значение черного цвета = 0)