Фильтры

Фильтры в SVG позволяют задавать различные стили к SVG-объектам (размыть, поменять цвет, насыщенность, яркость и другие операции).

Фильтры задаются внутри тега <filter>.

<filter>
    <feGaussianBlur stdDeviation="1" />
</filter>

Примеры фильтров:

  1. Чёрно-белая картинка
  2. Добавить размытие на картинке

Также, фильтр можно применять в определённых ситуациях, например при наведении мыши (пример на CSS).

.svg-object:hover {
  filter: url(#smooth);
}