Shape filters

A filter changes how a shape is drawn without changing the shape itself:

• The shape's image goes through a chain of primitives, such as a blur, a drop shadow, or a color matrix, applied in order.
• They are the SVG filters that web browsers support, so anything you know about those applies here.
• The shape stays fully editable underneath. Remove the filter and it is drawn as before.

What can have a filter:

• Every shape except groups and cameras.
• A frame passes its filter to every shape inside it, on top of each shape's own filter. Each shape is filtered on its own, so a blur or a shadow never joins across shapes. The frame's background, border, and heading stay unfiltered.

Cameras have filters of their own, which work differently. See Camera filters.

Giving a shape a filter

• Operation:
  1. Select the shapes to filter.
  2. Click Add filter attributes to the shape in the Actions panel. This activates filtering on the shapes and shows their Filter section in the Attributes panel.
  3. Pick a primitive in the Add filter primitive selector of the Filter section. You can type to search it.
• Result: the primitive is added to the chain with its default values and the shape is drawn through it right away. The Filters list and its controls appear.
• Tip: with several shapes selected, you edit their filters together when each has a filter with the same chain of primitive types. The values shown are the first shape's. Selecting a group edits the filters of the shapes inside it.

Filter section

• Add filter primitive: appends a primitive to the end of the chain, taking the previous primitive as its input.
  • blur: softens the shape.
  • dropShadow: adds a shadow behind the shape.
  • morphology: thickens or thins the shape's edges.
  • turbulence: generates noise, for textures and distortions.
  • blend: mixes two inputs with a blend mode.
  • composite: combines two inputs by their transparency.
  • displacement: distorts one input using another as a map.
  • colorMatrix: recolors the shape through a color matrix.
  • convolveMatrix: sharpens, embosses, or blurs through a kernel.
  • componentTransfer: remaps each color channel, for contrast and levels.
  • specularLight: adds a shiny lighting highlight.
  • diffuseLight: adds soft lighting.
  • flood: fills the region with one color.
  • offset: shifts the input by a distance.
  • merge: stacks several inputs on top of each other.
  • tile: repeats the input as tiles.
  • image: brings in an image as an input.
• Filters: the header of the chain, shown once it has a primitive.
  • Filter settings: opens the region and interpolation values described in Filter region.
  • Filter visibility: turns the whole filter on or off without removing it.
  • Remove all filter primitives: clears the chain. The section stays, ready for new primitives, and the next one starts a new filter with the default region and Interpolation.
• For each primitive of the chain, in order:
  • Reorder filter primitive: drag it up or down to change the position of the primitive in the chain.
  • Filter name: click the name to rename the primitive, up to 40 characters. Until then it shows the primitive's id, such as blur_0. The name is only a label: renaming keeps every input that reads this primitive connected.
  • Primitive settings: opens the values of the primitive, described in Primitive settings.
  • Primitive visibility: turns that primitive on or off. The chain skips it while it is off.
  • Remove filter primitive: deletes it from the chain.

Inputs

Every primitive works on an input and produces a result the next ones can use.

• Input: what the primitive reads. The choices are SourceGraphic, the shape as drawn, SourceAlpha, its transparency only, and the result of every primitive above in the chain, shown by name.
• A newly added primitive reads the result of the primitive before it, or SourceGraphic when it is the first.
• blend, composite, and displacement read two inputs, Input and Input 2. merge reads a list of inputs. flood, image, and turbulence produce a result without reading one.
• A primitive cannot read a result that comes later in the chain. When you remove or move a primitive, inputs that can no longer read it switch to an earlier result.

Filter region

The filter is computed inside a region. Anything the primitives push outside it, like a wide blur or a long shadow, is cut off.

• Filter settings in the Filters header: X, Y, W, and H as percentages of the shape, and Interpolation, the color space the filter computes in: sRGB or linearRGB. New filters start at -20%, -20%, 140%, and 140%, which leaves a 20% margin on every side.

Custom primitive region

