# Filters: the unscalable part of SVG

SVG filters are one of the few aspects of SVG that, by default, are dependent on the resolution and display size of the image: The effects can be quite different when applied to different size graphics, and the effect on a graphic enlarged using SVG's scalability (i.e., the `viewBox` attribute) will be the same as if the graphic had initially been defined at that size.

Not all filters are resolution dependent; the `<feConvolveMatrix>` filter primitive (commonly used for sharpening or for creating motion blur effects) is the most important one. Below, I use a convolve matrix to create an embossed effect. Notice how the embossing is much stronger on the smaller image? The middle image should look like a magnification of the small one, since in SVG user units they are both 100×100. Instead, it looks like the image that is defined and displayed at 300×300.

Unscaled
Scale up entire SVG
Scale up image before applying filter

The specs define two ways of creating resolution-independent filters. Option 1 is to tell the SVG to treat the "pixels" in your convolution matrix as a specified distance defined in user units.

Unscaled
Scale up entire SVG
Scale up image before applying filter

...but that doesn't seem to make any difference in Chrome (34). In IE (11) it has an effect, but not the intended one : they seem to be interpretting the `kernelUnitLength` as a number of display pixels, not as a length in user coordinates; as a result, there is no change from the default when the length is one (as above), but if you set the attribute to a larger number you get very blocky effects that are still dependent on the screen resolution. Firefox (29) gives the expected result: the middle image looks like a scaled up version of the small image, while the final image maintains the finer scale of the embossing effect.

Good thing there's an Option 2. Option 2 is to specify the resolution that should be used when calculating all the intermediary values in a filter. Specifically, you set the filter's `filterRes` attribute to the pixel-size of the image to be used for calculations.

Unscaled
Scale up entire SVG
Scale up image before applying filter

...of course, if you know you're going to be displaying the SVG scaled up, you'll want to specify a resolution at least as large as the final display size.

Unscaled
Scale up entire SVG
Scale up image before applying filter

Alas, the `filterRes` attribute doesn't seem to be implemented in IE (11), so you still get the resolution-dependent effects there.

Finally, one last warning about using `filterRes` : setting a large value will not only water-down your pixel-based filter effects, but it will also result in larger memory use and computation time. Your computer is still drawing the graphic at the full resolution size, even if it's only displaying it as a small icon.