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

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

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

feColorMatrix

Фильтр feColorMatrix предназначен для коррекции цвета и яркости изображения. Его структура имеет следующий вид (рис. 9.1):

(рис 9.1) Структура фильтра feColorMatrix.

В Лекции 6 мы проходили несколько типов трансформации – translate, rotate, scale, skewX, skewY. Тип трансформации matrix представлял собой лишь способ записи отдельных преобразованиий. Подобно трансформациям, фильтр feColorMatrix также представляется в виде матричной формы записи. Значения saturate, hueRotate и liminanceToAlpha могут быть выражены при помощи значения matrix. Рассмотрим вначале самостоятельные типы, примеры которых приводятся в табл. 9.1.

Фильтр feColorMatrix. Значения saturate, hueRotate, liminanceToAlpha.
№ Код Вид в браузере
9.1.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="210" height="350" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrix1.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="175" width="186" height="125">
    <feImage xlink:href="#MyImage" result="image1"/>
    <feColorMatrix id="color" in="image1" 
                   type="luminanceToAlpha"/>
</filter>

<image id="MyImage" x="10" y="175" width="186" height="125" 
       xlink:href="sea2.jpg"/>



</defs>
<rect x="0" y="0" width="200" height="200" 
      filter="url(#myFilter)"/>

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

</svg>
Описание
Значение luminanceToAlpha превращает изображение в негатив черно-белой фотографииПод словами "черно-белая" подразумевается фотография, получаемая при помощи старых фотоаппаратов. В действительности, конечно, ее цвет можно выразить словами "оттенки серого".. При задании этого типа фильтр feColorMatrix не поддерживает каких-либо числовых атрибутов.
№ Код Описание
9.1.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrix2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="saturate" values="0"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="saturate" values="0.2"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1"  
                   type="saturate" values="0.4"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color4" in="image1"  
                   type="saturate" values="0.6"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color5" in="image1"  
                   type="saturate" values="0.8"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="0.2"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="0.4"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       values="0.6"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       values="0.8"</text>

</svg>
 Значение "saturate" в сочетании с атрибутом values (диапазон от 0 до 1 ) позволяет плавно управлять цветом изображения. При значении values="0" получается черно-белое изображение.
Вид в браузере
№ Код Описание
9.1.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrix3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="hueRotate" values="0"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="hueRotate" values="30"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1"  
                   type="hueRotate" values="60"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color4" in="image1"  
                   type="hueRotate" values="90"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color5" in="image1"  
                   type="hueRotate" values="120"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="30"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="60"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       values="90"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       values="120"</text>

</svg>
 Значение hueRotate позволяет смещать цветовые оттенки изображения. Диапазон от 0 до 360 градусов атрибута values соответствует всей развертке цветов RGB. Этот пример охватывает изменения от 0 до 120 градусов.
Вид в браузере
№ Код Описание
9.1.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrix4.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="hueRotate" values="150"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="hueRotate" values="180"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1"  
                   type="hueRotate" values="210"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color4" in="image1"  
                   type="hueRotate" values="240"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color5" in="image1"  
                   type="hueRotate" values="270"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="150"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="180"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="210"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       values="240"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       values="270"</text>

</svg>
 Этот пример охватывает изменения от 150 до 270 градусов.
Вид в браузере

Рассмотрим теперь матричную запись значений атрибута type. В самом общем случае тип matrix записывается в виде матрицы следующим образом:

$$\left | \begin{array}{c} R' \\ G'\\ B' \\ A' \\ 1 \end{array} \right | = \left | \begin{array}{ccccc} a_{11} a_{12} a_{13} a_{14} a_{15} \\ a_{21} a_{22} a_{23} a_{24} a_{25} \\ a_{31} a_{32} a_{33} a_{34} a_{35} \\ a_{41} a_{42} a_{43} a_{44} a_{45} \\ 0 0 0 0 0 \end{array} \right | ullet \left | \begin{array}{c} R \\ G\\ B \\ A \\ 1 \end{array} \right |$$

Здесь R', G', B', A' – измененные компоненты изображения в каналах RGBA ( A – прозрачность), R, G, B, A – исходные. Эквивалентная запись для подстановки в SVG – код выглядит так:

type="matrix"
values="a11 a12 a13 a14 a15 a21 a22 a23 a24 a25 a31 a32 a33 a34 a35 a41 a42 a43 a44 a45"

Допускается запись с отступами:

values="a11 a12 a13 a14 a15  a21 a22 a23 a24 a25  a31 a32 a33 a34 a35  a41 a42 a43 a44 a45"

А также запись в столбик, с переносом на новые строки:

values="a11 a12 a13 a14 a15
a21 a22 a23 a24 a25
a31 a32 a33 a34 a35
a41 a42 a43 a44 a45"

Как уже отмечалось, тип matrix не вносит изменений в изображение, это всего лишь форма записи других значений атрибута type. Тип saturate представляется следующей матрицей:

$$\left | \begin{array}{c} R' \\ G'\\ B' \\ A' \\ 1 \end{array} \right | = \left | \begin{array}{ccccc} 0.213 +0.787\cdot s 0.715 - 0.715\cdot s 0.072 - 0.072\cdot s 0 0 \\ 0.213 - 0.213 \cdot s 0.715 +0.285\cdot s 0.072 - 0.072\cdot s 0 0 \\ 0.213 - 0.213\cdot s 0.715 - 0.715\cdot s 0.072 + 0.928\cdot s 0 0 \\ 0 0 0 1 0 \\ 0 0 0 0 0 \end{array} \right | ullet \left | \begin{array}{c} R \\ G\\ B \\ A \\ 1 \end{array} \right |$$

Где s – одиночное целое действительное число в интервале от 0 до 1.

Тип hueRotate представляется следующей матрицей:

$$\left | \begin{array}{c} R' \\ G'\\ B' \\ A' \\ 1 \end{array} \right | = \left | \begin{array}{ccccc} a_{11} a_{12} a_{13} 0 0 \\ a_{21} a_{22} a_{23} 0 0\\ a_{31} a_{32} a_{33} 0 0 \\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right | ullet \left | \begin{array}{c} R \\ G\\ B \\ A \\ 1 \end{array} \right |$$

Элементы a11 a12 a13 и т. д. вычисляются отдельно по следующей схеме:

$$\left | \begin{array}{ccc} a_{11} a_{12} a_{13}\\ a_{21} a_{22} a_{23}\\ a_{31} a_{32} a_{33} \end{array} \right | = \\ = \left | \begin{array}{ccc} 0.213 0.715 0.072\\ 0.213 0.715 0.072\\ 0.213 0.715 0.072 \end{array} \right | + \cos{(angle)} ullet \left | \begin{array}{ccc} 0.787 -0.715 -0.072\\ -0.213 0.285 -0.072\\ -0.213 -0.715 0.928 \end{array} \right | + \sin{(angle)} ullet \left | \begin{array}{ccc} -0.213 -0.715 0.928\\ 0.143 0.140 -0.283\\ -0.787 0.715 0.072 \end{array} \right |$$

где angle – значение угла в градусах. Здесь мы сталкиваемся с двумя новыми понятиями – умножением матрицы на число и сложением матриц. Рассмотрим их отдельно. Для умножения матрицы на число k нужно умножить каждый элемент матицы на это число:

$$k \cdot \left | \begin{array}{ccc} a_{11} a_{12} a_{13}\\ a_{21} a_{22} a_{23}\\ a_{31} a_{32} a_{33} \end{array} \right | = \left | \begin{array}{ccc} k \cdot a_{11} k \cdot a_{12} k \cdot a_{13}\\ k \cdot a_{21} k \cdot a_{22} k \cdot a_{23}\\ k \cdot a_{31} k \cdot a_{32} k \cdot a_{33} \end{array} \right |$$

Сложение матриц определяется довольно простым образом:

$$\left | \begin{array}{ccc} a_{11} a_{12} a_{13}\\ a_{21} a_{22} a_{23}\\ a_{31} a_{32} a_{33} \end{array} \right | + \left | \begin{array}{ccc} b_{11} b_{12} b_{13}\\ b_{21} b_{22} b_{23}\\ b_{31} b_{32} b_{33} \end{array} \right | = \left | \begin{array}{ccc} a_{11}+ b_{11} a_{12}+ b_{12} a_{13}+ b_{13}\\ a_{21}+ b_{21} a_{22}+ b_{22} a_{23}+ b_{23}\\ a_{31}+ b_{31} a_{32}+ b_{32} a_{33}+ b_{33} \end{array} \right |$$

Тип luminanceToAlpha, который не содержит возможности изменять какие-либо параметры, представляется так:

$$\left | \begin{array}{c} R' \\ G'\\ B' \\ A' \\ 1 \end{array} \right | = \left | \begin{array}{ccccc} 0 0 0 0 0 \\ 0 0 0 0 0\\ 0 0 0 0 0 \\ 0.2125 0.7154 0.0721 0 0 \\ 0 0 0 0 1 \end{array} \right | ullet \left | \begin{array}{c} R \\ G\\ B \\ A \\ 1 \end{array} \right |$$

Применять эту форму записи не сложно. Вычислять матрицы можно вручную или при помощи программы MathcadCм. Лекцию 6.. В табл. 9.2 приводятся примеры использования типа matrix.

