SVG filters

SVG Filters - Google Web Designers

SVG filters let you add special effects to text and to SVG graphics that were imported inline. Use CSS effects for other types of elements.

Examples of SVG filter effects (original SVG on the left)

To add or edit an SVG filter:

Right-click the SVG or text element.
Select Add SVG filter... from the pop-up menu. If a filter has already been applied, select Edit SVG filter...
In the Edit SVG filter dialog, select a filter from the Filter dropdown in the panel on the right.
Customize the filter settings.
Click Save. Your settings will be remembered as a custom filter.

Note: SVG filters cannot be applied when a media rule is active.

Text elements

When you apply an SVG filter to a text element, the text is converted to SVG and you can no longer edit the text with the Text tool. SVG text is displayed on a single line without wrapping, so any line breaks are removed. The conversion can be undone by removing the SVG filter.

In the Edit SVG filter dialog, you can make the following changes to the text:

Text (the text content)
Font size
Text color

Filters and their settings

None

No effect is applied to the SVG element. Text that was converted to SVG by an SVG filter is restored to a text element.

Aura

Surrounds the SVG element with an aura.

Setting	Description
X radius	The horizontal radius of the aura. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Y radius	The vertical radius of the aura. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Color	The color of the aura.

Bevel

Gives a beveled appearance to the edges of the SVG element.

Setting	Description
Roundness	The curvature of the bevel.
Depth	The depth of the bevel.

Blur

Blurs the SVG element.

Setting	Description
Scale	The scale of the effect. This affects how blurry the element appears.
X Radius	The horizontal radius of the blur. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Y Radius	The vertical radius of the blur. Keep identical - When this button is active, the X radius and Y radius values stay the same.

Cratered

Adds the appearance of craters to the SVG element.

Setting	Description
Scale	The scale of the effect. This affects the size of the craters.
Depth	The depth of the craters.
Angle	The angle of the craters.

Dissolve

Erodes parts of the SVG element.

Setting	Description
Scale	The scale of the effect. This affects the size of the dissolved areas.
Definition	The extent to which the original edges are preserved.

Drop shadow

Adds a drop shadow to the SVG element.

Setting	Description
Shadow X	The horizontal offset of the shadow from the element. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Shadow Y	The vertical offset of the shadow from the element. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Blur radius	The radius of the shadow's blur. Larger values cause the shadow to appear blurrier.
Color	The color of the shadow.

Gleam

Creates the appearance of a light shining on the SVG element.

Setting	Description
Scale	The scale of the effect. This affects how much of the SVG element is lit.
Light height	The height of the light. This affects the angle at which the light hits the SVG element.
Color	The color of the light.

Glow

Adds a glow to the SVG element.

Setting	Description
X radius	The horizontal radius of the glow. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Y radius	The vertical radius of the glow. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Color	The color of the glow.

Inflate

Makes the SVG element appear inflated like a balloon.

Setting	Description
Scale	The scale of the effect. This affects how three-dimensional the element appears.
Tint color	The color of the reflective tint on the element.
Tint strength	The strength of the reflective tint.
Shadow X	The horizontal offset of the shadow from the element.
Shadow Y	The vertical offset of the shadow from the element.

Outline

Adds an outline to the edges of the SVG element.

Setting	Description
X Radius	The horizontal radius of the outline. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Y Radius	The vertical radius of the outline. Keep identical - When this button is active, the X radius and Y radius values stay the same.
Color	The color of the outline.

Sepia

Changes the colors of the SVG element to sepia tones.

Setting	Description
Brightness	The brightness of the element.

Splash

Makes the SVG element look as if it is splashing into liquid. Two liquid spill effects are generated. In the example below, "Spill 1" is purple, while "Spill 2" is blue.

Setting	Description
Scale	The scale of the overall effect. This affects the size of the liquid droplets.
Pattern	Select one of ten splash patterns.
Brightness	The brightness of the element.
Dissolution	The extent to which the element appears to have dissolved.
Spill 1 scale	The scale of the first spill effect.
Spill 1 blur	The blurriness of the first spill effect.
Spill 2 color	The color of the second spill effect.
Spill 2 scale	The scale of the second spill effect.
Spill 2 blur	The blurriness of the second spill effect.

Textured

Gives the SVG element a textured appearance.

Setting	Description
Scale	The scale of the effect. This affects the size of the texture segments.
Tint color	The color of the tint.
Tint strength	The strength of the tint.
Blur	The blurriness of the element.
Roundness	The curvature of each texture segment.
Pattern	Select one of ten texture patterns.

Warp

Distorts the SVG element.

Setting	Description
Scale	The scale of the effect. This affects the size of the distortion ripples.
Distortion	The severity of the distortion.

Was this helpful?

How can we improve it?