Outline a group of touching shapes with SVG - svg

Question

For a certain style I'm going for, I want to outline a group of shapes in SVG. Applied to a group, the stroke property appears to outline each shape individually--effectively going on top of other shapes nearby. To explain my situation more clearly: I have a group of touching rectangles that are 8x8 pixels each. They do not form a larger rectangle, however.
For simplicity's sake, let's say they form a cross. So I have 5 rectangles--1 in the center and one more on each side of that one. I want to outline them all as if they were 1 shape. Given that this "cross" shape changes, I would prefer not to use paths since that would require a lot more coding. Isn't there any way that I could get the effects filter to recognize this group as a single shape?
If not, is it at least possible to make a black copy of this group that's exactly 2px larger in width and height that I can position behind the group to create a solid black outline? And if so, is it possible without duplicating the group?
Thank you for any help.

Answer 1

You could use an svg filter like this one for example:
<filter id="outline">
<feMorphology operator="dilate" in="SourceAlpha" radius="1"/>
<feComposite in="SourceGraphic"/>
</filter>
Use the filter like this:
<g filter="url(#outline)">
<circle fill="lime" cx="20" cy="10" r="5"/>
<rect x="40" y="10" width="100" height="10" fill="lime"/>
<line x1="20" y1="10" x2="80" y2="15" stroke="lime"/>
</g>
Another alternative that might work, depending on how your content looks is something like this:
<use xlink:href="#g" stroke-width="10" stroke="black"/>
<g id="g">
<circle fill="lime" cx="20" cy="10" r="5"/>
<rect x="40" y="10" width="100" height="10" fill="lime"/>
<circle fill="lime" cx="140" cy="10" r="5"/>
<circle fill="lime" cx="120" cy="10" r="5"/>
</g>

Answer 2

Like this:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="biggerbwcopy">
<feColorMatrix values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
<feMorphology operator="dilate" radius="2"/>
</filter>
</defs>
<rect id="r" x="10" y="10" width="20" height="20" fill="blue" onclick="biggerbw()"/>
<script>
function biggerbw() {
document.getElementById("r").style.filter="url(#biggerbwcopy)";
}
</script>
</svg>
http://jsfiddle.net/longsonr/LrDHT/1/ click on the rectangle and it becomes black and bigger.
You could extend the filter to put the original shape on top using feMerge