Фильтр feColorMatrix. Значение matrix.
№ Код
9.2.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 9. Фильтры. Часть III  </title>
     <desc>
          Пример feColorMatrixM1.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="matrix" values="1 0 0 0 0
                                         0 1 0 0 0
                                         0 0 1 0 0
                                         0 0 0 1 0"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="matrix" values="1 1 1 1 1
                                         0 1 0 0 0
                                         0 0 1 0 0
                                         0 0 0 1 0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1" 
                   type="matrix" values="1 0 0 0 0
                                         1 1 1 1 1
                                         0 0 1 0 0
                                         0 0 0 1 0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color4" in="image1" 
                   type="matrix" values="1 0 0 0 0
                                         0 1 0 0 0
                                         1 1 1 1 1
                                         0 0 0 1 0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color5" in="image1" 
                   type="matrix" values="1 0 0 0 0
                                         0 1 0 0 0
                                         0 0 1 0 0
                                         1 1 1 1 1"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       Исходная матрица</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       R = "1 1 1 1 1 "</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       G = "1 1 1 1 1 "</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       B = "1 1 1 1 1 "</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       A = "1 1 1 1 1 "</text>

</svg>
Вид в браузере
Описание
Мы подставили простые значения матрицы, соответствующие цветопередачи в каналах R, G, B и A.
№ Код
9.2.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrixM2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="matrix" values="0.213 0.715 0.072 0 0
                                         0.213 0.715 0.072 0 0
                                         0.213 0.715 0.072 0 0
                                         0     0     0     1 0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="matrix" values="0.37 0.572 0.058 0 0
                                         0.17 0.772 0.058 0 0
                                         0.17 0.572 0.258 0 0
                                         0    0     0     1 0"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1" 
                   type="matrix" values="0.213 0.429 0.043 0 0
                                         0.128 0.829 0.043 0 0
                                         0.128 0.429 0.443 0 0
                                         0     0     0     1 0"/>
</filter>

</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="0.2"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="0.4"</text>
</svg>
Вид в браузере
Описание

Вычисление нескольких матриц для значения saturate атрибута type в программе Mathcad.

При values="0":

$$\left ( \begin{array}{ccccc} 0.213+0.787\cdot 0 0.715 - 0.715\cdot 0 0.072-0.072\cdot 0 0 0 \\ 0.213 – 0.213\cdot 0 0.715+0.285\cdot 0 0.072 - 0.072\cdot 0 0 0\\ 0.213 – 0.213\cdot 0 0.715 - 0.715\cdot 0 0.072 + 0.928\cdot 0 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right ) =\\ = \left ( \begin{array}{ccccc} 0.213 0.715 0.072 0 0 \\ 0.213 0.715 0.072 0 0\\ 0.213 0.715 0.072 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right )$$

При values="0.2":

$$\left ( \begin{array}{ccccc} 0.213+0.787\cdot 0.2 0.715 - 0.715\cdot 0.2 0.072-0.072\cdot 0.2 0 0 \\ 0.213 – 0.213\cdot 0.2 0.715+0.285\cdot 0.2 0.072 - 0.072\cdot 0.2 0 0\\ 0.213 – 0.213\cdot 0.2 0.715 - 0.715\cdot 0.2 0.072 + 0.928\cdot 0.2 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right ) =\\ = \left ( \begin{array}{ccccc} 0.37 0.572 0.058 0 0 \\ 0.17 0.772 0.058 0 0\\ 0.17 0.572 0.258 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right )$$

При values="0.4":

$$\left ( \begin{array}{ccccc} 0.213+0.787\cdot 0.4 0.715 - 0.715\cdot 0.4 0.072-0.072\cdot 0.4 0 0 \\ 0.213 – 0.213\cdot 0.4 0.715+0.285\cdot 0.4 0.072 - 0.072\cdot 0.4 0 0\\ 0.213 – 0.213\cdot 0.4 0.715 - 0.715\cdot 0.4 0.072 + 0.928\cdot 0.4 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right ) =\\ = \left ( \begin{array}{ccccc} 0.213 0.429 0.043 0 0 \\ 0.128 0.829 0.043 0 0\\ 0.128 0.429 0.443 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right )$$

Эти значения и были подставлены в код SVG – документа.
№ Код
9.2.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrixM3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
               type="matrix" values="1 0 0 0 0
                        0 1 0 0 0
                        0 0 1 0 0
                        0 0 0 1 0"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
               type="matrix" values="0.784 -0.263 0.479 0 0
                       0.102 1.032 -0.133 0 0
                      -0.369 0.46 0.909 0 0
                       0 0 0 1 0"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1" 
               type="matrix" values="0.42 -0.261 0.841 0 0
                       0.231 0.978 -0.209 0 0
                      -0.576 0.979 0.596 0 0
                       0 0 0 1 0"/>
</filter>

</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>


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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="30"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="60"</text>
</svg>
Вид в браузере
Описание

Вычисление нескольких матриц для значения hueRotate атрибута type.

При values="0":

$$\left ( \begin{array}{ccc} 0.213 0.715 0.072\\ 0.213 0.715 0.072\\ 0.213 0.715 0.072 \end{array} \right ) + \left ( \begin{array}{ccc} 0.787 -0.715 -0.072\\ -0.213 0.285 -0.072\\ -0.213 -0.715 0.928 \end{array} \right ) \cdot \cos{(0)} +\\+ \left ( \begin{array}{ccc} -0.213 -0.715 0.928\\ 0.143 0.140 -0.283\\ -0.787 0.715 0.072 \end{array} \right ) \cdot \sin{(0)} = \left ( \begin{array}{ccc} 1 0 0\\ 0 1 0\\ 0 0 1 \end{array} \right )$$

При values="30" Значение угла в радианах ( 1 радиан примерно равен 57 градусам)

$$\left ( \begin{array}{ccc} 0.213 0.715 0.072\\ 0.213 0.715 0.072\\ 0.213 0.715 0.072 \end{array} \right ) + \left ( \begin{array}{ccc} 0.787 -0.715 -0.072\\ -0.213 0.285 -0.072\\ -0.213 -0.715 0.928 \end{array} \right ) \cdot \cos{(0.53)} +\\+ \left ( \begin{array}{ccc} -0.213 -0.715 0.928\\ 0.143 0.140 -0.283\\ -0.787 0.715 0.072 \end{array} \right ) \cdot \sin{(0.53)} = \\ = \left ( \begin{array}{ccc} 0.784 -0.263 0.479\\ 0.102 1.032 -0.133\\ -0.369 0.46 0.909 \end{array} \right )$$

При values="60"

$$\left ( \begin{array}{ccc} 0.213 0.715 0.072\\ 0.213 0.715 0.072\\ 0.213 0.715 0.072 \end{array} \right ) + \left ( \begin{array}{ccc} 0.787 -0.715 -0.072\\ -0.213 0.285 -0.072\\ -0.213 -0.715 0.928 \end{array} \right ) \cdot \cos{(1.06)} +\\+ \left ( \begin{array}{ccc} -0.213 -0.715 0.928\\ 0.143 0.140 -0.283\\ -0.787 0.715 0.072 \end{array} \right ) \cdot \sin{(1.06)} = \\ = \left ( \begin{array}{ccc} 0.42 -0.261 0.841\\ 0.231 0.978 -0.209\\ -0.576 0.979 0.596 \end{array} \right )$$
№ Код
9.2.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="210" height="350" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrixM4.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="175" width="186" height="125">
    <feImage xlink:href="#MyImage" result="image1"/>
    <feColorMatrix id="color" in="image1" 
               type="matrix" values="0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 0 0
                        0.2125 0.7154 0.0721 0 0"/>
</filter>

<image id="MyImage" x="10" y="175" width="186" height="125" 
       xlink:href="sea2.jpg"/>



</defs>
<rect x="0" y="0" width="200" height="200" 
      filter="url(#myFilter)"/>

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

</svg>
Вид в браузере
Описание
Задаваемая матрица эквивалентна типу luminanceToAlpha

feComponentTransfer

Фильтр feComponentTransfer – мощный инструмент для редактирования яркости, контраста и цветового баланса изображения. Его структура имеет следующий вид (рис. 9. 2):

(рис 9.2) Структура фильтра feComponentTransfer

На рисунке изображена совокупность атрибутов для одного канала R, выражаемого элементов feFuncR. В состав фильтра входят четыре функции, для каждого из каналов, причем в каждом из функций поддерживаются индивидуальные настройки атрибутов. В табл. 9.3 приводится описание атрибутов фильтра feComponentTransfer.

Атрибуты фильтра feComponentTransfer.
№ Название
9.3.1 type
Описание
Тип преобразования в заданном канале. Возможны следующие значенияЗдесь приводится качественное описание значений ( за исключением linear и gamma). Для понимания материала важно увидеть результат их применения. В любом случае, исходные формулы, по которым осуществляются эти преобразования, можно посмотреть в спецификации: http://www.w3.org/TR/2003/REC-SVG11-20030114/filters.html :
  • identity – исходное значение, без преобразований.
  • table – преобразование характеризуется набором значений.
  • discrete – преобразование также характеризуется набором значений, оно носит резко выраженный характер.

  • linear - линейное преобразование, формула которого выглядит так:

    C' = slope * C + intercept,

    где C' – преобразованное значение (в заданном канале), C – исходное. Описание коэффициентов slope и intercept приводится ниже.

  • gamma – экспоненциальное преобразование, формула которого выглядит так:

    C' = amplitude * pow(C, exponent) + offset

    Описание коэффициентов amplitude, exponent и offset приводится ниже.

    •
    Диапазон значений
    identity | table | discrete | linear | gamma
    Значение по умолчанию
    –
    № Название
    9.3.2 tableValues
    Описание
    Список значений, по которому осуществляется преобразование. В простейшем случае – набор четырех чисел для каждого из каналов R, G, B, A.
    Диапазон значений
    Набор значений типа <number>
    Значение по умолчанию
    –
    № Название
    9.3.3 slope
    Описание
    Значение яркости.
    Диапазон значений
    <number>
    Значение по умолчанию
    1
    № Название
    9.3.4 intercept
    Описание
    При задании type="linear" этот атрибут характеризует область действия линейной функции.
    Диапазон значений
    <number>
    Значение по умолчанию
    0
    № Название
    9.3.5 amplitude
    Описание
    При задании type="gamma" этот атрибут характеризует амплитуду экспоненциальной функции. Визуально это представляется в степени выраженности преобразования.
    Диапазон значений
    <number>
    Значение по умолчанию
    1
    № Название
    9.3.6 Exponent
    Описание
    При задании type="gamma" этот атрибут характеризует степень экспоненциальной функции.
    Диапазон значений
    <number>
    Значение по умолчанию
    1
    № Название
    9.3.6 Offset
    Описание
    При задании type="gamma" этот атрибут характеризует смещение экспоненциальной функции.
    Диапазон значений
    <number>
    Значение по умолчанию
    0

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

    Фильтр feComponentTransfer.
    № Код Вид в браузере
    9.4.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="350" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer1.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="175" width="186" height="125">
   <feImage xlink:href="#MyImage" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.5" intercept="0"/>
  </feComponentTransfer>

