SVG filters let you add special effects to SVG graphics and text. Use CSS effects for other types of elements.
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 dialogue, select a filter from the Filter drop-down in the panel on the right.
- Customise 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 dialogue, you can make the following changes to the text:
- Text (the text content)
- Font size
- Text colour
Filters and their settings
None
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. |
Colour | The colour 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. |
Colour | The colour 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. |
Colour | The colour 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. |
Colour | The colour 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 colour | The colour 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. |
Colour | The colour of the outline. |
Sepia
Changes the colours 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 colour | The colour 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 colour | The colour 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. |