Фильтры. Часть I

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

Применение фильтров в SVG – графике позволяет быстро получать интересные эффекты, знакомые пользователям пакетов обработки растровой графики. Например, в программе Adobe Photoshop имеется большое количество встроенных фильтров, предназначенных для определенных преобразований изображений. Зачастую, однако, неумелое применение стандартных фильтров приводит к шаблонному оформлению работы, в котором просматривается невыразительная, знакомая фактура.

Работать с фильтрами в SVG – графики сложно^{1Для изучения этой и последующих лекций используйте интерактивные редакторы фильтров в формате SVG: http://www.learnsvg.com/tutorials/filter.php} . Пожалуй, эта самая сложная тема всего курса. Большое количество атрибутов, еще большее число их сочетаний, желательность наличия художественного вкуса, трудность подбора нужного образца – все эти причины обуславливают необходимость затраты значительных усилий для освоения в полной мере всех 19 фильтров.

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

Введение в фильтры

В SVG–графике фильтры применяются для добавления специальных эффектов к фигурам, тексту и растровым изображениям. Объекты, к которым применяются фильтры, сохраняют свою структуру – например, текст остается текстом, который можно выделять и копировать (рис. 7.1):

Рис. 7.1. Применение к тексту фильтров. Текст можно копировать

Пример^{2Пакет Batik SVG Tolkit – набор средств для преобразования "налету" изображений в формат SVG. Используется технология на основе языка Java (http://xmlgraphics.apache.org/batik/).} batikCandy.svg

Фильтры используют объекты в качестве исходного, входного изображения ( input ), а формируемый результат ( result ) представляют в виде выходного.

Все 19 фильтров можно разделить по типам (табл. 7.1):

Приставка "fe" происходит от сокращения "filter effect".

Фильтр объявляется внутри секции defs при помощи элемента filter. Для каждого фильтра обязательно задается атрибут id, по которому затем этот фильтр применяется:

...
<defs>
  <filter id="myFilter">
    <!---Определение фильтра -->
  </filter>
</defs>
...
<text style="filter:url(#myFilter)">
   Текст с применением фильтра
</text>

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

...
<defs>
  <!---Название фильтра-->
  <filter id="myFilter">
    <!—Определение фильтра из отдельных примитивов -->
    <feComposite ... />
    <feMerge ... />
    <feImage ... />
  </filter>
</defs>
...
<text style="filter:url(#myFilter)">Текст с применением фильтра</text>

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

...
<defs>
<!—Название фильтра-->
<filter id="myFilter">
<feComposite ... />
</filter>
</defs>
...
<text style="filter:url(#myFilter)">Текст с применением фильтра</text>

Поэтому будем называть примитив, т. е. в данном случае элемент feComposite фильтром.

Без применения к конкретному объекту, определение фильтра не отображается в документе. Один и тот же фильтр может применяться несколько раз для нескольких объектов в одном документе. Для одного объекта также может применяться несколько фильтров.

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

<filter id="myFilter">
  <feTurbulence baseFrequency="0.03 0.02" numOctaves="3" 
     type="turbulence" result="myTurbulenceOutput"/>
  <feComposite in="myTurbulenceOutput" 
    in2="SourceAlpha" operator="in"/>
</filter>

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