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">
<rect x="0" y="5" width="980" height="54" rx="6" ry="6"
style="stroke-width:2; xstroke:#FFF; fill:#555"/>
</svg>
I would like to create a white glow around this.
Is there some way that I can do this in svg. I looked around and all I can find is "shadow" which is not really what I am looking for as I want a shadow (Glow) around all four sides of the rectangle.
Colour matrices can't really be used to make things glow a different colour, only transform the existing colour in some way.
But we can do something like this instead...
See this fiddle I made, based on Drew's answer.
Here's a breakdown of what the filter does:
feFlood
andfeComposite
).feMorphology
withoperator="dilate"
)feGaussianBlur
)feMerge
)Try this:
I created the original filter in Inkscape, but it works just as well on whatever it's applied to.
Here are some filters that provide different types of effect:
An example:
There's a demo here.
The code:
If you're using a blur filter, exercise a bit of caution. Blur in particular can be costly in terms of CPU resources. It therefore may consume battery faster, too. Use a tool (e.g., the OS X Activity Monitor) to observe the effect your filters have, especially if animation or video is involved.