Tutorial SVG 10: filters

SVG filters

SVG filters

In SVG there are quite a lot of so called filters, which you can apply to an underlying layer similar with how it is done in Photoshop but programmatically. There are a lot of of filters to our disposal which we can apply with the help of many different available techniques like chaining, blending and compositing.

Source code example: syntax of the <filter> element

<svg>
	<filter id="mySVGFilter">
    	<Primitive1><Primitive2>...<PrimitiveX>
    </filter>
    <ParticularSVGObjectOrGroup filter="url(#mySVGFilter)"/>
</svg>

Let's start with a first example. of a simple rectangular on which we apply a blurfilter

The Basic Primitives

1. The <feGaussianBlur> filter

<svg width="150px" height="150px" viewbox="0 0 300 300" >
    <filter id="filter1">
        <feGaussianBlur stdDeviation="10" />
    </filter>
    <rect x="5%" y="5%" width="90%" height="90%" 
    fill="white"
    filter="url(#filter1)"/>
</svg>

The initial image

<svg width="150px" height="150px" viewbox="0 0 300 300" >
	<image id="coworker" x="0" y="0" width="100%" height="100%"  xlink:href="coworker2a.jpg" />
</svg>

The <feGaussianBlur> filter on the image

<svg width="150px" height="150px" viewbox="0 0 300 300" >
    <filter id="filter1a">
        <feGaussianBlur stdDeviation="10,10" />
    </filter>
    <image x="5%" y="5%" width="90%" height="90%"
    xlink:href="coworker.jpg"
    filter="url(#filter1a)"/>
</svg>

Horizonal blurring

<svg width="150px" height="150px" viewbox="0 0 300 300" >
    <filter id="filter1b">
        <feGaussianBlur stdDeviation="10,0" />
    </filter>
    <image x="5%" y="5%" width="90%" height="90%"
    xlink:href="coworker.jpg"
    filter="url(#filter1b)"/>
</svg>

Vertical blurring

<svg width="150px" height="150px" viewbox="0 0 300 300" >
    <filter id="filter1c">
        <feGaussianBlur stdDeviation="0,10" />
    </filter>
    <image x="5%" y="5%" width="90%" height="90%"
    xlink:href="coworker.jpg"
    filter="url(#filter1c)"/>
</svg>

2. The <feColorMatrix> filter met type="saturate" values="0"

You can also use <feColorMatrix> to rotate the color values (through the circular scale that is the rainbow of hues) using hueRotate

<svg width="150px" height="150px" viewbox="0 0 300 300" >
    <filter id="filter2">	
        <feColorMatrix type="saturate" values="0" />
    </filter>
    <image x="0" y="0" width="100%" height="100%"
    xlink:href="coworker.jpg"
    filter="url(#filter2)"/>
</svg>

2.a The <feColorMatrix> filter met type="hueRotate" values="90"

<svg width="150px" height="150px" viewbox="0 0 300 300" >
    <filter id="filter2a">	
        <feColorMatrix type="hueRotate" values="90" />
    </filter>
    <image x="0" y="0" width="100%" height="100%"
    xlink:href="coworker.jpg"
    filter="url(#filter2a)"/>
</svg>

2.b The <feColorMatrix> filter met type="hueRotate" values="180"

<svg width="150px" height="150px" viewbox="0 0 300 300" >
    <filter id="filter2b">	
        <feColorMatrix type="hueRotate" values="180" />
    </filter>
    <image x="0" y="0" width="100%" height="100%"
    xlink:href="coworker.jpg"
    filter="url(#filter2b)"/>
</svg>

2.c The <feColorMatrix> filter met type="hueRotate" values="270"

<svg width="150px" height="150px" viewbox="0 0 300 300" >
    <filter id="filter2c">	
        <feColorMatrix type="hueRotate" values="270" />
    </filter>
    <image x="0" y="0" width="100%" height="100%"
    xlink:href="coworker.jpg"
    filter="url(#filter2c)"/>
</svg>

Next tutorial

Leave a comment