SVG - Filter part 1 - Moment For Technology

preface

Now that we’ve covered the basics, we’ll take a look at SVG filters.

Filters are arguably the most powerful feature in SVG. It gives us pixel-level control over the output image. We can quickly achieve the desired display by using some built-in filters.

At the same time, we can also define the output of the image, in order to achieve some built-in functions do not have or more powerful function effect.

This article will cover what filters are and some simple built-in filter effects.

What is a filter

A filter is a tool used to render a particular effect on an image. The filter allows us to participate atomically in the image development process and control the final image output.

Different filters provide different interfaces, we can pass in specific parameters to call the filter function, so as to realize the display control of the image.

How to use

We can see that the filter is particularly like a function, different filters correspond to different functions, the function of these functions is already written, we just need to pass in the parameters, call these functions, we can achieve the desired function.

The filter function is actually called in CSS by function calls.

fliter in CSS

In the CSS, call the built-in filter function through the fliter property to invoke the filter function. Take the picture below for example

Example: Add a blur effect to the picture

.filter-blur{
  filter:blur(5px);
}
Copy the code

<img src=".. /.. /image/VIP.png" class="filter-blur" alt="">
Copy the code

One line CSS solution, very convenient.

The built-in CSS filters are:

Gaussian blur
Brightness brightness
Contrast contrast
Drop-shadow Indicates the shadow of the graph
Grayscale gray
Hue -rotate Indicates hue rotation
Invert color inversion
Opacity transparency
Saturate the saturation
Sepia dark brown filter

See Mozilla for details

fliter in SVG

Example: Use SVG to achieve the above fuzzy effect

SVG elements use the filter attribute to set the filter. Non-svg elements can be referenced using URL functions by setting the FILTER property of the CSS

  <svg width="100" height="100" viewBox="0 0 100 100">
    <defs>
      <filter id="blur">
        <feGaussianBlur stdDeviation="5" />
      </filter>
    </defs>
    <! -- SVG element, using filter -->
    <image x="0" y="0" width="100" height="100" xlink:href=".. /.. /image/VIP.png" filter="url(#blur)"></image>
  </svg>
  <! Non-svg elements can also be used to call the filter effect defined in SVG by setting CSS.
  <img width="100" height="100" src=".. /.. /image/VIP.png" alt="" style="filter: url(#blur);">
Copy the code

Filter tools are provided in both CSS and SVG. In terms of functionality, SVG filters provide a more comprehensive and operational feature. CSS’s filter tools are easy to use, but relatively less flexible than SVG.

CSS filters provide only partial filter functionality compared to SVG filters. CSS filters can be implemented using SVG filters. SVG filters can be used directly in CSS.

Filter Filter container

The filter element acts as a container for atomic filter operations. It can’t be presented directly. You can reference a filter using the filter attribute on the target SVG element.

Proprietary attributes:

X: the container origin x coordinate
Y: the container origin x coordinate
Width: indicates the container width. The default value is 120%
Height: Container height. The default value is 120%
FilterUnits Specifies the coordinate system of the filter container
- The objectBoundingBox(default) uses the filter element as the coordinate system
- UserSpaceOnUse uses the coordinate system of the SVG canvas on which the filter element is located
PrimitiveUnits The coordinate system for filter elements within the filter container.
- The objectBoundingBox uses the filter element as the coordinate system
- UserSpaceOnUse (the default) uses the coordinate system of the SVG canvas on which the filter element is located

The coordinate system principle of filter container is the same as pattern container

FeGaussianBlur Gaussian blur

The filter applies gaussian blur to the input image

Fuzzy principle: the pixel value of the current point is the average of 8 points on the axis. Pixels are usually processed by convolution.

In image processing, convolution operation refers to the use of a convolution kernel (kernel) to perform a series of operations on each pixel in an image. The convolution kernel is usually a square grid structure. (for example, a 3X3 square area) in which each square has a weight value. When convolving a certain pixel in the image, we will place the center of the convolution kernel on the image, compute the product and sum of each element in the kernel and the pixel value of the image covered by it successively, and the result is the new pixel value of the position.