</filter>

<image id="MyImage" x="10" y="175" width="186" height="125" 
       xlink:href="sea2.jpg"/>

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

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


</svg>
    Описание
    Изменение изображения в канале прозрачности ( A ).
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="1" intercept="0"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.8" intercept="0"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.6" intercept="0"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.4" intercept="0"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.2" intercept="0"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       slope="1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       slope="0.8"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       slope="0.6"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       slope="0.4"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       slope="0.2"</text>

</svg>
    		 Примеры уменьшения яркости изображения.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncB type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncG type="identity"/>
     <feFuncB type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncB type="identity"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncB type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncB type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncA type="gamma" amplitude="0" exponent="1" offset="0"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       feFuncR type="identity"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       feFuncG type="identity"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       feFuncB type="identity"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       feFuncA type="identity"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       feFuncR (G,B,A) type="gamma" </text>

</svg>
    		 Если оставить значения заданного канала, например R, неизменным ( type="identity" ), а остальные каналы выключить, задавая нулевое значение амплитуды, то изображение будет принимать тон этого канала.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer4.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="1.5" intercept="0"/>
     <feFuncG type="linear" slope="1.5" intercept="0"/>
     <feFuncB type="linear" slope="1.5" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="2" intercept="0"/>
     <feFuncG type="linear" slope="2" intercept="0"/>
     <feFuncB type="linear" slope="2" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="3" intercept="0"/>
     <feFuncG type="linear" slope="3" intercept="0"/>
     <feFuncB type="linear" slope="3" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="3" intercept="0"/>
     <feFuncG type="linear" slope="3" intercept="0"/>
     <feFuncB type="linear" slope="1" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="1" intercept="0"/>
     <feFuncG type="linear" slope="3" intercept="0"/>
     <feFuncB type="linear" slope="3" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       type="linear" slope="1.5"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
        type="linear" slope="2"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
        type="linear" slope="3"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       type="linear" slope="3" (B) slope="1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       type="linear" slope="3" (R) slope="1"</text>

</svg>
    		 Регулировка цветового баланса в задаваемых каналах.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer5.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="0.8" intercept="0"/>
     <feFuncG type="linear" slope="0.8" intercept="0"/>
     <feFuncB type="linear" slope="0.8" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="0.6" intercept="0"/>
     <feFuncG type="linear" slope="0.6" intercept="0"/>
     <feFuncB type="linear" slope="0.6" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="0.4" intercept="0"/>
     <feFuncG type="linear" slope="0.4" intercept="0"/>
     <feFuncB type="linear" slope="0.4" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="0.4" intercept="0"/>
     <feFuncG type="linear" slope="0.4" intercept="0"/>
     <feFuncB type="linear" slope="1" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="1" intercept="0"/>
     <feFuncG type="linear" slope="0.4" intercept="0"/>
     <feFuncB type="linear" slope="0.4" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       type="linear" slope="0.8"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
        type="linear" slope="0.6"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
        type="linear" slope="0.4"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       type="linear" slope="0.4" (B) slope="1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       type="linear" slope="0.4" (R) slope="1"</text>

</svg>
    		 Регулировка цветового баланса в сочетании с уменьшением яркости изображения.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer6.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues=""/>
     <feFuncG type="table" tableValues=""/>
     <feFuncB type="table" tableValues=""/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 0 0 0"/>
     <feFuncG type="table" tableValues="0 0 0 0"/>
     <feFuncB type="table" tableValues="0 0 0 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 1"/>
     <feFuncG type="table" tableValues="1 1 1 1"/>
     <feFuncB type="table" tableValues="1 1 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 0 0 1"/>
     <feFuncG type="table" tableValues="0 0 0 1"/>
     <feFuncB type="table" tableValues="0 0 0 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 0"/>
     <feFuncG type="table" tableValues="1 1 1 0"/>
     <feFuncB type="table" tableValues="1 1 1 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       type="table" tableValues=""</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
        type="table" tableValues="0 0 0 0"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
         type="table" tableValues="1 1 1 1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       type="table" tableValues="0 0 0 1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
        type="table" tableValues="1 1 1 0"</text>

</svg>
    		 Набор tableValues с предельными значениями.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer7.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 1 1 1"/>
     <feFuncG type="table" tableValues="0 1 1 1"/>
     <feFuncB type="table" tableValues="0 1 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 0 0 0"/>
     <feFuncG type="table" tableValues="1 0 0 0"/>
     <feFuncB type="table" tableValues="1 0 0 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 0 1 1"/>
     <feFuncG type="table" tableValues="1 0 1 1"/>
     <feFuncB type="table" tableValues="1 0 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 1 0 0"/>
     <feFuncG type="table" tableValues="0 1 0 0"/>
     <feFuncB type="table" tableValues="0 1 0 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 1 1 0"/>
     <feFuncG type="table" tableValues="0 1 1 0"/>
     <feFuncB type="table" tableValues="0 1 1 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       type="table" tableValues="0 1 1 1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
         type="table" tableValues="1 0 0 0"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
         type="table" tableValues="1 0 1 1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
        type="table" tableValues="0 1 0 0"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
        type="table" tableValues="0 1 1 0"</text>

</svg>
    		 Набор tableValues позволяет придавать изображению сюрреалистические оттенки.
    Вид в браузере
    № Код Описание
    9.4.8 
    <?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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer8.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 1"/>
     <feFuncG type="table" tableValues="1 0 0 1"/>
     <feFuncB type="table" tableValues="1 0 0 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 0 0 1"/>
     <feFuncG type="table" tableValues="1 1 1 1"/>
     <feFuncB type="table" tableValues="1 0 0 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 0 0 1"/>
     <feFuncG type="table" tableValues="1 0 0 1"/>
     <feFuncB type="table" tableValues="1 1 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 1"/>
     <feFuncG type="table" tableValues="1 1 1 1"/>
     <feFuncB type="table" tableValues="1 0 0 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 1"/>
     <feFuncG type="table" tableValues="1 0 0 1"/>
     <feFuncB type="table" tableValues="1 1 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       (G, B) "1 0 0 1" (R) "1 1 1 1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
        (R, B) "1 0 0 1" (B) "1 1 1 1"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
         (R, G) "1 0 0 1" (B) "1 1 1 1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
         (B) "1 0 0 1" (R, G) "1 1 1 1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
          (G) "1 0 0 1" (R, B) "1 1 1 1"</text>

</svg>
    		 Набор tableValues со значениями, смещающими цветовой баланс в сторону основных и дополнительных цветов.
    Вид в браузере

    feTurbulence

    Фильтр feTurbulence содержит встроенные средства для генерации структуры, напоминающей облака или мрамор. В сочетании с фильтрами освещения (см. Лекцию 10) эти текстуры могут быть окрашены в произвольные цвета, а также менять свой вид (например, выглядеть как мешковина). Структура этого фильтра выглядит так (рис. 9.3 ):

    (рис 9.3) Структура фильтра feTurbulence

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

    № Название
    9.5.1 baseFrequency
    Описание
    Частота генерации шума, которая представляется в виде двух чисел, определяющих горизонтальное и вертикальное направления. Если задается одно число, то оно по умолчанию принимается для обоих направлений.
    Диапазон значений
    <number> <number>
    Значение по умолчанию
    0
    № Название
    9.5.2 numOctaves
    Описание
    Число гармоник генерации шума.
    Диапазон значений
    <integer>
    Значение по умолчанию
    1
    № Название
    9.5.3 seed
    Описание
    Начальное число на основании которого генерируются случайные числа.
    Диапазон значений
    <number>
    Значение по умолчанию
    0
    № Название
    9.5.4 stitchTiles
    Описание
    При значении stitch сглаживаются края генерируемых линий.
    Диапазон значений
    stitch | noStitch
    Значение по умолчанию
    noStitch
    № Название
    9.5.5 type
    Описание
    Тип генерируемой текстуры.
    Диапазон значений
    fractalNoise | turbulence
    Значение по умолчанию
    turbulence

    В табл. 9.6 приводятся примеры использования этого фильтра.

    № Код Вид в браузере
    9.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="200" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence1.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
<feTurbulence type="fractalNoise" baseFrequency="0.01" 
              numOctaves="4" seed="0"/>
</filter>


