Лабораторная работа №6 по предмету «Графическая визуализация».

Выполнил студент второго курса математического факультета Фомин В.Л.

Фильтры в SVG

Цель работы: Применить различные фильтры к изображению.

<?xml version="1.0" encoding="utf-8"?>                      
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="800" height="600">
<defs>
<filter id="myFilter1" filterUnits="userSpaceOnUse" x="210" y="10" width="186" height="125">
<feImage xlink:href="Nature22.jpg" result="image1"/>
<feColorMatrix id="color1" 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="myFilter2" filterUnits="userSpaceOnUse" x="410" y="10" width="186" height="125">
<feImage xlink:href="Nature22.jpg" result="image1"/>
<feColorMatrix id="color2" 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="myFilter3" filterUnits="userSpaceOnUse" x="610" y="10" width="186" height="125">
<feImage xlink:href="Nature22.jpg" result="image1"/>
<feColorMatrix id="color3" 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="myFilter4" filterUnits="userSpaceOnUse" x="10" y="150" width="186" height="125">
<feImage xlink:href="Nature22.jpg" result="image1"/>
<feColorMatrix id="color4" in="image1"
type="matrix" values=
"1 0 0 0 0
1 1 0 0 0
1 1 1 0 0
0 0 0 1 0"/>
</filter>
<filter id="myFilter5" filterUnits="userSpaceOnUse" x="210" y="150" width="186" height="125">
<feImage xlink:href="Nature22.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>
<filter id="myFilter6" filterUnits="userSpaceOnUse" x="410" y="150" width="186" height="125">
<feImage xlink:href="Nature22.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="myFilter7" filterUnits="userSpaceOnUse" x="610" y="150" width="186" height="125">
<feImage xlink:href="Nature22.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="myFilter8" filterUnits="userSpaceOnUse" x="10" y="300" width="186" height="125">
<feImage xlink:href="Nature22.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="myFilter9" filterUnits="userSpaceOnUse" x="210" y="300" width="186" height="125">
<feImage xlink:href="Nature22.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="myFilter10" filterUnits="userSpaceOnUse" x="410" y="300" width="186" height="125">
<feImage xlink:href="Nature22.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>
<filter id="myFilter11" filterUnits="userSpaceOnUse" x="610" y="300" width="186" height="125">
<feImage xlink:href="Nature22.jpg" result="image1"/>
<feComponentTransfer in="image1">
<feFuncR type="table" tableValues="1 0 0 0"/>
<feFuncG type="table" tableValues="0 1 0 0"/>
<feFuncB type="table" tableValues="0 0 1 0"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
</defs>
<image x="10" y="10" width="186" height="125" xlink:href="Nature22.jpg"/>
<rect x="210" y="10" width="186" height="125" filter="url(#myFilter1)"/>
<rect x="410" y="10" width="186" height="125" filter="url(#myFilter2)"/>
<rect x="610" y="10" width="186" height="125" filter="url(#myFilter3)"/>
<rect x="10" y="150" width="186" height="125" filter="url(#myFilter4)"/>
<rect x="210" y="150" width="186" height="125" filter="url(#myFilter5)"/>
<rect x="410" y="150" width="186" height="125" filter="url(#myFilter6)"/>
<rect x="610" y="150" width="186" height="125" filter="url(#myFilter7)"/>
<rect x="10" y="300" width="186" height="125" filter="url(#myFilter8)"/>
<rect x="210" y="300" width="186" height="125" filter="url(#myFilter9)"/>
<rect x="410" y="300" width="186" height="125" filter="url(#myFilter10)"/>
<rect x="610" y="300" width="186" height="125" filter="url(#myFilter11)"/>
</svg>

Соответствующий рисунок имеет ширину 800 пикселей и высоту 600 пикселей.
К изображению применяются фильтры feColorMatrix, изменяющий цвет, и фильтры feComponentTransfer, создающие сюрреалистические изображения. Фильтры заданы соответсвующими матрицами. Первая строка матрицы отвечает за долю красного, вторая за долю зелёного, третья - за долю синего, четвёртая строка (для feColorMatrix) - за прозрачность изображения.

Вывод. Фильтры позволяют варьировать оттенки цвета изображения в очень большом диапазоне.

Ссылка на SVG-рисунок

На главную страницу.