Введение в SVG-фильтры
В настоящее время CSS предоставляет способ применения цветовых эффектов к изображениям (например, яркость, насыщенность, контрастность и т. д.) с помощью свойства filter. Однако возможности CSS-фильтров ограничены. Эффекты, создаваемые с их помощью, обычно применимы к изображениям, но сводятся к манипуляциям с цветом и размытию. Для создания мощных эффектов нам понадобятся другие функции. Такие функции доступны в SVG.
SVG-фильтры добавляют различные эффекты к SVG-графике.
Примитивы фильтров
В SVG каждый элемент <filter> содержит набор дочерних элементов-фильтров. Каждый примитив фильтра выполняет одну базовую графическую операцию над одним или несколькими входными данными, но выдает только один результат. Входные данные указываются в атрибуте in. Результат операции указывается в атрибуте result. Этот результат затем может использоваться как входные данные для других операций. Однако, если атрибут in опущен, примитив по умолчанию использует SourceGraphic для первой операции или результат предыдущего примитива для цепочечных операций. Все примитивы имеют одинаковый префикс: fe (сокращение от «filter effect» — эффект фильтра). Они называются в зависимости от того, что представляет собой элемент или что он делает. Например, примитив, применяющий эффект размытия по Гауссу к исходной графике, называется feGaussianBlur.
Помимо использования результата других примитивов в качестве входных данных, примитив фильтра также может принимать другие входные данные, такие как SourceGraphic (элемент, к которому применяется весь фильтр) и SourceAlpha (то же самое, что SourceGraphic, но эта графика содержит только альфа-канал элемента).
В настоящее время в спецификации SVG Filter определено 17 примитивов фильтров.
Элементы фильтров в SVG
| Элемент | Описание |
|---|---|
<feBlend> | Объединяет два объекта с использованием стандартных режимов наложения, применяемых в графическом ПО. |
<feColorMatrix> | Применяет матричное преобразование. |
<feComponentTransfer> | Выполняет покомпонентное отображение данных. |
<feComposite> | Выполняет послойное (пиксельное) объединение двух входных изображений в пространстве изображения. |
<feConvolveMatrix> | Применяет эффект фильтра матричной свертки. |
<feDiffuseLighting> | Освещает изображение, используя альфа-канал в качестве карты рельефа (bump map). |
<feDisplacementMap> | Использует значения пикселей из входных данных in2 для смещения входного изображения in. |
<feFlood> | Создает прямоугольник, заполненный значениями непрозрачности и цвета из свойств flood-opacity и flood-color. |
<feGaussianBlur> | Применяет размытие по Гауссу к входному изображению. |
<feImage> | Ссылается на внешнюю по отношению к этому элементу графику, которая загружается или рендерится в RGBA-растр, становясь результатом примитива. |
<feMerge> | Объединяет слои входного изображения. |
<feMorphology> | Выполняет «разреживание» или «утолщение». |
<feOffset> | Смещает входное изображение. |
<feSpecularLighting> | Освещает исходную графику, используя альфа-канал в качестве карты рельефа. |
<feTile> | Заполняет целевой прямоугольник повторяющимся паттерном входного изображения. |
<feTurbulence> | Создает изображение с помощью функции турбулентности Перлина. |
<feDropShadow> | Создает эффект падающей тени. |
Пример использования
<svg width="200" height="200">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blur)" />
</svg>Практика
Что позволяет делать SVG-фильтр в HTML?