</defs>
<rect x="0" y="0" width="200" height="200" 
      filter="url(#myFilter)"/>

</svg>
    Описание
    Тип fractalNoise наиболее пригоден для создания структуры, напоминающей облака.
    № Код Описание
    9.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="460" height="610" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.01" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.02" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.05" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.1" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.2" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.3" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter7" filterUnits="userSpaceOnUse" 
        x="0" y="300" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.4" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter8" filterUnits="userSpaceOnUse" 
        x="150" y="300" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.5" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter9" filterUnits="userSpaceOnUse" 
        x="300" y="300" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.6" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter10" filterUnits="userSpaceOnUse" 
        x="0" y="450" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.7" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter11" filterUnits="userSpaceOnUse" 
        x="150" y="450" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter12" filterUnits="userSpaceOnUse" 
        x="300" y="450" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="1" 
              numOctaves="4" seed="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)"/>
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)"/>
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)"/>
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)"/>
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)"/>
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)"/>
<rect x="0" y="300" width="150" height="150" 
      filter="url(#myFilter7)"/>
<rect x="150" y="300" width="150" height="150" 
      filter="url(#myFilter8)"/>
<rect x="300" y="300" width="150" height="150" 
      filter="url(#myFilter9)"/>
<rect x="0" y="450" width="150" height="150" 
      filter="url(#myFilter10)"/>
<rect x="150" y="450" width="150" height="150" 
      filter="url(#myFilter11)"/>
<rect x="300" y="450" width="150" height="150" 
      filter="url(#myFilter12)"/>

<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="600" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="150" y="0" width="150" height="600" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="150" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="450" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>

<!--Подписи-->
<text x="10" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.01"</text>
<text x="160" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.02"</text>
<text x="310" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.05"</text>

<text x="10" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1"</text>
<text x="160" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.2"</text>
<text x="310" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.3"</text>

<text x="10" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.4"</text>
<text x="160" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.5"</text>
<text x="310" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.6"</text>

<text x="10" y="465" style="fill: black; font-size: 12px">
       baseFrequency="0.7"</text>
<text x="160" y="465" style="fill: black; font-size: 12px">
       baseFrequency="0"</text>
<text x="310" y="465" style="fill: black; font-size: 12px">
       baseFrequency="1"</text>

</svg>
    		 Атрибут baseFrequency за управление ячеистой структуры. Чем больше значение этого атрибута, тем меньше размер структуры.
    Вид в браузере
    № Код Описание
    9.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="460" height="610" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.01" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.02" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.05" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.1" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.2" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.3" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter7" filterUnits="userSpaceOnUse" 
        x="0" y="300" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.4" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter8" filterUnits="userSpaceOnUse" 
        x="150" y="300" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.5" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter9" filterUnits="userSpaceOnUse" 
        x="300" y="300" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.6" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter10" filterUnits="userSpaceOnUse" 
        x="0" y="450" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.7" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter11" filterUnits="userSpaceOnUse" 
        x="150" y="450" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter12" filterUnits="userSpaceOnUse" 
        x="300" y="450" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="1" 
              numOctaves="4" seed="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)"/>
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)"/>
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)"/>
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)"/>
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)"/>
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)"/>
<rect x="0" y="300" width="150" height="150" 
      filter="url(#myFilter7)"/>
<rect x="150" y="300" width="150" height="150" 
      filter="url(#myFilter8)"/>
<rect x="300" y="300" width="150" height="150" 
      filter="url(#myFilter9)"/>
<rect x="0" y="450" width="150" height="150" 
      filter="url(#myFilter10)"/>
<rect x="150" y="450" width="150" height="150" 
      filter="url(#myFilter11)"/>
<rect x="300" y="450" width="150" height="150" 
      filter="url(#myFilter12)"/>

<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="600" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="150" y="0" width="150" height="600" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="150" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="450" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>

<!--Подписи-->
<text x="10" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.01"</text>
<text x="160" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.02"</text>
<text x="310" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.05"</text>

<text x="10" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1"</text>
<text x="160" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.2"</text>
<text x="310" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.3"</text>

<text x="10" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.4"</text>
<text x="160" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.5"</text>
<text x="310" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.6"</text>

<text x="10" y="465" style="fill: black; font-size: 12px">
       baseFrequency="0.7"</text>
<text x="160" y="465" style="fill: black; font-size: 12px">
       baseFrequency="0"</text>
<text x="310" y="465" style="fill: black; font-size: 12px">
       baseFrequency="1"</text>

</svg>
    		 Тип turbulence позволяет имитировать мраморную поверхность.
    Вид в браузере
    № Код Описание
    9.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence4.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0,0.1" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0,0.1" 
              numOctaves="4" seed="10"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.01, 0.1" 
              numOctaves="4" seed="1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.1,0.01" 
              numOctaves="4" seed="1"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.1, 0" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.1,0" 
              numOctaves="4" seed="10"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)"/>
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)"/>
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)"/>
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)"/>
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)"/>
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)"/>


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="150" y="0" width="150" height="300" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="150" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>

<!--Подписи-->
<text x="10" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0,0.1" </text>
<text x="10" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="10" y="45" style="fill: black; font-size: 12px">
       seed="0"</text>

<text x="160" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0,0.1"  </text>
<text x="160" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="160" y="45" style="fill: black; font-size: 12px">
       seed="10"</text>

<text x="304" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.01, 0.1" </text>
<text x="304" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="304" y="45" style="fill: black; font-size: 12px">
       seed="1"</text>

<text x="5" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1,0.01"</text>
<text x="5" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="5" y="195" style="fill: black; font-size: 12px">
       seed="1"</text>

<text x="160" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1, 0"  </text>
<text x="160" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="160" y="195" style="fill: black; font-size: 12px">
       seed="0"</text>

<text x="310" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1,0"  </text>
<text x="310" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="310" y="195" style="fill: black; font-size: 12px">
       seed="10"</text>

</svg>
    		 Атрибут seed отвечает за выраженность слоистой структуры. Пара значений атрибута baseFrequency задает направление структуры.
    Вид в браузере
    № Код Описание
    9.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence5.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0,0.1" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0,0.1" 
              numOctaves="4" seed="10"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.01, 0.1" 
              numOctaves="4" seed="1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.1,0.01" 
              numOctaves="4" seed="1"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.1, 0" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.1,0" 
              numOctaves="4" seed="10"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)"/>
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)"/>
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)"/>
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)"/>
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)"/>
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)"/>


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="150" y="0" width="150" height="300" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="150" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>

<!--Подписи-->
<text x="10" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0,0.1" </text>
<text x="10" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="10" y="45" style="fill: black; font-size: 12px">
       seed="0"</text>

<text x="160" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0,0.1"  </text>
<text x="160" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="160" y="45" style="fill: black; font-size: 12px">
       seed="10"</text>

<text x="304" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.01, 0.1" </text>
<text x="304" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="304" y="45" style="fill: black; font-size: 12px">
       seed="1"</text>

<text x="5" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1,0.01"</text>
<text x="5" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="5" y="195" style="fill: black; font-size: 12px">
       seed="1"</text>

<text x="160" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1, 0"  </text>
<text x="160" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="160" y="195" style="fill: black; font-size: 12px">
       seed="0"</text>

<text x="310" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1,0"  </text>
<text x="310" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="310" y="195" style="fill: black; font-size: 12px">
       seed="10"</text>

</svg>
    		 Слоистая стуктура и ее направления для типа turbulence.
    Вид в браузере
    Страницы:
    Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

    feColorMatrix

    Фильтр feColorMatrix предназначен для коррекции цвета и яркости изображения. Его структура имеет следующий вид (рис. 9.1):

    (рис 9.1) Структура фильтра feColorMatrix.

    В Лекции 6 мы проходили несколько типов трансформации – translate, rotate, scale, skewX, skewY. Тип трансформации matrix представлял собой лишь способ записи отдельных преобразованиий. Подобно трансформациям, фильтр feColorMatrix также представляется в виде матричной формы записи. Значения saturate, hueRotate и liminanceToAlpha могут быть выражены при помощи значения matrix. Рассмотрим вначале самостоятельные типы, примеры которых приводятся в табл. 9.1.

    Фильтр feColorMatrix. Значения saturate, hueRotate, liminanceToAlpha.
    № Код Вид в браузере
    9.1.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="210" height="350" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrix1.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="175" width="186" height="125">
    <feImage xlink:href="#MyImage" result="image1"/>
    <feColorMatrix id="color" in="image1" 
                   type="luminanceToAlpha"/>
</filter>

<image id="MyImage" x="10" y="175" width="186" height="125" 
       xlink:href="sea2.jpg"/>



</defs>
<rect x="0" y="0" width="200" height="200" 
      filter="url(#myFilter)"/>

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

</svg>
    Описание
    Значение luminanceToAlpha превращает изображение в негатив черно-белой фотографииПод словами "черно-белая" подразумевается фотография, получаемая при помощи старых фотоаппаратов. В действительности, конечно, ее цвет можно выразить словами "оттенки серого".. При задании этого типа фильтр feColorMatrix не поддерживает каких-либо числовых атрибутов.
    № Код Описание
    9.1.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrix2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="saturate" values="0"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="saturate" values="0.2"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1"  
                   type="saturate" values="0.4"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color4" in="image1"  
                   type="saturate" values="0.6"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color5" in="image1"  
                   type="saturate" values="0.8"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="0.2"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="0.4"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       values="0.6"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       values="0.8"</text>

