Filter effects in SVG (SVGOpen 2010)

 

Solutions to Lab Exercises (problems are on separate pages):

 

Exercise A

 

0.         (getting started with an SVG file):

<svg xmlns="http://www.w3.org/2000/svg"

      xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Exercise A</title>

.

.

.

</svg>

 

  1. (rect and image, side by side):

 

<image x="0" xlink:href="p17.jpg"  width="150" height="175" />

<text x="20" y="185" font-size="12">image

</text>

 

<rect x="155" fill="#a82"  width="150" height="175" />

<text x="175" y="185" font-size="12">rect

<desc>The two text tags are optional as is this desc tag.</desc>

</text>

 

 

(or, more simply):

 

<image x="0" xlink:href="p17.jpg"  width="150" height="175" />

<rect x="155" fill="#a82"  width="150" height="175" />

 

 

  1. (inside a group with an id):

 

<g id="g">

       <image x="0" xlink:href="p17.jpg"  width="150" height="175" />

       <rect x="155" fill="#a82"  width="150" height="175" />

</g>

 

  1.  (duplicated with <use> &
  2.    translated below):

 

<use xlink:href="#g" transform="translate(0,200)"/>

 

  1. (blurred):

<defs><filter id="F">

       <feGaussianBlur stdDeviation="5"/>

</filter></defs>

.

.

.

<use xlink:href="#g" transform="translate(0,200)" filter="url(#F)"/>

 

A complete solution is shown at end of handout. (or here)

 

 

Exercise B

 

0.         (getting started with an SVG file):

<svg xmlns="http://www.w3.org/2000/svg"

      xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Exercise B</title>

.

.

.

</svg>

 

  1. (three copies of an image, side by side):

 

<image  x="0"  xlink:href="p17.jpg" width="150" height="175" />

<image x="155" xlink:href="p17.jpg" width="150" height="175" />

<image x="310" xlink:href="p17.jpg" width="150" height="175" />

 

(or, using two fewer keystrokes : 187 versus 189):

 

<image id="i" x="0" xlink:href="p17.jpg" filter="url(#R)" width="150" height="175" />

<use xlink:href="#i" transform="translate(155,0)"/>

<use xlink:href="#i" transform="translate(310,0)"/>

 

  1. (eliminate Red channel):

 

<filter id="R">

       <feColorMatrix type="matrix"

values="   0     0     0     0     0

           0     1     0     0     0 

           0     0     1     0     0  

           0     0     0     1     0

 

"/></filter>

 

  1.  (three wide rectangles):

 

<rect y="30" height="20" width="100%" id="r" fill="red"/>

<rect y="80" height="20" width="100%" fill="green"/>

<rect y="130" height="20" width="100%" fill="blue"/>

 

  1. (convert “red” to transparent):

 

<filter id="A">

       <feColorMatrix type="matrix"

values="  -1    0    0    0    0 

           0    1    0    0    0 

           0    0    1    0    0

           1    0    0    0    0

"/>

</filter>

 

A complete solution (as well as an alternative one showing the use of <feComponentTransfer> ) is shown at end of the handout. (or here)

 


 

Exercise C

 

0.         (getting started with an SVG file):

<svg xmlns="http://www.w3.org/2000/svg"

      xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Exercise C</title>

.

.

.

</svg>

 

  1. (two copies of an image, side by side):

 

<image  x="0"  xlink:href="p17.jpg" width="150" height="175" />

<image x="155" xlink:href="p17.jpg" width="150" height="175" />

 

 

  1. (apply feGaussianBlur and feConvolveMatrix):

 

<filter id="blurSharpen">

       <feGaussianBlur stdDeviation="5"/>

       <feConvolveMatrix order="3"

              kernelMatrix="

                1   -1   1

               -1  -.01  -1

                1   -1   1

       "/>

</filter>

 

(and the other way around):

 

<filter id="sharpenBlur">

       <feConvolveMatrix order="3"

              kernelMatrix="

                1   -1   1

               -1  -.01  -1

                1   -1   1

       "/>

       <feGaussianBlur stdDeviation="5"/>

</filter>

 

A complete solution  is shown at end of the handout. (or here)


 

Exercise D

 

0.         (getting started with an SVG file):

<svg xmlns="http://www.w3.org/2000/svg"

      xmlns:xlink="http://www.w3.org/1999/xlink">

<title>Exercise D</title>

.

.

.

</svg>

 

  1. (place feTurbulence in filter stream):

 

<filter id="compositeOut" y="0" x="0" width="100%" height="100%">

       <feTurbulence baseFrequency=".05" numOctaves="3" result="A"/>

</filter>

 

  1. (place image in filter stream):

 

<filter id="compositeOut" y="0" x="0" width="100%" height="100%">

       <feTurbulence baseFrequency=".05" numOctaves="3" result="A"/>

       <feImage xlink:href='p17.jpg' result="B"/>

</filter>

 

  1. (use feComposite to combine):

 

<filter id="compositeOut" y="0" x="0" width="100%" height="100%">

       <feTurbulence baseFrequency=".05" numOctaves="3" result="A"/>

       <feImage xlink:href='p17.jpg' result="B"/>

       <feComposite in2="A" in="B" operator="out" />

</filter>

 

A complete solution is shown at end of the handout. (or here)