Snap.svg Filter Reference

Complete reference for predefined SVG filters in Snap.svg.

Basic Filters

blur

Gaussian blur effect.

Snap.filter.blur(x, y)

x - amount of horizontal blur in pixels (default: 2)
y - amount of vertical blur in pixels (optional, defaults to x)

Example:

var f = paper.filter(Snap.filter.blur(5, 10));
circle.attr({filter: f});

shadow

Drop shadow effect with full control.

Snap.filter.shadow(dx, dy, blur, color, opacity)

dx - horizontal offset (default: 0)
dy - vertical offset (default: 2)
blur - blur amount (default: 4)
color - shadow color (default: "#000")
opacity - shadow opacity 0..1 (default: 1)

Overloads:

shadow(dx, dy) - basic shadow
shadow(dx, dy, opacity) - shadow with opacity
shadow(dx, dy, color, opacity) - shadow with color

Example:

var f = paper.filter(Snap.filter.shadow(2, 2, 3, '#000', 0.5));
circle.attr({filter: f});

dropShadow

Efficient drop shadow using feDropShadow (modern SVG).

Snap.filter.dropShadow(dx, dy, blur, color, opacity)

dx - horizontal offset (default: 2)
dy - vertical offset (default: 2)
blur - blur amount (default: 3)
color - shadow color (default: "#000")
opacity - shadow opacity 0..1 (default: 0.5)

Color Adjustment Filters

brightness

Adjust image brightness.

Snap.filter.brightness(amount)

amount - brightness multiplier (0..2+, default: 1)
- 0 = black
- 1 = original
- 2+ = brighter

Example:

var f = paper.filter(Snap.filter.brightness(1.5)); // 50% brighter

contrast

Adjust image contrast.

Snap.filter.contrast(amount)

amount - contrast level (0..2+, default: 1)
- <1 = less contrast
- 1 = original
- 1 = more contrast

saturate

Adjust color saturation.

Snap.filter.saturate(amount)

amount - saturation level (0..1, default: 1)
- 0 = fully desaturated (grayscale)
- 1 = original colors

Note: The parameter is inverted internally, so 1 = original saturation.

hueRotate

Rotate hue around the color wheel.

Snap.filter.hueRotate(angle)

angle - rotation angle in degrees (default: 0)
- 0 = original
- 180 = complementary colors
- 360 = back to original

Example:

var f = paper.filter(Snap.filter.hueRotate(90)); // 90° hue shift

invert

Invert colors.

Snap.filter.invert(amount)

amount - inversion amount (0..1, default: 1)
- 0 = original
- 1 = fully inverted

grayscale

Convert to grayscale.

Snap.filter.grayscale(amount)

amount - grayscale amount (0..1, default: 1)
- 0 = original colors
- 1 = full grayscale

sepia

Apply sepia tone effect.

Snap.filter.sepia(amount)

amount - sepia amount (0..1, default: 1)
- 0 = original
- 1 = full sepia

duotone

Two-color toning effect.

Snap.filter.duotone(color1, color2)

color1 - shadow color (default: "#00f")
color2 - highlight color (default: "#f00")

Example:

var f = paper.filter(Snap.filter.duotone('#004', '#ff0'));

colorize

Colorize image with a specific color.

Snap.filter.colorize(color, amount)

color - target color (default: "#f00")
amount - colorization amount (0..1, default: 1)

Artistic Filters

glow

Outer glow effect.

Snap.filter.glow(color, width, opacity)

color - glow color (default: "#fff")
width - glow width in pixels (default: 5)
opacity - glow opacity (0..1, default: 0.8)

innerGlow

Inner glow effect.

Snap.filter.innerGlow(color, width, opacity)

color - glow color (default: "#fff")
width - glow width in pixels (default: 5)
opacity - glow opacity (0..1, default: 0.8)

neon

Neon glow effect with multiple blur layers.

Snap.filter.neon(color, width)

color - neon color (default: "#0ff")
width - glow width in pixels (default: 3)

Example:

var f = paper.filter(Snap.filter.neon('#0ff', 4));
text.attr({filter: f, fill: '#fff'});

emboss

3D emboss effect.

Snap.filter.emboss(strength)

strength - emboss strength (default: 1)

blur3d

3D-like blur effect with shadow offset.

Snap.filter.blur3d(depth, color)

depth - depth of 3D effect (default: 5)
color - shadow color (default: "#000")

Edge Detection & Sharpening

sharpen

Sharpen image details.

Snap.filter.sharpen(amount)

amount - sharpening amount (default: 1)

edge

Edge detection filter.

Snap.filter.edge(strength)

strength - edge detection strength (default: 0.9)

sobel

Sobel edge detection with directional support.

Snap.filter.sobel(strength, rotation)

strength - edge strength (default: 1)
rotation - edge direction (0, 45, 135, default: 0)
- 0 = standard Sobel (horizontal/vertical)
- 45 = diagonal ↘
- 135 = diagonal ↙

