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
598k
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,883
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
14
votes
1
answer
20k
views
How to create a transparency gradient mask using an SVG filter
I am currently using an SVG gradient to apply a fade-out effect for paths. This allows the path to start at 100% opacity at x0 and fade out to 0% at x1, wherever those may be for the particular path ...
- 690
13
votes
2
answers
6k
views
How to change color of SVG pattern on usage?
I would like to change the color of pattern upon usage.
For example, I would like to have a green pattern in the red stroked circle.
<svg width="300" height="300" viewBox="0 0 300 300"
xmlns="...
- 3,642
12
votes
3
answers
7k
views
Using SVG for additive color mixing (additive blending)
Coming from a graphic design background I know how to cheat to create an effect of additive color. The same basic solution is proposed in another post on here.
The post above refers to transparent ....
- 646
12
votes
3
answers
11k
views
Drawing a circle with a dropshadow in SVG clips the edges
I'm trying to draw a simple circle with a drop shadow in SVG, but for some reason the top and left edges are clipped. This happens both in Chrome and Safari.
I'm using code I found in the w3schools ...
- 1,284
12
votes
1
answer
20k
views
How to Invert a White image to Black using SVG Filters?
Is there a way to invert a white image to black using SVG filters?
In CSS Filter, we do -webkit-filter:invert(1); which does not work in IE10. I am applying SVG filters as fallback. Any one can help?
- 3,043
11
votes
1
answer
11k
views
SVG images not rendering in Safari
<svg id="button-svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve">
<defs>
<pattern id="pattern1" height="100%" width="...
- 861
11
votes
2
answers
6k
views
Apply blur filter to certain area of svg image
I have an quite complex, dynamically created svg image, that has been created using jQuery SVG. I'd like to create a "popup" area that shows on top of all svg elements in the canvas. To create a ...
- 1,142
11
votes
3
answers
10k
views
Can I apply CSS filters ONLY on image sections?
I have a full screen background-image
.bg {
left: 0;
min-height: 100%;
min-width: 100%;
position: fixed;
top: 0;
z-index: -1;
}
and want to apply a CSS filter, ...
- 441
11
votes
1
answer
6k
views
Transition an SVG Filter
I'm trying to create a material design like shadow on an SVG circle. I want this shadow to grow with a nice transition when you click on the circle, but at the moment I'm struggling to even figure out ...
- 34.3k
11
votes
2
answers
4k
views
How to use a simple SVG filter on Safari with acceptable performance and without crashing?
Disclaimer: This post is half question and half report of my experiments while trying to find a solution.
The Task: Simple SVG Filter on a Monochrome Rectangle
Using a filter to change or modify the ...
- 3,413
10
votes
3
answers
17k
views
How to apply drop-shadow filter via CSS to SVG specific element/path
I'd like to apply a drop-shadow filter to a specific element/path inside an inline placed SVG via CSS, I don't need the whole graphic to be shadowed, just an element inside it.
.shadow {
fill: ...
- 2,266
10
votes
2
answers
6k
views
Can one pixelate images with an SVG filter?
Note: I can't use JavaScript, because this is for a CSS Zen Garden sort of challenge. Please do not suggest a JS library.
I have 2 ideas that I'm not making headway on:
Use a SVG filter to just ...
- 1,419
10
votes
2
answers
10k
views
what's a flood-color and lighting-color definition in CSS?
Way cool, i'd just realised there is something called flood-color and lighting-color in CSS. Does anyone know what is a flood-color and lighting-color and what do they do?
What exactly do these mean?:...
- 88.5k
9
votes
2
answers
21k
views
SVG: color of the shadow
I want to write a simple rectangle with a red shadow in SVG.
I have a simple filter:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
<title>svg arrow ...
- 865
9
votes
2
answers
7k
views
Dynamically modifying an SVG filter with javascript
I'm trying to create a dynamic blur effect, that can be modified with javascript on the fly.
To start with, I'm using this really simple svg filter:
<svg version="1.1" xmlns="http://www.w3.org/...
- 5,470
9
votes
2
answers
2k
views
How to invert alpha channel of svg
I have an SVG image like this. I would like to invert it, such that everything that is black becomes transparent, and everything that is transparent becomes black. So the result would be a black ...
- 1,051
9
votes
2
answers
2k
views
Mobile Safari grayscale filter adds blur
I'm desaturating images with these filters:
img {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'...
- 13.8k
9
votes
2
answers
7k
views
How can I add a filter to a SVG object in JavaScript?
I am trying to create and add a feGaussianBlur filter to an SVG rectangle using JavaScript, using this code as reference. I get a rectangle, but it's not filtered. What am I doing wrong?
I am trying ...
- 141
9
votes
0
answers
569
views
Chrome refuses to set SVG filter from data uri
I'm trying to make a bookmarklet that will set an SVG filter over the entire page it is loaded into. To that end, it sets a style on the root element:
document.children[0].style.filter='url(data:image/...
- 387
8
votes
2
answers
15k
views
is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]
<svg viewbox="-20 -20 100 100">
<circle r="15.29563" cx="0" stroke="#7dc4c2" fill="#5ea4a2">
</svg>
How to fill the circle as below based on percentage!!
https://i.sstatic.net/...
- 310
8
votes
5
answers
8k
views
SVG filter not showing up in Firefox, working fine in Chrome
I want a piece of dark text on dark background to have a white glow outside of it. Although the default drop shadow filter in CSS (like filter: drop-shadow(2px 2px 2px black)) officially should ...
- 2,807
8
votes
4
answers
9k
views
Using SVG filter to create an inside stroke
I would like to simulate and "inside stroke" on an svg path.
I have an svg map with multiple complex paths (countries) each with a different fill color stroke.
And i would like to add a "fake inside ...
- 826
8
votes
2
answers
5k
views
Matching a color in SVG with feColorMatrix
I created a drop shadow in SVG using SourceAlpha for the shadow, so its plain black. Using feColorMatrix I reduced the opacity a bit, but still it wasn't looking as I wanted - I want the color of the ...
- 13.3k
8
votes
3
answers
5k
views
SVG: Multiple Effects in One Filter
I'm trying to implement multiple drop shadows into a single SVG filter, but I believe my question is more generic than that: how can I add multiple effects into a single SVG filter? In my case, here's ...
- 621
8
votes
1
answer
4k
views
Dynamically injecting SVG filters and applying to HTML
I'm playing around with applying SVG filters to HTML. This works if everything's hard coded, although I need the -webkit-filter CSS id for chrome. When attempting to create an SVG element with a ...
- 17k
8
votes
4
answers
16k
views
Applying image filters to canvas image data or in JavaScript
I'm a Flash developer, and I'm working on a JavaScript port of a game. In the Flash version, I use glow, blur and color matrix filters to manipulate the appearances of display objects. I would like to ...
- 115
8
votes
4
answers
3k
views
SVG: Drop-Shadow filter pixelates SVG on mobile Safari
I am using a drop shadow filter inside an SVG file that is embedded using an img tag. On my MacBook, it looks fine in Safari. However, in mobile Safari, the graphic gets really pixelated and loses all ...
- 13.3k
8
votes
1
answer
3k
views
feImage with internal source
Goal
I'm trying to write a SVG filter to render a wave lighting atop a given shape. So inside that shape I want the waves to apply, but I want no visible effect outside that shape. As far as I ...
- 59.4k
8
votes
0
answers
1k
views
What's exact math behind hue-rotate filter
In theory for every possible color-altering css filter functions like grayscale, invert, opacity, saturate, sepia there exist equivalent transformation achievable through svg filter feColorMatrix.
...
- 24.3k
7
votes
3
answers
2k
views
Adding feDropShadow to a vertical line in SVG makes it disappear
I have the following SVG document:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 21 484" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dropShadow">
&...
- 6,139
7
votes
1
answer
4k
views
SVG blur filter edge artifacts
When I apply blur filter to svg image it blurs edges so they become little transparent (see left sample). What I want is to blur it without such artifact (see right sample).
I solved this by hack: ...
- 2,949
7
votes
2
answers
12k
views
W3C Grayscale SVG Filters
I'm trying to alter the W3C greyscale filter found here: http://www.w3.org/TR/filter-effects-1/#grayscaleEquivalent
This is ridiculously simple on webkit, but I'm only even using this because Gecko ...
- 809
7
votes
1
answer
22k
views
How to use blend mode in svg for vector shapes?
Here is my simple svg:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" ...
- 1,923
7
votes
2
answers
376
views
Why is uniform grey not a neutral DisplacementMap?
I have been trying to generate a specific feDisplacementMap and failing miserably. I believe it's because I have a fundamental misunderstanding of the mechanism. The SVG 1.1 spec says:
This filter ...
- 31.3k
6
votes
2
answers
10k
views
Adding bevel and emboss to an SVG element?
So I was wondering if it was possible to add bevel and emboss to an SVG element?
My CSS for my rectangle element is like this:
rect {
fill: #e8e9eb;
stroke: black;
stroke-width: 1px;
width: ...
- 11.6k