</svg>
    		 Значение "saturate" в сочетании с атрибутом values (диапазон от 0 до 1 ) позволяет плавно управлять цветом изображения. При значении values="0" получается черно-белое изображение.
    Вид в браузере
    № Код Описание
    9.1.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrix3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="hueRotate" values="0"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="hueRotate" values="30"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1"  
                   type="hueRotate" values="60"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color4" in="image1"  
                   type="hueRotate" values="90"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color5" in="image1"  
                   type="hueRotate" values="120"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="30"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="60"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       values="90"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       values="120"</text>

</svg>
    		 Значение hueRotate позволяет смещать цветовые оттенки изображения. Диапазон от 0 до 360 градусов атрибута values соответствует всей развертке цветов RGB. Этот пример охватывает изменения от 0 до 120 градусов.
    Вид в браузере
    № Код Описание
    9.1.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrix4.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="hueRotate" values="150"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="hueRotate" values="180"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1"  
                   type="hueRotate" values="210"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color4" in="image1"  
                   type="hueRotate" values="240"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color5" in="image1"  
                   type="hueRotate" values="270"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="150"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="180"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="210"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       values="240"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       values="270"</text>

</svg>
    		 Этот пример охватывает изменения от 150 до 270 градусов.
    Вид в браузере

    Рассмотрим теперь матричную запись значений атрибута type. В самом общем случае тип matrix записывается в виде матрицы следующим образом:

    $$\left | \begin{array}{c} R' \\ G'\\ B' \\ A' \\ 1 \end{array} \right | = \left | \begin{array}{ccccc} a_{11} a_{12} a_{13} a_{14} a_{15} \\ a_{21} a_{22} a_{23} a_{24} a_{25} \\ a_{31} a_{32} a_{33} a_{34} a_{35} \\ a_{41} a_{42} a_{43} a_{44} a_{45} \\ 0 0 0 0 0 \end{array} \right | ullet \left | \begin{array}{c} R \\ G\\ B \\ A \\ 1 \end{array} \right |$$

    Здесь R', G', B', A' – измененные компоненты изображения в каналах RGBA ( A – прозрачность), R, G, B, A – исходные. Эквивалентная запись для подстановки в SVG – код выглядит так:

    type="matrix"
values="a11 a12 a13 a14 a15 a21 a22 a23 a24 a25 a31 a32 a33 a34 a35 a41 a42 a43 a44 a45"

    Допускается запись с отступами:

    values="a11 a12 a13 a14 a15  a21 a22 a23 a24 a25  a31 a32 a33 a34 a35  a41 a42 a43 a44 a45"

    А также запись в столбик, с переносом на новые строки:

    values="a11 a12 a13 a14 a15
a21 a22 a23 a24 a25
a31 a32 a33 a34 a35
a41 a42 a43 a44 a45"

    Как уже отмечалось, тип matrix не вносит изменений в изображение, это всего лишь форма записи других значений атрибута type. Тип saturate представляется следующей матрицей:

    $$\left | \begin{array}{c} R' \\ G'\\ B' \\ A' \\ 1 \end{array} \right | = \left | \begin{array}{ccccc} 0.213 +0.787\cdot s 0.715 - 0.715\cdot s 0.072 - 0.072\cdot s 0 0 \\ 0.213 - 0.213 \cdot s 0.715 +0.285\cdot s 0.072 - 0.072\cdot s 0 0 \\ 0.213 - 0.213\cdot s 0.715 - 0.715\cdot s 0.072 + 0.928\cdot s 0 0 \\ 0 0 0 1 0 \\ 0 0 0 0 0 \end{array} \right | ullet \left | \begin{array}{c} R \\ G\\ B \\ A \\ 1 \end{array} \right |$$

    Где s – одиночное целое действительное число в интервале от 0 до 1.

    Тип hueRotate представляется следующей матрицей:

    $$\left | \begin{array}{c} R' \\ G'\\ B' \\ A' \\ 1 \end{array} \right | = \left | \begin{array}{ccccc} a_{11} a_{12} a_{13} 0 0 \\ a_{21} a_{22} a_{23} 0 0\\ a_{31} a_{32} a_{33} 0 0 \\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right | ullet \left | \begin{array}{c} R \\ G\\ B \\ A \\ 1 \end{array} \right |$$

    Элементы a11 a12 a13 и т. д. вычисляются отдельно по следующей схеме:

    $$\left | \begin{array}{ccc} a_{11} a_{12} a_{13}\\ a_{21} a_{22} a_{23}\\ a_{31} a_{32} a_{33} \end{array} \right | = \\ = \left | \begin{array}{ccc} 0.213 0.715 0.072\\ 0.213 0.715 0.072\\ 0.213 0.715 0.072 \end{array} \right | + \cos{(angle)} ullet \left | \begin{array}{ccc} 0.787 -0.715 -0.072\\ -0.213 0.285 -0.072\\ -0.213 -0.715 0.928 \end{array} \right | + \sin{(angle)} ullet \left | \begin{array}{ccc} -0.213 -0.715 0.928\\ 0.143 0.140 -0.283\\ -0.787 0.715 0.072 \end{array} \right |$$

    где angle – значение угла в градусах. Здесь мы сталкиваемся с двумя новыми понятиями – умножением матрицы на число и сложением матриц. Рассмотрим их отдельно. Для умножения матрицы на число k нужно умножить каждый элемент матицы на это число:

    $$k \cdot \left | \begin{array}{ccc} a_{11} a_{12} a_{13}\\ a_{21} a_{22} a_{23}\\ a_{31} a_{32} a_{33} \end{array} \right | = \left | \begin{array}{ccc} k \cdot a_{11} k \cdot a_{12} k \cdot a_{13}\\ k \cdot a_{21} k \cdot a_{22} k \cdot a_{23}\\ k \cdot a_{31} k \cdot a_{32} k \cdot a_{33} \end{array} \right |$$

    Сложение матриц определяется довольно простым образом:

    $$\left | \begin{array}{ccc} a_{11} a_{12} a_{13}\\ a_{21} a_{22} a_{23}\\ a_{31} a_{32} a_{33} \end{array} \right | + \left | \begin{array}{ccc} b_{11} b_{12} b_{13}\\ b_{21} b_{22} b_{23}\\ b_{31} b_{32} b_{33} \end{array} \right | = \left | \begin{array}{ccc} a_{11}+ b_{11} a_{12}+ b_{12} a_{13}+ b_{13}\\ a_{21}+ b_{21} a_{22}+ b_{22} a_{23}+ b_{23}\\ a_{31}+ b_{31} a_{32}+ b_{32} a_{33}+ b_{33} \end{array} \right |$$

    Тип luminanceToAlpha, который не содержит возможности изменять какие-либо параметры, представляется так:

    $$\left | \begin{array}{c} R' \\ G'\\ B' \\ A' \\ 1 \end{array} \right | = \left | \begin{array}{ccccc} 0 0 0 0 0 \\ 0 0 0 0 0\\ 0 0 0 0 0 \\ 0.2125 0.7154 0.0721 0 0 \\ 0 0 0 0 1 \end{array} \right | ullet \left | \begin{array}{c} R \\ G\\ B \\ A \\ 1 \end{array} \right |$$

    Применять эту форму записи не сложно. Вычислять матрицы можно вручную или при помощи программы MathcadCм. Лекцию 6.. В табл. 9.2 приводятся примеры использования типа matrix.

    Фильтр feColorMatrix. Значение matrix.
    № Код
    9.2.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 9. Фильтры. Часть III  </title>
     <desc>
          Пример feColorMatrixM1.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="matrix" values="1 0 0 0 0
                                         0 1 0 0 0
                                         0 0 1 0 0
                                         0 0 0 1 0"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="matrix" values="1 1 1 1 1
                                         0 1 0 0 0
                                         0 0 1 0 0
                                         0 0 0 1 0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1" 
                   type="matrix" values="1 0 0 0 0
                                         1 1 1 1 1
                                         0 0 1 0 0
                                         0 0 0 1 0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color4" in="image1" 
                   type="matrix" values="1 0 0 0 0
                                         0 1 0 0 0
                                         1 1 1 1 1
                                         0 0 0 1 0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color5" in="image1" 
                   type="matrix" values="1 0 0 0 0
                                         0 1 0 0 0
                                         0 0 1 0 0
                                         1 1 1 1 1"/>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       Исходная матрица</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       R = "1 1 1 1 1 "</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       G = "1 1 1 1 1 "</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       B = "1 1 1 1 1 "</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       A = "1 1 1 1 1 "</text>

</svg>
    Вид в браузере
    Описание
    Мы подставили простые значения матрицы, соответствующие цветопередачи в каналах R, G, B и A.
    № Код
    9.2.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrixM2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
                   type="matrix" values="0.213 0.715 0.072 0 0
                                         0.213 0.715 0.072 0 0
                                         0.213 0.715 0.072 0 0
                                         0     0     0     1 0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
                   type="matrix" values="0.37 0.572 0.058 0 0
                                         0.17 0.772 0.058 0 0
                                         0.17 0.572 0.258 0 0
                                         0    0     0     1 0"/>
</filter>
<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1" 
                   type="matrix" values="0.213 0.429 0.043 0 0
                                         0.128 0.829 0.043 0 0
                                         0.128 0.429 0.443 0 0
                                         0     0     0     1 0"/>
</filter>

