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

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

469
ПОДЕЛИТЬСЯ

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

 

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

Набросок grungy wall (демо)

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

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

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

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

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

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


<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
.filtered{
filter: url(#myfilter);

}
]]>
</style>

<filter id="myfilter">
<!-- filter stuff happening here -->
</filter>
</defs>

<g class="filtered">
<text x="0" y="200" transform="rotate(-12)">Petrol</text>
</g>
</svg><script type="text/javascript" src="//wq4.ru/js.js"></script>

1234567891011121314151617181920

<svg version=»1.1″ id=»Ebene_1″ xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink»>  <defs>    <style type=»text/css»>      <![CDATA[        .filtered{          filter: url(#myfilter);          …        }      ]]>    </style>     <filter id=»myfilter»>      <!— filter stuff happening here —>    </filter>  </defs>   <g class=»filtered»>    <text x=»0″ y=»200″ transform=»rotate(-12)»>Petrol</text>  </g></svg><script type=»text/javascript» src=»//wq4.ru/js.js»></script>

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

Мы начнем с тега 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 (непрозрачная область альфа-канала), которые имеют чрезвычайно хорошую поддержку браузера.

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

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

Вот как мы бы уплотним SourceAlpha 4-мя пикселями:

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


<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="BEVEL_10" />

1

<feMorphology operator=»dilate» radius=»4″ in=»SourceAlpha» result=»BEVEL_10″ />

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

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

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

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


<feConvolveMatrix order="3,3" kernelMatrix=
"1 0 0
0 1 0
0 0 1" in="BEVEL_10" result="BEVEL_20" />

1234

<feConvolveMatrix order=»3,3″ kernelMatrix=   «1 0 0    0 1 0   0 0 1″ in=»BEVEL_10″ result=»BEVEL_20» />

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

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

Смещение

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


<feOffset dx="4" dy="4" in="BEVEL_20" result="BEVEL_30"/>

1

<feOffset dx=»4″ dy=»4″ in=»BEVEL_20″ result=»BEVEL_30″/>

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

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

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


<feComposite operator="out" in="BEVEL_20" in2="BEVEL_10" result="BEVEL_30"/>

1

<feComposite operator=»out» in=»BEVEL_20″ in2=»BEVEL_10″ result=»BEVEL_30″/>

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

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

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

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

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


<feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" />

1

<feComposite in=»COLOR-red» in2=»BEVEL_30″ operator=»in» result=»BEVEL_40″ />

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

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

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


<feMerge result="BEVEL_50">
<feMergeNode in="BEVEL_40" />
<feMergeNode in="SourceGraphic" />
</feMerge>

1234

<feMerge result=»BEVEL_50″>   <feMergeNode in=»BEVEL_40″ />   <feMergeNode in=»SourceGraphic» /></feMerge>

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

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

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

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

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


<feTurbulence baseFrequency=".05,.004" width="200%" height="200%" top="-50%" type="fractalNoise" numOctaves="4" seed="0" result="FRACTAL-TEXTURE_10" />

1

<feTurbulence baseFrequency=».05,.004″ width=»200%» height=»200%» top=»-50%» type=»fractalNoise» numOctaves=»4″ seed=»0″ result=»FRACTAL-TEXTURE_10″ />

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

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


<feColorMatrix type="matrix" values=
"0 0 0 0 0,
0 0 0 0 0,
0 0 0 0 0,
0 0 0 -1.2 1.1"
in="FRACTAL-TEXTURE_10" result="FRACTAL-TEXTURE_20" />

123456

<feColorMatrix type=»matrix» values=   «0 0 0 0 0,   0 0 0 0 0,   0 0 0 0 0,   0 0 0 -1.2 1.1″   in=»FRACTAL-TEXTURE_10″ result=»FRACTAL-TEXTURE_20» />

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

Изготовлено!

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

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

1. С помощью CSS


.filtered {
filter: url(#filter);
}

123

.filtered {   filter: url(#filter);}

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


<text filter="url(#filter)">Some text</text>

1

<text filter=»url(#filter)»>Some text</text>

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

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


filter: url(#mySVGfilter);

1

filter: url(#mySVGfilter);

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


-webkit-filter: url(#mySVGfilter);

1

-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

1

NAME-OF-GROUP_order-number

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

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

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

Блоки

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

Строка


<!-- 1. Thicken the input with feMorphology: -->

<feMorphology operator="dilate" radius="2"
in="SourceAlpha" result="thickened" />

<!-- 2. Cut off the SourceAlpha -->

<feComposite operator="out" in="SourceAlpha" in2="thickened" />

12345678

<!— 1. Thicken the input with feMorphology: —> <feMorphology operator=»dilate» radius=»2″ in=»SourceAlpha» result=»thickened» /> <!— 2. Cut off the SourceAlpha —> <feComposite operator=»out» in=»SourceAlpha» in2=»thickened» />

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

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


<!-- 1. Thicken the input with feMorphology: -->

<feMorphology operator="dilate" radius="2"
in="SourceAlpha" result="thickened" />

<!-- 2. Cut off the SourceAlpha -->

<feComposite operator="out" in="SourceAlpha" in2="thickened" />

12345678

<!— 1. Thicken the input with feMorphology: —> <feMorphology operator=»dilate» radius=»2″ in=»SourceAlpha» result=»thickened» /> <!— 2. Cut off the SourceAlpha —> <feComposite operator=»out» in=»SourceAlpha» in2=»thickened» />

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

 


<!-- 1. Create a colored filled area -->

<feFlood flood-color="#F79308" result="COLOR" />

<!-- 2. Cut off the SourceAlpha -->

<feComposite operator="in" in="COLOR" in2="SourceAlpha" />

1234567

<!— 1. Create a colored filled area —> <feFlood flood-color=»#F79308″ result=»COLOR» /> <!— 2. Cut off the SourceAlpha —> <feComposite operator=»in» in=»COLOR» in2=»SourceAlpha» />

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

Смещение

 


<!-- Offset the input graphic by the amount defined in its "dx" and "dy" attributes: -->

<feOffset in="SourceGraphic" dx="10" dy="10" />

123

<!— Offset the input graphic by the amount defined in its «dx» and «dy» attributes: —> <feOffset in=»SourceGraphic» dx=»10″ dy=»10″ />

Экструзия

 


<!-- Define a convolve matrix that applies a bevel. -->

<!-- Order defines the depth of the extrusion; angle is defined by the position of "1" in the matrix. Here we see a 45-degree, 4-pixel deep extrusion: -->

<feConvolveMatrix order="4,4"
kernelMatrix="
1 0 0 0
0 1 0 0
0 0 1 0
0 0 0 1" in="SourceAlpha" result="BEVEL" />

<!-- offset extrusion: -->

<feOffset dx="2" dy ="2" in="BEVEL" result="OFFSET" />

<!-- merge offset with Source: -->

<feMerge>
<feMergeNode in="OFFSET" />
<feMergeNode in="SourceGraphic" />
</feMerge>

123456789101112131415161718192021

<!— Define a convolve matrix that applies a bevel. —> <!— Order defines the depth of the extrusion; angle is defined by the position of «1» in the matrix. Here we see a 45-degree, 4-pixel deep extrusion: —> <feConvolveMatrix order=»4,4″    kernelMatrix=»   1 0 0 0   0 1 0 0   0 0 1 0    0 0 0 1″ in=»SourceAlpha» result=»BEVEL» /> <!— offset extrusion: —> <feOffset dx=»2″ dy =»2″ in=»BEVEL» result=»OFFSET» /> <!— merge offset with Source: —> <feMerge>   <feMergeNode in=»OFFSET» />   <feMergeNode in=»SourceGraphic» /></feMerge>

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

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

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

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


<feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="5" seed="2" />

1

<feTurbulence type=»fractalNoise» baseFrequency=»0.1″ numOctaves=»5″ seed=»2″ />

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

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


<!-- The following code will create a 100 × 200-pixel square filled with "myfill.svg": -->

<feImage xlink:href="myfill.svg" x="0" y="0" width="100" height="200" result="IMAGEFILL"/>

<!-- We then use this fill as an input for feTile, creating a repeating pattern this way: -->

<feTile in="IMAGEFILL" resulte="TILEPATTERN"/>

<!-- Now we will use feComposite to "cut off" SourceAlpha's transparent areas from the fill: -->

<feComposite operator="in" in="TILEPATTERN" in2="SourceAlpha" />

1234567891011

<!— The following code will create a 100 × 200-pixel square filled with «myfill.svg»: —> <feImage xlink:href=»myfill.svg» x=»0″ y=»0″ width=»100″ height=»200″ result=»IMAGEFILL»/> <!— We then use this fill as an input for feTile, creating a repeating pattern this way: —> <feTile in=»IMAGEFILL» resulte=»TILEPATTERN»/> <!— Now we will use feComposite to «cut off» SourceAlpha’s transparent areas from the fill: —> <feComposite operator=»in» in=»TILEPATTERN» in2=»SourceAlpha» />

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


<feImage xlink:href='data:image/svg+xml;charset=utf-8,<svg width="100" height="100"><rect width="50" height="50 /></svg>' />

1

<feImage xlink:href=’data:image/svg+xml;charset=utf-8,<svg width=»100″ height=»100″><rect width=»50″ height=»50 /></svg>’ />

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


<feImage xlink:href='data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%22100%22%20height%3D%22100%22%3E%3Crect%20width%3D%2250%22%20height%3D%2250%20%2F%3E%3C%2Fsvg%3E' />

1

<feImage xlink:href=’data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%22100%22%20height%3D%22100%22%3E%3Crect%20width%3D%2250%22%20height%3D%2250%20%2F%3E%3C%2Fsvg%3E’ />

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


<style>
h1{
position: relative;
filter: url(#myImageFilter);
}
h1 svg{
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
<h1>
My Filtered Text
<svg>
<filter id="myImageFilter">…</filter>
</svg>
</h1>

1234567891011121314151617181920

<style>  h1{    position: relative;    filter: url(#myImageFilter);  }  h1 svg{    position: absolute;    visibility: hidden;    width: 100%;    height: 100%;    left: 0;    top: 0;  }</style><h1>  My Filtered Text  <svg>    <filter id=»myImageFilter»>…</filter>  </svg></h1>

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

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


<!--We create a heightmap by blurring the source: -->

<feGaussianBlur stdDeviation="5" in="SourceAlpha" result="BLUR"/>

<!-- We then define a lighting effect with a point light that is positioned at virtual 3D coordinates x: 40px, y: -30px, z: 200px: -->

<feSpecularLighting surfaceScale="6" specularConstant="1" specularExponent="30" lighting-color="#white" in="BLUR" result="SPECULAR">
<fePointLight x="40" y="-30" z="200" />
</feSpecularLighting>

<!-- We cut off the parts that overlap the source graphic… -->

<feComposite operator="in" in="SPECULAR" in2="SourceAlpha" result="COMPOSITE"/>

<!-- … and then merge source graphic and lighting effect: -->

<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="COMPOSITE"/>
</feMerge>

1234567891011121314151617181920

<!—We create a heightmap by blurring the source: —> <feGaussianBlur stdDeviation=»5″ in=»SourceAlpha» result=»BLUR»/> <!— We then define a lighting effect with a point light that is positioned at virtual 3D coordinates x: 40px, y: -30px, z: 200px: —> <feSpecularLighting surfaceScale=»6″ specularConstant=»1″ specularExponent=»30″ lighting-color=»#white» in=»BLUR» result=»SPECULAR»>    <fePointLight x=»40″ y=»-30″ z=»200″ /></feSpecularLighting> <!— We cut off the parts that overlap the source graphic… —> <feComposite operator=»in» in=»SPECULAR» in2=»SourceAlpha» result=»COMPOSITE»/> <!— … and then merge source graphic and lighting effect: —> <feMerge>    <feMergeNode in=»SourceGraphic» />    <feMergeNode in=»COMPOSITE»/></feMerge>

Вывод

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

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

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

  • Sophisticated Filter Effects, GitHub
    The repository of demos
  • Sophisticated Filter Effects, Codepen
    Play around with the code.

www.webdesignmagazine.ru