Introduction to HTML5 SVG 2D 10-definition and use of filters

Comments: Filters are the most powerful functions of SVG. They allow you to add filter effects only in professional software to graphics (graphic elements and container elements, do not miss out on special effects. I hope this will help you.

Filters are the most powerful functions of SVG. They allow you to add filter effects that are only available in various professional software to graphics (graphic elements and container elements. In this way, you can easily generate and modify images on the client. In addition, the filter does not destroy the structure of the original document, so it is also very easy to maintain.

Filters are defined by the filter element.: When you need to use the filter, add the filter attribute to the image or container that requires the filter effect, and reference the filter.

Filter elements include many atomic Filter Operations. Each atomic operation performs a basic graphic operation on the input object and generates graphical output. Most atomic operations generate an RGBA image. The input of each atomic operation can be either the source image or the result of other atomic operations. So the process of referencing the filter effect is to apply the related filter atomic operations on the source image, and finally generate a new image and render it.

When the filter attribute is used on a container (such as a g element), the filter effect applies to all elements in the container. However, elements in the container are temporarily stored instead of being rendered to the screen. Then, the graphic command is executed as part of the process for processing the referenced filter element, and then rendered. This is specified by using SourceGraphic and SourceAlpha. The third case in the second example below demonstrates this effect.
Some filter effects generate some undefined pixels, which are processed as transparent.
Let's look at an example:

The Code is as follows:
<Svg width = "7.5" height = "5 cm" viewBox = "0 0 200 120"
Xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Title> SVG filter effect example </title>
<Desc> use a variety of filters to achieve a 3D illumination effect on a pair of images. </Desc>
<Defs>
<Filter id = "MyFilter" filterUnits = "userSpaceOnUse" x = "0" y = "0" width = "200" height = "120">
<FeGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur"/>
<FeOffset in = "blur" dx = "4" dy = "4" result = "offsetBlur"/>
<FeSpecularLighting in = "blur" surfaceScale = "5" specularConstant = ". 75"
SpecularExponent = "20" lighting-color = "# bbbbbb"
Result = "specOut">
<FePointLight x = "-5000" y = "-10000" z = "20000"/>
</FeSpecularLighting>
<FeComposite in = "specOut" in2 = "SourceAlpha" operator = "in" result = "specOut"/>
<FeComposite in = "SourceGraphic" in2 = "specOut" operator = "arithmetic"
K1 = "0" k2 = "1" k3 = "1" k4 = "0" result = "litPaint"/>
<FeMerge>
<FeMergeNode in = "offsetBlur"/>
<FeMergeNode in = "litPaint"/>
</FeMerge>
</Filter>
</Defs>
<Rect x = "1" y = "1" width = "198" height = "118" fill = "#888888" stroke = "blue"/>
<G filter = "url (# MyFilter)">
<G>
<Path fill = "none" stroke = "# D90000" stroke-width = "10"
D = "M50, 90 C0, 90 50, 30 L150, 30 C200, 30, 90, 90 z"/>
<Path fill = "# D90000"
D = "M60, 80 C30, 80 30, 40 60, 40 L140, 40 C170, 40 170,80 140,80 z"/>
<G fill = "# FFFFFF" stroke = "black" font-size = "45" font-family = "Verdana">
<Text x = "52" y = "76"> SVG </text>
</G>
</G>
</G>
</Svg>

The result of running this example on FireFox is the result of the last figure:

Note: there may be some differences in other browsers.
The filter uses six effects (as shown in the following figure :):
FeGaussianBlur: This step is Gaussian blur. The input of this special effect is the transparency value of the source image, and the output is saved to the temporary buffer blur. The blur value is used as the input of feOffset and feSpecularLighting.
FeOffset: In this step, the image is moved to some positions. The input of this effect is The blur generated in the previous step, and a new offsetBlur cache is generated.
FeSpecularLighting: This step is to process the light on the image surface. Input is The blur generated in the first step, and the output is stored in the new cache specOut.
FeComposite: These two steps combine different cache layers.
FeMerge: This step merges different layers. This step is usually the last step. The layers of each cache are integrated to generate the final image and render it. Although this step can also be completed with multiple feComposite special effects, it is not convenient after all.

Filter element and filter effect area
The filter effect area refers to the area in which the filter effect works. The size of this area is defined by the following attributes of the filter element:
FilterUnits= "UserSpaceOnUse | objectBoundingBox"
This attribute defines the coordinate space used by x, y, width, and height. Like other Unit-related attributes, this attribute also has two values: userSpaceOnUse and objectBoundingBox (default ).
UserSpaceOnUse indicates the user coordinate system that uses elements that reference the filter element.
ObjectBoundingBox indicates that the percentage of the box surrounded by elements that reference the filter element is used as the value range.

X, y, width, height

These attributes define the rectangular area in which the filter works. The filter effect is not applied to any point beyond this area. The default value of x and y is-10%, and the default value of width and height is 120%.

FilterRes

This attribute defines the size of the intermediate cache area, so it also defines the quality of the cached image. Generally, you do not need to provide this value. The browser selects the appropriate value. In general, the filter effect area should be defined to correspond exactly the points and points of the background, which will bring a certain efficiency advantage.

In addition to these attributes, the following attributes of the filter element are also important:
PrimitiveUnits= "UserSpaceOnUse | objectBoundingBox"
This attribute defines the coordinate space used for coordinates and lengths in each atomic operation. The value of this attribute is userSpaceOnUse and objectBoundingBox. The default value is userSpaceOnUse.

Xlink: href= "<Siri>"
This attribute is used to reference other filter elements in the current filter element.

It is worth noting that the filter element only inherits the attributes of its parent node and does not inherit the attributes of the element that references the filter element.

Filter Overview
Various filter atomic operations will not be detailed, you can view the official documentation when necessary. The following describes the commonalities of these operations. Except for the "in" attribute, the following attributes are available for all atomic operations.
X, y, width, height
These attributes are not mentioned much. They define the region where the filter atom works. You may wish to become a "filter subarea. These attributes are restricted by the filter element's functional areas. By default, the values are 0, 0, 100%, and 100%, respectively. These atoms do not work if they are more than the filter element.
Result
Store the result of this step. After the result is specified, other subsequent operations of the same filter element can be specified as an input using in. See the example above for details. If this value is omitted, it can only be used as an implicit input for next-step operations. Note that if the next-step operation already uses in, the input is subject to the value specified by in.
In
The input of this step. If the in attribute is omitted, the result of the previous step is used as the input of this step by default. If the in attribute of the first step is omitted, "SourceGraphic" is used as the value (see the description below ). The in attribute can reference the value stored in the preceding result, orSet the following six special values:
SourceGraphic: This value indicates that the current graphic element is used as the input for the operation.
SourceAlpha: This value indicates that the Alpha value of the current graphic element is used as the input for the operation.
BackgroundImage: This value indicates that the current background is used as the input for the operation.
BackgroundAlpha: This value indicates that the Alpha value of the current background is used as the input of the operation.
FillPaint: This value uses the value of the fill attribute of the current graphic element as the input for the operation.
StrokePaint: This value uses the value of the stroke attribute of the current graphic element as the input for the operation.

Among these values, BackgroundImage and BackgroundAlpha may be difficult to understand. Next we will focus on these two values.

Access background
Generally, we can directly use the background of the element that references the filter element as the source image of the filter effect. This indicates that the input values are BackgroundImage and BackgroundAlpha. The first one contains the color and Alpha values, and the last one contains only the Alpha values. To support this method, you also need to explicitly enable this feature on the element that references the filter element, which requires setting the enable-background attribute of the element.
Enable-background= "Accumulate | new [<x> <y> <width> This attribute can only be used for container elements. It defines how to intercept the background.
The new value indicates that sub-elements of the container are allowed to access the background of the container, and the sub-elements of the container are rendered to the background and devices.
Accumulate is the default value. Its effect depends on the context. If the parent container element uses enable-background: new, all the graphic elements of the container are involved in the background rendering. Otherwise, the parent container is not prepared to intercept the background. The graphic elements of this element are only displayed on the device.
The following example demonstrates the effects of these values:

The Code is as follows:
<Svg width = "13.5" height = "2.7" viewBox = "0 0 1350 270"
Xmlns = "http://www.w3.org/2000/svg" version = "1.1">
<Title> example of background </title>
<Desc> The following examples illustrate the background usage in different situations </desc>
<Defs>
<Filter id = "ShiftBGAndBlur"
FilterUnits = "userSpaceOnUse" x = "0" y = "0" width = "1200" height = "400">
<Desc> this filter discards the source image but uses the background. </desc>
<FeOffset in = "BackgroundImage" dx = "0" dy = "125"/>
<FeGaussianBlur stdDeviation = "8"/>
</Filter>
<Filter id = "ShiftBGAndBlur_WithSourceGraphic"
FilterUnits = "userSpaceOnUse" x = "0" y = "0" width = "1200" height = "400">
<Desc> this filter effect combines the image of the background and the current element. </desc>
<FeOffset in = "BackgroundImage" dx = "0" dy = "125"/>
<FeGaussianBlur stdDeviation = "8" result = "blur"/>
<FeMerge>
<FeMergeNode in = "blur"/>
<FeMergeNode in = "SourceGraphic"/>
</FeMerge>
</Filter>
</Defs>
<G transform = "translate (0, 0)">
<Desc> the first one is the effect without a filter. </desc>
<Rect x = "25" y = "25" width = "100" height = "100" fill = "red"/>
<G opacity = ". 5">
<Circle cx = "125" cy = "75" r = "45" fill = "green"/>
<Polygon points = "16160,125" fill = "blue"/>
</G>
<Rect x = "5" y = "5" width = "260" height = "260" fill = "none" stroke = "blue"/>
</G>
<G enable-background = "new" transform = "translate (270,0)">
<Desc> the second one is to use the filter effect on the container. </desc>
<Rect x = "25" y = "25" width = "100" height = "100" fill = "red"/>
<G opacity = ". 5">
<Circle cx = "125" cy = "75" r = "45" fill = "green"/>
<Polygon points = "16160,125" fill = "blue"/>
</G>
<G filter = "url (# ShiftBGAndBlur)"/>
<Rect x = "5" y = "5" width = "260" height = "260" fill = "none" stroke = "blue"/>
</G>
<G enable-background = "new" transform = "translate (540,0)">
<Desc> the third is to use the filter effect on the internal container. Note the difference from the second image. </desc>
<Rect x = "25" y = "25" width = "100" height = "100" fill = "red"/>
<G filter = "url (# ShiftBGAndBlur)" opacity = ". 5">
<Circle cx = "125" cy = "75" r = "45" fill = "green"/>
<Polygon points = "16160,125" fill = "blue"/>
</G>
<Rect x = "5" y = "5" width = "260" height = "260" fill = "none" stroke = "blue"/>
</G>
<G enable-background = "new" transform = "translate (810,0)">
<Desc> the fourth is to use the filter effect on the graphic elements. </desc>
<Rect x = "25" y = "25" width = "100" height = "100" fill = "red"/>
<G opacity = ". 5">
<Circle cx = "125" cy = "75" r = "45" fill = "green"/>
<Polygon points = "16160,125" fill = "blue"
Filter = "url (# ShiftBGAndBlur)"/>
</G>
<Rect x = "5" y = "5" width = "260" height = "260" fill = "none" stroke = "blue"/>
</G>
<G enable-background = "new" transform = "translate (, 0)">
<Desc> the fifth is to use different filter effects on graphic elements. </desc>
<Rect x = "25" y = "25" width = "100" height = "100" fill = "red"/>
<G opacity = ". 5">
<Circle cx = "125" cy = "75" r = "45" fill = "green"/>
<Polygon points = "16160,125" fill = "blue"
Filter = "url (# ShiftBGAndBlur_WithSourceGraphic)"/>
</G>
<Rect x = "5" y = "5" width = "260" height = "260" fill = "none" stroke = "blue"/>
</G>
</Svg>

As follows (the first row is the final, and the second row is the filter effect ):

This example contains five parts.:
1. The image in the first group does not use any filter effect.
2. The second group uses the same image, but the background effect is enabled.
3. The third group uses the same image, but the filter effect is used in the internal container.
4. The fourth group uses the filter effect on the elements of the Content container.
5. The last group uses the same filter effect as the fourth group and merges the source image to generate the effect.

The concept of filter is actually very simple, but the code for each effect looks complicated. In fact, we can give it a try, but because different browsers have different levels of support for SVG, try again for specific results.

Practical reference
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/
Official documents: http://www.w3.org/TR/SVG11/