Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1482 / 125 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Специальности: Программист
Лекция 7:

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

< Лекция 6 || Лекция 7: 123456 || Лекция 8 >
Аннотация: Введение в фильтры. Общие атрибуты. Фильтры feGaussianBlur, feBlend, feImage, feMerge, feComposite. Работа с фильтрами в Adobe Illustrator. Экспорт графики в формат SVG.

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

Применение фильтров в 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):

Таблица 7.1. Типы фильтров .
Тип Примитивы
Смешивания и композиции <feBlend>, <feComposite>, <feMerge>
Цветовые эффекты <feColorMatrix>, <feComponentTransfer>, <feFlood>
Специальные эффекты <feConvolveMatrix>, <feDisplacementMap>, <feTurbulence>, <feGaussianBlur>, <feOffset>, <feImage>, <feMorphology>, <feTile>
Световые эффекты <feDiffuseLighting>, <feSpectularLighting>
Эффекты источника света <fePointLight>, <feDistantLight>, <feSpotLight>

Приставка "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

Таблица 7.2. Общие атрибуты фильтров.
Название
7.2.1 x, y
Описание
Координаты верхней левой точки области действия фильтра
Диапазон значений
<coordinate> См. табл. 2.8
Значение по умолчанию
0,0
Название
7.2.2 width, height
Описание
Ширина и высота области действия фильтра
Диапазон значений
<length>
Значение по умолчанию
0,0
Название
7.2.3 result
Описание
Название результата, получаемого в результате воздействия отдельного примитива.Рассмотрим следующий пример:
<filter id="myFilter">
  <feTurbulence baseFrequency="0.03 0.02" numOctaves="3" 
     type="turbulence" result="myTurbulenceOutput"/>
  <feComposite in="myTurbulenceOutput" 
    in2="SourceAlpha" operator="in"/>
</filter>
Здесь элемент filter состоит из двух примитивов: feTurbulence и feComposite. В начале к некоторому объекту применяется фильтр feTurbulence. Результат этого воздействия получает название myTurbulenceOutput. Далее фильтр feComposite работает с уже измененным объектом – на это указывает атрибут in="myTurbulenceOutput" ( in – сокращение от input ). Таким образом можно составить цепочку примитивов, каждый из которых воздействует на результат своего предшественника.
Диапазон значений
Значение атрибута id примитива.
Значение по умолчанию
Название
7.2.4 in
Описание
Атрибут указывает на название объекта, на который должен воздействовать примитив. В рассмотренном выше случае это был объект, измененный в результате воздействия предыдущего фильтра. Если фильтр состоит из отдельного примитива, то значение по умолчанию SourceGraphic указывает на объект, к которому будет этот фильтр применяться. Для прочих значений воздействие оказывается на соответствующий объект.
Диапазон значений

SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint

Исходное изображение | Прозрачность объекта | Фоновое изображение | Прозрачность фонового изображения | Заливка | Контур

Значение по умолчанию
SourceGraphic

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

< Лекция 6 || Лекция 7: 123456 || Лекция 8 >
Светлана Ведяева
Светлана Ведяева
Россия, Саратов
Николай Будько
Николай Будько
Молдова, Кишинев