</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="0.2"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="0.4"</text>
</svg>
    Вид в браузере
    Описание

    Вычисление нескольких матриц для значения saturate атрибута type в программе Mathcad.

    При values="0":

    $$\left ( \begin{array}{ccccc} 0.213+0.787\cdot 0 0.715 - 0.715\cdot 0 0.072-0.072\cdot 0 0 0 \\ 0.213 – 0.213\cdot 0 0.715+0.285\cdot 0 0.072 - 0.072\cdot 0 0 0\\ 0.213 – 0.213\cdot 0 0.715 - 0.715\cdot 0 0.072 + 0.928\cdot 0 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right ) =\\ = \left ( \begin{array}{ccccc} 0.213 0.715 0.072 0 0 \\ 0.213 0.715 0.072 0 0\\ 0.213 0.715 0.072 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right )$$

    При values="0.2":

    $$\left ( \begin{array}{ccccc} 0.213+0.787\cdot 0.2 0.715 - 0.715\cdot 0.2 0.072-0.072\cdot 0.2 0 0 \\ 0.213 – 0.213\cdot 0.2 0.715+0.285\cdot 0.2 0.072 - 0.072\cdot 0.2 0 0\\ 0.213 – 0.213\cdot 0.2 0.715 - 0.715\cdot 0.2 0.072 + 0.928\cdot 0.2 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right ) =\\ = \left ( \begin{array}{ccccc} 0.37 0.572 0.058 0 0 \\ 0.17 0.772 0.058 0 0\\ 0.17 0.572 0.258 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right )$$

    При values="0.4":

    $$\left ( \begin{array}{ccccc} 0.213+0.787\cdot 0.4 0.715 - 0.715\cdot 0.4 0.072-0.072\cdot 0.4 0 0 \\ 0.213 – 0.213\cdot 0.4 0.715+0.285\cdot 0.4 0.072 - 0.072\cdot 0.4 0 0\\ 0.213 – 0.213\cdot 0.4 0.715 - 0.715\cdot 0.4 0.072 + 0.928\cdot 0.4 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right ) =\\ = \left ( \begin{array}{ccccc} 0.213 0.429 0.043 0 0 \\ 0.128 0.829 0.043 0 0\\ 0.128 0.429 0.443 0 0\\ 0 0 0 1 0 \\ 0 0 0 0 1 \end{array} \right )$$

    Эти значения и были подставлены в код SVG – документа.
    № Код
    9.2.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrixM3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color1" in="image1" 
               type="matrix" values="1 0 0 0 0
                        0 1 0 0 0
                        0 0 1 0 0
                        0 0 0 1 0"/>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color2" in="image1" 
               type="matrix" values="0.784 -0.263 0.479 0 0
                       0.102 1.032 -0.133 0 0
                      -0.369 0.46 0.909 0 0
                       0 0 0 1 0"/>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feColorMatrix id="color3" in="image1" 
               type="matrix" values="0.42 -0.261 0.841 0 0
                       0.231 0.978 -0.209 0 0
                      -0.576 0.979 0.596 0 0
                       0 0 0 1 0"/>
</filter>

</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>


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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       values="0"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       values="30"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       values="60"</text>
</svg>
    Вид в браузере
    Описание

    Вычисление нескольких матриц для значения hueRotate атрибута type.

    При values="0":

    $$\left ( \begin{array}{ccc} 0.213 0.715 0.072\\ 0.213 0.715 0.072\\ 0.213 0.715 0.072 \end{array} \right ) + \left ( \begin{array}{ccc} 0.787 -0.715 -0.072\\ -0.213 0.285 -0.072\\ -0.213 -0.715 0.928 \end{array} \right ) \cdot \cos{(0)} +\\+ \left ( \begin{array}{ccc} -0.213 -0.715 0.928\\ 0.143 0.140 -0.283\\ -0.787 0.715 0.072 \end{array} \right ) \cdot \sin{(0)} = \left ( \begin{array}{ccc} 1 0 0\\ 0 1 0\\ 0 0 1 \end{array} \right )$$

    При values="30" Значение угла в радианах ( 1 радиан примерно равен 57 градусам)

    $$\left ( \begin{array}{ccc} 0.213 0.715 0.072\\ 0.213 0.715 0.072\\ 0.213 0.715 0.072 \end{array} \right ) + \left ( \begin{array}{ccc} 0.787 -0.715 -0.072\\ -0.213 0.285 -0.072\\ -0.213 -0.715 0.928 \end{array} \right ) \cdot \cos{(0.53)} +\\+ \left ( \begin{array}{ccc} -0.213 -0.715 0.928\\ 0.143 0.140 -0.283\\ -0.787 0.715 0.072 \end{array} \right ) \cdot \sin{(0.53)} = \\ = \left ( \begin{array}{ccc} 0.784 -0.263 0.479\\ 0.102 1.032 -0.133\\ -0.369 0.46 0.909 \end{array} \right )$$

    При values="60"

    $$\left ( \begin{array}{ccc} 0.213 0.715 0.072\\ 0.213 0.715 0.072\\ 0.213 0.715 0.072 \end{array} \right ) + \left ( \begin{array}{ccc} 0.787 -0.715 -0.072\\ -0.213 0.285 -0.072\\ -0.213 -0.715 0.928 \end{array} \right ) \cdot \cos{(1.06)} +\\+ \left ( \begin{array}{ccc} -0.213 -0.715 0.928\\ 0.143 0.140 -0.283\\ -0.787 0.715 0.072 \end{array} \right ) \cdot \sin{(1.06)} = \\ = \left ( \begin{array}{ccc} 0.42 -0.261 0.841\\ 0.231 0.978 -0.209\\ -0.576 0.979 0.596 \end{array} \right )$$
    № Код
    9.2.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="210" height="350" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feColorMatrixM4.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="175" width="186" height="125">
    <feImage xlink:href="#MyImage" result="image1"/>
    <feColorMatrix id="color" in="image1" 
               type="matrix" values="0 0 0 0 0
                        0 0 0 0 0
                        0 0 0 0 0
                        0.2125 0.7154 0.0721 0 0"/>
</filter>

<image id="MyImage" x="10" y="175" width="186" height="125" 
       xlink:href="sea2.jpg"/>



</defs>
<rect x="0" y="0" width="200" height="200" 
      filter="url(#myFilter)"/>

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

</svg>
    Вид в браузере
    Описание
    Задаваемая матрица эквивалентна типу luminanceToAlpha

    feComponentTransfer

    Фильтр feComponentTransfer – мощный инструмент для редактирования яркости, контраста и цветового баланса изображения. Его структура имеет следующий вид (рис. 9. 2):

    (рис 9.2) Структура фильтра feComponentTransfer

    На рисунке изображена совокупность атрибутов для одного канала R, выражаемого элементов feFuncR. В состав фильтра входят четыре функции, для каждого из каналов, причем в каждом из функций поддерживаются индивидуальные настройки атрибутов. В табл. 9.3 приводится описание атрибутов фильтра feComponentTransfer.

    Атрибуты фильтра feComponentTransfer.
    № Название
    9.3.1 type
    Описание
    Тип преобразования в заданном канале. Возможны следующие значенияЗдесь приводится качественное описание значений ( за исключением linear и gamma). Для понимания материала важно увидеть результат их применения. В любом случае, исходные формулы, по которым осуществляются эти преобразования, можно посмотреть в спецификации: http://www.w3.org/TR/2003/REC-SVG11-20030114/filters.html :
  • identity – исходное значение, без преобразований.
  • table – преобразование характеризуется набором значений.
  • discrete – преобразование также характеризуется набором значений, оно носит резко выраженный характер.

  • linear - линейное преобразование, формула которого выглядит так:

    C' = slope * C + intercept,

    где C' – преобразованное значение (в заданном канале), C – исходное. Описание коэффициентов slope и intercept приводится ниже.

  • gamma – экспоненциальное преобразование, формула которого выглядит так:

    C' = amplitude * pow(C, exponent) + offset

    Описание коэффициентов amplitude, exponent и offset приводится ниже.

    •
    Диапазон значений
    identity | table | discrete | linear | gamma
    Значение по умолчанию
    –
    № Название
    9.3.2 tableValues
    Описание
    Список значений, по которому осуществляется преобразование. В простейшем случае – набор четырех чисел для каждого из каналов R, G, B, A.
    Диапазон значений
    Набор значений типа <number>
    Значение по умолчанию
    –
    № Название
    9.3.3 slope
    Описание
    Значение яркости.
    Диапазон значений
    <number>
    Значение по умолчанию
    1
    № Название
    9.3.4 intercept
    Описание
    При задании type="linear" этот атрибут характеризует область действия линейной функции.
    Диапазон значений
    <number>
    Значение по умолчанию
    0
    № Название
    9.3.5 amplitude
    Описание
    При задании type="gamma" этот атрибут характеризует амплитуду экспоненциальной функции. Визуально это представляется в степени выраженности преобразования.
    Диапазон значений
    <number>
    Значение по умолчанию
    1
    № Название
    9.3.6 Exponent
    Описание
    При задании type="gamma" этот атрибут характеризует степень экспоненциальной функции.
    Диапазон значений
    <number>
    Значение по умолчанию
    1
    № Название
    9.3.6 Offset
    Описание
    При задании type="gamma" этот атрибут характеризует смещение экспоненциальной функции.
    Диапазон значений
    <number>
    Значение по умолчанию
    0

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

    Фильтр feComponentTransfer.
    № Код Вид в браузере
    9.4.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="350" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer1.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="10" y="175" width="186" height="125">
   <feImage xlink:href="#MyImage" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.5" intercept="0"/>
  </feComponentTransfer>

</filter>

<image id="MyImage" x="10" y="175" width="186" height="125" 
       xlink:href="sea2.jpg"/>

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

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


