SVG Blur Effects






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



SVG Blur Effects



❮ Previous
Next ❯



<defs> and <filter>


All internet SVG filters are defined within a <defs> element. The <defs> element is short
for definitions and contains definition of special elements (such as filters).


The <filter> element is used to define an SVG filter. The <filter> element has a
required id attribute which identifies the filter. The graphic then points to the filter to use.




SVG <feGaussianBlur>


Example 1


The <feGaussianBlur> element is used to create blur effects:


fegaussianblur

Here is the SVG code:



Example



<svg height="110" width="110">
  <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>

Try it Yourself »

Code explanation:



  • The id attribute of the <filter> element defines a unique name for the filter

  • The blur effect is defined with the <feGaussianBlur> element

  • The in="SourceGraphic" part defines that the effect is created for the entire element

  • The stdDeviation attribute defines the amount of the blur

  • The filter attribute of the <rect> element links the element to the "f1" filter




❮ Previous
Next ❯

Popular posts from this blog

How to check contact read email or not when send email to Individual?

Displaying single band from multi-band raster using QGIS

How many registers does an x86_64 CPU actually have?