SVG blur effect

Note: Internet Explorer and Safari do not support SVG filters!

<defs> and <filter>

All Internet SVG filters are defined in the <defs> element. The <defs> element definition is short and contains definitions for special elements (such as filters).

<filter> tag is used to define SVG filters. The <filter> tag uses the required id attribute to define which filter to apply to the graph?

SVG <feGaussianBlur>

Example 1

<feGaussianBlur> element is used to create a blur effect:

Below Is the SVG code:

Instance

<!DOCTYPE html>
<html>
<body>

<p><b>Note: </b>Internet Explorer and Safari do not support SVG filters yet!</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

For Opera users: View the SVG file (right-click on the SVG graphic preview source).

Code analysis:

##<filter>The element id attribute defines the unique name of a filter
<feGaussianBlur>Element defines the blur effect
in="SourceGraphic"This section defines the effect created from the entire image
stdDeviation Attribute defines the blur amount
<rect>The filter attribute of the element is used to link the element to the "f1" filter

SVG blur effect

<defs> and <filter>

SVG <feGaussianBlur>

Example 1

Instance

php.cn