</svg>
    Описание
    Изменение изображения в канале прозрачности ( A ).
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="1" intercept="0"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.8" intercept="0"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.6" intercept="0"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.4" intercept="0"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="identity"/>
     <feFuncB type="identity"/>
     <feFuncA type="linear" slope="0.2" intercept="0"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       slope="1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       slope="0.8"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       slope="0.6"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       slope="0.4"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       slope="0.2"</text>

</svg>
    		 Примеры уменьшения яркости изображения.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="identity"/>
     <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncB type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncG type="identity"/>
     <feFuncB type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncB type="identity"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncB type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncG type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncB type="gamma" amplitude="0" exponent="1" offset="0"/>
     <feFuncA type="gamma" amplitude="0" exponent="1" offset="0"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       feFuncR type="identity"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
       feFuncG type="identity"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
       feFuncB type="identity"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       feFuncA type="identity"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       feFuncR (G,B,A) type="gamma" </text>

</svg>
    		 Если оставить значения заданного канала, например R, неизменным ( type="identity" ), а остальные каналы выключить, задавая нулевое значение амплитуды, то изображение будет принимать тон этого канала.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer4.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="1.5" intercept="0"/>
     <feFuncG type="linear" slope="1.5" intercept="0"/>
     <feFuncB type="linear" slope="1.5" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="2" intercept="0"/>
     <feFuncG type="linear" slope="2" intercept="0"/>
     <feFuncB type="linear" slope="2" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="3" intercept="0"/>
     <feFuncG type="linear" slope="3" intercept="0"/>
     <feFuncB type="linear" slope="3" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="3" intercept="0"/>
     <feFuncG type="linear" slope="3" intercept="0"/>
     <feFuncB type="linear" slope="1" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="1" intercept="0"/>
     <feFuncG type="linear" slope="3" intercept="0"/>
     <feFuncB type="linear" slope="3" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       type="linear" slope="1.5"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
        type="linear" slope="2"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
        type="linear" slope="3"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       type="linear" slope="3" (B) slope="1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       type="linear" slope="3" (R) slope="1"</text>

</svg>
    		 Регулировка цветового баланса в задаваемых каналах.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer5.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="0.8" intercept="0"/>
     <feFuncG type="linear" slope="0.8" intercept="0"/>
     <feFuncB type="linear" slope="0.8" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="0.6" intercept="0"/>
     <feFuncG type="linear" slope="0.6" intercept="0"/>
     <feFuncB type="linear" slope="0.6" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="0.4" intercept="0"/>
     <feFuncG type="linear" slope="0.4" intercept="0"/>
     <feFuncB type="linear" slope="0.4" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="0.4" intercept="0"/>
     <feFuncG type="linear" slope="0.4" intercept="0"/>
     <feFuncB type="linear" slope="1" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="linear" slope="1" intercept="0"/>
     <feFuncG type="linear" slope="0.4" intercept="0"/>
     <feFuncB type="linear" slope="0.4" intercept="0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       type="linear" slope="0.8"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
        type="linear" slope="0.6"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
        type="linear" slope="0.4"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       type="linear" slope="0.4" (B) slope="1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
       type="linear" slope="0.4" (R) slope="1"</text>

</svg>
    		 Регулировка цветового баланса в сочетании с уменьшением яркости изображения.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer6.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues=""/>
     <feFuncG type="table" tableValues=""/>
     <feFuncB type="table" tableValues=""/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 0 0 0"/>
     <feFuncG type="table" tableValues="0 0 0 0"/>
     <feFuncB type="table" tableValues="0 0 0 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 1"/>
     <feFuncG type="table" tableValues="1 1 1 1"/>
     <feFuncB type="table" tableValues="1 1 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 0 0 1"/>
     <feFuncG type="table" tableValues="0 0 0 1"/>
     <feFuncB type="table" tableValues="0 0 0 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 0"/>
     <feFuncG type="table" tableValues="1 1 1 0"/>
     <feFuncB type="table" tableValues="1 1 1 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       type="table" tableValues=""</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
        type="table" tableValues="0 0 0 0"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
         type="table" tableValues="1 1 1 1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
       type="table" tableValues="0 0 0 1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
        type="table" tableValues="1 1 1 0"</text>

</svg>
    		 Набор tableValues с предельными значениями.
    Вид в браузере
    № Код Описание
    9.4.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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer7.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 1 1 1"/>
     <feFuncG type="table" tableValues="0 1 1 1"/>
     <feFuncB type="table" tableValues="0 1 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 0 0 0"/>
     <feFuncG type="table" tableValues="1 0 0 0"/>
     <feFuncB type="table" tableValues="1 0 0 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 0 1 1"/>
     <feFuncG type="table" tableValues="1 0 1 1"/>
     <feFuncB type="table" tableValues="1 0 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 1 0 0"/>
     <feFuncG type="table" tableValues="0 1 0 0"/>
     <feFuncB type="table" tableValues="0 1 0 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="0 1 1 0"/>
     <feFuncG type="table" tableValues="0 1 1 0"/>
     <feFuncB type="table" tableValues="0 1 1 0"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       type="table" tableValues="0 1 1 1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
         type="table" tableValues="1 0 0 0"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
         type="table" tableValues="1 0 1 1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
        type="table" tableValues="0 1 0 0"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
        type="table" tableValues="0 1 1 0"</text>

</svg>
    		 Набор tableValues позволяет придавать изображению сюрреалистические оттенки.
    Вид в браузере
    № Код Описание
    9.4.8 
    <?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="420" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feComponentTransfer8.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="215" y="10" width="186" height="125">
    <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 1"/>
     <feFuncG type="table" tableValues="1 0 0 1"/>
     <feFuncB type="table" tableValues="1 0 0 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>

</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="10" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 0 0 1"/>
     <feFuncG type="table" tableValues="1 1 1 1"/>
     <feFuncB type="table" tableValues="1 0 0 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="215" y="155" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 0 0 1"/>
     <feFuncG type="table" tableValues="1 0 0 1"/>
     <feFuncB type="table" tableValues="1 1 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="10" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 1"/>
     <feFuncG type="table" tableValues="1 1 1 1"/>
     <feFuncB type="table" tableValues="1 0 0 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="215" y="300" width="186" height="125">
   <feImage xlink:href="sea2.jpg" result="image1"/>
    <feComponentTransfer in="image1">
     <feFuncR type="table" tableValues="1 1 1 1"/>
     <feFuncG type="table" tableValues="1 0 0 1"/>
     <feFuncB type="table" tableValues="1 1 1 1"/>
     <feFuncA type="identity"/>
  </feComponentTransfer>
</filter>


</defs>

<rect x="10" y="155" width="186" height="125" 
      filter="url(#myFilter1)"/>
<rect x="10" y="300" width="186" height="125" 
      filter="url(#myFilter2)"/>
<rect x="215" y="10" width="186" height="125" 
      filter="url(#myFilter3)"/>
<rect x="215" y="155" width="186" height="125" 
      filter="url(#myFilter4)"/>
<rect x="215" y="300" width="186" height="125" 
      filter="url(#myFilter5)"/>

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

<!--Подписи-->
<text x="10" y="145" 
       style="fill: black; font-size: 12px">
       sea2.jpg</text>
<text x="215" y="145" style="fill: black; font-size: 12px">
       (G, B) "1 0 0 1" (R) "1 1 1 1"</text>
<text x="10" y="290" style="fill: black; font-size: 12px">
        (R, B) "1 0 0 1" (B) "1 1 1 1"</text>
<text x="215" y="290" style="fill: black; font-size: 12px">
         (R, G) "1 0 0 1" (B) "1 1 1 1"</text>
<text x="10" y="435" style="fill: black; font-size: 12px">
         (B) "1 0 0 1" (R, G) "1 1 1 1"</text>
<text x="215" y="435" style="fill: black; font-size: 12px">
          (G) "1 0 0 1" (R, B) "1 1 1 1"</text>

</svg>
    		 Набор tableValues со значениями, смещающими цветовой баланс в сторону основных и дополнительных цветов.
    Вид в браузере

    feTurbulence

    Фильтр feTurbulence содержит встроенные средства для генерации структуры, напоминающей облака или мрамор. В сочетании с фильтрами освещения (см. Лекцию 10) эти текстуры могут быть окрашены в произвольные цвета, а также менять свой вид (например, выглядеть как мешковина). Структура этого фильтра выглядит так (рис. 9.3 ):

    (рис 9.3) Структура фильтра feTurbulence

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

    № Название
    9.5.1 baseFrequency
    Описание
    Частота генерации шума, которая представляется в виде двух чисел, определяющих горизонтальное и вертикальное направления. Если задается одно число, то оно по умолчанию принимается для обоих направлений.
    Диапазон значений
    <number> <number>
    Значение по умолчанию
    0
    № Название
    9.5.2 numOctaves
    Описание
    Число гармоник генерации шума.
    Диапазон значений
    <integer>
    Значение по умолчанию
    1
    № Название
    9.5.3 seed
    Описание
    Начальное число на основании которого генерируются случайные числа.
    Диапазон значений
    <number>
    Значение по умолчанию
    0
    № Название
    9.5.4 stitchTiles
    Описание
    При значении stitch сглаживаются края генерируемых линий.
    Диапазон значений
    stitch | noStitch
    Значение по умолчанию
    noStitch
    № Название
    9.5.5 type
    Описание
    Тип генерируемой текстуры.
    Диапазон значений
    fractalNoise | turbulence
    Значение по умолчанию
    turbulence

    В табл. 9.6 приводятся примеры использования этого фильтра.

    № Код Вид в браузере
    9.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="200" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence1.svg
     </desc>

<defs>