Proprietary attributes:

In: identifies the input primitive. Controls the image input source.
StdDeviation: Define the standard deviation of fuzzy operation, the larger the value, the more fuzzy. You can hardly see it above 20

In the attribute

The value can be one of the following six keywords, or a string that matches the result attribute value of the previous primitive in the same

element. If no value is provided and this is the first primitive in filter, the primitive will be equivalent to using SourceGraphic as the input value. If no value is provided and this is not the first primitive, the primitive takes as input the value of the result attribute from the previous primitive.

In human terms, the in attribute specifies the image source of the image processed by the filter. Image source provides six built-in image modes. If the filter does not specify the in attribute. Then use the following principles to determine the input image.

If it is the first filter element defined by the filter container, no in is specified. The SourceGraphic schema of the image of the element being filtered is used as the input source.
Instead of the first filter element, the image output from the result of the previous filter element is default as the input image. It doesn’t matter whether the last element specified a result name or not. Result specifies the name of the snapshot for later retrieval.

Corresponding attributes:

SourceGraphic: Uses the image input of the filter element itself
SourceAlpha: uses the image input of the filter element itself, r, G, and B values are not applied, just a(transparency). So the image is black
FillPaint: Fill color input using the image of the element itself being filtered. Firefox can see the effect
StrokePaint: Stroke color input using the image of the element being filtered. Firefox can see the effect
BackgroundImage: Uses the underlying image of the filtered element as the image input.
BackgroundAlpha: Uses the underlying image of the filtered element as the image input. R, G, and B values are not applied, just a(transparency). So the image is black

The important thing to note here is that BackgroundImage and BackgroundAlpha are not implemented in each browser. So MDN offers an alternative solution with feBlend

Examples: SourceGraphic, SourceAlpha, FillPaint, and StrokePaint

    <svg class="border" width="300" height="500" viewBox="0 0 300 500">
      <defs>
        <filter id="SourceGraphic">
          <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
        <filter id="SourceAlpha" >
          <feGaussianBlur in="SourceAlpha" stdDeviation="20" />
        </filter>
        <filter id="FillPaint" >
          <feGaussianBlur in="FillPaint" stdDeviation="20" />
        </filter>
        <filter id="StrokePaint" >
          <feGaussianBlur in="StrokePaint" stdDeviation="20" />
        </filter>
        <filter id="StrokePaint" >
          <feGaussianBlur in="StrokePaint" stdDeviation="20" />
        </filter>
      </defs>
      <text x="20" y="20">The original image</text>
      <rect x="20" y="30" width="60" height="60" fill="green" stroke="red" stroke-width="3"/>
      <text x="20" y="120">SourceGraphic</text>
      <rect x="20" y="130" width="60" height="60" fill="green" stroke="red" stroke-width="3" filter="url(#SourceGraphic)"/>
      <text x="20" y="220">SourceAlpha</text>
      <rect x="20" y="230" width="60" height="60" fill="green" stroke="red" stroke-width="3" filter="url(#SourceAlpha)"/>
      <text x="20" y="320">FillPaint</text>
      <rect x="20" y="330" width="60" height="60" fill="green" stroke="red" stroke-width="3" filter="url(#FillPaint)"/>
      <text x="20" y="420">StrokePaint</text>
      <rect x="20" y="430" width="60" height="60" fill="green" stroke="red" stroke-width="3" filter="url(#StrokePaint)"/>
    </svg>
Copy the code

A filter container can be used with multiple filter elements in succession

Example: Filter elements use a snapshot of the previous filter by default

<svg>
  <defs>
    <filter id="Filter4">
      <! -- in defaults to SourceGraphic -->
      <feOffset dx="10"/>
      <! -- in defaults to snapshot with feOffset filter -->
      <feGaussianBlur stdDeviation="5" />
      <! -- in defaults to a snapshot after using feGaussianBlur -->
      <feOffset dy="10"/>
    </filter>
  </defs>
