SVG FILTERS

SVG: SVG

SVG filters: filters, reference

How to make, filter

In the blog SVG to PIXEL, I have introduced SVG, and the more I dig the more I find user-friendly things about SVG.

In this blog, I talk about SVG more as a web designer more than an artist amateur but it is worth to

invest in this other point of view to handle SVG, and finally produce Art.

More specifically, this is about handling filters in SVG.

So, the starting point is to very understand that an SVG file can be read in many ways, and here, two ways:

SVG, vector graphics editor;
Text editor

The best text editor

In this blog, I had to use a text editor, or I wanted to, but, in fact, I had, because not everything is

implemented in vector graphics editors.

Notepad is the very basic on every computer, notepad++ has nothing to see with notepad, became

very popular and can handle many functions for text and structure recognitions, very useful to write

code (additionally).

Structure of the SVG file, what a Vector Graphics Editor produces,

It is a sequence of blocks, starting with a less-than sign < and finishing with a more-than >

Start: <

End: > ,or />

Nothing to see with the mathematical meaning of less or more.

The blocks can follow other blocks, or be using other blocks. Just remembering that the game is to find

starting and ending

First block:

This is information that this SVG file is all set for the internet. It is a Markup Language.

Because of the pair <?, this block has also a special meaning for the Markup Language editor.

Second block:

This block as a special meaning for the Markup Language editor, this pair <!, it means a comment, which can be ignored by the Markup Language editor, but stays in the file as a note when the file is edited as a text (with a Text editor).

Other blocks start with the less-than sign <, and have a key word.

In the sample file, one can find:

A large block embedding all other blocks, starting with the Less-than sign, and it has to be considered as a parent container block by the Markup Language editor, so, must have the key word svg (svg block, start <svg, end, </svg> (very end of the file);
<metadata </metadata>
<defs </defs>

<filter </filter>

<feGaussianBlur />
<feTurbulence />
<feDisplacementMap />
<feSpecularLighting </feSpecularLighting>
<feDiffuseLighting </feDiffuseLighting>
<feBlend />
<feComposite />

<sodipodi </>
<image style="filter:url(#filter4052)" />, which is here How to base64 encode a rasterized image for embedding it …

data:image/png;base64 tells the browser that the data is inline, is a png image and is in this case base64 encoded.

xlink:href="data:image/jpeg;base64

286,477 character in UTF-8

image

Preliminary step, Magic Eraser AI, likely to be a fuzzy select, an edge detection a heal, a clone, a coloring, a blurring. This helps

to remove all the shortcuts from the screen of the phone.

I used Magic Eraser AI to make it. Magic Eraser AI is very funny and can retouch imperfections of the

image.

Topic: the Tinfoil filter

“Metallic foil effect combining two lighting types and variable crumple" in menu Bumps of Inkscape.

Flow Charts

Flow Chart (manual) made by the blogger

Example of Flow Chart (automatic) made by , online (nothing to see with the tinfoil) (Sketching effect applied on the little pig).

First steps

First, let I focus on the noise generator, the Displacement filter is commented.

fractalNoise or Turbulence are two options of noise generator with feTurbulence, the number of octaves control has the effects

shown below:

Turbulence, 5 octaves, 2. fractalNoise, 1 octave, 3. fractalNoise, 5 octaves

Decomposition of “fractalNoise, 5 octaves” in RGB channels (recolored artificially with built-in Google filters to catch
more easily each color channel). This decomposition is useful for understanding feDisplacementMap.

Second, the Displacement filter is added.

Below, left, scale=100, right, scale=500 for a displacement map using “fractalNoise, 5 octaves”, “B”lue channel for the displacement along X, “G”reen channel for the displacement along Y