Искусство SVG фильтр и почему это Высокий

После почти 20 лет эволюции, today’ S веб типография, с его высокой плотности дисплеев и поддержкой функций OpenType, это просто шаг от типографского качества реальном мире.

Но there’ S еще одно поле графического дизайна, где мы до сих пор постоянно падают back в растровые замены вместо родного текст: акциденции, искусство сосредоточения букв в иллюстративных, великолепных, драматических, игривые, экспериментальных или неожиданными способами.

A filter that creates a liquid effect. 1
Тип Жидкость эффект ( demo 2 )

Чехол для отображения текста в HTML

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

Woodtype style, created purely with SVG filters. 3
Woodtype, стиль, созданный чисто с SVG фильтров ( demo __36 | | 4__7 )

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

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

Сложные SVG фильтры: HTML Для Type

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

A 3D vintage effect 5
3D старинных эффект ( demo 6 )

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

В этой статье в основном занимается первом случае: SVG фильтры, используемые в SVG документа встроенного на HTML странице, но позже we’ LL эксперимент с SVG фильтров, применяемых к содержанию HTML .

Using feImage to fill text with a repeating pattern 8
Использование feImage заполнить текст с повторяющимся узором ( demo 9 )

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

Applying a sketch effect to text 10
Отрывочны текстовый эффект ( demo 11 )

Понимание SVG фильтры является сложной задачей.Даже простые эффекты, такие как падающие тени требуют сложной, подробный синтаксис.Некоторые файлеры, такие как feColorMatrix 39 ~ и |, трудно понять без глубокого понимания математики и теории цвета.Эта статья не будет учебник по изучению SVG фильтры.Вместо этого я буду описывать набор стандартных здания blocks для достижения определенных эффектов, но я буду держать объяснения до минимума, ориентируясь на документирование отдельных шагов, которые составляют эффект.Вы в основном читал о хау;для тех, кто хочет знать, почему, I’ ве положить список для чтения в конце этой статьи .

Variations of posterized text effects 12
Некоторые вариации постеризованному текстовых эффектов ( demo 13 )

Построение Filter

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

Making text look grungy 14
Шероховатый настенная живопись ( demo 15 )

Let’ ы сломать этот эффект в своих строительных блоков:

  1. Зеленый текст;
  2. Красный экструзии;
  3. Текст и экструзии разделены прозрачной щели;
  4. Текст имеет шероховатый, выветриванияискать .

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

Image of an SVG filter graph

Этапы обработки, которые составляют сложную фильтр проиллюстрированы лучше в графе .

Добавление Filter

We’ начну с шаблонного 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>

Фильтр Element

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

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

Слово фильтр Primitives

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

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

Как сгущаться ввода Text

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

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

Source fattened by 4 pixels

Источник откармливаются четыре pixels
<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="BEVEL_10" />

Создание Extrusion

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

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

Using feConvolveMatrix to create an extrusion on the fattened input
Использование feConvolveMatrix создать экструзии на откормленный input
<feConvolveMatrix order="3,3" kernelMatrix=
   "1 0 0 
   0 1 0
   0 0 1" in="BEVEL_10" result="BEVEL_20" />

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

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

Offsetting

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

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

Прервать экструдированного Part

feComposite является одним из немногих фильтров примитивов, которые принимают два входа.Затем объединяет их, применяя метод для составления двух изображений, называемых Портер Дафф композитинга.feComposite может быть использован, чтобы замаскировать или вырезать элементы.Here’ S, как вычесть выход feMorphology с выхода feConvolveMatrix:

Cutting off the fattened 1st primitive from the extrusion
Отключение откармливали первый примитивный из extrusion
<feComposite operator="out" in="BEVEL_20" in2="BEVEL_10" result="BEVEL_30"/>

Раскраска Extrusion

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

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

<feFlood flood-color="#582D1B" result="COLOR-red" />

Мы тогда отрезать часть прозрачного BEVEL_30 с более одного feComposite:

Coloring the extrusion
Раскраска extrusion
<feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" />

Смешивание Bevel и источника в одном Output

feMerge делает только, что, смешать скос и источник в один выходной:

Bevel and source graphic mixed into one output
Конические и источник графический смешивать в одну output
<feMerge result="BEVEL_50">
   <feMergeNode in="BEVEL_40" />
   <feMergeNode in="SourceGraphic" />
</feMerge>

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

Добавление Fractal Texture

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

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

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

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

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

Finally adding a fractal texture to the result
Наконец, добавив, фрактальный текстуру result
<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:

<feComposite in="BEVEL_50" in2="FRACTAL-TEXTURE_20" operator="in"/>

! __ Урон 0 |

Как применять SVG фильтры для SVG Content

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

1. Через CSS

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

2. Через Attribute

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

Применение фильтров SVG Для HTML Content

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

filter: url(#mySVGfilter);

На момент написания, Blink и WebKit требует, чтобы это префикс:

-webkit-filter: url(#mySVGfilter);

Как легко, как это звучит в теории, этот процесс темно искусства в реальном мире:

Предыдущие Демос, применительно к HTML Content

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

Comments are closed.