using svg.js

using-svg.js

    var svg = SVG.createElement('svg', { //our SVG element
      xmlns: SVG.svgns,
      version: '1.1',
      width: width,
      height: height,
      id: 'blurred' + this.internalID,
      'class': this.options.imageClass,
      viewBox: '0 0 ' + width + ' '+ height,
      preserveAspectRatio: 'none'
    });

    var filterId = 'blur' + this.internalID; //id of the filter that is called by image element
    var filter = SVG.createElement('filter', { //filter
      id: filterId
    });

    var gaussianBlur = SVG.createElement('feGaussianBlur', { // gaussian blur element
      'in': 'SourceGraphic', //"in" is keyword. Opera generates an error if we don't put quotes
      stdDeviation: this.options.blurAmount // intensity of blur
    });

    var image = SVG.createElement('image', { //The image that uses the filter of blur
      x: 0,
      y: 0,
      width: width,
      height: height,
      'externalResourcesRequired' : 'true',
      href: url,
      style: 'filter:url(#' + filterId + ')', //filter link
      preserveAspectRatio: 'none'
    });

    image.addEventListener('load', function() {
      that.$element.trigger('ui.blur.loaded');
    }, true);

    image.addEventListener('SVGLoad', function() {
      that.$element.trigger('ui.blur.loaded');
    }, true);

    filter.appendChild(gaussianBlur); //adding the element of blur into the element of filter
    svg.appendChild(filter); //adding the filter into the SVG
    svg.appendChild(image); //adding an element of an image into the SVG