Как сымитировать фильтры слоёв в Inkscape

В этом уроке рассказывается о трюке, с помощью которого в Inkscape можно создать подобие фильтров слоёв.

Для начала просто необходимо напомнить, что Inkscape — это такой редактор векторной графики из той же серии, что и Adobe Illustrator, Corel DRAW, Xara Xtreme, ACD Canvas, ну и так далее. Редактор замечательный, но не без приколов.

Этот урок, рассчитанный на использование версии 0.47, относится к серии «Теперь я знаю, зачем в Inkscape нужен встроенный редактор XML-дерева документа, и будь я проклят, если ещё раз туда когда-нибудь полезу!».

Лежащая в его основе идея подана пользователем kelan на сайте inkscapeforum.com и логически продолжена там же бесподобным Иваном Луэтом. В этом уроке она лишь попросту полнее раскрыта и должным образом проиллюстрирована. Так что хвалить — там, а ругать — здесь :)

Как известно многим пользователям программы, в качестве собственного формата Inkscape использует слегка доработанный SVG с дополнительными элементами. В частности, слои в Inkscape на самом деле являются группами с атрибутом inkscape:groupmode, значение которого равно layer. При этом режимы смешивания слоёв реализованы при помощи фильтров SVG, состоящих из одного-единственного примитива — feBlend.

Что может нам дать знание этого? Возможность создавать фильтры слоёв, благодаря которым ко всем объектам слоя с фильтром будет единообразно применяться некий фильтр.

Для начала давайте посмотрим, как это работает. Создадим два слоя: «без фильтра» и «с фильтром» и назначим слою «с фильтром» режим смешивания.

Нажимаем Ctrl+Shift+X для открытия редактора XML, раскрываем ветвь определения (svg:defs) и обнаруживаем там элемент фильтра SVG с примитивом feBlend:

Теперь смотрим, как в элементе слоя записано обращение к фильтру:

Итак, нам всего лишь нужно создать нужный фильтр, а затем добавить в слой атрибут style со значением «filter:url(#filter14319)», указывающим на идентификатор созданного фильтра. Пробуем? Пробуем.

Меняем в слое режим смешивания обратно на нормальный. Неиспользуемый фильтр будет автоматически удалён. В этом же слое создаём новый объект, скажем, вот такой скруглённый прямоугольник:

Применяем к нему некоторый фильтр. Для примера возьмём «Плавный шейдер» из группы «Нереалистичные 3D-шейдеры».

Смотрим в редакторе XML на получившийся фильтр, копируем его идентификатор в буфер обмена.

Переходим к ветви слоя и добавляем новый атрибут style, указывая в значении идентификатор созданного фильтра.

Нажимаем кнопку «Установить».

Если мы сейчас посмотрим на рисунок, то увидим, что наш прямоугольник скукожился. Это произошло потому, что фильтр оказался применён к нему дважды: помните про слои, которые на самом деле являются группами, в которые автоматически входят находящиеся в них объекты?

Поэтому недолго думая выделяем объект и в меню «Фильтры» выбираем пункт «Снять фильтры». Объект приобретёт прежний вид:

А теперь выберем любой инструмент рисования и нарисуем что-нибудь в этом слое:

Вуаля — все новые объекты имеют общий фильтр SVG!

Понятно, что эти трюки с произвольными фигурами — мелкое хулиганство, от которого нет никакого практического толку. Но вот вполне реальный пример: нужно сделать макет сайта, по которому раскидана серия объектов с заведомо одинаковой тенью. В этом случае мы делаем очень простую вещь:

• Если тень повторяет форму фигуры, от которой она отбрасывается, создаём связанную втяжку из каждого исходного объекта.
• Создаём остальные фигуры, которые будут формировать тень.
• Все связанные втяжки и произвольные фигуры для теней помещаем на отдельный нижний слой.
• Повторяем для этого слоя описанную выше процедуру.

Теперь для регулирования тени достаточно будет открыть редактор фильтров и менять в нём значения смещения и размывания, чтобы тень одновременно менялась для всех связанных втяжек.

Мечта вслух номер один: вот бы ещё так радиус скругления прямоугольников синхронизировать!

И последний момент, который как раз был раскрыт Иваном. Что произойдёт, если вы измените режим смешивания такого слоя с фильтром? Правильно — будет создан новый фильтр, содержащий примитив feBlend, и атрибут нашего слоя перепривяжется к нему, потеряв кропотливо созданный нами фильтр.

Поэтому режим смешивания в отфильтрованном слое можно менять только через редактор фильтров. Как именно? Давайте ещё раз посмотрим на вторую иллюстрацию и отметим для себя, что на вход фильтра подаётся фоновое изображение. Остаётся лишь добавить в конец стопки примитивов «Смешивание» (feBlend) и соединить второй вход с фоновым изображением (первый по умолчанию будет соединён с выходом предыдущего примитива).

Мечта вслух номер два: вот бы разработчики Inkscape придумали для всего этого красивый и удобный графический интерфейс!