Questions tagged [svg-filters]
SVG filters are a set of image processing primitives that can be combined together to create sophisticated visual effects.
svg-filters
648
questions
510
votes
8
answers
597k
views
SVG drop shadow using css3
Is it possible to set drop shadow for an svg element using css3, something like
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
I saw some remarks on creating shadow using ...
- 58.2k
93
votes
6
answers
78k
views
How to calculate required hue-rotate to generate specific colour?
I have a white image that I am using as a background for a div, and I would like to colour to match the themes main colour. I am aware I can do:
filter: sepia() saturate(10000%) hue-rotate(30deg);
...
- 14.8k
76
votes
3
answers
21k
views
SVG shadow cut off
The SVG I'm working with has a drop shadow via feGaussianBlur filter.
The shadow itself is displayed properly, but gets cut off on top and bottom edges.
Like so:
The SVG in question is:
<?xml ...
- 39k
37
votes
4
answers
18k
views
How to lower the opacity of the alpha layer in an svg filter?
I'm trying to create a logo as an SVG. I exported the file from Illustrator. The logo has a drop shadow on it. I was looking through the XML and I found the filter node
<filter filterUnits="...
- 1,000
37
votes
1
answer
11k
views
Gaussian blur cutoff at edges
I am working on an svg export utility for a drawing program on android. I am having a problem that the behind blur is cutoff past the shape boundaries - looks like i need to resize the viewBox or ...
- 7,441
32
votes
4
answers
49k
views
How can I create a "glow" around a rectangle with svg?
I have something like the following:
<svg id="svgLogo1" style="left:0; top:0; position:absolute"
width="980" height="80" viewBox="0 0 980 80"
xmlns="http://www.w3.org/2000/svg">...
- 3,759
29
votes
6
answers
40k
views
Dynamically change SVG image color in android
I know that using third party library, it is possible to use SVG image in Android.
Library like: svg-android
The code to load SVG image is like below:
public void onCreate(Bundle savedInstanceState)...
- 23.5k
20
votes
4
answers
11k
views
Multiple Filters for Single Object in SVG
I want to put two filters on my circle. (Maybe more)
I've tried doing:
filter="url(#f1);url(#f2)"
And:
filter="url(#f1,#f2)"
And:
filter="url(#f1 #f2)"
But none of them work. How can I approach ...
19
votes
3
answers
7k
views
Why doesn't hue rotation by +180deg and -180deg yield the original color?
By reading HSL/HSV color theory, I get the impression that hue component is a cyclical attribute that repeats every 360 degrees and can be changed independently of saturation and lightness/value. ...
- 443
19
votes
7
answers
11k
views
SVG filter only working when added in style attribute (Firefox)
I added a blur effect svg to my HTML(text/html):
<html>
<head>...</head>
<body>
...
<svg xmlns="http://www.w3.org/2000/svg" height="0">
...
- 299
18
votes
1
answer
27k
views
How do I add a drop shadow to an SVG path element?
I've been attempting to apply a drop shadow to my SVG Path. I googled across the filter option which when applied to path by applying: -webkit-filter: drop-shadow( -5px -5px 10px #000 ); which didn't ...
- 3,873
18
votes
3
answers
19k
views
Using blending filters (multiply more specifically) using SVG
I have a reference image of the effect that I am trying to achieve using SVG.
In Photoshop the effect can be achieved by using 100% opacity with the blending mode set to 'multiply'
The colors have ...
- 1,064
16
votes
2
answers
8k
views
CSS blur only in one direction (motion blur)
I need to dynamically blur an image on my page, but only along one axis (Y specifically). So here are my requirements:
Has to be done "live" (I can't pre-render a blurred version of the image)
Like I ...
- 28.2k
15
votes
1
answer
7k
views
Match colors in feColorMatrix filter
I have a greyscale image. I want to filter it such that white -> color1 and black -> color2. Both colors are in hex CSS syntax. What math do I need to do to get this effect?
I'm using this ...
- 6,310
14
votes
3
answers
31k
views
How to make an inset drop shadow in SVG
I need to make a box with an inset drop shadow, in the same way that CSS3 has inset box-shadows. What I've found so far is a filter with feGaussianBlur, but the problem with that is that it also adds ...
- 19k