Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG Filters Introduction


SVG Filters

SVG filters are used to add special effects to SVG graphics.

All 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/image then points to the filter to use.

Then, inside the <filter> element, we put one or more filter effects to use on the graphic (see table below for list of filter effects elements).


Quick Example

Here we use the <feGaussianBlur> filter to blur an SVG graphic:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>
Try it Yourself »


SVG Filter Effects Elements

The available filters in SVG are:

Name Description
<feBlend> Combines two graphics together by a certain blending mode
<feColorMatrix> Changes colors based on a transformation matrix
<feComponentTransfer> Performs component-wise remapping of data for each pixel. Can adjust brightness, contrast, color balance, etc
<feComposite> Performs combination of two input images pixel-wise in image space using a compositing operation
<feConvolveMatrix> Applies a matrix convolution filter effect (this includes blurring, edge detection, sharpening, embossing and beveling)
<feDiffuseLighting> Lights a graphic by using the alpha channel as a bump map
<feDisplacementMap> Uses pixels values from the graphic from in2 attribute to displace the image from the in attribute
<feDistantLight> Specifies a distant light source to be used inside a lighting filter primitive: <feDiffuseLighting> or <feSpecularLighting>
<feDropShadow> Creates a drop shadow of the graphic
<feFlood> Fills the filter subregion with the color and opacity defined by flood-color and flood-opacity attributes
<feGaussianBlur> Blurs the graphic
<feImage> Gets graphic data from an external source and provides the pixel data as output
<feMerge> Blends input graphic layers (applies filter effects concurrently instead of sequentially)
<feMergeNode> Takes the result of another filter to be processed by its parent <feMerge>
<feMorphology> Erodes or dilates the graphic (for fattening or thinning effects)
<feOffset> Offsets the input graphic
<fePointLight> Specifies a light source that allows creating a point light effect
<feSpecularLighting> Lights a source graphic by using the alpha channel as a bump map
<feSpotLight> Specifies a light source that allows creating a spotlight effect
<feTile> Fills a target rectangle with a repeated pattern of an input graphic
<feTurbulence> Creates a graphic with the Perlin turbulence function

Tip: You can use multiple filter effects on each SVG element!

In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG!


×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.