Как сымитировать фильтры слоёв в 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, указывая в значении идентификатор созданного фильтра.

Добавляем атрибут style

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

Атрибут style добавлен

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

Прямогольник с двойным фильтром

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

Восстановленный прямогольник

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

Произвольные объекты в слое с фильтром

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

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

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

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

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

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

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

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

1 Kомментарий

  1. Понимаю, что статье уже 6 лет, но…
    Воз и ныне там, поэтому думаю, что можно и продолжить обсуждение.

    Интересует обратная задача — как применить режимы наложения не к слоям, а к отдельным объектам?
    Частично на этот вопрос могу ответить сам: открыть редактор фильтров и применить эффект смешивания («Blend» в англоязычном интерфейсе). Способ значительно менее удобный, чем выпадающий список с режимами смешивания в диалоге слоев, однако даже этот неудобный способ толком не работает. Подробности здесь: http://www.inkscapeforum.com/viewtopic.php?t=6794

    Итого, присоединяюсь к мысли: «вот бы разработчики Inkscape придумали для всего этого красивый и удобный графический интерфейс!»
    … и добавляю к ней: «… да еще исправили бы все баги».

1 Trackback / Pingback

  1. Чернильница №48, интервью с разработчикам Inkscape | Мультимедиа в Linux

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*