Масштабируемая векторная графика (Scalable Vector Graphics)

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

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

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

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

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

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

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

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

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

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

Все 19 фильтров можно разделить по типам (табл. 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.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

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

feGaussianBlur

Фильтр feGaussianBlur – это хорошо известное размытие по Гауссу, входящее в виде фильтра или эффекта в любой пакет для обработки графики. Структура этого фильтра в SVG - графике выглядит следующим образом (рис. 7.2):

(рис 7.2) Структура фильтра feGaussialBlur

Для атрибута in значениями по умолчанию являются previous result, SourceGraphic. Степень размытия в горизонтальном и вертикальном направлении определяются набором значений атрибута stdDeviation. В табл. 7.3 приводятся примеры использования этого фильтра.

Фильтр feGaussianBlur.
№ Код Вид в браузере
7.3.1 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feGaussianBlur1.svg
     </desc>
     <defs>
          <filter id="myfeGaussianBlur">
               <feGaussianBlur in="SourceGraphic" stdDeviation="5 5"/>
          </filter>
     </defs>
     <g id="myImage" style="fill:red;stroke:none"
        filter="url(#myfeGaussianBlur)">
          <rect x="30" y="30"
                width="140" height="40"/>
     </g>
</svg>
Описание
Прямоугольник с размытием по 5 пикселей в горизонтальном и вертикальном направлениях. Значения в атрибуте stdDeviation разделяются пробелами.
№ Код Вид в браузере
7.3.2 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feGaussianBlur2.svg
     </desc>
     <defs>
          <filter id="myfeGaussianBlur">
               <feGaussianBlur in="SourceGraphic" stdDeviation="15 5"/>
          </filter>
     </defs>
     <g id="myImage" style="fill:red;stroke:none"
        filter="url(#myfeGaussianBlur)">
          <rect x="30" y="30"
                width="140" height="40"/>
     </g>
</svg>
Описание
Прямоугольник с областями размытия: 15 пикселей – горизонтальная, 5 – вертикальная.
№ Код Вид в браузере
7.3.3 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feGaussianBlur3.svg
     </desc>
     <defs>
          <filter id="myfeGaussianBlur">
               <feGaussianBlur in="SourceGraphic" stdDeviation="5 15"/>
          </filter>
     </defs>
     <g id="myImage" style="fill:red;stroke:none"
        filter="url(#myfeGaussianBlur)">
          <rect x="30" y="30" width="140" height="40"/>
     </g>
</svg>
Описание
Прямоугольник с областями размытия: 5 пикселей – горизонтальная, 15 – вертикальная.
№ Код Вид в браузере
7.3.4 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feGaussianBlur4.svg
     </desc>

<defs>
<filter id='myfeGaussianBlur'>
<feGaussianBlur in="SourceGraphic" stdDeviation="5 5"/>
</filter>
</defs>


<g id="myImage" style="fill:red;stroke:none">
<rect x="30" y="30" width="140" height="40" />
</g>


<use x="0" y="0"
     filter='url(#myfeGaussianBlur)' xlink:href='#myImage'/>

</svg>
Описание
Для получения эффекта размытия по краям используются два прямоугольника – размытый снизу и исходный сверху.
№ Код Вид в браузере
7.3.5 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feGaussianBlur5.svg
     </desc>

<defs>
<filter id='myfeGaussianBlur'>
<feGaussianBlur in="SourceGraphic" stdDeviation="5 5"/>
</filter>
</defs>


<g id="myImage" style="fill:red;stroke:none">
<rect x="30" y="30" width="140" height="40" />
</g>


<use x="0" y="70"
     filter='url(#myfeGaussianBlur)' xlink:href='#myImage'/>

</svg>
Описание
Сопоставление размытого и исходного прямоугольников.
№ Код Вид в браузере
7.3.6 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="350"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feGaussianBlur6.svg
     </desc>

<defs>
<filter id='myfeGaussianBlur_5_5'>
<feGaussianBlur in="SourceGraphic" stdDeviation="5 5"/>
</filter>

<filter id='myfeGaussianBlur_15_5'>
<feGaussianBlur in="SourceGraphic" stdDeviation="15 5"/>
</filter>

<filter id='myfeGaussianBlur_5_15'>
<feGaussianBlur in="SourceGraphic" stdDeviation="5 15"/>
</filter>

</defs>

<g id="myImage" style="fill:red;stroke:none">
<rect x="30" y="30" width="140" height="40" />
</g>

<use x="0" y="70"
     filter='url(#myfeGaussianBlur_5_5)' xlink:href='#myImage'/>
<use x="0" y="150"
     filter='url(#myfeGaussianBlur_15_5)' xlink:href='#myImage'/>
<use x="0" y="230"
     filter='url(#myfeGaussianBlur_5_15)' xlink:href='#myImage'/>

</svg>
Описание
Сопоставление нескольких прямоугольников.
№ Код Вид в браузере
7.3.7 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="230" height="400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feGaussianBlur7.svg
     </desc>
     <defs>
          <filter id="myfeGaussianBlur">
               <feGaussianBlur in="SourceGraphic" stdDeviation="5 5"/>
          </filter>
     </defs>
     <!--Применение фильтра к изображению-->
     <image x="20" y="20" width="186" height="125"
            xlink:href="sea1.jpg" filter="url(#myfeGaussianBlur)"/> 

     <!--Применение фильтра к копии изображения с помощью тега use-->
     <use x="0" y="0" filter='url(#myfeGaussianBlur)'
          xlink:href='#myImage'/>
     <image id= "myImage" x="20" y="220"
            width="186" height="125" xlink:href="sea1.jpg"/> 
</svg>
Описание
Применение фильтра к внешнему растровому изображению ( sea1.jpg ). Для получения эффекта размытия по краям используется наложение изображений.

feBlend. feImage

Фильтр feBlend предназначен для получения режимов смешивания (наложения). Эта возможность входит почти во все графические пакеты.

Режимы наложения позволяют смешивать цвет данного пикселя с цветом пикселя, расположенного под ним. Режим смешивания определяет, каким образом пиксели верхнего слоя взаимодействуют с пикселями других слоев, расположенных под ним.

Структура фильтра feBlend выглядит так (рис. 7.3):

(рис 7.3) Структура фильтра feBlend

Для этого фильтра задается два атрибута входных изображений – in и in2. В значении первого подается фоновое изображение, например BackgroundImage. В значении второго подается верхнее изображение – SourceAlpha. Атрибут mode определяет режим смешивания, значения которого приводятся в табл. 7.4

Атрибут "mode" фильтра feBlend
Значение Описание
normal Нормальный. Этот режим отображает верхний пиксель в обычном виде, независимо от цвета пикселей, находящихся под ним. Принят по умолчанию.
multiply Умножение. Берется значение цвета в каждом из каналов RGB и умножается значение верхнего цвета на значение нижнего цвета. Яркость результата получается всегда меньше яркости любого из отдельных слоев. Визуально режим напоминает просмотр двух наложенных друг на друга слайдов, направленных на светлый фон. Режим применяется для создания всяческих теней.
screen Осветление (экран). Режим противоположный Multiply. Берутся значения цвета в каждом из каналов RGB нижнего и верхнего слоев, инвертируется и перемножаются. Результат всегда получается более светлым. Визуально режим напоминает просмотр слайдов с помощью двух диаскопов, направленных на один экран (этим объясняется происхождение названия). Применяется для создания бликов и имитации свечения.
darken Замена темным. В каждом канале RGB верхнего и нижнего слоев сравниваются значения и выбираются более темные. Если слои верхнего пикселя темнее нижнего, они не изменяются. Если же они светлее, то заменяются на нижние. Этот режим применяется для подчеркивания изображения верхнего слоя с эффектом растворения в нижнем.
lighten Замена светлым. Режим, противоположный по своему действию режиму darken. В каждом канале RGB верхнего и нижнего слоев сравниваются значения и выбираются более светлые. Если слои верхнего пикселя светлее нижнего, они не изменяются. Если же они темнее, то заменяются на нижние. Этот режим также применяется для подчеркивания изображения верхнего слоя с эффектом растворения.

Вычисление результирующего изображения осуществяется по формулам, которые приводятся в табл. 7.5

Формулы вычисления режимов атрибута "mode"
Обозначения

cr = Цвет результирующего пикселя в канале RGB (Color Result)

qa = Значение прозрачности для данного пикселя изображения A

qb = Значение прозрачности для данного пикселя изображения B

ca = Цвет пикселя в канале RGB изображения A

cb = Цвет пикселя в канале RGB изображения B
Режим Формула для вычисления
normal cr = (1 - qa) * cb + ca
multiply cr = (1-qa)*cb + (1-qb)*ca + ca*cb
screen cr = cb + ca - ca * cb
darken cr = Min ((1 - qa) * cb + ca, (1 - qb) * ca + cb)
lighten cr = Max ((1 - qa) * cb + ca, (1 - qb) * ca + cb)

Фильтр feBlend поддерживает меньшее число режимов наложения, по сравнению с пакетом Adobe Photoshop (http://www.art-gu.ru/texts/files/db.0009/)

Для включения внешних изображений в определение filter нам придется познакомиться с еще одним очень простым фильтром feImage (рис. 7.4):

(рис 7.4) Структура фильтра feImage

Помимо стандартного набора x, y, width и height этот фильтр содержит единственный рабочий атрибут xlink:href, в котором указывается путь к изображению. Во всех последующих примерах растровое изображение располагается в той же самой папке, что и SVG – документ. Задача фильтра – включать внешнее изображение для обработки в составе filter.

В табл. 7.6 приводятся примеры использования фильтров feBlend и feImage.

Фильтры feBlend и feImage.
№ Код Вид в браузере
7.6.1 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="500"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feBlend1.svg
     </desc>

<rect x ="5" y="5" width="190" height="490" 
      stroke="blue" stroke-width="2" fill="none" ></rect>

<defs>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
</defs>

  <g enable-background="new" >
  <rect x="100" y="10" width="90" height="480"  fill="red"/>
      <rect x="20" y="20" width="160" height="50"  
            fill="blue"  filter="url(#Normal)" ></rect>
      <rect x="20" y="120" width="160" height="50"
            fill="blue" filter="url(#Multiply)" ></rect>
      <rect x="20" y="220" width="160" height="50"  
            fill="blue" filter="url(#Screen)" ></rect>
      <rect x="20" y="320" width="160" height="50"  
            fill="blue"  filter="url(#Darken)" ></rect>
      <rect x="20" y="420"  width="160" height="50"  
            fill="blue" filter="url(#Lighten)" ></rect>
  </g>
</svg>
Описание
Попробуем вначале применить различные режимы смешивания для фигур, залитых однородным цветом. Мы видим, что результаты во 2 и 4, 3 и 5 случаях полностью сопадают.
№ Код Вид в браузере
7.6.2 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="500"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feBlend2.svg
     </desc>

<rect x ="5" y="5" width="190" height="490" 
      stroke="blue" stroke-width="2" fill="none" ></rect>

<defs>
    <linearGradient id="MyGradient" >
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
</defs>

  <g enable-background="new" >
      <rect x="100" y="10" width="90" height="480"  
            fill="url(#MyGradient)"/>
      <rect x="20" y="20" width="160" height="50"  
            fill="blue"  filter="url(#Normal)" ></rect>
      <rect x="20" y="120" width="160" height="50"
            fill="blue" filter="url(#Multiply)" ></rect>
      <rect x="20" y="220" width="160" height="50"
            fill="blue" filter="url(#Screen)" ></rect>
      <rect x="20" y="320" width="160" height="50"
            fill="blue"  filter="url(#Darken)" ></rect>
      <rect x="20" y="420"  width="160" height="50"
            fill="blue" filter="url(#Lighten)" ></rect>
</g>
</svg>
Описание
Теперь для фонового изображения применим градиентную заливку. Результаты получаются более интересными, но они опять-таки, частично совпадают.
№ Код Вид в браузере
7.6.3 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="500"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feBlend3.svg
     </desc>

<rect x ="5" y="5" width="190" height="490" 
      stroke="blue" stroke-width="2" fill="none" ></rect>

<defs>
    <linearGradient id="MyGradient" >
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    
      <linearGradient id="MyGradient2" 
                      x1="0%" y1="0%" 
                      x2="0%" y2="100%"  >
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
</defs>

  <g enable-background="new" >
      <rect x="100" y="10" width="90" height="480"  
            fill="url(#MyGradient)"/>
      <rect x="20" y="20" width="160" height="50"  
            fill="url(#MyGradient2)"  filter="url(#Normal)" ></rect>
      <rect x="20" y="120" width="160" height="50"  
            fill="url(#MyGradient2)" filter="url(#Multiply)" ></rect>
      <rect x="20" y="220" width="160" height="50"  
            fill="url(#MyGradient2)" filter="url(#Screen)" ></rect>
      <rect x="20" y="320" width="160" height="50"  
            fill="url(#MyGradient2)"  filter="url(#Darken)" ></rect>
      <rect x="20" y="420"  width="160" height="50"  
            fill="url(#MyGradient2)" filter="url(#Lighten)" ></rect>
</g>
</svg>
Описание
При использовании наложения фигур со схоже градиентной заливкой результаты проявляются более отчеливо. Теперь видно, что 2 и3, 4 и5 результаты диаметрально противоположны.
№ Код Вид в браузере
7.6.4 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="500"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feBlend4.svg
     </desc>

<rect x ="5" y="5" width="190" height="490" 
      stroke="blue" stroke-width="2" fill="none" ></rect>

<defs>
    <linearGradient id="MyGradient" >
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    
        <linearGradient id="MyGradient2" x1="0%" y1="0%" 
                        x2="0%" y2="100%"  >
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
</defs>

  <g enable-background="new" >
      <rect x="10" y="10" width="180" height="480"  
            fill="url(#MyGradient)"/>
      <rect x="20" y="20" width="160" height="50"  
            fill="url(#MyGradient2)"  filter="url(#Normal)" ></rect>
      <rect x="20" y="120" width="160" height="50"  
            fill="url(#MyGradient2)" filter="url(#Multiply)" ></rect>
      <rect x="20" y="220" width="160" height="50"  
            fill="url(#MyGradient2)" filter="url(#Screen)" ></rect>
      <rect x="20" y="320" width="160" height="50"  
            fill="url(#MyGradient2)"  filter="url(#Darken)" ></rect>
      <rect x="20" y="420"  width="160" height="50"  
            fill="url(#MyGradient2)" filter="url(#Lighten)" ></rect>
</g>
</svg>
Описание
Наложение фигур с градиентной заливкой. Результаты режимов хорошо видны.
№ Код Вид в браузере
7.6.5 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="500"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feBlend5.svg
     </desc>

<rect x ="5" y="5" width="190" height="490" 
      stroke="blue" stroke-width="2" fill="none" ></rect>

<defs>
    <linearGradient id="MyGradient" >
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    
        <linearGradient id="MyGradient2" x1="0%" y1="0%" 
                        x2="0%" y2="100%"  >
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
</defs>

  <g enable-background="new" >
  <rect x="10" y="10" width="180" height="480"  
        fill="url(#MyGradient)"/>
          
      <g font-family="Verdana" font-size="42" fill="url(#MyGradient2)" >
      <text x="20" y="50" filter="url(#Normal)" >Normal</text>
      <text x="20" y="150" filter="url(#Multiply)" >Multiply</text>
      <text x="20" y="250" filter="url(#Screen)" >Screen</text>
      <text x="20" y="350" filter="url(#Darken)" >Darken</text>
      <text x="20" y="450" filter="url(#Lighten)" >Lighten</text>
    </g>
</g>
</svg>
Описание
Наложение фигуры и текста со сходими градиентными заливками.
№ Код Описание
7.6.6 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="410" height="560"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feBlendAndfeImage.svg
     </desc>
    
    <!--Вставка исходных изображений -->   
    <image id= "myImageInsert" x="20" y="20" 
           width="185" height="125" xlink:href="sea1.jpg"/> 
    <image id= "myImage2Insert" x="205" y="20" 
           width="185" height="125" xlink:href="sea2.jpg"/>  

    <defs>
    <!--Применение фильтра к изображению "sea1.jpg" с режимом "normal"-->
    <filter id="Normal" filterUnits="userSpaceOnUse"
      x="20" y="170" width="185" height="125">
      <feImage xlink:href="sea1.jpg" result="myImage1"/>
      <feImage xlink:href="sea2.jpg" result="myImage2"/>
      <feBlend in="myImage1" in2="myImage2" mode="normal"/>
    </filter>

    <!--Применение фильтра к изображению "sea2.jpg" с режимом "normal"-->
    <filter id="Normal2" filterUnits="userSpaceOnUse"
      x="205" y="170" width="185" height="125">
      <feImage xlink:href="sea1.jpg" result="myImage1"/>
      <feImage xlink:href="sea2.jpg" result="myImage2"/>
      <feBlend in="myImage2" in2="myImage1" mode="normal"/>
    </filter>    
    
    <!--Применение фильтров к изображению "sea1.jpg" с различными режимами-->
     <filter id="Multiply" filterUnits="userSpaceOnUse"
      x="20" y="295" width="185" height="125">
      <feImage xlink:href="sea1.jpg" result="myImage1"/>
      <feImage xlink:href="sea2.jpg" result="myImage2"/>
      <feBlend in="myImage1" in2="myImage2" mode="multiply"/>
    </filter>
    
      <filter id="Screen" filterUnits="userSpaceOnUse"
      x="205" y="295" width="185" height="125">
      <feImage xlink:href="sea1.jpg" result="myImage1"/>
      <feImage xlink:href="sea2.jpg" result="myImage2"/>
      <feBlend in="myImage1" in2="myImage2" mode="screen"/>
    </filter>
  
    <filter id="Darken" filterUnits="userSpaceOnUse"
      x="20" y="420" width="185" height="125">
      <feImage xlink:href="sea1.jpg" result="myImage1"/>
      <feImage xlink:href="sea2.jpg" result="myImage2"/>
      <feBlend in="myImage1" in2="myImage2" mode="darken"/>
    </filter>
      
    <filter id="Lighten" filterUnits="userSpaceOnUse"
      x="205" y="420" width="185" height="125">
      <feImage xlink:href="sea1.jpg" result="myImage1"/>
      <feImage xlink:href="sea2.jpg" result="myImage2"/>
      <feBlend in="myImage1" in2="myImage2" mode="lighten"/>
    </filter>

</defs>
    <!--Рисование прямоугольников, с применением к ним фильтров-->
    <rect x="20" y="170" width="185" height="125" 
          style="filter: url(#Normal)"/>
    <rect x="205" y="170" width="185" height="125" 
          style="filter: url(#Normal2)"/>
    <rect x="20" y="295" width="185" height="125" 
          style="filter: url(#Multiply)"/>
    <rect x="205" y="295" width="185" height="125"  
          style="filter: url(#Screen)"/>
    <rect x="20" y="420" width="185" height="125"  
          style="filter: url(#Darken)"/>
    <rect x="205" y="420" width="185" height="125"  
          style="filter: url(#Lighten)"/>
           
   <!--Вспомогательные фигуры-->
   <!--Первый контурный прямоугольник-->
    <rect x ="15" y="15" width="380" height="135"  
           stroke="blue" stroke-width="2" fill="none" ></rect>
    <!--Второй контурный прямоугольник-->
    <rect x ="15" y="165" width="380" height="385"  
          stroke="blue" stroke-width="2" fill="none" ></rect>
    
    <!--Подписи-->
      <text x="30" y="35"   style="fill: red; font-size: 16px">
            sea1.jpg</text>
      <text x="215" y="35"  style="fill: red; font-size: 16px">
            sea2.jpg</text>
      <text x="30" y="185"  style="fill: red; font-size: 16px">
            normal</text>
      <text x="215" y="185" style="fill: red; font-size: 16px">  
            normal</text>
      <text x="30" y="310" style="fill: red; font-size: 16px">  
            multiply</text>
      <text x="215" y="310" style="fill: red; font-size: 16px">
            screen</text>
      <text x="30" y="435" style="fill: red; font-size: 16px">
            darken</text>
      <text x="215" y="435" style="fill: red; font-size: 16px">
            lighten</text>
</svg>
 Все рассмотренные выше примеры не позволяли отчетливо представить себе действие различных режимов. На практике, хорошие результаты можно получать смешивая два (или более) растровых изображения. В этом примере получается достаточно интересный коллаж для режимов screen и lighten.
Вид в браузере

Результат применения фильтра feBlend в значительной мере зависит от составляющих изображений. Попробуйте самостоятельно подобрать различные фотографии для наиболее четкого выражения режимов.

feMerge

Пожалуй, самой интересной особенностью программы Adobe Photoshop является возможность совмещения нескольких изображений на отдельных слоях с различной прозрачностью (рис. 7.5):

(рис 7.5) Слои в Adobe Photoshop

Для решения аналогичных задач в SVG – графике используется фильтр feMerge, структура которого имеет следующий вид (рис. 7.6):

(рис 7.6) Структура фильтра feMerge

Эквивалентом помещения изображения на отдельный слой здесь служит элемент (узел) feMergeNode, который входит в состав фильтра. Для каждого узла можно задавать свое изображение. В табл. 7.7 приводятся примеры использования этого фильтра.

Фильтр feMerge.
№ Код Вид в браузере
7.7.1 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="230" height="420"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge1.svg
     </desc>

  <defs>

    <filter id="merge">
      <feImage xlink:href="#Picture1" result="myImage1"/>
      <feImage xlink:href="#Picture2" result="myImage2"/>
      <feMerge>
        <feMergeNode in="myImage1"/>
        <feMergeNode in="myImage2"/>
      </feMerge>
    </filter>
    <image id="Picture1" xlink:href="sea1.jpg" x="20" y="20"
           width="186" height="125" opacity="0.5"/>
    <image id="Picture2" xlink:href="sea2.jpg" x="20" y="20"
      width="186" height="125" opacity="0.5"/>

  </defs>

 <rect x="20" y="20" width="186" height="125" 
       style="filter: url(#merge)"/>

<!--Исходные изображения-->  
<image  xlink:href="sea1.jpg" width="186" height="125" 
       x="20" y="150"/>
<image  xlink:href="sea2.jpg" width="186"  height="125" 
       x="20" y="280"/>

</svg>
Описание
При помощи элементов image в документ были добавлены два изображения sea1.jpg и sea2.jpg с прозрачностью 50%. Для этих элементов заданы атрибуты id со значениями Picture1 и Picture2. Фильтры feImage обращаются по этим атрибутам к изображениям и включают их в состав filter, задавая им названия myImage1 и myImage2. Последние названия, наконец, используются атрибутами (узлами) feMergeNode для получения композиции. При разборе этой сложной конструкции первое, что приходит в голову – а зачем вообще нужен здесь фильтр? Ведь можно было просто включить два изображения в SVG – документ, определив для них значение прозрачности в 50% (см. пример feMerge4.svg)! Ответ достаточно простой - фильтр позволяет многократно использовать композицию, а также включать ее в состав других фильтров.
№ Код Вид в браузере
7.7.2 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="230" height="420"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge2.svg
     </desc>

  <defs>

    <filter id="merge">
      <feImage xlink:href="#Picture1" result="myImage1"/>
      <feImage xlink:href="#Picture2" result="myImage2"/>
      <feMerge>
        <feMergeNode in="myImage1"/>
        <feMergeNode in="myImage2"/>
      </feMerge>
    </filter>
    <image id="Picture1" xlink:href="sea1.jpg" x="20" y="20"
      width="186" height="125" opacity="0.8"/>
    <image id="Picture2" xlink:href="sea2.jpg" x="20" y="20"
      width="186" height="125" opacity="0.2"/>

  </defs>

  <rect x="20" y="20" width="186" height="125" 
       style="filter: url(#merge)"/>

  <!--Исходные изображения-->  
  <image  xlink:href="sea1.jpg" width="186" height="125" 
         x="20" y="150"/>
  <image xlink:href="sea2.jpg" width="186" height="125" 
         x="20" y="280"/>

</svg>
Описание
Для первого изображения задано значение прозрачности 0.8, для второго 0.2.
№ Код Вид в браузере
7.7.3 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="230" height="420"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge3.svg
     </desc>

  <defs>

    <filter id="merge">
      <feImage xlink:href="#Picture1" result="myImage1"/>
      <feImage xlink:href="#Picture2" result="myImage2"/>
      <feMerge>
        <feMergeNode in="myImage1"/>
        <feMergeNode in="myImage2"/>
      </feMerge>
    </filter>

    <image id="Picture2" xlink:href="sea1.jpg" x="20" y="20"
      width="186" height="125" opacity="0.2"/>
    <image id="Picture1" xlink:href="sea2.jpg" x="20" y="20"
      width="186" height="125" opacity="0.8"/>

  </defs>

  <rect x="20" y="20" width="186" height="125" 
       style="filter: url(#merge)"/>

  <!--Исходные изображения-->  
  <image  xlink:href="sea1.jpg" width="186" height="125" 
         x="20" y="150"/>
  <image  xlink:href="sea2.jpg" width="186"  height="125" 
         x="20" y="280"/>

</svg>
Описание
Для первого изображения задано значение прозрачности 0.2, для второго 0.8.
№ Код Вид в браузере
7.7.4 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="230" height="420"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge4.svg
     </desc>
     <!--Совмещенные изображения с прозрачностью-->  
     <image id="Picture1" xlink:href="sea1.jpg" x="20" y="20"
            width="186" height="125" opacity="0.5"/>
     <image id="Picture2" xlink:href="sea2.jpg" x="20" y="20"
            width="186" height="125" opacity="0.5"/>

     <!--Исходные изображения-->  
     <image  xlink:href="sea1.jpg" width="186" height="125" 
            x="20" y="150"/>
     <image  xlink:href="sea2.jpg" width="186"  height="125" 
           x="20" y="280"/>

</svg>
Описание
Совмещение полупрозрачных изображений без использования фильтра.
№ Код Описание
7.7.5 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="600"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feMerge5.svg
     </desc>

     <defs>

     <filter id="merge">
          <feImage xlink:href="#Picture1" result="myImage1"/>
          <feImage xlink:href="#Picture2" result="myImage2"/>
          <feImage xlink:href="#Picture3" result="myImage3"/>
          <feImage xlink:href="#Picture4" result="myImage4"/>
          <feMerge>
               <feMergeNode in="myImage1"/>
               <feMergeNode in="myImage2"/>
               <feMergeNode in="myImage3"/>
               <feMergeNode in="myImage4"/>
          </feMerge>
    </filter>
    <image id="Picture1" xlink:href="sea1.jpg" x="20" y="20"
           width="372" height="250" opacity="1.0"/>
    <image id="Picture2" xlink:href="sea2.jpg" x="20" y="20"
           width="372" height="250" opacity="0.5"/>
    <image id="Picture3" xlink:href="sun.png" x="20" y="20"
           width="372" height="250" opacity="1.0"/>
    <image id="Picture4" xlink:href="boat.png" x="20" y="20"
           width="372" height="250" opacity="1.0"/>
    </defs>

    <rect x="20" y="20" width="372" height="250" 
          style="filter: url(#merge)"/>
 
     <!--Исходные изображения-->
     <image  xlink:href="sea1.jpg" width="186" height="125" 
            x="20" y="300"/>
     <image  xlink:href="sea2.jpg" width="186" height="125" 
            x="206" y="300"/>
     <image  xlink:href="sun.png" width="186" height="125" 
            x="20" y="425"/>
     <image  xlink:href="boat.png" width="186" height="125" 
            x="206" y="425"/>
</svg>
 Коллаж, состоящий из нескольких изображений. Основой для солнца и лодки служат изображения в формате . png с прозрачным фоном
Вид в браузере

feComposite

Фильтр feComposite предназначен в основном для получения фигурной обрезки изображений. Структура этого фильтра выглядит следующим образом(рис. 7.7):

(рис 7.7) Структура фильтра feComposite

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

Значения атрибута "operator"
Значение Описание
over Два изображения располагаются независимо друг от друга, причем верхнее перекрывает нижнее.
in Видны лишь те части верхнего изображения, которые совпадают с нижним изображением.
out Видны лишь те части верхнего изображения, которые не совпадают с нижним изображением (выходят из области нижнего изображения).
atop Видны совпадающие части верхнего и нижнего изображений.
xor Видны несовпадающие части верхнего и нижнего изображений. Совпадающие фрагменты удаляются.
arithmetic Вид изображений определяется дополнительным набором атрибутов k1, k2, k3, k4. Для этих атрибутов задается число в диапазоне от 0 до 1. Вариации значений позволяют получать комбинации изображений с учетом прозрачности. Результирующий цвет получается путем случайной подстановки верхнего или нижнего цвета в зависимости от степени непрозрачности в каждой точке изображения (так называемый режим "растворение" ( Dissolve ). Этот атрибут основывается на механизмах фильтров feDiffuseLighting и feSpecularLighting.

Фильтр содержит также два атрибута подстановки изображений – in и in2. Если возникает необходимость объединения более двух изображений, то можно применять последовательные серии. В табл. 7.9 приводятся примеры использования этого фильтра.

Фильтр feComposite
№ Код Вид в браузере
7.9.1 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 7. Фильтры. Часть I title>
     <desc>
          Пример feComposite1.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feImage xlink:href="#MyImage2" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="over"/>
</filter>

<image id="MyImage1" x="10" y="10" 
       width="186" height="125" xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="10" 
       width="186" height="125" xlink:href="stripe.png"/>

</defs>

<rect x="10" y="10" width="186" height="125" 
      filter="url(#myFilter)" />

</svg>
Описание
Применение значения (рис 7.8) Исходные изображения фильтра feComposite
№ Код Вид в браузере
7.9.2 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feComposite2.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feImage xlink:href="#MyImage2" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="in"/>
</filter>

<image id="MyImage1" x="10" y="10"
       width="186" height="125" xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="10"
       width="186" height="125" xlink:href="stripe.png"/>

</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter)" />

</svg>
Описание
Применение значения in атрибута operator.
№ Код Вид в браузере
7.9.3 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feComposite3.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feImage xlink:href="#MyImage2" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="out"/>
</filter>

<image id="MyImage1" x="10" y="10" 
       width="186" height="125" xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="10" 
       width="186" height="125" xlink:href="stripe.png"/>

</defs>

<rect x="10" y="10" width="186" height="125" 
      filter="url(#myFilter)" />

</svg>
Описание
Применение значения out атрибута operator.
№ Код Вид в браузере
7.9.4 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feComposite4.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feImage xlink:href="#MyImage2" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="atop"/>
</filter>

<image id="MyImage1" x="10" y="10"
       width="186" height="125" xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="10"
       width="186" height="125" xlink:href="stripe.png"/>

</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter)" />

</svg>
Описание
Применение значения atop атрибута operator.
№ Код Вид в браузере
7.9.5 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feComposite5.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse"
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feImage xlink:href="#MyImage2" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="xor"/>
</filter>

<image id="MyImage1" x="10" y="10"
       width="186" height="125" xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="10"
       width="186" height="125" xlink:href="stripe.png"/>

</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter)" />

