WebDesignMagazine.ru – Журнал о веб-дизайне

Искусство SVG фильтра

0

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

3-splash-preview-opt

Эффект шрифта liquid (демо)

Отображение текста в HTML

Конечно, мы можем выбрать из тысяч веб-шрифтов и эффектов и использовать CSS для шрифта, некоторые с широкой поддержкой браузера (например, падающие тени и 3D-преобразования) и другие, которые являются экспериментальными (как background-clip и text-stroke), но в основном это. Если мы хотим действительно иметь незаурядную типографику на сайте, мы, как правило, вставляем ее в виде изображения.

2-woodtype-preview-opt

Woodtype, стиль, созданный с SVG фильтрами (демо)

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

Было бы замечательно, если бы мы моделировать буквы так же, как мы обычно моделируем текст с помощью CSS. Применение границ с различными цветами? Добавить внутренние и внешние наклоны? Добавить узоры, текстуры и 3D-эффекты?  Использовать несколько цветов и искаженный шрифт?

Сложные SVG фильтры: CSS для шрифта

Большинство уже возможно: хитрость заключается в том, чтобы дать свободу магии SVG фильтров. SVG фильтры (и CSS фильтры), как правило, считаются способом оживить растровые изображения с помощью эффектов размытия или манипуляций с цветом. SVG фильтр может быть набором директив, чтобы добавить еще один визуальный слой поверх обычного текста. С помощью свойства filter CSS, эти эффекты могут быть использованы за пределами SVG и применены непосредственно к содержимому HTML.

4-west-preview-opt

3D эффект vintage (демо)

Говоря о фильтрах CSS и SVG можно немного запутаться: SVG фильтры обозначены в SVG элементе filter и, как правило, применяется в SVG документе. CSS фильтры могут быть применены к любому элементу HTML с помощью свойства filter. CSS фильтры, такие как blur, contrast и hue-rotate являются копиями для часто используемых эффектов SVG фильтров. Кроме того, спецификация позволяет ссылаться на определенные пользователем фильтры из SVG. Еще один момент путаницы – собственный тег -ms- filter, который устарел в Internet Explorer (IE) 9, и был удален в IE 10.

Эта статья в основном имеет дело с первым случаем: SVG фильтры, используемые в SVG документе, встроенном на HTML странице, но позже мы поэкспериментируем с SVG фильтрами, применяемыми к содержимому HTML.

5-imagefill-preview-opt

Использование feImage для заполнения текста с повторяющимся узором (демо)

Иллюстрации в этой статье взяты из демо эффектов SVG фильтра, применяемого к тексту. Нажмите на любой из них, чтобы увидеть оригинал. Я называю их “сложные” SVG фильтры, потому что они созданы путем объединения нескольких эффектов. И хотя вид букв значительно изменился, текст все также доступен и может быть скопирован. Так как SVG фильтры поддерживаются в каждом современном браузере, эти эффекты могут отображаться в браузерах, начиная с IE 10.

6-sketchy-preview-opt

Эффект sketchy (демо)

Понять SVG фильтры – сложная задача. Даже простые эффекты, такие как тени, требуют сложного, подробного синтаксиса. Некоторые фильтры, такие как feColorMatrix и feComposite, трудно понять без глубокого понимания математики и теории цвета. Эта статья не будет уроком по изучению SVG фильтров. Вместо этого я опишу набор стандартных блоков для достижения определенных эффектов, но объяснений будет мало, так как я буду ориентироваться на документирование отдельных шагов, которые составляют эффект. Вы в основном будете читать о “как”.

7-pop-preview-opt

Некоторые вариации эффектов poster (демо)

Создание фильтра

Ниже сложный SVG фильтр в действии. Этот фильтр состоит из эффекта старого текста, и мы используем это для пошагового руководства:

8-grungy-preview-opt

Рисунок grungy wall (демо)

Давайте разобьем этот эффект на блоки:

  • зеленый текст;
  • красная экструзия;
  • текст и экструзия разделены прозрачным пробелом;
  • текст выглядит старым и шероховатым.

Наш эффект SVG фильтра будет создан путем объединения нескольких небольших модулей, так называемых “примитивы фильтра”. Каждый блок создан из набора одного или нескольких примитивов, которые затем объединяются в единый продукт. Этот процесс легче понять в виде графика:

9-filtergraph-preview-opt

Этапы процесса, которые создают сложный фильтр.

Добавление фильтра

Мы начнем с шаблонного SVG, который содержит пустой фильтр и текст:

