SVG Filters Blur Filters: Highlight Blur


Example

This filter selects only the high luminance areas of a source graphic, blurs the contents and composites the blurred content on top of the original.

<svg width="800px" height="600px">
    <defs>
        <filter id="highlightblur" color-interpolation-filters="sRGB">
           <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
           <feComponentTransfer in="lumMap" result="highlightMask">
              <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
           </feComponentTransfer>
           <feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>
           <feGaussianBlur in="highlights" stdDeviation="3" result="highBlur"/>
           <feComposite operator="over" in="highBlur" in2="SourceGraphic" result="final"/>
        </filter>
     </defs>

    <image filter="url(#highlightblur)" x="0" y="-40" width="780" height="600" preserveAspectRatio="true" xlink:href="http://i554.photobucket.com/albums/jj424/allbowerpower/Christmas%202009/ChristmasTablesetting016b.jpg"
    />
</svg>