Filter effects

This is a summary based on this thread.

Requested filter effects

Paul Irish held an informal poll on twitter, see results.

The most requested filters, by far, are: blur, saturation, compositing modes, noise, and color levels. A few folks also were interested in: sharpen, contrast, drop shadow (a la brad's proposal), and chroma key.

There were so many requests for blending/compositing modes and unique mentions of individual ones, that I could break out those, too. See the chart for detail (multiply has the most interest).

Additional effects mentioned by a single person are: feather, brightness, bump/displacement mapping, elliptical distortions, image fill, alpha masks, lighting effects, per color desaturate, wave distort, reflect, sparkles & rainbow effects, color matrix Interesting that brightness doesn't have a big demand. The rest of these probably out outside the bounds of these canned filters.

Worth mentioning that recently there have been a few javascript libraries people have been gravitating towards to apply these sort of effects:

http://mezzoblue.github.com/PaintbrushJS/demo/

http://peternitsch.net/bitmapdata.js/

---

Rik Cabanier: Looking at how Adobe's apps are set up and our customer files, a rough list in order of importance would be:

1. colormatrix
2. blur
3. dropshadow
4. glow
5. bevel
6. gradient glow
7. gradient bevel

FXG 2.0 specification defining the above filters.

Proposed requirements

• Ability to easily animate the filters (e.g via CSS Transitions)
• Commonly used effects should have a simple shorthand syntax

Other related proposals

• http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html

New Filter Primitives

• Proposing some new svg filter primitives: http://electricbeach.org/?p=950
• Color Range: select a color range to change that specific color, or exclude changing that specific color when changing others. (For example, changing the color of a car, or changing a color photo into grayscale while not changing the color of a red balloon in it.)

Automated Filter Region calculation

Determine boundaries of Pseudo Primitives

• SourceGraphic
• SourceAlpha

UAs MAY use the following algorithm to compute the SourceGraphic and SourceAlpha boundaries source box, depending on the type of element:

1. Let box be a rectangle initialized to the following values by element type
   • an SVG element without associated CSS layout box
     1. Let source box be the decorated bounding box following the algorithm described in SVG2.
   • all other elements
     1. Let source box be the border-box.
     2. Extend source box by the eventually specified text-shadow value.
     3. Extend source box by the eventually specified box decoration values like border-image or box-shadow.
2. Extend source box by the (maybe platform dependent) outline-width property value.

Note: UAs may intersect source box with the bounding box of the clip, clip-path or mask properties in certain situations. However, some primitives might require reading pixel values outside of this area like feGaussianBlur or feDisplacementMap. It is recommended to be conservative when shrinking source box.

• BackgroundImage
• BackgroundAlpha

BackgroundImage and BackgroundAlpha may include filtered elements. Therefore, it might be complex to calculate a visible area. In this case the nearest viewport of the filtered element is used as boundary.

• FillPaint
• FillStroke

FillPaint and StrokePaint have conceptually infinite extend. Therefore, the nearest viewport of the filtered element is used as boundary.

Determine smallest filter boundaries

Legend: + union of two areas

Regions:

feBlend result area = input-area + input2-area

feColorMatrix result area = input-area

feComponentTransfer result area = input-area

feComposite result area = IN = input2-area | ATOP = input2-area | ARITHMETIC = input-area + input2-area (possibly unbound)

feConvolveMatrix result area = input-area

feDiffuseLighting result area = unbound?

feDisplacementMap result area = unbound?

feDropShadow result area = input-size + input-size translated by offset extended by blur radius

feFlood result area = unbound?

feGaussianBlur result area = input-area extended by blur radius

feImage result area = referenced resource size

feMerge result area = (+ input-areas)

feMorphology result area = input-area extended by radius

feOffset result area = input area translated by dx/dy

feSpecularLighting result area = unbound?

feTile result area = unbound?

feTurbulence result area = unbound?

pseudo primitives result area = unbound?

All values with unbound? fall back to the filter region.

We probably need a second run from bottom up to reduce primitive sizes further.