In SVG (Scalable Vector Graphics), you can apply blur effects to elements using the <filter> element and various filter primitives. Here are some ways to use blur effects in SVG:

  1. Gaussian Blur: The <feGaussianBlur> filter primitive is commonly used for creating a blur effect. It takes a standard deviation parameter that determines the amount of blur.

    xml
    <filter id="blurFilter" x="0" y="0" width="100%" height="100%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> <rect width="200" height="100" style="filter: url(#blurFilter);" />

    In this example, a blur filter with a standard deviation of 5 is applied to a rectangle.

  2. Customizing Blur: You can control the blur in both the x and y directions separately:

    xml
    <filter id="customBlur" x="0" y="0" width="100%" height="100%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5 2" /> </filter> <rect width="200" height="100" style="filter: url(#customBlur);" />

    Here, the standard deviation is set to 5 in the x-direction and 2 in the y-direction.

  3. Combining Filters: You can combine multiple filters to achieve different effects. For example, combining a blur with a color matrix can create interesting effects.

    xml
    <filter id="combinedFilter" x="0" y="0" width="100%" height="100%"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" /> </filter> <rect width="200" height="100" style="filter: url(#combinedFilter);" />

    This example combines a blur with a color matrix.

  4. Animating Blur: You can use CSS animations to create dynamic blur effects.

    xml
    <rect width="200" height="100" style="filter: url(#blurFilter); transition: filter 0.5s;" />

    Applying a CSS transition on the filter property allows you to animate the blur effect.

  5. Applying Blur to Specific Elements: Filters can be applied to specific elements using the filter attribute.

    xml
    <circle cx="50" cy="50" r="40" fill="blue" filter="url(#blurFilter)" />

    This example applies the blur filter only to the specified circle.

Experiment with these techniques to achieve the desired blur effects in your SVG graphics. Keep in mind that browser support may vary, so it's a good practice to check compatibility for the features you use.