Special Effects

motionBlur

Motion blur in a specific direction.

Snap.filter.motionBlur(angle, distance)

angle - motion angle in degrees (default: 0 = horizontal)
distance - blur distance (default: 10)

Example:

var f = paper.filter(Snap.filter.motionBlur(45, 15)); // 45° motion blur

turbulence

Turbulence/noise texture effect.

Snap.filter.turbulence(baseFrequency, numOctaves, type)

baseFrequency - noise frequency (default: 0.05)
numOctaves - number of octaves (default: 2)
type - "fractalNoise" or "turbulence" (default: "turbulence")

pixelate

Pixelation effect.

Snap.filter.pixelate(size)

size - pixel size (default: 5)

posterize

Reduce number of colors (posterization).

Snap.filter.posterize(levels)

levels - number of color levels 2-10 (default: 4)

chromaticAberration

RGB channel separation effect.

Snap.filter.chromaticAberration(amount)

amount - separation amount in pixels (default: 2)

Example:

var f = paper.filter(Snap.filter.chromaticAberration(3));
image.attr({filter: f});

vignette

Darkened corners effect.

Snap.filter.vignette(intensity, radius)

intensity - vignette darkness (0..1, default: 0.5)
radius - vignette radius (0..1, default: 0.7)

oldFilm

Old film effect with grain and sepia.

Snap.filter.oldFilm(grainAmount, sepiaAmount)

grainAmount - grain/noise amount (0..1, default: 0.3)
sepiaAmount - sepia tone amount (0..1, default: 0.8)

Example:

var f = paper.filter(Snap.filter.oldFilm(0.4, 0.9));
photo.attr({filter: f});

Usage Patterns

Basic Usage

// Create filter
var filter = paper.filter(Snap.filter.blur(5));

// Apply to element
circle.attr({filter: filter});

Combining Filters

// Combine multiple filter strings
var combined = 
    Snap.filter.grayscale(1) +
    Snap.filter.contrast(1.2) +
    Snap.filter.blur(1);

var filter = paper.filter(combined);
element.attr({filter: filter});

Dynamic Updates

Some filters support dynamic updates:

var filter = paper.filter(Snap.filter.blur(0));
circle.attr({filter: filter});

// Update blur amount
if (filter.update) {
    filter.update(5, 5); // Update to blur(5, 5)
}

Removing Filters

// Remove filter
element.attr({filter: 'none'});
// or
element.attr({filter: null});

Filter Categories Summary

Category	Filters
Blur	blur, motionBlur, blur3d
Shadow	shadow, dropShadow, glow, innerGlow, neon
Color	brightness, contrast, saturate, hueRotate, invert
Tone	grayscale, sepia, duotone, colorize
Artistic	emboss, turbulence, pixelate, posterize, oldFilm
Edge	sharpen, edge, sobel
Distortion	chromaticAberration, vignette

Performance Notes

Simple filters (brightness, contrast, hue) are typically faster
Blur-based filters (shadow, glow, neon) are more expensive
Convolution filters (emboss, sharpen, edge) are moderately expensive
Combined filters multiply the performance cost
Use dropShadow instead of shadow when possible for better performance

Browser Compatibility

All filters require SVG filter support
feDropShadow is modern (IE/Edge 18+, Chrome 68+, Firefox 62+)
Older browsers may need fallbacks
Test filters across target browsers

Examples

Photo Effect

var vintage = 
    Snap.filter.sepia(0.7) +
    Snap.filter.contrast(1.1) +
    Snap.filter.vignette(0.4, 0.8);
var f = paper.filter(vintage);
image.attr({filter: f});

Glowing Text

var glow = paper.filter(Snap.filter.neon('#0ff', 4));
text.attr({
    filter: glow,
    fill: '#fff',
    stroke: '#0ff',
    strokeWidth: 0.5
});

Sketch Effect

var sketch = 
    Snap.filter.edge(1.2) +
    Snap.filter.invert(1) +
    Snap.filter.brightness(1.5);
var f = paper.filter(sketch);
photo.attr({filter: f});

FilesExpand file tree

FILTER_REFERENCE.md

Latest commit

History

FILTER_REFERENCE.md

File metadata and controls

Snap.svg Filter Reference

Basic Filters

blur

shadow

dropShadow

Color Adjustment Filters

brightness

contrast

saturate

hueRotate

invert

grayscale

sepia

duotone

colorize

Artistic Filters

glow

innerGlow

neon

emboss

blur3d

Edge Detection & Sharpening

sharpen

edge

sobel

Special Effects

motionBlur

turbulence

pixelate

posterize

chromaticAberration

vignette

oldFilm

Usage Patterns

Basic Usage

Combining Filters

Dynamic Updates

Removing Filters

Filter Categories Summary

Performance Notes

Browser Compatibility

Examples

Photo Effect

Glowing Text

Sketch Effect