UnBlur Part Of Image Using SVG

Thursday, 28 April 2016 | Posted by
Many websites are using blurred images in background. If you want to highlight part of the image, what will you do ? Maybe drawing some shape on the image with red marker. We can do this with SVG filter and mask components. UnBlurring the part of completely blurred image will give better and clean attention.
Please have look at below code.
<svg class="blur" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="498">
      <!-- Image that was blurred and half brightend -->      
      <image filter="url(#filter2)" xlink:href="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" width="100%" height="100%"></image>
      <!-- filter to control blur and brightness -->      
      <filter id="filter2">        
        <!-- standard deviation to control blur -->
        <feGaussianBlur stdDeviation="7"></feGaussianBlur>
        <!-- standard deviation to control brightness -->         
        <feComponentTransfer>          
          <feFuncR  type="linear" slope="0.5"></feFuncR>
          <feFuncG type="linear" slope="0.5"></feFuncG>          
          <feFuncB type="linear" slope="0.5"></feFuncB>          
        </feComponentTransfer>      
      </filter>      
      <!-- mask to unblur the part of the image -->
      <mask id="mask1">       
        <circle cx="177" cy="166" r="150" fill="white" style="opacity: 1;"></circle>
      </mask>       
      <!-- image to show unblurred image part -->
      <image xlink:href="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG"
        width="100%" height="100%" mask="url(#mask1)"></image>    
</svg>
filter2 controls blur and brightness of the image. mask1 shows only specified part of the image. stdDevation attribute value represents the level of blur, If you want increase the blur effect, just increase stdDevation value. slope attribute value of feFunc effects the brightness of the image, this value should be in between 0 and 1. Decrease slope value to get darken blurred image in the background.  
Labels:,

3 comments:

  1. Viktoria Boykin26 May 2016 at 01:03

    i think its easier to use filters, if you are a newbie, personally i use https://macphun.com/focus for my shots!its great after macro shooting!

    ReplyDelete
  2. Jarhead UA8 September 2017 at 05:57

    Thank you for sharing this. I think it is very important for kids to know how to make photos better. Try to use filters https://photolemur.com to make your photos better.

    ReplyDelete
  3. for IT the3 November 2017 at 10:13

    Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry.

    ReplyDelete

Subscribe to: Post Comments (Atom)

Blogroll

Follow this blog by Email

Popular Posts