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
649
questions
4
votes
1
answer
2k
views
SVG filter feGaussianBlur and feColorMatrix not working in Safari/iOs, alternatives?
I see this code on a demo in codepen.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="goo">
<feGaussianBlur in="...
- 41
4
votes
1
answer
1k
views
SVG Bevel Effect on straight Paths
I'm using Inkscape to draw a piping diagram, i'm trying to make the pipes have some sort of bevel effect. I partially succeeded, however, whenever the path is a straight line, the path disappears. I'm ...
- 2,049
4
votes
1
answer
2k
views
Apply SVG filter to "fill" only
How do I apply an SVG filter on an SVG element, but not on its stroke?
Let's say I have this SVG filter (it puts the red component to 100%):
<filter id="testStroke">
<feComponentTransfer>...
- 3,481
4
votes
2
answers
3k
views
Using SVG filters in CSS for IE10
IE10 has dropped support for its DirectX image manipulations; it now uses the SVG standards. However, in Firefox, for example, you can apply an svg filter to any <img> element but in IE10, and I ...
- 6,541
4
votes
0
answers
780
views
gooey effect with react-native
Is possible to implement this effect in react native ?
http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/
As I read this effect is based on svg filters that currently are not supported ...
4
votes
0
answers
416
views
SVGs with filters appear fuzzy on iOS (in <img> tags)
I've been experimenting with SVG filters, but can't figure out how to fix this: I have an SVG that uses filter effects like feBlend:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www....
- 1,041
3
votes
2
answers
6k
views
Brightness filter in firefox and opera without svg file
For my current project i used filter -webkit-filter: brightness(-20%);-moz-filter: brightness(-20%); But somewhy, this filter doesnt works in firefox and opera(i have opera prefix too). I found,...
- 2,269
3
votes
3
answers
4k
views
Black and white (not grayscale) filter in svg, ideally snap.svg
Edit 1: Rewrote question so it is clearer to understand.
This one really split my mind.
I would like to apply a filter to an image such that values over a certain threshold are displayed as ...
- 3,318
3
votes
1
answer
3k
views
Make Blend Modes in SVG actually work?
I've many times done the following:
<defs>
<filter id="screen">
<feBlend mode="screen" in2="BackgroundImage"/>
</filter>
</defs>
But when I, inside a shape, write "...
3
votes
3
answers
3k
views
How to animate fill instead of path in an SVG progress bar
I want to use the following SVG for donation page. I want to fill all of the heart (not just the border), and make it filled from the bottom to the top. How can I change the filling direction?
https:...
- 541
3
votes
1
answer
5k
views
Large Blurs in SVG Filters not working in Safari
I've been using the following SVG filter in place of filter: blur(#px); for some time now as I need a blur that covers the element edge to edge as opposed to the usual fall off. It works wonderfully ...
- 432
3
votes
2
answers
5k
views
Is the 'frosted glass' effect implementable with CSS only at this time?
The frosted glass effect (where an overlay both blurs and tints what is below it) is a common UI element in iOS.
Is there currently anyway to implement that with CSS? There are a lot of questions ...
- 40.5k
3
votes
3
answers
1k
views
Colorizing grayscale image
I'm trying to colorize grayscale images on the fly with user-selected foreground and background colors (limited to red, green, blue, cyan, magenta, yellow, black, and white). The effect I want is as ...
- 253
3
votes
2
answers
698
views
SVG Filter: width 100% height 100% does not cover image
I have a simple SVG Filter. If you click the example below, that filter will appear/disappear:
var image = document.querySelector('image');
var url = 'https://i.picsum.photos/id/202/200/200.jpg?...
- 27k
3
votes
2
answers
502
views
Animate feDropShadow inside filter
I have the following code and I want to animate feDropShadow inside defs
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap");
*,
*::before,
*::after {
...
3
votes
1
answer
1k
views
SVG light and shadow a 3D feelling
I want to make an svg looks like it's on 3D by adding a small light in the top and left BORDER and a shadow in the bottom and right BORDER
something like this
#div1 {
background: #ddd;
}
#...
- 4,750
3
votes
2
answers
599
views
How to apply feBlend and preserve source alpha
I'm trying to modify colors of an image by applying feFlood and feBlend to it in "lighten" and "darken" modes. How do I preserve the alpha channel?
<svg>
<filter id="filter">
<...
- 2,760
3
votes
1
answer
4k
views
SVG pattern animation
I have defined a pattern in svg. I want to rotate it continuously.... I'm not able to apply animation on that pattern definition. i applied same animation to a symbol , it works but its not working on ...
- 165
3
votes
2
answers
1k
views
SVG drop shadow with filters is truncated
I am trying to make a drop shadow for the following SVG shape:
<svg style="overflow:visible; ">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id=...
- 4,034
3
votes
2
answers
2k
views
SVG dropshadow getting clipped
I have an SVG tick icon with a dropshadow that is being clipped. The usual filter offset method I've seen here on SO isn't helping. Any suggestions?
<svg version="1.2" baseProfile="tiny" id="...
- 14.3k
3
votes
2
answers
2k
views
SVG Sepia filter effect: mid-tones only
Could you please help me finding out how can I achieve the Sepia tone on the link bellow using SVG?
My Sepia Tone made with Photoshop's Color Balance
I've tried the following code:
<svg class="...
- 35
3
votes
3
answers
1k
views
Feature detecting support for svg filters
I need to feature detect whether a browser supports svg filters (feGaussianBlur, to be specific). How would I go about testing for this? Safari, which doesn't support the filter, silently ignores the ...
- 23.1k
3
votes
1
answer
1k
views
Illustrator SVG Effects Coding Issues
I am having some REAL big problems coding SVG XML and having it being reproduced in Illustrator as I am expecting. Major problem right now is the feColorMatrix effect. I understand the effect and how ...
- 885
3
votes
2
answers
7k
views
Webkit and SVG filter support
I'm trying to get a complex SVG filter to produce results in Webkit. The filter is quite crowded as you will see below, but it renders a nice fractal-generated map, and does it well in Mozilla. I'd ...
- 15k
3
votes
2
answers
2k
views
Can we apply a SVG filter to a specific portion of canvas element?
I was studying SVG and filters and then I had this thought: Can we apply filter to the specific portion of an element?
To be precise, have a look at: My home page
The squares are being drawn on two ...
- 327
3
votes
2
answers
4k
views
CSS blur filters breaking on scroll and hover
First time poster - I've looked everywhere for a solution and I'm hoping you guys can help! I'm having problems when using CSS blur filters. I have created a frosted glass effect (kind of similar to ...
- 248
3
votes
1
answer
429
views
Where am I going wrong with feColorMatrix to invert colours?
I'm drawing objects and using a filter to invert the colours. However, the colours aren't coming out correctly.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"...
- 1,003
3
votes
2
answers
3k
views
Convert CSS filters to SVG filter
I have working CSS filters on the <img /> elements as I want to.
eg.
filter: brightness(1) contrast(67%) saturate(250%) grayscale(0%) invert(0%) hue-rotate(330deg) sepia(40%) blur(0px);
My ...
- 665
3
votes
2
answers
2k
views
self overlapping svg paths
I would like to know how to highlight (change the color) a self overlapping zone of an SVG path (or even polyline). Actually, if i change the opacity and stroke property of a path the self ovverlaping ...
user3405540
3
votes
1
answer
2k
views
SVG - Inset and drop shadow at the same time
how can i bring this two filters together?
<filter y="0%" x="0%" primitiveUnits="objectBoundingBox" id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="0.0012"/>
<...
- 11.7k
3
votes
1
answer
829
views
stop SVG feSpecularLighting filter from filling outside of a <rect> Element
I am developing in Chrome and Firefox and I've been having trouble with an SVG filter. when applied to a rect it seems to affect more than just the <rect> element. Below is a screenshot of the ...
- 679
3
votes
3
answers
983
views
How to draw a line along the bounding box of a text segment?
Gnuplot supports a "boxed text" property that draws a box with optional fill around a text label. Since gnuplot knows essentially nothing about fonts, it relies on device-specific code to generate ...
- 14.7k
3
votes
1
answer
2k
views
Inlining SVG filters as data URI
I'm trying to add a SVG filter using a data URI in the CSS but cannot get the effects applied to my image.
It seems that it should be supported as both data URI and SVG filters are supported in all ...
- 107
3
votes
1
answer
560
views
CSS filter composed of multiple SVG filters makes image darker
I can apparently chain a sequence of css filters
together by simply concatenating them,
which seems to work:
filter: brightness(200%) brightness(200%);
But when the individual filters in question ...
- 5,271
3
votes
2
answers
507
views
Antialias SVG text before filter is applied?
SVG filters rasterize their source image, which means filtered text won't be anti-aliased, resulting in jagged edges.
Is there a workaround for this? Perhaps another filter can be used to emulate anti-...
- 18.8k
3
votes
1
answer
542
views
Why is <feDropShadow> not displaying?
Edit: trying to create a mcve I wasn't able to repro the issue. Now I'm completely baffled. Works on codesandbox, not in my project.
Initial question
I want to create a dynamic inline SVG element and ...
- 87.7k
3
votes
1
answer
939
views
Can feTurbulence in an SVG Filter be Rotated?
I have an SVG <filter> that uses <feTurbulence> to create a texture like so:
I create a vertical texture like this by using a large X base frequency and a smaller Y frequency within <...
- 709
3
votes
1
answer
1k
views
SVG filter parameters
Let's say I have an svg filter that applies a drop shadow to an element:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<filter id="dropShadow">
<feFlood result=...
- 11.7k
3
votes
1
answer
1k
views
Phonegap Android Inline SVG
I am using Phonegap to develop an Android application that is only going to be used on the Nexus 7.
In the index.html I have an inline svg that draws some nice circles and does a pulse effect.
It ...
- 95
3
votes
1
answer
2k
views
Blending mode in SVG
I am stuck with a problem in SVG blending mode. I have four paths in SVG and I want to composite them with formula: (1*2) + (3*4), i.e. Path 1 and Path 2 should be blended using multiply mode, ...
- 3,981
3
votes
1
answer
732
views
SVG: Getting an Anaglyph effect
I'm trying to create a SVG filter that would create an Anaglyph effect.
What I've done so far is to duplicate some shapes to some red and blue shapes. Now, I would like to change the way (opacity...) ...
- 35k
3
votes
1
answer
112
views
Can I set specific spacing for each value on [tableValues]?
I need to apply a filter as a gradient map to HTML elements, with custom gradients and specific distances between each color value.
Putting into images what I've done and what I'd like to do.
Let's ...
- 906
3
votes
1
answer
393
views
SVG Blink Issue On Scroll Up/Scroll Down
I have a logo that when you scroll down, it blurs out. When you scroll up, it blurs back in. I am accomplishing this using SVG filters.
Logic:
When Scroll Down.
Apply blur filter: url(#filt-blur-out)...
- 561
3
votes
1
answer
372
views
Safari trouble positioning SVG feSpotlight filter
I want to use a spotlight effect but it only seems to work in Chrome, looks "just ok" in Firefox, but will not position (x,y,z) in Safari. (Other browsers not tested)
I've tried different filter and ...
- 373
3
votes
1
answer
1k
views
Is there a way to add a highlight to pie chart in d3?
I hope I'm using the correct term, but basically I am trying to create highlight along the top of a pie chart in D3. I've seen lot's of things for adding drop shadows but have been unable to make that ...
- 45
3
votes
0
answers
921
views
SVG Filter Displacement as Overlay on Entire Website
I have a project where I want to achieve a glass effect through a lens, running over the entire site. I tried with PixiJS, but it only works on the canvas. It's important that the filter is on every ...
- 31
3
votes
1
answer
920
views
SVG filter is not working properly for straight line [duplicate]
<svg height="210" width="500">
<defs xmlns="http://www.w3.org/2000/svg">
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
...
- 346
3
votes
0
answers
472
views
Using filters inside a external symbol
I'm trying to use a external symbol with a filter. Unfortunately it looks like the browsers don't support this feature.
Am I declaring it wrong or hasn't it been implemented?
Example page: http://...
- 472
3
votes
1
answer
2k
views
Long Shadow Effect in SVG for Web
Basically I'm wondering if anyone has any ideas on how to efficiently get a long shadow effect with an SVG:
My three ideas on how this might be possible:
Hella detailed gradient map, but is there a ...
- 155
3
votes
1
answer
224
views
Is it possible to calculate the color balance of an SVG image using JavaScript?
Is there any way to calculate the color-balance of an SVG image using Javascript?
(I can find the color-balance of a Canvas image using a library like pixastic but I need it in SVG)
- 131