How can I blur svg image? - svg

Question

I want to blur all this svg image : https://github.com/lipis/flag-icon-css/blob/master/flags/4x3/eu.svg?short_path=4cf8a66
I want the same result as the following CSS :
filter: blur(2px);
-webkit-filter: blur(2px);
Is there a way to do something like this:
<svg blur="0.5">
like opacity with:
<svg opacity="0.5">
?

Answer 1

The filter attribute maps to the filter CSS property in SVG.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">
<defs>
<g id="d">
<g id="b">
<path d="M0-1l-.31.95.477.156z" id="a"/>
<use transform="scale(-1 1)" xlink:href="#a"/>
</g>
<g id="c">
<use transform="rotate(72)" xlink:href="#b"/>
<use transform="rotate(144)" xlink:href="#b"/>
</g>
<use transform="scale(-1 1)" xlink:href="#c"/>
</g>
</defs>
<path fill="#039" d="M0 0h640v480H0z"/>
<g filter="blur(0.2px)" transform="translate(320 242.263) scale(23.7037)" fill="#fc0">
<use height="100%" width="100%" xlink:href="#d" y="-6"/>
<use height="100%" width="100%" xlink:href="#d" y="6"/>
<g id="e">
<use height="100%" width="100%" xlink:href="#d" x="-6"/>
<use height="100%" width="100%" xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/>
<use height="100%" width="100%" xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/>
<use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/>
<use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -5.076 .534)"/>
</g>
<use height="100%" width="100%" xlink:href="#e" transform="scale(-1 1)"/>
</g>
</svg>