</svg>
<div class="border">
  <img src=".. /.. /image/VIP.png" class="img filter-svg4" alt="" />
</div>
Copy the code

.border {
    border: 1px solid;
    display: inline-block;
}
.filter-svg4{
    filter: url("#Filter4");
}
Copy the code

The result of the final filter is combined with the filter elements defined internally. That is, the output image x and y are both moved by 10 and blurred

Example: Control the input and output of filter elements

<filter id="Filter5">
  <! -- in defaults to SourceGraphic -->
  <feOffset dx="10" result="offsetX"/>
  <feGaussianBlur stdDeviation="5" />
  <! -- in specifies the use of offsetX snapshot -->
  <feOffset in="offsetX" dy="10"/>
</filter>
Copy the code

The end result is no blur, the image has moved 10 to both x and y, no blur.

This is because the last filter element in the filter container specifies the input image source. The feGaussianBlur filter is still used, but the output used is not used by subsequent filters as input, so feGaussianBlur has no effect here.

The filter container outputs the output of the last filter as the result of the entire filter.

The same:

<filter id="Filter6">
  <feOffset dx="10" result="offsetX"/>
  <feGaussianBlur stdDeviation="5" />
  <! -- in specifies the source image SourceGraphic to use -->
  <feOffset in="SourceGraphic" dy="10"/>
</filter>
Copy the code

Filter output, only the last filter element has any effect. The graph moved down by 10

feMerge

Can be used to overlay multiple filters. The result of the filter processing can be stored as result. Access these filters in the feMergeNode element. FeMerge processes the final stack output of multiple FEmergenodes

feMergeNode

Use the in attribute to get the result of the filter. Multiple FEmergenodes and feMerge complete the output of multiple filters

Achieve image local Gaussian effect

Local Gaussian is implemented using feGaussianBlur, feMerge, and feMergeNode.

In principle, the effect is produced by gaussian superposition of the original image and a fixed size area

    <svg width="100" height="100" viewBox="0 0 100 100">
      <defs>
        <filter id="MyFilter2">
          <! -- Define the ambiguous position and size, enter snapshot as result -->
          <feGaussianBlur x="25" y="25" width="50%" height="50%" stdDeviation="5" result="blur" />
          <! Merge a blur snapshot with the original image -->
          <feMerge>
            <! -- Order is important here, because it is superimposed, so the original image first, then the local Gaussian image -->
            <feMergeNode in="SourceGraphic" />
            <feMergeNode in="blur" />
          </feMerge>
        </filter>
      </defs>
      <image width="100" height="100" href=".. /.. /image/VIP.png" filter="url(#MyFilter2)"></image>
    </svg>
    <! -- Used outside SVG -->
    <img src=".. /.. /image/VIP.png" class="img filter-svg_part" alt="" />
Copy the code

  .img {
    display: block;
    width: 100px;
    height: 100px;
  }
  .filter-svg_part{
    filter: url("#MyFilter2");
  }
Copy the code

The last

The resources

Source: MDN

Gaussian blur

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

SVG – Filter part 1

preface

What is a filter

How to use

fliter in CSS

fliter in SVG

Filter Filter container

FeGaussianBlur Gaussian blur

In the attribute

feMerge

feMergeNode

Achieve image local Gaussian effect

The last

SVG – Filter part 1

preface

What is a filter

How to use

fliter in CSS

fliter in SVG

Filter Filter container

FeGaussianBlur Gaussian blur

In the attribute

feMerge

feMergeNode

Achieve image local Gaussian effect

The last

Related Posts

【 Point by point breakthrough series 】 Front-end interview essentials — Promise

Git

Ten thousand word front-end efficiency speed up series 🚀 : seven, front-end need to understand the back-end common tools