</svg>
Описание
Применение значения xor атрибута operator.
№ Код Вид в браузере
7.9.6 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="200" height="150"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feComposite6.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse"
        x="10" y="10" width="186" height="125">
<feImage xlink:href="#MyImage1" result="pict1"/>
<feImage xlink:href="#MyImage2" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<image id="MyImage1" x="10" y="10"
       width="186" height="125" xlink:href="collage.png"/>
<image id="MyImage2" x="10" y="10"
       width="186" height="125" xlink:href="stripe.png"/>

</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter)" />

</svg>
Описание
Применение значения arithmetic атрибута operator. Можно задавать прозрачность исходных изображений.
№ Код Описание
7.9.7 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="800" height="600"
     xmlns="http://www.w3.org/2000/svg" version="1.1" >
     <title> Лекция 7. Фильтры. Часть I </title>
     <desc>
          Пример feComposite7.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse"
        x="10" y="10" width="186" height="125">
<feImage xlink:href="collage.png" result="pict1"/>
<feImage xlink:href="stripe.png" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="0.4" k3="1" k4="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse"
        x="216" y="10" width="186" height="125">
<feImage xlink:href="collage.png" result="pict1"/>
<feImage xlink:href="stripe.png" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="1" k2="1" k3="1" k4="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse"
        x="10" y="165" width="186" height="125">
