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
1
vote
1
answer
87
views
Can a nested SVG be used as input for feTile in an SVG?
I'm using feTile in combination with feOffset in an SVG file to create a shadow filled with a pattern. The pattern itself is an SVG file too. To keep the complete SVG self-contained, I would like to ...
- 111
1
vote
0
answers
67
views
How to combine SVG linear gradient and <rect> with feDisplacementMap and apply it to div element?
I have a react project, and I want to implement some SVG filter, but I'm having a problem now, the filter doesn't work. It Looks like there is some problem with the way I structure the SVG code block. ...
- 347
1
vote
0
answers
150
views
React native and SVG image
import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
import Phone from '../assets/images/icons/phone.svg';
const Background = () => {
return (
<View>
&...
1
vote
0
answers
481
views
How do I apply shader to SVG Filter?
I tried some WebGL technology before such as three js and pixi js. When I learned WebGL technology, I found shader which made me really fascinated. But WebGL can only be rendered on the canvas not the ...
- 347
1
vote
1
answer
257
views
SVG filter disappear on iOS-Safari
In iOS Safari, the second rect disappears, why?
I expect it to display properly in iOS.
<svg style="width:800px; height:500px; display: inline;" xmlns="http://www.w3.org/2000/svg"
...
- 31.3k
0
votes
2
answers
76
views
"result" of feComposite is not being used as "in" in a subsequent filter operation
Maybe I'm not understanding <feComposite/>, but it seems it cannot be used in a following <feGaussianBlur/>'s in - I can only use SourceGraphic, which isn't what I want.
Basically, I have ...
- 31.3k
0
votes
1
answer
80
views
Proportional SVG filter?
I try to generate SVGs that are composed of filters and I would like to have exactly the same rendering when the same image is resized (with ratio kept).
I use two filters: feTurbulence and ...
- 11.6k
1
vote
1
answer
86
views
Apply SVG lighting filter to path only
I'm trying to create a a metallic effect on a path in an SVG using a lighting filter. My initial attempt seems to lighting the whole bounding box of the path rather than just the stroke.
Is there a ...
- 1,428
0
votes
1
answer
534
views
Some SVG elements disappear when hiding adjacent divs
I have a project where I've created a number of divs which each contain an svg gauge. Each gauge is multi-layered and when displayed, it looks great. Its a complex gauge, so I wont include the code, ...
0
votes
1
answer
155
views
How to Map brightness in CSS( using filter ) from -100% to 100% using feFuncR, feFuncB, feFuncG
What should I set the values of slope of feFuncR, feFuncG and feFuncB inside feComponentTransfer to map the brightness of an image from -100% (complete black) to 100%(complete white) with 0% having no ...
- 31.3k
1
vote
1
answer
180
views
SVG feColorMatrix filter looks different than CSS filter (sepia)
According to https://webplatform.github.io/docs/css/functions/sepia/ we should be able to use SVG filters - specifically a feColorMatrix - to mimic a sepia effect.
I was unable to reproduce the exact ...
- 454
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 ...
- 12.8k
0
votes
2
answers
1k
views
SVG: Why can I not override the fill color?
I with to have a default fill and override where needed:
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle fill="blue" id="myCircle" cx="0" cy="0" r="...
- 58.1k
1
vote
1
answer
148
views
Why does converting my greyscale SVG to alpha cause a reduction in brightness?
I'm trying to create a transparent "starry night" effect with an SVG. I have my SVG inlined on a webpage, inside an element with a black background. I start out with a turbulence filter, ...
- 31.3k
3
votes
1
answer
556
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 ...
1
vote
1
answer
114
views
Why does my displacement map filter disappear when I use an <feOffset> with very large dx variable?
I'm trying to create a scrolling texture using SVG's filter combined with an filter. It's working great, but as you can see in this demo, once the value of dx increases past a certain threshold, the ...
- 31.3k
1
vote
1
answer
168
views
SVG feTurbulence filter will not animateTransform rotate on Firefox
This code is saved in a .SVG file and it animates as intended on most browsers, but not on Firefox.
The feTurbulence filter and the rotation animation work separately on any other shapes, but when ...
- 31.3k
1
vote
0
answers
289
views
SVG Filter animation won't work in Safari
I ran into an issue where safari doesn't want to apply svg filters to a child element that is animated. It seems like an you can animated the parent of an element with a filter applied (second example)...
- 61
0
votes
0
answers
391
views
Remove filter from child element HTML CSS
I am working on a project and and am having an issue trying to remove a filter from a child element. I created a small code snippet of the issue I am running into.
Does anyone have any recommendations ...
1
vote
1
answer
546
views
SVG and SVG Animation efficiency
I'm just starting to play around with SVGs and animating them. I created a vector design in Adobe Illustrator, exported as an SVG, and then animated it. The inspiration was based off Chris Gannon's ...
- 21.4k
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 ...
- 31.3k
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)...
- 11
1
vote
1
answer
357
views
SVG Shape Lighting
Summary: I'm trying to create a canvas of randomized rock climbing holds using vector graphics generated with properties such as color, rotation, size and path values.
To add depth to these I'm trying ...
- 31.3k
2
votes
1
answer
3k
views
CSS "filter" property does not work on Safari when using inline SVG in CSS like 'filter: url(data:image, ...)'
[EDIT] I've reviewed my entire post to add precisions about the problem and for additional ressources.
...
I'm new to SVG usage for webdesign, but I intend to implement a cool CSS feature for a theme. ...
2
votes
2
answers
5k
views
css svg filter safari not working
I am using a css filter property by applying an svg feColorMatrix to it. It works on Firefox and Chrome very well. But it does not work on safari. I have been playing with the values, indentation, ...
1
vote
2
answers
148
views
Text not rendered on Safari when applied with custom SVG filter via CSS
I wrote a custom SVG filter to draw strokes around text and icons. The filter is then referred in the CSS stylesheet. The following code renders as expected in Chrome and Firefox, but it hides the ...
2
votes
1
answer
3k
views
How to animate feTurbulence to appear continuous
The feTurbulence filter is used to create clouds. By animating frequency value, generated clouds are zoomed in or out. I want them to slide from right to left.
I've made so far:
<svg height="0"...
- 31.3k
0
votes
1
answer
999
views
Optimize svg filter turbulence to get better performance
I'm using a svg turbulence filter to create a water effect but it is lagging on low-end and mid-end computers so I was wondering if there was any way to optimize the animation or if there were any ...
- 31.3k
1
vote
1
answer
135
views
Improve neon sharped cut text effect
I am trying to add sharped cut effect on text. I have achieved this thing:
But I want to achieve this backplate/background sharped cut text effect:
My Code:
.wrapper {
background-color: #000;
}...
- 12.1k
1
vote
0
answers
108
views
ThreeJS "Removes" SVG Filter
I'm experiencing an issue with ThreeJS removing an SVG Filter after being loaded in. I'm struggling to pinpoint the issue, even a directional answer to look into what could be the cause would be ...
- 20.6k
2
votes
1
answer
752
views
SVG filter "Turbulence" not rendering well on safari
I'm trying to apply a svg "Turbulence" filter on an image on my website.
The thing is that it looks well on FireFox and Chrome :
But looks horrible on safari :
It seems that Safari is &...
- 31.3k
2
votes
1
answer
4k
views
flutter_svg not loading some svg files and throw error
I am using the flutter_svg package(version ^1.0.3). I got svg icons from fathtericons site. But I have erros. I couldn’t find a better solution to this. filter icon
Output Error
══╡ EXCEPTION CAUGHT ...
- 764
0
votes
1
answer
41
views
How to auto-brighten an SVG node using SVG only?
I would like to be able to specify some kind of transformation that would, given an arbitrary SVG node remap all of its pixel values to cover the full (0-100% or 0-255) range of intensities while ...
- 101k
-1
votes
2
answers
502
views
How to draw letter R with SVG
I have a svg of letter B here is the code:
<svg id="logo" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 84 96">
<title>Logo</title>
<g transform="...
- 32.5k
1
vote
2
answers
9k
views
SVG Fill and Filter urls from css not working on safari
I created an animation for my personal website, its working in Chrome and Firefox with no problems and I don't care about IE, but its not working on Safari, I think because Safari won't recognise the ...
- 11
0
votes
1
answer
488
views
How to use an animated filter in an SVG mask?
I tried without success to use an animated filter noise on a mask to mask an element. The mask itself works but I am unable to get the animation working in the mask, even though the animation itself ...
- 31.3k
1
vote
2
answers
143
views
Elliptical light source using SVG filters
I am trying to apply a Vignette effect on images with SVG filters. I am trying to implement this with the <fePointLight> primitive, but I find this a bit limited in that it is always has a ...
- 101k
2
votes
1
answer
763
views
How to perfectly loop feTurbulence animation
I am working with this following and trying SMIL animation for the first time.
If you take a look, you would realize that the animation is not smooth, there is a jump at the end.
How can I make this ...
- 21.4k
0
votes
1
answer
230
views
How to create SVG Gooey effect
I am trying to recreate something like this.
This is what I have tried
// targeting the svg itself
const svg = document.querySelector("svg");
// variable for the namespace
const svgns = "http://...
- 132k
0
votes
1
answer
125
views
When I add inner shadow for circle, shadow is not round
When I add inner shadow for circle, shadow is not round
How to fix it, I need that shadow will be without
corners (img)
I need that shadow in the circle will be rounded
Below you can see my code with ...
- 31.3k
1
vote
1
answer
142
views
Svg filter get outline of two blurred Objects
I have Two squares.
The end goal is to get the rounded outline of two merged svg objects. So, to achieve this, I first blurred them, with
<feGaussianBlur in="SourceGraphic" stdDeviation=&...
- 31.3k
0
votes
2
answers
136
views
How to add spread in inner shadow in svg?
I have svg rectangle, and I need to add an inset-shadow with spread, how it works in figma.
rectangle with inner-shadow with spread
Currently, I make a rectangle with blur and x, y position, but I ...
- 31.3k
0
votes
2
answers
724
views
Is it possible to have two different colors within the same path without using CSS?
I have the following SVG code:
<svg id="cogwheel_1" viewBox="0 0 300 300">
<path fill="black" fill-rule="evenodd" stroke="black" ...
- 31.3k
0
votes
2
answers
167
views
SVG filter not visible when using custom viewBox
Why is setting an svg viewBox to say 0 0 1 1 causing my filter to disappear? I also tried playing around with x, y, height, and width attributes as well as changing primitiveUnits attribute, nothing ...
- 11.6k
0
votes
2
answers
211
views
Color changeable SVG?
I wish to build a website where icon colors can be easily changed with the only change of the css. I've been given a set of custom icons in form of svg files.
I've already experimented with background ...
- 1,267
0
votes
1
answer
243
views
Different results when applying feColorMatrix SVG filter in CSS or in javascript
Let's say we want to apply a SVG filter on a canvas element. According to this we can apply a SVG filter to the CanvasRenderingContext2D in javascript like this, the filter will only affect shapes ...
- 31.3k
1
vote
1
answer
163
views
Canva Duotone Effect
I've looked around for this question but cant seem to find a response.
I am attempting to replicate a duotone image i created on canva, but through CSS. I have attached two images, the first image is ...
- 34.7k
2
votes
1
answer
483
views
How to apply Photoshop-style color curves filters to an HTML tag?
I'm trying to replicate the following Photoshop color curves filter in an HTML video tag.
The closest answer I've found so far is how to add Photoshop-like color levels with CSS and SVG Filters but ...
- 31.3k
0
votes
1
answer
61
views
Customize SVG path
I Basically want to write text(ICSE) in two lines i.e first line has the word IC and to very next line just below IC word SE. I am puzzling with code for a long time but didn't get the way.
<...
- 11.6k
0
votes
1
answer
116
views
How to use variables in svg filter's feflood tag?
I have following code
<filter x="-0.1" y="-0.1" width="1.2" height="1.3" id="color_available">
<feFlood flood-color="#306b34&...
- 11.6k