Pallas Athena

SVG Filters

In this Post ...

I explore creating SVG effects and animations using SVG filters.

Intro

Recently I've been working on creating particle effects for a side project using components I created for the SVG Creators Collab ™ framework. Over the course of doing so I got a little deeper into working with SVG Filters and the results were so cool (better than expected) that I couldn't resist sharing some of the techniques here.

First, what exactly are SVG filters?

SVG filters are procedural effects that can be applied to create SVG artwork that:

  1. Is natively textured, and

  2. Exhibits a wide range of effects including blur, lighting effects, color manipulation and even more complex features and distortions you might imagine as an artist.

Insert examples :

Smoke

Flame

watery light on sea bottom

Pattern on mermaid

How SVG Filters Work

You can create SVG filter effects using the <filter> element. Filters are defined by compositing SVG filter primitives -- the "building blocks" of filter effects (see Appendix 1). The primitives define atomic graphics operations (like blur, lighting effects, displacements, etc.). The output of these operations are termed results.

Filters operate on inputs; the original source graphic or the result of prior filters in the pipeline. Source graphics can be images, SVG shapes, groups, etc.. Inputs to primitives targeting graphics elements can be specified using the keyword SourceGraphic.

! --- Definition admonition SourceGraphic: A keyword referring to the graphics elements that were the original input into the 'filter' element.

To apply a filter to a graphics element or a container (e.g., g), you set the value of the 'filter` property on the element:

Pull out an EXAMPLE

When applied to container elements such as g the filter applies to the contents of the group as a whole.

By way of Example ...

I my mind nothing explains technology better than a good example. Let's illustrate applying filters by creating an effect -- an SVG smoke ring.

WALK THROUGH SMOKERING EXAMPLE ...

  1. STATIC
  2. ANIMATION

Summing Up

In summary we've defined the following terms:

  • SVG filter
  • the filter primitive
  • the filter result, and
  • the SourceGraphic.

RESUME HERE...

https://gemini.google.com/app/2264cb23032ff910

So I started this blog series in order to catelog and provide references to Inkscape features as I continue to explore the intersection of vector graphics, procedural art, animation and AI. Like I always say -- the faintest ink is truer than the sharpest memory!

Path interpolation ...

Wave Skeleton ...

Summary

In this post I explored working with SVG filters to create native textures and particle effects for SVG artwork and animation. There are many applications for these techniques including simulations, static artwork, game art, and cinemagraphic works in SVG. Now that you're armed with more knowledge about filters I can't wait to see what you create!

Artwork

Abstract line art exemplifying stitching subpaths by Nick Nagel
Figure N. Abstract artwork created by stitching subpaths in Inkscape. Image by N .

Endnotes

  1. BLah blah blah

Apendix 1: List of SVG Feature Primitives

SVG defines a large number of filter primitives which can be used to create an infinitude of visual effects. The standard filters include:

  1. : Composites two input images using a blend mode.

  2. : Applies a color matrix to the input image, allowing for changes to hue, saturation, brightness, and contrast.

  3. : Performs a per-channel color manipulation using a function. It's often used for advanced color adjustments.

  4. : Composites two input images using a compositing operator like over, in, out, or atop.

  5. : Applies a matrix convolution filter, useful for effects like blurring, sharpening, and embossing.

  6. : Lights a graphic by using the alpha channel as a bump map.

  7. : Displaces pixels in an image based on the pixel values of a second image.

  8. : Creates a drop shadow effect. (This is a simplified primitive that combines other primitives.)

  9. : Fills the filter subregion with a solid color and opacity.

  10. : Applies a Gaussian blur to the input image.

  11. : Fetches image data from an external source to be used as an input for other primitives.

  12. : Combines multiple input images into a single output image.

  13. : A child element of that specifies an input for the merge operation.

  14. : Changes the shape of an image's alpha channel, often used for thinning or thickening a shape.

  15. : Shifts the input image by a specified amount.

  16. : Creates a lighting effect, with a glossy, reflective surface.

  17. : Fills a region with a repeating pattern from a source image.

  18. : Creates an image using the Perlin turbulence function, which is useful for generating procedural textures like clouds, marble, or fire.

Resources

  1. SVG Filters 1.2, Part 1: Primer.

  2. Filter Primitives Overview

  3. Perlin noise

  4. SVG Filter Tutorial

  5. Making the Wave

  6. O'Reilly Using SVG