Coloured Glow
HTML
<svg id="glowy" width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<!-- We set the filter effect area to be really big to guarantee we see it all... -->
<filter id="white-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<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>
<!-- The only difference in this filter is its "flood-color" -->
<filter id="purple-glow" x="-5000%" y="-5000%" width="10000%" height="10000%">
<feFlood result="flood" flood-color="#7d26cd" 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>
</defs>
<g transform="translate(20,20)">
<rect x="0" y="0" width="40" height="40" rx="5" ry="5" style="fill: #ddd; filter:url(#white-glow)"/>
<rect x="0" y="50" width="40" height="40" rx="5" ry="5" style="fill: #d00; filter:url(#purple-glow)"/>
<path transform="translate(90,20)" d="M0,0L10,10L20,0L30,10" stroke="black"
filter="url(#white-glow)" stroke-width="3" fill="none"/>
...
CSS
body { background-color:#333; }