Creating a vignette with SVG filters? - svg

Question

I would like to create vignette on an image using SVG filters. What is the best way to approach this? I already tried creating a feFlood with a gradient as flood-color but that doesn't work. Right now I am using a png generated in illustrator but I would like to keep it all in svg.
To illustrate what I am aiming for, this is the original:
And this is what is should be:
UPDATE:
I am using svg.js with the svg.filter.js plugin to generate the code dynamically. This is what I tried:
// create svg canvas
var draw = SVG('canvas').size(400,400)
// define gradient
var gradient = draw.gradient('radial', function(stop) {
stop.at({ offset: 0, opacity: 0 })
stop.at({ offset: 1 })
})
gradient.radius('80%')
// create image
var image = draw.image('http://distilleryimage11.ak.instagram.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg').size(400,400)
// add filter
image.filter(function(add) {
add.blend(add.source, add.flood(gradient), 'multiply')
})
This is the generated code:
<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:relative;overflow:hidden;left:0px;top:0px;">
<image id="SvgjsImage1005" xlink:href="http://distilleryimage11.ak.instagram.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg" width="400" height="400" filter="url( #SvgjsFilter1006)"></image>
<defs id="SvgjsDefs1001">
<radialGradient id="SvgjsRadialGradient1002" r="80%">
<stop id="SvgjsStop1003" stop-opacity="0" offset="0"></stop>
<stop id="SvgjsStop1004" offset="1"></stop>
</radialGradient>
<filter id="SvgjsFilter1006">
<feFlood id="SvgjsFeFlood1007" in="SourceGraphic" result="SvgjsFeFlood1007Out" flood-color="url(#SvgjsRadialGradient1002)"></feFlood>
<feBlend id="SvgjsFeBlend1008" in="SourceGraphic" result="SvgjsFeBlend1008Out" in2="SvgjsFeFlood1007Out" mode="multiply"></feBlend>
</filter>
</defs>
</svg>
The result is a completely black image. It seems that the feFlood element does not accept gradients as fill because it works with a color.
Here is a fiddle with the example code: http://jsfiddle.net/wout/VmUu6/

Answer 1

This worked for me without spotlighting, I user a radial gradient with multiple stop points you can adjust the color, stop points and opacity level to get the effect you want. play with the r(radius to widen/shorten the effect and the fx,fy to position. Gradients tend to be more efficient then using some of the filters that require heavy maths processing
<radialGradient id="grad"
fx="50%" fy="50%" r="55%"
spreadMethod="pad">
<stop offset="30%" stop-color="#222222" stop-opacity="0"/>
<stop offset="40%" stop-color="#222222" stop-opacity="0.2"/>
<stop offset="50%" stop-color="#222222" stop-opacity="0.4"/>
<stop offset="70%" stop-color="#222222" stop-opacity="0.6" />
<stop offset="100%" stop-color="#222222" stop-opacity="1" />
</radialGradient>
Apply to the rectangle positioned above an image
<image id="background" x="0" y="0" width="800px" height="530px" preserveAspectRatio="true"
xlink:href="http://i1-qa.adis.ws/i/Client_23/ss_collection_reddress?w=800"/>
<rect filter="url(#blur)" style="fill:url(#grad)" x="0" y="0" width="800px" height="530px"/>
vignette example

Answer 2

I have some vignetteing and selecting compositing methods in my slide share preso on filters. Page 50 onwards for techniques. Here is the most relevant piece of filter code. It's not a real vignette - that requires a much longer filter and selective image combination, but it's easier to understand.
<filter>
<feFlood id="flood-5" result="blackfield-6" x="0%" y="0%" width="100%" height="100%" result="blackfield-6" flood-color="#000000" flood-opacity="1"/>
<feSpecularLighting id="specular-5" result="Spotlight-6" lighting-color="#FFFFFF" surfaceScale="1" specularConstant="1" specularExponent="120">
<fePointLight id="pointlight-5" x="100" y="100" z="854"/>
</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>