(click anywhere to close)
OPEN MENU

[SVG] Filters II

category: Website | course: SVG | difficulty:

Continuing on last chapter, I’ll discuss all other filters available in SVG. I won’t go into too much detail – you’ll need to experiment with these yourself to fully understand them, I think.

Textures

To place an image within the graphic, use

<feImage xlink:href=”linkToImage” />

To tile the result of another filter, for example the image from the previous one, across the entire graphic, use:

<feTile />

To create a random noise texture, use

<feTurbulence baseFrequency=”value” numOctaves=”value” seed=”value” stitchTiles=”value” type=”value” />

The first argument controls x and y pattern repetition. The second controls the level of detail, while the third represents the starting value for the randomness. These three mainly influence the algorithm for creating the noise.

The stitchTiles attribute has values stitch and noStitch; the first attempts to make the noise look smooth, while the second doesn’t. The type can be either fractalNoise (which will output more of a sandy result), or turbulence (default).

<svg>
    <defs>
        <filter id="ourFilter" width="200" height="200">
            <feTurbulence baseFrequency="0.2" numOctaves="10" seed="4" in="SourceGraphic" stichTiles="stitch"/>
        </filter>
    </defs>
    <rect x="10" y="10" width="70" height="70" filter="url(#ourFilter)" fill="red" />
</svg>

HTML SVG EXAMPLE

Morphing & Displacing

To extrude or intrude a shape, use

<feMorphology operator=”value” radius=”value” />

The first argument has the values erode (shrink the edges of the shape) and dilate (enlarge the edges of the shape). The radius determines by what amount this operator is executed.

<svg>
    <defs>
        <filter id="ourFilter" width="200" height="200">
            <feMorphology in="SourceGraphic" operator="erode" radius="1" />
        </filter>
        <filter id="ourSecondFilter" width="200" height="200">
            <feMorphology in="SourceGraphic" operator="dilate" radius="2" />
        </filter>
    </defs>
    <text x="20" y="50" filter="url(#ourFilter)" style="font-size:60px;" fill="red">
        LIFE
    </text>
    <text x="20" y="120" filter="url(#ourSecondFilter)" style="font-size:60px;" fill="red">
        LIFE
    </text>
</svg>
LIFE LIFE

To morph two shapes together, use

<feComposite in2=”secondShape” operator=”value” k1=”val” k2=”val” k3=”val” k4=”val” />

It determines, using a certain operator, which alpha to assign to a pixel; a value of 0 means the pixel isn’t displayed, a value of 1 means it’s fully displayed. The last four arguments are only applicable if you choose the arithmetic operator. In that case, the result is calculated with the formula

result = k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4 (i = input)

This way of using it is especially important when working with lighting, which you’ll see next chapter. The other values for the operator are:

Value

Description

over

Both images are displayed over each other

in

The part of the first image that is within the second image is displayed

out

The part of the first image that is outside of the second image is displayed

atop

Same as in, but now both images are displayed

xor

Both images are displayed, except for every overlapping pixel

<svg>
    <defs>
        <filter id="ourFilter" x="-10%" y="-10%" width="200" height="200">
            <feImage x="10" y="20" width="90" height="90" xlink:href="media/SVGBitmapvsVector.png" result="img"/>
            <feComposite in="SourceGraphic" in2="img" operator="xor" />
        </filter>
    </defs>
    <text x="20" y="80" filter="url(#ourFilter)" style="font-size:60px;" fill="red">
        LIFE
    </text>
</svg>
LIFE

Lastly, we can displace a graphic using information from another graphic. For that, use

<feDisplacementMap in2=”secondGraphic” scale=”value” xChannelSelector=”value” yChannelSelector=”value” />

The channel selectors each can have one of the values R, G, B or A. They select one of these colour channels of the second graphic to use for x or y displacement. The scale attribute scales the displacement, which means 0 will undo any displacement, and 1 is the default scale.

<svg>
    <defs>
        <filter id="ourFilter" x="-10%" y="-10%" width="200" height="200">
            <!-- The text is red, which means it's displaced a lot in the x direction. -->
            <!-- The y direction isn't, because it uses blue, which is 0 -->
            <feDisplacementMap in="SourceGrapic" in2="SourceGraphic" scale="3" xChannelSelector="R" yChannelSelector="B" />
        </filter>
    </defs>
    <text x="20" y="80" filter="url(#ourFilter)" style="font-size:60px;" fill="red">
        LIFE
    </text>
</svg>
LIFE

3D Transforms

There’s only one element to transform shapes to be (seemingly) 3D, which means it has lots of attributes. The syntax is:

<feConvolveMatrix order=”matSize” kernelMatrix=”matrix” divisor=”div” bias=”bias” />

The order attribute sets the size of the matrix using two comma separated numbers. The matrix itself is supplied within the kernelMatrix attribute. The matrix consists of numbers, separated by whitespace. You can view the size of the matrix as the depth of extrusion (4x4 means 4-pixel deep extrusion), and the placing of 1s as the angle. The div value divides the values that come out of this matrix, while the bias value adds to all those values.

Furthermore, the targetX and targetY attributes set how to position the matrix relative to the target pixels. The default is at the centre, i.e., floor(order/2);

The edgeMode attribute determines how to extrude the input graphic. Possible values are:

  • duplicate: Default. Extends along each border, using the pixel value on the outside.
  • wrap: Extends along each border, using the pixel value on the inside.
  • none:   Extends using a pixel value of 0 for R, G, B and A.

The kernelUnitLength can be set to assign a new value for how the distance in the graphic relates to the distance between two columns of the matrix. This means that the size of the matrix doesn’t automatically determine the size of extrusion, but you can scale it yourself.

Lastly, the preserveAlpha attribute can be set to either false or true. The first is default, and means the alpha channel is taken into account during all these matrix multiplications,  while the latter means the matrix only applies to the colour channels.

(Remind me, if you read this, that I need to explain this better one day if I have the time)

<svg>
    <defs>
        <filter id="ourFilter" x="-10%" y="-10%" width="200" height="200">
            <!-- Text is extruded by 3/0.5 = 6 pixels-->
            <feConvolveMatrix order="3,3" kernelMatrix="1 0 0 0 1 0 0 0 1" divisor="0.5" />
        </filter>
    </defs>
    <text x="20" y="20" filter="url(#ourFilter)">
        LIFE IS LIFE
    </text>
</svg>
LIFE IS LIFE
CONTINUE WITH THIS COURSE
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)