32

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.

fmalina
  • 6,120
  • 4
  • 37
  • 47
Jessica
  • 3,729
  • 4
  • 29
  • 29

4 Answers4

61

Here are some filters that provide different types of effect:

  • Drop shadow (transparent black shadow with slight offset)
  • Black glow (with a fixed colour)
  • Object-coloured glow (takes the colour of the object to which it is a applied)

An example:

There's a demo here.

The code:

<!-- a transparent grey drop-shadow that blends with the background colour -->
<filter id="shadow" width="1.5" height="1.5" x="-.25" y="-.25">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
    <feColorMatrix result="bluralpha" type="matrix" values=
            "1 0 0 0   0
             0 1 0 0   0
             0 0 1 0   0
             0 0 0 0.4 0 "/>
    <feOffset in="bluralpha" dx="3" dy="3" result="offsetBlur"/>
    <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent grey glow with no offset -->
<filter id="black-glow">
    <feColorMatrix type="matrix" values=
                "0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0   0
                 0 0 0 0.7 0"/>
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

<!-- a transparent glow that takes on the colour of the object it's applied to -->
<filter id="glow">
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
    <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
  • 1
    `transparent glow that takes on the colour of the object it's applied to`. Neon light vibes. This is the perfect glow effect for me. Thanks! – mihca Jul 14 '23 at 08:45
19

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...

<filter id="white-glow">
    <feFlood result="flood" flood-color="#ffffff" flood-opacity="1"></feFlood>
    <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
    <feMorphology in="mask" result="dilated" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur in="dilated" result="blurred" stdDeviation="5"></feGaussianBlur>
    <feMerge>
        <feMergeNode in="blurred"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

See this fiddle I made, based on Drew's answer.

Here's a breakdown of what the filter does:

  • Combine a flood fill with the source to colour it in (feFlood and feComposite).
  • Expand this coloured object a little (feMorphology with operator="dilate")
  • Apply our good old blur effect to make it glow! (feGaussianBlur)
  • Stick this coloured, expanded, glowy object under the source (feMerge)
Community
  • 1
  • 1
Jack
  • 2,153
  • 5
  • 28
  • 43
  • if the fill for the rect uses alpha channel like "rgba(3,3,3,0.9)", the shadow modifies the color of the rect. Is there a way I can avoid this? – user3526 Apr 12 '16 at 20:44
  • 1
    You can add another 'feComposite' step to get rid of any pixels of the glow that are underneath the original object. I made you a fiddle :) https://jsfiddle.net/4nz8o1p8/ – Jack Apr 13 '16 at 00:34
  • Hover over the objects in that fiddle to apply the glow - you'll see that their colour doesn't change :) – Jack Apr 13 '16 at 00:40
  • the additional 'feComposite' does not seem to work in firefox and safari though. – user3526 Apr 13 '16 at 09:31
  • Ahh that's annoying! Not sure how to fix that one I'm afraid :/ – Jack Apr 20 '16 at 06:16
8

Try this:

<svg id="svgLogo1" style="left: 0px; top: 0px;
  position: absolute;" width="980" height="80" viewBox="0 0 980 80"
  xmlns="http://www.w3.org/2000/svg" version="1.1" >
    <defs>
        <filter id="dropGlow" width="1.5" height="1.5" x="-.25" y="-.25">
            <feGaussianBlur id="feGaussianBlur5384" in="SourceAlpha" stdDeviation="15.000000" result="blur"/>
            <feColorMatrix id="feColorMatrix5386" result="bluralpha" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 0.800000 0 "/>
            <feOffset id="feOffset5388" in="bluralpha" dx="0.000000" dy="0.000000" result="offsetBlur"/>
            <feMerge id="feMerge5390">
                <feMergeNode id="feMergeNode5392" in="offsetBlur"/>
                <feMergeNode id="feMergeNode5394" in="SourceGraphic"/>
            </feMerge>
        </filter>
    </defs>
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6"
        style="stroke-width: 2; xstroke: #FFFFFF; fill: #555555; filter:url(#dropGlow)"/>
</svg>

I created the original filter in Inkscape, but it works just as well on whatever it's applied to.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • 3
    +1 for mentioning Inkscape. I tried the supplied svg and it didn't work though – Lzh Jun 08 '13 at 12:43
1

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.

Marlin Ouverson
  • 101
  • 5