I'm working on some generative art using SVG. The one thing I noticed that SVG feGaussianBlur filter produces ugly result for nearest colors. E.g.:
<svg viewBox="0 0 512 512" width="512" height="512">
<defs>
<filter id="blur-1" filterUnits="userSpaceOnUse">
<feGaussianBlur edgeMode="none" in="SourceGraphic" stdDeviation="40" />
</filter>
</defs>
<rect x="0" y="0" width="512" height="512" fill="#333" />
<circle cx="256" cy="256" r="128" fill="#444" filter="url(#blur-1)" />
</svg>
Produces strange results around the edges of blurred area. Looking for a way to fix this.
<svg viewBox="0 0 512 512" width="512" height="512">
<defs>
<filter id="blur-1" filterUnits="userSpaceOnUse">
<feGaussianBlur edgeMode="none" in="SourceGraphic" stdDeviation="40" />
</filter>
</defs>
<rect x="0" y="0" width="512" height="512" fill="#111" />
<circle cx="256" cy="256" r="128" fill="#222" filter="url(#blur-1)" />
</svg>
See rendered result
The banding that you're seeing (on Windows only probably) is due to Windows graphics API's doing a crappy job of dithering for larger blurs when the color space is linearRGB. If you add
color-interpolation-filters="sRGB" to your filter element you'll get a smooth blur.
Related
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 circular shape. Is it possible to change the width such that the lighting effect takes on a wide elliptical shape? This is currently the filter I am using:
<filter id="vignette">
<feFlood id="flood-5" result="blackfield-6" x="0%" y="0%" width="100%" height="100%" flood-color="#000000" flood-opacity="1"/>
<feSpecularLighting id="specular-5" result="Spotlight-6" lighting-color="#FFFFFF" surfaceScale="1" specularConstant="1" specularExponent="100">
<fePointLight id="pointlight-5" x="720" y="450" z="1200"/>
</feSpecularLighting>
<feBlend id="svg-7" result="A-6" in="blackfield-6" in2="Spotlight-6" mode="lighten"/>
<feBlend id="blend-5" result="B-6" in="A-6" in2="SourceGraphic" mode="multiply"/>
</filter>
I am aware that it is possible to do this with a radial gradient effect on a separate shape, but I have a requirement that it must be done purely using SVG filters.
The values of the x=350 and y=240 attributes of the fePointLight filter are chosen so that the point is in the center of the image.
Different values for the z attribute of the fePointLight filter render the light source at different depths in relation to the drawing. The nearest position corresponds to the largest size.
Please watch in full screen
Hover over image
#img {
width:700px;
height:481px;
}
#img:hover {
filter:url(#spotlight);
}
<img id="img" src="https://i.stack.imgur.com/mBuDo.jpg" >
<svg width="700" height="481" viewBox="0 0 700 481" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="spotlight">
<feSpecularLighting result="spotlight" specularConstant="3.5"
specularExponent="70" lighting-color="grey">
<fePointLight x="350" y="240" z="520"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="spotlight" operator="in"/>
</filter>
</defs>
</svg>
Other image
#img {
width:700px;
height:481px;
}
#img:hover {
filter:url(#spotlight);
}
<img id="img" src="https://i.stack.imgur.com/GlhkD.jpg" >
<svg width="700" height="481" viewBox="0 0 700 481" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="spotlight">
<feSpecularLighting result="spotlight" specularConstant="3.5"
specularExponent="70" lighting-color="grey">
<fePointLight x="350" y="240" z="520"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="spotlight" operator="in"/>
</filter>
</defs>
If you want that sort of effect (elliptical light), you probably want to be using a spotlight rather than a point light.
If you offset the light position to one side and shine the cone down at a shallow-ish angle, you will get an elliptical spot.
<svg width="600" height="529">
<defs>
<filter id="spotlight">
<feSpecularLighting result="spotlight" specularConstant="1.5"
specularExponent="4" lighting-color="#FFF">
<feSpotLight x="-200" y="265" z="400" limitingConeAngle="10" pointsAtX="300" pointsAtY="265" />
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<rect x="0" y="0" width="600" height="529" style="fill: skyblue; filter:url(#spotlight);"/>
</svg>
Note that the lighting filter components can be unreliable to use. Each browser has differences in interpretation of the standard. Not to mention some bugs.
A point in case is the above example, which looks different in Firefox and Chrome.
But good luck with your project.
I have this code in which I want to add a feGaussianBlur to a <rect/> element:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<defs>
<filter id="f">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<rect x="100" y="100" height="200" width="180" fill="green" filter="url(#f)"/>
</svg>
The output is rendered like this:
As you can see, that the sides are not softened. The sides have a hard border.
But, when I decrease the value of the stdDeviation, it works well. Here is the output if the value of stdDeviation is set to 10:
Why is it not working properly with a value greater than 10? And what can I do to achieve it?
Expand the filter region
x="-20%" y="-20%" width="150%" height="150%"
See Filter effects region
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<defs>
<filter id="f" x="-20%" y="-20%" width="150%" height="150%">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<rect x="100" y="100" height="200" width="180" fill="green" filter="url(#f)"/>
</svg>
I am trying to add a point light effect to an SVG rectangle. The problem is that i got different results depending on the browser I am using. For example in Chrome and Safari i got the following:
How could I get a consistent result using svg filters on different browsers?
*, *:before, *:after {
box-sizing: border-box;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="customPointLight">
<feSpecularLighting result="lightBuffer" specularConstant="1.5"
specularExponent="80" lighting-color="#fff">
<fePointLight x="100" y="100" z="80"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="lightBuffer" operator="out"
k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#customPointLight)"></rect>
</svg>
Safari is choosing an incorrect filter resolution automatically, probably because no-one has bothered to update the code for retina displays. You can kick Safari to do "mostly" the right thing by adding filterRes="200" to the filter element because it hasn't dropped support for filterRes yet.
That said, today, the right thing to do cross-browser, is to punt on light sources completely and just use a rectangle filled with a black/white radial gradient imported as a data:URI with feImage (for Firefox & Edge compatibility). A screen blend will add the white high light to the original as I think you were intending. Like so:
svg {
background: red;
}
<svg width="400px" height="200px" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="lightHack">
<stop offset="35%" stop-color="white"/>
<stop offset="80%" stop-color="black"/>
</radialGradient>
<filter id="customPointLight">
<feSpecularLighting result="lightBuffer" specularConstant="1.5"
specularExponent="80" lighting-color="#fff">
<fePointLight x="100" y="100" z="80"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="lightBuffer" operator="out"
k1="0" k2="1" k3="1" k4="0"/>
</filter>
<filter id="pointLightHack" x="0%" y="0%" width="100%" height="100%">
<feImage width="100" height="100" xlink:href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KDQogIDxkZWZzPg0KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iZXhhbXBsZUdyYWRpZW50Ij4NCiAgICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPg0KICAgICAgPHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9ImJsYWNrIi8+DQogICAgPC9yYWRpYWxHcmFkaWVudD4NCiAgPC9kZWZzPg0KICA8Y2lyY2xlIGZpbGw9InVybCgjZXhhbXBsZUdyYWRpZW50KSIgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIi8+DQo8L3N2Zz4="/>
<feBlend mode="screen" in="SourceGraphic"/>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#customPointLight)"/>
<rect x="250" y="50" height="100" width="100" fill="blue" filter="url(#pointLightHack)"/>
</svg>
<!-- SVG source of the base64 encoded feImage -->
<svg width="100" height="100" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="exampleGradient">
<stop offset="40%" stop-color="white"/>
<stop offset="75%" stop-color="black"/>
</radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="50" cy="50" r="50"/>
</svg>
As an aside, you're not using the lighting effect correctly, specular lighting is supposed to add "shiny" highlights, so the proper usage is to composite the result on top of the source. Diffuse lighting is supposed to add "regular" light and it should be multiplied with the original graphic. In neither case should you be using an "out" composite operation - which is punching a transparent hole in your rectangle, as you can see when you add the red background above.
For all filters that use neighboring pixels in their computation, like feSpecularLighting, feGaussianBlur or feConvolveMatrix, the result is influenced by attribute filterRes, which defines the resolution for computing the filter effect. Unlike other attributes, the specification defines no default:
If not provided, then the user agent will use reasonable values to produce a high-quality result on the output device.
That leaves room for alot of differences between UAs.
feSpecularLighting itself has an attribute kernelUnitLength that explicitly references filter resolution:
For some level of consistency (sic!) across display media and user agents, it is necessary that a value be provided for at least one of ‘filterRes’ and ‘kernelUnitLength’.
Solved for now adding a circle with blur primitive which gives a similar effect and seems to be rendered correctly across browsers.
*, *:before, *:after {
box-sizing: border-box;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
</filter>
</defs>
<rect x="50" y="50" width="100" height="100" fill="blue""></rect>
<circle cx="100" cy="100" r="20" fill="#fff" filter="url(#blur)"></circle>
</svg>
I'm trying to create a SVG background image like this (two colors, radial gradient, S-shape cutout with smooth edges):
It's quite easy to create a radial gradient (e.g. using this tool):
<!-- SVG syntax -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<radialGradient id="g920" gradientUnits="userSpaceOnUse" cx="5.408560311284047%" cy="0%" r="93.04166277718278%">
<stop stop-color="#ed1c24" offset="0.1"/><stop stop-color="#003663" offset="1"/>
</radialGradient>
<rect x="-50" y="-50" width="101" height="101" fill="url(#g920)" />
</svg>
but is it possible to add the cutout too?
Lennis' answer was close. But you would get better results by combining the fill and the filter in one element, rather than try to use a blurry white shape to hide part of the gradient.
Note that the blur will affect any edge of the shape, including the top, left and right. So you need to make sure those edges are well away from (outside of) the edge of the SVG viewport.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>
<radialGradient id="g" gradientUnits="userSpaceOnUse" cx="5.4%" cy="0%" r="93%">
<stop stop-color="#ed1c24" offset="0.1"/>
<stop stop-color="#003663" offset="0.8"/>
</radialGradient>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation=".05" />
</filter>
</defs>
<path id="svg_1" d="M -0.5,-0.5
L 1.5,-0.5
L 1.5,0.5
L 1,0.5
C 1,0 0.6,0.1 0.5,0.25
C 0.4,0.4 0.1,0.4 0,0.25
L -0.5,0.25
Z"
fill="url(#g)" filter="url(#f1)"/>
</svg>
You could use a blur on a white element to make it look like a cutout.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none">
<defs>
<radialGradient id="g" gradientUnits="userSpaceOnUse" cx="5.4%" cy="0%" r="93%">
<stop stop-color="#ed1c24" offset="0.1"/>
<stop stop-color="#003663" offset="1"/>
</radialGradient>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation=".05" />
</filter>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
<path id="svg_1" fill="white" d="m-0.1,0.5 l0,0.55l1.15,0l0,-0.53495c0,0 -0.1,-0.1 -0.5,0c-0.3,0.1 -0.5,0 -0.5,0l-0.1,0z" filter="url(#f1)"/>
</svg>
You could also try a meshgradient, it's in the svg 2.0 spec. At the moment no browser supports it that I know off.
I'm trying to apply a texture tint to the SVG.
It's working almost fine but I need to make the texture as a tile for a better image quality
<filter id="composite" x="0" y="0" width="100%" height="100%">
<feImage result="sourceTwo" xlink:href="_link_" />
<feComposite in="SourceGraphic" in2="sourceTwo" operator="arithmetic" k1="1"/>
</filter>
How to replace feImage with a tile of the same image
jsFiddle
This is what the feTile primitive is for - but there is a regression bug in Chrome that clips the content - this is reported and a fix has been checked in (but still - buggy for now).
<svg width="500px" height="600px" viewBox="0 0 500 600">
<defs>
<filter id="composite" x="0%" y="0%" width="100%" height="100%">
<feImage result="sourceTwo" xlink:href="http://demo.prestalife.net/media/wood.jpg" width="34" height="34"/>
<feTile result="tiledImage"/>
<feComposite in="SourceGraphic" in2="tiledImage" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/>
</filter>
</defs>
<text x="0" y="20">Original image</text>
<image width="34" height="34" x="0" y="30" xlink:href="http://demo.prestalife.net/media/wood.jpg" />
<g filter="url(#composite)">
<rect fill="red" width="100%" height="100%" x="0" y="80" />
</g>
</svg>