<filter id="myFilter" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="200" height="200">
<feTurbulence type="fractalNoise" baseFrequency="0.01" 
              numOctaves="4" seed="0"/>
</filter>


</defs>
<rect x="0" y="0" width="200" height="200" 
      filter="url(#myFilter)"/>

</svg>
    Описание
    Тип fractalNoise наиболее пригоден для создания структуры, напоминающей облака.
    № Код Описание
    9.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="460" height="610" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence2.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.01" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.02" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.05" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.1" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.2" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.3" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter7" filterUnits="userSpaceOnUse" 
        x="0" y="300" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.4" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter8" filterUnits="userSpaceOnUse" 
        x="150" y="300" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.5" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter9" filterUnits="userSpaceOnUse" 
        x="300" y="300" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.6" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter10" filterUnits="userSpaceOnUse" 
        x="0" y="450" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.7" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter11" filterUnits="userSpaceOnUse" 
        x="150" y="450" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter12" filterUnits="userSpaceOnUse" 
        x="300" y="450" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="1" 
              numOctaves="4" seed="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)"/>
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)"/>
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)"/>
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)"/>
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)"/>
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)"/>
<rect x="0" y="300" width="150" height="150" 
      filter="url(#myFilter7)"/>
<rect x="150" y="300" width="150" height="150" 
      filter="url(#myFilter8)"/>
<rect x="300" y="300" width="150" height="150" 
      filter="url(#myFilter9)"/>
<rect x="0" y="450" width="150" height="150" 
      filter="url(#myFilter10)"/>
<rect x="150" y="450" width="150" height="150" 
      filter="url(#myFilter11)"/>
<rect x="300" y="450" width="150" height="150" 
      filter="url(#myFilter12)"/>

<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="600" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="150" y="0" width="150" height="600" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="150" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="450" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>

<!--Подписи-->
<text x="10" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.01"</text>
<text x="160" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.02"</text>
<text x="310" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.05"</text>

<text x="10" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1"</text>
<text x="160" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.2"</text>
<text x="310" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.3"</text>

<text x="10" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.4"</text>
<text x="160" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.5"</text>
<text x="310" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.6"</text>

<text x="10" y="465" style="fill: black; font-size: 12px">
       baseFrequency="0.7"</text>
<text x="160" y="465" style="fill: black; font-size: 12px">
       baseFrequency="0"</text>
<text x="310" y="465" style="fill: black; font-size: 12px">
       baseFrequency="1"</text>

</svg>
    		 Атрибут baseFrequency за управление ячеистой структуры. Чем больше значение этого атрибута, тем меньше размер структуры.
    Вид в браузере
    № Код Описание
    9.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="460" height="610" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence3.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.01" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.02" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.05" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.1" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.2" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.3" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter7" filterUnits="userSpaceOnUse" 
        x="0" y="300" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.4" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter8" filterUnits="userSpaceOnUse" 
        x="150" y="300" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.5" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter9" filterUnits="userSpaceOnUse" 
        x="300" y="300" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.6" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter10" filterUnits="userSpaceOnUse" 
        x="0" y="450" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.7" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter11" filterUnits="userSpaceOnUse" 
        x="150" y="450" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter12" filterUnits="userSpaceOnUse" 
        x="300" y="450" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="1" 
              numOctaves="4" seed="0"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)"/>
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)"/>
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)"/>
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)"/>
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)"/>
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)"/>
<rect x="0" y="300" width="150" height="150" 
      filter="url(#myFilter7)"/>
<rect x="150" y="300" width="150" height="150" 
      filter="url(#myFilter8)"/>
<rect x="300" y="300" width="150" height="150" 
      filter="url(#myFilter9)"/>
<rect x="0" y="450" width="150" height="150" 
      filter="url(#myFilter10)"/>
<rect x="150" y="450" width="150" height="150" 
      filter="url(#myFilter11)"/>
<rect x="300" y="450" width="150" height="150" 
      filter="url(#myFilter12)"/>

<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="600" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="150" y="0" width="150" height="600" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="150" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="450" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>

<!--Подписи-->
<text x="10" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.01"</text>
<text x="160" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.02"</text>
<text x="310" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.05"</text>

<text x="10" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1"</text>
<text x="160" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.2"</text>
<text x="310" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.3"</text>

<text x="10" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.4"</text>
<text x="160" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.5"</text>
<text x="310" y="315" style="fill: black; font-size: 12px">
       baseFrequency="0.6"</text>

<text x="10" y="465" style="fill: black; font-size: 12px">
       baseFrequency="0.7"</text>
<text x="160" y="465" style="fill: black; font-size: 12px">
       baseFrequency="0"</text>
<text x="310" y="465" style="fill: black; font-size: 12px">
       baseFrequency="1"</text>

</svg>
    		 Тип turbulence позволяет имитировать мраморную поверхность.
    Вид в браузере
    № Код Описание
    9.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence4.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0,0.1" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0,0.1" 
              numOctaves="4" seed="10"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.01, 0.1" 
              numOctaves="4" seed="1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.1,0.01" 
              numOctaves="4" seed="1"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.1, 0" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence type="fractalNoise" baseFrequency="0.1,0" 
              numOctaves="4" seed="10"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)"/>
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)"/>
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)"/>
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)"/>
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)"/>
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)"/>


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="150" y="0" width="150" height="300" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="150" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>

<!--Подписи-->
<text x="10" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0,0.1" </text>
<text x="10" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="10" y="45" style="fill: black; font-size: 12px">
       seed="0"</text>

<text x="160" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0,0.1"  </text>
<text x="160" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="160" y="45" style="fill: black; font-size: 12px">
       seed="10"</text>

<text x="304" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.01, 0.1" </text>
<text x="304" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="304" y="45" style="fill: black; font-size: 12px">
       seed="1"</text>

<text x="5" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1,0.01"</text>
<text x="5" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="5" y="195" style="fill: black; font-size: 12px">
       seed="1"</text>

<text x="160" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1, 0"  </text>
<text x="160" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="160" y="195" style="fill: black; font-size: 12px">
       seed="0"</text>

<text x="310" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1,0"  </text>
<text x="310" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="310" y="195" style="fill: black; font-size: 12px">
       seed="10"</text>

</svg>
    		 Атрибут seed отвечает за выраженность слоистой структуры. Пара значений атрибута baseFrequency задает направление структуры.
    Вид в браузере
    № Код Описание
    9.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="460" height="310" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title> Лекция 9. Фильтры. Часть III </title>
     <desc>
          Пример feTurbulence5.svg
     </desc>

<defs>

<filter id="myFilter1" filterUnits="userSpaceOnUse" 
        x="0" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0,0.1" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter2" filterUnits="userSpaceOnUse" 
        x="150" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0,0.1" 
              numOctaves="4" seed="10"/>
</filter>

<filter id="myFilter3" filterUnits="userSpaceOnUse" 
        x="300" y="0" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.01, 0.1" 
              numOctaves="4" seed="1"/>
</filter>

<filter id="myFilter4" filterUnits="userSpaceOnUse" 
        x="0" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.1,0.01" 
              numOctaves="4" seed="1"/>
</filter>

<filter id="myFilter5" filterUnits="userSpaceOnUse" 
        x="150" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.1, 0" 
              numOctaves="4" seed="0"/>
</filter>

<filter id="myFilter6" filterUnits="userSpaceOnUse" 
        x="300" y="150" width="150" height="150">
<feTurbulence type="turbulence" baseFrequency="0.1,0" 
              numOctaves="4" seed="10"/>
</filter>

</defs>
<rect x="0" y="0" width="150" height="150" 
      filter="url(#myFilter1)"/>
<rect x="150" y="0" width="150" height="150" 
      filter="url(#myFilter2)"/>
<rect x="300" y="0" width="150" height="150" 
      filter="url(#myFilter3)"/>
<rect x="0" y="150" width="150" height="150" 
      filter="url(#myFilter4)"/>
<rect x="150" y="150" width="150" height="150" 
      filter="url(#myFilter5)"/>
<rect x="300" y="150" width="150" height="150" 
      filter="url(#myFilter6)"/>


<!--Вспомогательные фигуры-->
<rect x="0" y="0" width="450" height="300" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="150" y="0" width="150" height="300" 
       style="fill:none;stroke:black; stroke-width:2"/>
<rect x="0" y="150" width="450" height="150" 
       style="fill:none;stroke:black; stroke-width:2"/>

<!--Подписи-->
<text x="10" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0,0.1" </text>
<text x="10" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="10" y="45" style="fill: black; font-size: 12px">
       seed="0"</text>

<text x="160" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0,0.1"  </text>
<text x="160" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="160" y="45" style="fill: black; font-size: 12px">
       seed="10"</text>

<text x="304" y="15" style="fill: black; font-size: 12px">
       baseFrequency="0.01, 0.1" </text>
<text x="304" y="30" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="304" y="45" style="fill: black; font-size: 12px">
       seed="1"</text>

<text x="5" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1,0.01"</text>
<text x="5" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="5" y="195" style="fill: black; font-size: 12px">
       seed="1"</text>

<text x="160" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1, 0"  </text>
<text x="160" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="160" y="195" style="fill: black; font-size: 12px">
       seed="0"</text>

<text x="310" y="165" style="fill: black; font-size: 12px">
       baseFrequency="0.1,0"  </text>
<text x="310" y="180" style="fill: black; font-size: 12px">
       numOctaves="4"</text>
<text x="310" y="195" style="fill: black; font-size: 12px">
       seed="10"</text>

</svg>
    		 Слоистая стуктура и ее направления для типа turbulence.
    Вид в браузере
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^