SVG-фильтры – Размытие по Гауссу, эффекты тени и освещения, цветные фильтры

Что такое SVG-фильтр?

Фильтры SVG (SVG Filters) широко используются для добавления специальных эффектов к растровым или векторным изображениям. Эффекты фильтра – это способ обработки визуального элемента перед его отображением в документе. Другими словами, это набор операций, применяемых к изображению, которые могут создавать самые разнообразные цветовые и световые эффекты, размытие, деформацию, генерацию шума и текстур и т. д. SVG-фильтры способны создавать сложные эффекты в браузере и имеют возможность использования в различных проектах. Их поддерживают практически все современные браузеры, в том числе мобильные.

Фильтр определяется элементом <filter>, который устанавливается внутри элемента <defs>. Он никогда не отображается сам по себе и концептуально описывается как элемент, включающий в себя дочерние элементы – примитивы фильтра. Элемент <filter> имеет набор атрибутов, вот некоторые из них: x, y, width, height, in, result и т. д. Каждый примитив фильтра выполняет одну графическую операцию, дающую видимый результат. Преимущество фильтров SVG – возможность комбинировать несколько типов. Результаты, полученные после применения одного фильтра, могут быть источником изображения для другого фильтра.

В статьях этого раздела мы покажем вам, как создавать фильтры в коде SVG, и опишем примеры C# реализации фильтров SVG с использованием библиотеки Aspose.SVG for .NET.

Доступны следующие статьи:

• Размытие по Гауссу – В этой статье вы узнаете, как написать код SVG для создания фильтра размытия по Гауссу, а также рассмотрите подробные примеры C# использования класса SVGFEGaussianBlurElement для применения эффекта размытия по Гауссу к элементам SVG и растровым изображениям.

• Эффект тени – Узнайте, как писать код SVG и создавать эффект тени с помощью API Aspose.SVG. Рассмотрим, как применить эффект тени к фигурам и тексту SVG.

• Эффекты освещения SVG – Узнайте, как комбинировать несколько фильтров для создания и управления эффектами освещения SVG с помощью API Aspose.SVG for .NET.

• Цветные фильтры – Узнайте о примитиве фильтра feColorMatrix как об одном из основных цветовых фильтров. Разберите фрагменты кода C#, которые показывают, как использовать операцию насыщения примитива фильтра feColorMatrix.

Дополнительную информацию о примитивах фильтров вы найдете в W3C Filter Effects Module.

Если вам интересно, как написать код SVG для создания фильтров SVG, размытия по Гауссу, эффектов тени, эффектов освещения или линейного и радиального градиента, посетите статью Фильтры и градиенты SVG.