Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:
В последней статье этой серии автор поделится списком полезных ресурсов для желающих узнать об эффектах SVG фильтрации побольше.
В течение шести недель мы опубликовали шесть статей, посвященных различным эффектам SVG-фильтров и примитивам фильтров, которые использовались для их создания.
Несмотря на то, что мы охватили много областей, я могу с уверенностью сказать, что мы едва поцарапали поверхность того, что возможно с фильтрами SVG. В этой короткой статье я хочу поделиться некоторыми из моих любимых ресурсов, чтобы узнать больше о фильтрах SVG.
Чтобы получить еще более широкое представление о невероятных возможностях, которые SVG фильтры приносят в интернет, я настоятельно рекомендую посмотреть Codepen профиль Лукаса Беббера. Лукас это парень, который создал знаменитый Gooey Effect (липкий эффект), используя SVG-фильтры. Его эксперименты включают в себя еще более впечатляющие эффекты, которые гарантированно вдохновят вас и порадуют возможностями, которые SVG привносит в интернет.
Michael Mullany был моим переходящим ресурсом для учебы, когда я впервые погрузилась в мир SVG фильтров. Я многому научилась по его статье, его вкладу в проникновение SVG-фильтров в документацию веб-платформы и его экспериментам на Codepen, которые являются буквально золотым прииском SVG-фильтров! Посмотрите этот странный логотип, полностью воссозданный с помощью фильтров SVG:
Дэвид Дейли имеет фантастическое введение в SVG-фильтры, в котором он показывает широкий спектр возможных эффектов, которые он создал с feTurbulence, включая, но не ограничиваясь тяжелыми облаками и боке-подобными эффектами.
Ниже приведены результаты корректировки результатов feTurbulence другими примитивами фильтра. Регулировка и насыщение цвета выполнялась с помощью feColorMatrix, а усиление — при помощи feConvolveMatrix.
Рис_1. Примеры того, что можно сделать при помощи сгенерированного шума.
Дирк Вебер тоже создал некоторые хорошие эффекты SVG фильтров, которые лично меня многому научили. Он поделился своими экспериментами в статье на Smashing Magazine более трех лет назад! Он делится различными текстовыми эффектами, созданными с помощью SVG фильтров. Вы найдете примеры гранж-текстуры, выступающего и объемного текста, эффекта водяных брызг, используя feTurbulence, и многие другие. Дирк использует два примитива фильтра в своих экспериментах, которые мы не затрагивали в своей серии:
Рис_2. Некоторые из текстовых эффектов, которые Дирк Вебер рассматривает в своей статье в Smashing Magazine.
SVG-эксперименты Yoksel на Codepen также являются отличным ресурсом для изучения. Она даже создала этот фантастический визуальный инструмент SVG фильтрации, который вы можете использовать для создания эффектов и копировать-вставлять сгенерированный код для использования в собственных проектах.
Рис_3. Визуальный редактор фильтров SVG от Yoksel.
И последнее, но не менее важное: вы можете найти все, что нужно знать об элементах, свойствах и атрибутах фильтров SVG в спецификации SVG фильтров.
SVG в настоящее время намного мощнее CSS, когда дело доходит до создания графических эффектов для интернета. И существует несколько причин, почему создание визуальных эффектов в интернете лучше, чем импорт их в виде изображений из графических редакторов, таких как Photoshop или Illustrator:
Спасибо, что присоединились ко мне в этом путешествии по SVG фильтрации за последние несколько недель. Я надеюсь, что эта серия вдохновила вас начать экспериментировать с SVG фильтрами и использовать их чаще. Существует множество эффектов, которые вы сможете создать в порядке эксперимента, но для фильтров есть и много практических применений.
Я надеюсь, что эта серия дала вам представление о том, что уже возможно делать при помощи SVG фильтрации, что она разбудила ваше воображение и подтолкнула на создание своих собственных практических вариантов применения.
Наконец, я надеюсь, вам понравилась эта серия и, самое главное, вы нашли ее полезной. Спасибо вам за потраченное время.
К сожалению, не доступен сервер mySQL