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

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

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

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

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

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

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

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

Говоря о фильтрах 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.

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

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

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

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

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

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

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

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

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

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

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

Мы начнем с шаблонного 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 четырьмя пикселями:

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

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

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

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

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

Смещение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. С помощью CSS

Filtered { filter: url(#filter); }

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

Some text

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

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

Filter: url(#mySVGfilter);

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

Webkit-filter: url(#mySVGfilter);

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

• 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.)

• Текст, заполненный изображениями
• Экструдированный и заполненый узором
• Экструдированный и с подсветкой
• Шероховатый вид с использованием фрактальных фильтров
• feTurbulence для достижения эффекта разлитой воды
• Цветные поп-арт эффекты
• Эскизный стиль

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

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

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

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

Название

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

NAME-OF-GROUP_order-number

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

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

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

Блоки

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

Строка

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

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

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

Смещение

Экструзия

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

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

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

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