<feImage xlink:href="collage.png" result="pict1"/>
<feImage xlink:href="stripe.png" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="0.4" k3="0.4" k4="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse"
        x="216" y="165" width="186" height="125">
<feImage xlink:href="collage.png" result="pict1"/>
<feImage xlink:href="stripe.png" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="0.4" k3="0.4" k4="0.4"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="10" y="320" width="186" height="125">
<feImage xlink:href="collage.png" result="pict1"/>
<feImage xlink:href="stripe.png" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="0.4" k3="0.4" k4="0.1"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse"
        x="216" y="320" width="186" height="125">
<feImage xlink:href="collage.png" result="pict1"/>
<feImage xlink:href="stripe.png" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="1" k3="0.2" k4="0"/>
</filter>

<filter id="myFilter7" filterUnits="userSpaceOnUse"
        x="10" y="475" width="186" height="125">
<feImage xlink:href="collage.png" result="pict1"/>
<feImage xlink:href="stripe.png" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0.4" k2="0.2" k3="1" k4="0"/>
</filter>

<filter id="myFilter8" filterUnits="userSpaceOnUse"
        x="216" y="475" width="186" height="125">
<feImage xlink:href="collage.png" result="pict1"/>
<feImage xlink:href="stripe.png" result="pict2"/>
<feComposite in="pict1" in2="pict2" operator="arithmetic"
             k1="0" k2="1" k3="1" k4="0"/>
