SodhanaLibrary

jqImgBlurEffects plugin is supports svg shapes - circle, ellipse, polygon, path , rectangle. Lets start with an example. Find below markup for image

<img src="https://lh3.googleusercontent.com/-zJ3ijSNpElc/VyGE80Uo5PI/AAAAAAAADk4/w2cGycz0gIoGz5HDci02WU70uXqJnhYAgCCo/s912/inNature.JPG" class="myImg" width="750px">

Import jquery and jqImgBlurEffects

<script src="jquery-1.11.3.min.js"></script>
<script src="jqImgBlurEffects/jqImgBlurEffects.js"></script>

Circle

SVG circle needs center coordinates and radius. So just give those details in below format.

var myOptns = {
    stdDeviation : 7,
    scircles : [ {
        cx : 177,
        cy : 166,
        r : 150
    },  {
        cx : 477,
        cy : 166,
        r : 150
    }  ]
};

$(".myImg").jqImgBlur(myOptns);

Ellipse

SVG ellipse needs center coordinates and x-radius, y-radius. So just give those details in below format.

var myOptns = {
    stdDeviation : 7,
    sellipses : [ {
        cx : 390,
        cy : 225,
        rx : 300,
        ry : 150
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Rectangle

SVG rectangle needs starting coordinates and width, height. So just give those details in below format.

var myOptns = {
    stdDeviation : 4,
    srectangles : [ {
        x : 100,
        y : 125,
        width : 580,
        height : 220
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Path

SVG path needs d attribute values which consists of points and directions . So just give those details in below format.

var myOptns = {
    stdDeviation : 4,
    spaths : [ {
        d:"M100 125 L700 125 L700 350 L100 350 Z"
    } ]
};

$(".myImg").jqImgBlur(myOptns);

Polygon

SVG polygon needs points attribute values which consists of points. So just give those details in below format.

var myOptns = {
    stdDeviation : 4,
    spolygons : [ {
        points:"170 140 585 140 585 350 170 350"
    } ]
};

$(".myImg").jqImgBlur(myOptns);