[Перевод] SVG фильтры 101

Это первая статья в серии об SVG фильтрах. Это руководство поможет понять, что это такое, и покажет, как использовать их для создания собственных визуальных эффектов.

CSS в настоящее время предоставляет нам способ применения цветовых эффектов к изображениям, таких как насыщенность, яркость и контрастность, среди других эффектов, с помощью свойства filter и его функций, поставляющихся с ним.

Теперь у нас есть 11 функций фильтра в CSS, которые выполняют ряд эффектов от размытия до изменения цветовой контрастности и насыщенности и многое другое. Подробную информацию об этом можно посмотреть в справочнике CSS.

Хотя мощные и очень удобные, CSS фильтры также очень ограничены. Эффекты, которые мы можем создать с их помощью, часто применимы к изображениям и ограничиваются цветовыми манипуляциями и простым размытием. Таким образом, для создания более мощных эффектов, которые мы можем применить к более широкому ряду элементов, нам понадобится более широкий ассортимент функций. Эти функции доступны сегодня, и доступны уже более десяти лет в SVG. В этой статье, которая является первой в серии о SVG-фильтрах, вы узнаете о функциях SVG-фильтров, известных как “примитивы”, и о том, как их использовать.

Источник: Уроки CSS на Хабрахабре