</filter>



</defs>

<rect x="10" y="10" width="186" height="125"
      filter="url(#myFilter1)" />
<rect x="216" y="10" width="186" height="125"
      filter="url(#myFilter2)" />
<rect x="10" y="165" width="186" height="125"
      filter="url(#myFilter3)" />
<rect x="216" y="165" width="186" height="125"
      filter="url(#myFilter4)" />
<rect x="10" y="320" width="186" height="125"
      filter="url(#myFilter5)" />
<rect x="216" y="320" width="186" height="125"
      filter="url(#myFilter6)" />
<rect x="10" y="475" width="186" height="125"
      filter="url(#myFilter7)" />
<rect x="216" y="475" width="186" height="125"
      filter="url(#myFilter8)" />


<!--Подписи-->
      <text x="10" y="150" style="fill: black; font-size: 12px">
            k1="0.4" k2="0.4" k3="1" k4="0"
      </text>
      <text x="216" y="150" style="fill: black; font-size: 12px">
            k1="1" k2="1" k3="1" k4="0"
      </text>
      <text x="10" y="305" style="fill: black; font-size: 12px">
            k1="0.4" k2="0.4" k3="0.4" k4="0"
      </text>
      <text x="216" y="305" style="fill: black; font-size: 12px">
            k1="0.4" k2="0.4" k3="0.4" k4="0.4"
      </text>
      <text x="10" y="460" style="fill: black; font-size: 12px">
            k1="0.4" k2="0.4" k3="0.4" k4="0.1"
      </text>
      <text x="216" y="460" style="fill: black; font-size: 12px">
            k1="0.4" k2="1" k3="0.2" k4="0"
      </text>
      <text x="10" y="615" style="fill: black; font-size: 12px">
            k1="0.4" k2="0.2" k3="1" k4="0"
      </text>
      <text x="216" y="615" style="fill: black; font-size: 12px">
            k1="0" k2="1" k3="1" k4="0"
      </text>