• Custom Region in each primitive's settings: limits that primitive to its own region, given as X, Y, W, and H instead of percentages.
  • The values are in the shape's own units, measured from its top-left corner. The region starts as the shape's box.
  • While it is off, the primitive covers the whole filter region. When every input it reads is another primitive's result, it covers only the area of those inputs, which is smaller when they have their own Custom Region. tile always covers the whole filter region.

Turning filters off without removing them

• Operation: click Filter visibility in the Filters header to switch off the whole filter, or Primitive visibility on a row to skip only that primitive.
• Result: the shape is drawn without the filter, or without that primitive, and the chain keeps its values for when you switch it back on.

Removing filters

Takes primitives off the chain, or the whole filter.

• Operation: click Remove filter primitive on a row to delete one primitive, or Remove all filter primitives in the Filters header to clear the chain.
• Result: the shape is drawn without the removed primitives. With the chain empty, the section stays with the Add filter primitive selector, ready for new primitives.

Removing the Filter section

• Operation: click Remove filter in the Actions panel.
• Result: the filter and its chain are removed from the selection and the Filter section disappears from the Attributes panel.

Filters and other operations

• Duplicating or pasting a filtered shape gives the copy its own filter with the same chain. See Duplicating.
• Grouping does not change filters: each member keeps its own.
• Frames pass their filter to each shape inside them. Moving a shape into or out of a frame updates what it inherits.
• Picking attributes from another shape with the eyedropper of the Filter section copies its whole filter: the chain of primitives, the region, and Interpolation. See Attributes.
• Converting to image keeps the filtered look. Some shapes keep their filter as an editable filter on the new image, and the rest have it drawn into the pixels. See Conversions.
• Animations do not change filter values; the filter is drawn the same way during playback.
• Exporting to SVG or image keeps the filter.

Primitive settings

Each primitive has its own values. Numeric pairs with a Link both values toggle between them change together while it is on, which is how they start. Every primitive ends with its inputs and its Custom Region, except flood, image, and turbulence, which have no inputs.

blur

• Rx, Ry: the blur radius on each axis.
• Edge: how pixels beyond the edge are treated: duplicate, wrap, or none.

dropShadow

• Rx, Ry: the blur radius of the shadow on each axis.
• Dx, Dy: the offset of the shadow on each axis.
• Shadow color and Shadow opacity: the color of the shadow and its opacity, from 0 to 1.
• Mode: shape keeps the offset aligned with the shape as it rotates, canvas keeps it aligned with the board.

morphology

• Rx, Ry: the radius on each axis.
• Mode: dilate thickens, erode thins.

turbulence

• Fx, Fy: the base frequency on each axis.
• Oct: the number of octaves.
• S: the random seed.
• Type: fractalNoise or turbulence.

blend

• Mode: how the two inputs combine.
  • normal: shows Input over Input 2, only its transparent areas let Input 2 through.
  • multiply: multiplies the colors, so the result is never lighter than either input, like overlapping color slides.
  • screen: the opposite of multiply, so the result is never darker than either input, like projecting both on the same screen.
  • darken: keeps the lower value of each color channel at every pixel.
  • lighten: keeps the higher value of each color channel at every pixel.
• Input, Input 2: the two inputs to blend.

composite

• Operator: how the two inputs combine, based on their transparency.
  • over: Input on top of Input 2.
  • in: keeps Input only where Input 2 is opaque, like a stencil.
  • out: keeps Input only where Input 2 is transparent, the inverse stencil.
  • atop: Input on top of Input 2, but only where Input 2 is opaque.
  • xor: keeps each input only where the other is transparent, so the overlap disappears.
  • arithmetic: computes every pixel from the four coefficients, so it can do custom mixes and weights.
• K1 to K4: the coefficients for arithmetic, shown while it is the Operator. Each result pixel is K1 times both inputs multiplied, plus K2 times Input, plus K3 times Input 2, plus K4.
  • They start at 0, which gives a transparent result until you change them. For example, 0, 0.5, 0.5, 0 averages the two inputs.
• Input, Input 2: the two inputs to combine.

