Front end will know will learn | SVG see this article is enough (11)

This is the 16th day of my participation in the August More Text Challenge. For details, see:August is more challenging

This is the SVG series directory:

• Front end will know will learn | SVG see this article is enough (a)
• Front end will know will learn | SVG see this article is enough (2)
• Front end will know will learn | SVG see this article is enough (3)
• Front end will know will learn | SVG see this article is enough (4)
• Front end will know will learn | SVG see this article is enough (5)
• Front end will know will learn | SVG see this article is enough (6)
• Front end will know will learn | SVG see this article is enough (7)
• Front end will know will learn | SVG see this article is enough (8)
• Front end will know will learn | SVG see this article is enough (9)
• Front end will know will learn | SVG see this article is enough (10)

preface

In some cases, basic SVG graphics do not provide the desired effect. For example, common shadow effects, blur effects, etc., filters are used in SVG to solve the problem of creating complex effects.

filter

SVG filters require an input source when applying filter effects. This input source can be a graph, or the graph’s alpha channel, or the output value of another filter.

An SVG filter can produce an output image from an input source. The output of one filter can be the input of another, so that the filters can be chained together.

Here is an illustration of the INPUT and output of an SVG filter:

The filter is similar to how we defined the gradient before, it needs to be defined in the def tag and then referenced to the graphic element by its ID value.

blur

Let’s look at a simple example:

<svg width="200" height="200">
    <defs>
        <filter id="blurFilter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="4"/>
        </filter>
    </defs>
    <rect filter="url(#blurFilter)" x="10" y="10" width="50" height="50" fill="red"></rect>
</svg>
Copy the code

In the example above, we used a feGaussianBlur filter, also known as a blur filter. In the filter, we are given two attributes, which are IN and stdDeviation. The In attribute represents the input to the given filter primitive, and the stdDeviation attribute sets the degree of ambiguity.

Multiple filters work together

Filters in SVG also allow multiple filters to be mixed up. You’ve probably seen a filter tag with a lot of code inside it, which can be confusing to a beginner

Next, let’s look at a simple example of using multiple filters:

<svg width="200" height="200">
    <defs>
        <filter id="blurFilter">
            <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
            <feOffset in="blur" dx="10" dy="12" result="offsetBlur" />
            <feMerge>
                <feMergeNode in="offsetBlur" />
                <feMergeNode in="SourceGraphic" />
            </feMerge>
        </filter>
    </defs>
    <image xlink:href="./img/1.jpg" x="10" y="0" height="50px" width="50px" filter="url(#blurFilter)"
</svg>
Copy the code

In this example, we use two paths, feGaussianBlur and feOffset, with blur and shadow effects, respectively. FeGaussianBlur adds a result attribute, which is a feature of SVG. The effects of different filters can be used to produce a primitives through result, and other filters can use in to import the exported result from different filters. After that, we use the feOffset filter to create the shadow effect. We use in to get the content of the above result export, and then make the displacement.

The feMerge filter is used to apply the effects of the filters simultaneously (not sequentially). It needs to write the feMergeNode tag and use the in attribute to input the effects of the different filters.

About filter generic properties

The last

This article briefly describes some of the common effects of filters in SVG. Thank you for reading!

😀😀 Pay attention to me, don’t get lost! 😀 😀