SVG Filters and Effects

Applying Filters Such As Blur, Brightness, Contrast, And Drop Shadow To SVG Elements

1. Blur Filter

The blur filter in SVG is used to create a blur effect, making elements appear out of focus or softened. It's commonly used for creating depth, highlighting focus areas, or adding a dreamy look to graphics.

In this example, a blur filter with a stdDeviation of 5 is applied to a blue rectangle, creating a blurred effect around the edges of the rectangle.

The brightness filter adjusts the brightness of SVG elements, making them appear brighter or darker. It's useful for creating lighting effects or adjusting the overall tone of graphics.

In this example, a brightness filter with a linear slope of 1.5 is applied to a blue rectangle, increasing its brightness.

The contrast filter adjusts the contrast of SVG elements, enhancing or reducing the difference between light and dark areas. It's effective for making graphics more vibrant or adjusting their tonal range.

In this example, a contrast filter with a linear slope of 2 and an intercept of -0.5 is applied to a blue rectangle, increasing its contrast.

The drop shadow filter adds a shadow effect behind SVG elements, creating a sense of depth or highlighting their presence. It's commonly used for buttons, icons, and UI elements.

In this example, a drop shadow filter with a Gaussian blur, offset, and composite is applied to a blue rectangle, creating a subtle shadow effect around it.

You can combine multiple filters to achieve complex visual effects. For example, combining blur and drop shadow filters can create a blurred shadow effect, adding depth and focus to elements.

In this example, a combination of blur and drop shadow filters is applied to a blue rectangle, creating a blurred shadow effect around it.


 

Practice Excercise Practice now

Combining Multiple Filters To Create Complex Visual Effects

Understanding SVG Filters

SVG filters are powerful tools that modify the appearance of SVG elements. They work by processing graphical elements through a series of operations, such as blurring, color manipulation, and shadow generation. Filters are defined using <filter> elements within an SVG file or embedded directly into HTML using CSS.

• <feGaussianBlur>: Applies a blur effect.
• <feColorMatrix>: Manipulates colors.
• <feOffset>: Shifts elements by a specified amount.
• <feBlend>: Blends two input images.

Filters can be combined by chaining them together within a <filter> element.
Each filter operation modifies the appearance of the element based on the previous operation.

Let's start with a basic example of combining a blur effect with brightness adjustment:

• <feGaussianBlur> creates a blur effect with a stdDeviation of 5.
• <feComponentTransfer> adjusts the brightness with a linear slope of 1.2 for each color channel.

Combining a blur effect with a drop shadow can create a visually appealing depth effect:

• <feGaussianBlur> creates a blur effect using the alpha channel.
• <feOffset> offsets the blurred image to create a shadow.
• <feBlend> blends the shadow with the source graphic.

Combining blur, brightness, and contrast can produce dynamic visual effects:

• We apply a blur effect with <feGaussianBlur> and adjust brightness and contrast using <feComponentTransfer>.
• <feFuncR>, <feFuncG>, and <feFuncB> are used to control the red, green, and blue channels, respectively.

SVG supports blend modes like multiply, screen, overlay, etc., which can be combined with other filters for creative effects:

Here, we use <feBlend> with mode="screen" to blend the source graphic with the blurred version using a screen blend mode.

Practice Excercise Practice now

Using SVG Filters For Image Manipulation And Enhancement

Understanding SVG Filters

SVG filters operate by taking input from an SVG graphic, applying various operations to it, and producing modified output. Filters can be applied to entire SVG elements or specific parts of an SVG image.

Filters are defined using the <filter> element within an SVG file or in an external file that can be referenced using CSS. Each filter consists of one or more filter primitives, such as <feGaussianBlur>, <feColorMatrix>, <feOffset>, etc. These primitives define the operations that the filter performs.

• feGaussianBlur: Applies a Gaussian blur to the input.
• feColorMatrix: Allows color transformations like grayscale, sepia, hue rotation, etc.
• feOffset: Shifts the input image by a specified amount.
• feBlend: Blends two input images using various blend modes.
• feDropShadow: Adds a drop shadow to the input image.
• feComposite: Combines two images using a specified operator.
• feConvolveMatrix: Applies a matrix convolution to the input.
• These primitives can be combined and configured to achieve a wide range of visual effects.

Let's start with a simple example of applying a Gaussian blur to an image using SVG filters.

• We define a filter named blurFilter that applies a Gaussian blur with a standard deviation of 5 to the input image (in="SourceGraphic").
• The <image> element displays the image image.jpg and applies the blurFilter to it using the filter attribute.

Now, let's create a sepia effect using the <feColorMatrix> primitive.

Here, we define a filter named sepiaFilter that uses a <feColorMatrix> to apply a sepia color transformation to the input image.

In this example, we define a filter named dropShadowFilter that first applies an offset to create a shadow, then blurs it using Gaussian blur, and finally blends it with the source graphic to create a drop shadow effect.

Filters can also be combined to achieve complex effects. Let's combine blur and color matrix filters to create a dreamy effect.

In this example, we first apply a Gaussian blur with a standard deviation of 10 to the source graphic and then apply a color matrix to reduce the opacity (values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0"), creating a dreamy effect.

You can also define SVG filters in an external file and reference them using CSS.

In this example, we define a filter in filter.svg and apply it to an image container using CSS.

Practice Excercise Practice now