Элемент фильтра

Мы начнем с тега filter. Между его началом и концом, мы вставим все правила трансформации, цвета, растровой манипуляции и т.д. Фильтр может быть применен к цели в качестве атрибута или с помощью CSS. Цель, как правило, это элемент в SVG, но позже мы узнаем о еще одном варианте: применение SVG фильтров к HTML элементам.

Атрибуты существуют для контроля элемента filter:

  • х и у позиции (по умолчанию -10%);
  • ширина и высота (по умолчанию 120%);
  • ID, который будет необходим позже;
  • filterRes, что предопределяет разрешение (устаревший со спецификацией “Filter Effects Module Level 1“);
  • relative (objectBoundingBox по умолчанию) или absolute (userSpaceOnUse) filterUnits.

Немного о примитивах фильтра

Как мы узнали, примитивы фильтра являются строительными блоками фильтров SVG. Чтобы иметь какой-нибудь эффект, SVG фильтр должен содержать по меньшей мере один примитив. Примитив, как правило, имеет один или два результата (in, in2) и один результат (result). Примитивы существуют для размытия, движения, заполнения, смешения или искажения.

Спецификация позволяет нам взять несколько атрибутов из фильтрованных элементов в качестве источника ввода. Так как большинство из них не надежны во всех браузерах, в этой статье мы будем придерживаться SourceGraphic (элемент нефильтрованного источника с цветами, строками, образцами заполнения и т.д.) и SourceAlpha (непрозрачная область альфа-канала), которые имеют очень хорошую поддержку браузера.

Как уплотнить вводимый текст

Первый примитив фильтра, с которым мы столкнемся – feMorphology, примитив предназначен для расширения (operator=”dilate”) или тонкий (operator=”erode”) вход – поэтому, идеально подходит для создания контуров и границ.

Вот как мы бы уплотним SourceAlpha четырьмя пикселями:

10-walkthrough_01-preview-opt

Текст, уплотненный четырьмя пикселями

Создание экструзии

Следующим шагом является создание 3D экструзии результата из последнего примитива. Встречайте feConvolveMatrix. Этот примитив фильтра является одним из самых могущественных и сложных. Его основной целью является то, чтобы вы могли создать свой собственный фильтр. Короче говоря, вы должны определить растр пиксель (матрица ядра), что изменяет пиксель в соответствии со значениями соседних пикселей. Таким образом, становится возможным создавать свои собственные эффекты фильтра, такие как размытие или резкость, или создать экструзию.

Вот feConvolveMatrix для создания 45-градусной, 3-пиксельной глубокий экструзии. Атрибут order определяет ширину и высоту, чтобы примитив знал применять матрицу 3×3 или 9×1:

11-walkthrough_02-preview-opt

Использование feConvolveMatrix для создания экструзии

Помните, что IE 11 и Microsoft Edge (в момент написания статьи) не могут справиться с матрицами более 8×8 пикселей, и они не очень хорошо справляются с многострочной матрицей, поэтому удаление всего “возврата каретки” перед развертыванием этого код будет лучшим, что можно сделать.

Примитив будет применен в равной степени слева, сверху, справа и снизу. Так как мы хотим получить экструзию только справа и снизу, мы должны сместить результат. Два атрибута определяют начало эффекта, targetX и targetY. К сожалению, IE интерпретирует их вразрез со всеми другими браузерами. Поэтому, чтобы сохранить совместимость во всех браузерах, мы отрегулируем смещение другим примитивом фильтра, feOffset.

Смещение

Как следует из названия, feOffset принимает ввод и смещает его:

Обрезка экструдированной части

feComposite является одним из немногих примитивов фильтра, который принимает два ввода. Затем он объединяет их, применяя метод сложения двух изображений, называемый Porter-Duff compositing. feComposite может быть использован, чтобы замаскировать или вырезать элементы. Вот как вычесть вывод feMorphology из вывода feConvolveMatrix:

12-walkthrough_03-preview-opt

Обрезка уплотненного первого прмитива из экструзии

Окраска экструзии

Это двухступенчатый процесс:

Во-первых, мы создаем цветную область с feFlood. Этот примитив просто выпустит прямоугольник размером с область фильтра в цвете, который мы обозначим:

Мы вырежем часть прозрачного BEVEL_30 с еще одним feComposite:

13-walkthrough_04-preview-opt

Раскраска экструзии

Смешивание наклона и графики в один вывод

feMerge делает это, смешивает наклон и графику в один вывод:

14-walkthrough_05-preview-opt

Наклон и графика

Выглядит очень похоже на желаемый результат. Давайте сделаем это немного более реалистичным, придав старый вид.

Добавление фрактальной текстуры

feTurbulence является одним из самых забавных примитивов. Тем не менее, он может расплавить ваш многоядерный процессор и сделать так, что ваши вентиляторы будут вращаться как турбореактивные двигатели Боинга 747. Используйте его с умом, особенно на мобильных устройствах, потому что это примитив может быть действительно, действительно плохо повлиять на производительность рендеринга.

Как feFlood, feTurbulence выводит заполненный прямоугольник, но использует шумную, неструктурированную текстуру.

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

По умолчанию, feTurbulence выводит цветную текстуру – не то, что мы хотим. Нам нужна серая альфа-карта; и немного контраста тоже. Давайте запустим его через feColorMatrix, чтобы увеличить контраст и в то же время преобразовать его в оттенки серого:

15-walkthrough_06-preview-opt

Добавление фрактальной текстуры

Последнее, что нужно сделать, это сложить текстурированную альфа в формы букв с нашим feComposite:

Сделано!

Как применять SVG фильтры к SVG содержимому

Есть два способа применения фильтров SVG к текстовому элементу SVG:

1. С помощью CSS

2. С помощью атрибута

Применение SVG фильтров к HTML содержимому

Одной из самых интересных особенностей фильтров является то, что возможно встроить SVG, определить в нем фильтр, а затем применить его к любому HTML элементу с CSS:

На момент написания, Blink и WebKit требуют, чтобы это было добавлено:

В теории звучит легко, на практике сложнее:

  • SVG фильтры в HTML содержимом в настоящее время поддерживаются в WebKit, Firefox и Blink. IE и Microsoft Edge покажут нефильтрованный элемент, поэтому проверьте вид умолчанию.
  • SVG, который содержит фильтр не может быть установлен на display: none. Тем не менее, вы можете установить его visibility: hidden.
  • Иногда размер SVG имеет прямое влияние на то, сколько из целевого элемента фильтруется.
  • Я сказал, что WebKit, Blink и Firefox понимают этот синтаксис? Сафари (и его младший брат мобильный Safari) – частный случай. Вы можете получить большинство из этих демо, работающих в Safari, но это очень мучительный процесс. На момент написания, я не могу рекомендовать использование SVG фильтров в содержании HTML в текущей версии Safari (8.0.6). Результаты непредсказуемы, и техника не пуленепробиваема. А если Safari не удастся Сафари предоставить фильтр для какой-то причине, он не отобразит HTML цель вообще, а это кошмар доступности. Как правило, вы увеличиваете свои шансы на то, что Safari отобразит фильтр с абсолютным позиционированием и фиксированным размером вашей цели. В качестве доказательства концепции, я создал эффект фильтра “pop”, оптимизированный под настольный Safari. Применение feImage к HTML элементам, кажется невозможным в Safari.

Предыдущие демо, примененные к HTML содержимому

В этих демо, обертки устанавливаются на contenteditable = “true для удобного редактирования текста. (Помните, что эти демо являются экспериментальными и не будут работать в Safari, IE или Edge.)

Структурирование фильтра

В зависимости от его сложности, фильтр может быстро стать чем-то запутанным. Во время авторинга, вы можете добавлять и удалять правила, изменять их порядок и значения, и вскоре вы растеряетесь. Вот некоторые правила, которые я составил для себя, которые могут мне помочь отслеживать то, что происходит. Люди и проекты отличаются друг от друга; то, что кажется логичным и структурированным для меня может быть хаотичным и непонятным для вас, так что отнеситесь к этим рекомендациям с сомнением.

Классификация

Я группирую примитивы фильтров в модули в зависимости от их функциональности – например, “граница”, “заполнение”, “наклон” и т.д. В начале и в конце модуля, я добавил комментарий с названием этой группы.

Название

Хорошие названия помогут вам структурировать ваш фильтр и отслеживать то, что происходит внутри и за пределами примитива. После экспериментов с БЭМ подобными схемами, я, наконец, остановился на очень простой структуре названия:

Например, у вас есть BEVEL_10, BEVEL_20, OUTLINE_10 и так далее. Я начинаю с 10 и увеличиваю на 10, чтобы было легче изменить порядок примитивов или добавить примитив между или в начале группы. Я предпочитаю полные cap, потому что они выделяются и помогают мне сканировать источник быстрее.