</svg>
 Применение значения arithmetic атрибута operator. Вариации коэффициентов позволяют получать композиции полностью непрозрачных изображений. Другие значения представляют собой промежуточные варианты.
Вид в браузере

Работа с фильтрами в Adobe Illustrator. Экспорт графики в формат SVG

Программа Adobe Illustrator содержит несколько встроенных SVG – фильтров. Для их применения следует выделить объект и в главном меню перейти к пункту "Effect\ SVG Filters" (рис. 7.9):

(рис 7.9) Применение встроенного фильтра AI_GaussianBlur_4

В результате применения фильтра мы получаем уже знакомый результат (рис. 7.10):

(рис 7.10) Готовая фигура

При выборе пункта меню "Apply SVG Filter" можно просматривать всю серию фильтров (рис. 7.11):

(рис 7.11) Окно "Apply SVG Filter"

Для экспорта изображения в формат SVG выбираем "File\ Save As…" (рис. 7.12):

(рис 7.12) Экспорт графики в формат SVG

В появившемся окне "Save As" выбираем тип файла "SVG", а затем настраиваем опции самого SVG – документа в окне "SVG - Options" (рис. 7.13):

(рис 7.13) Настройка опций SVG – документа при сохранении

Получившейся в результате код достаточно корректен, он может применяться для изучения и модификации настроек фильтра:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
     <!ENTITY ns_svg "http://www.w3.org/2000/svg">
     <!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>
<svg  version="1.1" id="Layer_1"
     xmlns="ns_svg;" xmlns:xlink="ns_xlink;" 
     width="287" height="287" viewBox="0 0 287 287"
     overflow="visible" enable-background="new 0 0 287 287"
     xml:space="preserve">
  <filter  id="AI_GaussianBlur_4">
     <feGaussianBlur  stdDeviation="4"></feGaussianBlur>
  </filter>
  <g filter="url(#AI_GaussianBlur_4)">
     <circle fill="#FF0000" cx="143.509" cy="143.509" r="119.091"/>
     <circle fill="none" stroke="#000000" cx="143.509" cy="143.509" r="119.091"/>
  </g>
</svg>
Предыдущее занятие Следующее занятие
Вернуться к учебному плану
^