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:

  1. Right-click the SVG or text element.
  2. Select Add SVG filter... from the pop-up menu. If a filter has already been applied, select Edit SVG filter...
  3. In the Edit SVG filter dialog, select a filter from the Filter dropdown in the panel on the right.
  4. Customize the filter settings.
  5. 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?
Search
Clear search
Close search
Google apps
Main menu