CODEWITHSUNDEEP
svgblur
Zeus FR
Zeus FR

Reputation: 1

How can I blur svg image?

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

?

Upvotes: 0

Views: 1531

Answers (1)

Robert Longson
Robert Longson

Reputation: 124169

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>

Upvotes: 1

Related Questions