displacement

• Sc: the displacement scale.
• Cx, Cy: the color channel of Input 2 that moves Input on each axis: R, G, B, or A.
• Input, Input 2: the input to distort and the map.

colorMatrix

• Mode: how the colors are transformed. A new colorMatrix starts on saturate at 0, which turns the shape grey.
  • matrix: a full color matrix, so any channel can be built from any mix of the others. Use it for tints, channel swaps, or inversions.
  • saturate: scales the color intensity. 0 turns the image grey, 1 leaves it as is, higher values make colors stronger.
  • hueRotate: shifts every hue around the color wheel by an angle, roughly keeping brightness.
  • luminanceToAlpha: turns brightness into opacity. The result is black, opaque where the input was bright and transparent where it was dark. Useful for building masks from other primitives.
• Value: from 0 to 10 for saturate, an angle from 0 to 360 for hueRotate.
• Values: the 4 × 5 grid for matrix, with one row per output channel (R, G, B, A) and one column per input channel plus a constant.

convolveMatrix

• Ox, Oy: the kernel size, from 1 to 9. KernelMatrix grows or shrinks to match.
• Div: the divisor.
• Bi: the bias.
• Tx, Ty: the target pixel inside the kernel, from 0 to the size minus 1.
• KernelMatrix: the grid of kernel values.

componentTransfer

• One block per channel: Red, Green, Blue, and Alpha.
• The selector in each block: the function that remaps the channel, from its input value to its output value.
  • identity: leaves the channel unchanged.
  • table: maps the channel through a list of values with straight transitions between them, like a line drawn through points.
  • discrete: maps the channel through a list of values with hard steps, like posterizing.
  • linear: multiplies the channel by the slope and adds the intercept, for contrast and brightness.
  • gamma: applies a power curve, amplitude times the value to the power of the exponent, plus the offset, for gamma correction.
• Tv: the list of values for table and discrete, as numbers separated by spaces.
• Slo, Int: the slope and intercept for linear.
• Am, Exp, Off: the amplitude, exponent, and offset for gamma.

specularLight

• Sc: the surface scale.
• K: the specular constant.
• Exp: the specular exponent.
• Lighting Color: the color of the light.
• Type: distant, point, or spot.
• Az, El: the azimuth and elevation, for distant.
• X, Y, Z: the light position, for point and spot.
• Px, Py, Pz: the point the light aims at, for spot.
• Ex, La: the spot exponent and cone angle, for spot.
• Its result is only the highlight. Combine it with the shape through composite.

diffuseLight

• Sc: the surface scale.
• K: the diffuse constant.
• Lighting Color: the color of the light.
• Type and the light values, the same as specularLight.
• Its result covers the whole region and replaces the shape. Combine them through blend or composite.

flood

• Flood color and Flood opacity: the color of the fill and its opacity, from 0 to 1.

offset

• Dx, Dy: the distance on each axis.

merge

• A numbered list of inputs. Each one is drawn over the ones before it, so input 1 is at the bottom.
• Add input: pick an input in this selector to add it to the list. It offers the inputs not already listed. The selector on a row replaces that input, and Remove filter input takes it out.

tile

• Repeats its input's region across its own. To see tiles, give the input primitive a smaller Custom Region.

image

• Add or Replace: chooses the image. Paste from clipboard uses a copied one.
• Alignment: none, or one of nine placements such as xMidYMid, the default. With none the image stretches to fill the region.
• Coverage: meet fits the whole image, slice fills the region.

Learn more

The chain uses the SVG filter primitives as browsers implement them, so these references apply directly:

• Filter effects tutorial on MDN: a gentle introduction to chaining primitives.
• Filter primitive elements on MDN: the reference for every primitive and its attributes.
• SVG Filters 101 on Codrops: a series that builds practical effects step by step.
• The world of SVG displacement filtering on Smashing Magazine: turbulence and displacement in depth.
• SVG filters playground: an online editor to try chains and inputs before building them here.
• Filter Effects Module Level 1: the W3C specification.