Всегда описывайте вход и результат

Хотя это не совсем необходимо, я всегда описываю “вход” и “результат”. (Если не указано, вывод примитива будет вводом его преемника.)

Блоки

Давайте посмотрим на некоторые отдельные методы достижения определенных эффектов. Комбинируя эти блоки, мы можем создать новые сложные эффекты фильтра.

Строка

16-outline-preview-opt

Не гарантировано, что этот метод будет хорошо выглядеть. Особенно при применении dilate в сочетании с большими значениями radius, результат может выглядеть хуже, чем в геометрии, созданной с помощью stroke-width. В зависимости от ситуации, лучшей альтернативой было бы хранить текст в элементе symbol, а затем вставить его в случае необходимости с помощью use, и уплотнить образец с CSS собственностью stroke-width. Помните, что stroke-width не может быть применен к содержимому HTML.

Разорванный вид

17-tornout-preview-opt

Цветная заливка

18-colorfill-preview-opt

 

Следует отметить, что, помимо feFlood, feColorMatrix – другой способ изменения цвета источника входа, даже если это сложнее понять.

Смещение

19-offset-preview-opt

 

Экструзия

20-extrude-preview-opt

 

Заполнение шумом

21-noisefill-preview-opt

Примитив фильтра feTurbulence создаст шумную текстуру, применив так называемый алгоритм шума Перлина (изобретенный Кен Перлин во время его работы на TRON в 1981 году). Это создаст прямоугольник, заполненный шумом, который выглядит как то, что вы могли видеть на старых телевизорах поздно ночью до того, как кабельное телевидение было изобретено.

Вид структуры шума может быть изменен по нескольким параметрам:

  • type в состоянии по умолчанию будет производет жидкую текстуру.
  • type может быть установлен на fractalNoise, который выдаст песчаный результат.
  • baseFrequency контролирует повторение шаблона х и у.
  • numOctaves повысит уровень детализации и должен иметь низкое значение, если вопрос в производительности.
  • Число для начала рандомизации определяется seed.

Заливка изображения

22-imagefill-preview-opt

Цель feImage в том, чтобы заполнить цель текстурой. Если мы хотим применить повторяющийся узор, он должен быть использован в сочетании с feTile.

Хорошая новость по поводу фильтра – спецификация позволяет использовать любой элемент SVG в качестве входа и создать из него заливку узора. Так, в теории, можно создать узоры из символов, групп и фрагментов в вашем SVG, а затем применить их в качестве текстуры, даже к HTML элементам. К сожалению, из-за старого бага, Firefox принимает только внешние ресурсы в качестве входных. Если вы предпочитаете, чтобы все было самодостаточным и хотите избежать дополнительного запроса HTTP, есть надежда: вставьте заливку узора как UTF-8 данные URI:

Некоторые браузеры не понимают UTF-8 данные URI, когда они не URL кодированы, поэтому сделайте URL кодирование по умолчанию:

Если вы хотите применить feImage к содержимому HTML, помните, что размер имеет значение. SVG, который содержит фильтр должен покрыть площадь, где он применяется. Самый простой способ добиться этого – сделать его абсолютно позиционированным ребенком внутри элемента блока:

Эффект освещения

23-lighting-preview-opt

Это еще один эффект из разряда “ничего себе”, который быстро надоедает при частом использовании. Этот фильтр имеет серьезное влияние на производительность, поэтому используйте его с умом.

Вывод

Существует пробел между чистым макетом CSS и пользовательскими элементами дизайна, созданных в таких программных обеспечениях, как Photoshop или Illustrator. Внешние активы встроенные в качестве фонового изображения и SVG символов всегда будут иметь свое место в дизайне веб-сайтов. Но сложные SVG фильтры дают нам большую независимость от посторонних средств проектирования заполняют этот пробел, позволяя нам создавать визуальные стили непосредственно в браузере.

В этой статье мы видели, как SVG фильтры помогают нам создавать игривую, декоративную веб-типографику. Но это не значит, что мы должны останавливаться на достигнутом. Вскоре поддержка браузера станет достаточной для использования этих эффектов на каждом элементе HTML также легко, как мы используем CSS сегодня. Даже если эффекты ведут себя иначе, чем родные техники CSS (SVG фильтр повлияет не только на элемент, но и на всех детей), будет интересно посмотреть, как изобретательные веб-дизайнеры используют эти методы в ближайшем будущем.

Ресурсы из этой статьи:

Поделиться: