mozilla

Revision 647613 of Filter effects

  • Revision slug: Web/SVG/Tutorial/Filter_effects
  • Revision title: Filter effects
  • Revision id: 647613
  • Created:
  • Creator: trevorh
  • Is current revision? Yes
  • Comment Update previous/next links

Revision Content

{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}

There are situations, where basic shapes do not provide the flexibility you need to achieve a certain effect. Drop shadows, to provide a popular example, cannot be created reasonably with a combination of gradients. Filters are SVG's mechanism to allow to create sophisticated effects.

A basic example is to add a blur effect to SVG content. While basic blurs can be achieved with the help of gradients, the blur filter is needed to do anything beyond.

How filters work

The light source

The single filters explained

{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}

Revision Source

<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p>
<p>There are situations, where basic shapes do not provide the flexibility you need to achieve a certain effect. Drop shadows, to provide a popular example, cannot be created reasonably with a combination of gradients. Filters are SVG's mechanism to allow to create sophisticated effects.</p>
<p>A basic example is to add a blur effect to SVG content. While basic blurs can be achieved with the help of gradients, the blur filter is needed to do anything beyond.</p>
<h2 id="How_filters_work">How filters work</h2>
<h2 id="The_light_source">The light source</h2>
<h2 id="The_single_filters_explained">The single filters explained</h2>
<p>{{ PreviousNext("Web/SVG/Tutorial/Other_content_in_SVG", "Web/SVG/Tutorial/SVG_Fonts") }}</p>
Revert to this revision