premasagar/blur.html

## blur.html
<!doctype html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <title>SVG Blur</title>
    </head>

    <body>
        <h1>SVG filters: blurring</h1>

        <h2>Original image</h2>
        <div>
            <a href="http://www.flickr.com/photos/dharmasphere/2411178217">
                <img src="http://farm3.static.flickr.com/2178/2411178217_bb667466e6.jpg" width=500 height=309>
            </a>
        </div>

        <h2>Blurred image</h2>
        <p>If you don't see an image, then your browser doesn't support SVG (or JavaScript). If you see the image but it is not blurred, then your browser doesn't support SVG filters.</p>
        <div id="blurredImageContainer">
            <!-- blurred image to be appended in here -->
        </div>

        <!-- Lightweight SVG manipulation -->
        <script src="svgtoolkit.js"></script>

        <!-- Create the blurred image -->
        <script>
            if (svgToolkit.browserSupported()){
                svgToolkit.appendBlurredImage({
                    container: "blurredImageContainer",
                    src: "http://farm3.static.flickr.com/2178/2411178217_bb667466e6.jpg",
                    blur: 3,
                    width: 500,
                    height: 309
                });
            }
        </script>
    </body>
</html>

## svgtoolkit.js
var svgToolkit = {
    browserSupported: function(){
        // from http://diveintohtml5.org/everything.html#svg
        return supportsSVG = !!(document.createElementNS && document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect);
    },

    attr: function(elem, attr){
        var prop;

        for (prop in attr){
            if (attr.hasOwnProperty(prop)){
                elem.setAttribute(prop, attr[prop]);
            }
        }
        return elem;
    },

    empty: function(elem){
        if (elem){
            while (elem.firstChild) {
                elem.removeChild(elem.firstChild);
            }
        }
        return this;
    },

    // NOTE: Creating the <svg> element this way allows it to render on iPad et al, whereas including the <svg> element directly in the HTML document does not. Inspired by http://keith-wood.name/svg.html
    createRoot: function(container){
        var svg = this.createElement("svg");
        svg.setAttribute("version", "1.1");

        container = typeof container === "string" ? document.getElementById(container) : container;
        container.appendChild(svg);
        return svg;
    },

    setDimensions: function(svg, width, height){
        svg.setAttribute("width", width);
        svg.setAttribute("height", height);
        return svg;
    },

    // Create an SVG namespaced element
    createElement: function(nodeName){
        return document.createElementNS("http://www.w3.org/2000/svg", nodeName);
    },

    // Create an SVG image
    createImage: function(src, attr){
        var image = this.createElement("image"),
            prop;

        image.setAttributeNS("http://www.w3.org/1999/xlink", "href", src);
        this.attr(image, attr);
        return image;
    },

    // Create an SVG filter element and append a filter primitive, e.g. feGaussianBlur
    createFilter: function(filterPrimitiveName, filterId, attr){
        var filter = this.createElement("filter"),
            filterPrimitive = this.createElement(filterPrimitiveName); // e.g. "feGaussianBlur"

        if (filterId){
            filter.id = filterId; // e.g. "svgFilterBlur"
        }

        if (attr){
            this.attr(filterPrimitive, attr); // e.g. {stdDeviation: 3}
        }

        filter.appendChild(filterPrimitive);

        return filter;
    },

    // Apply a filter id to a element
    applyFilter: function(elem, filterId){
        elem.style.filter = "url(#" + filterId + ")";
        return elem;
    },

    changeFilterBlur: function(filterPrimitive, blurAmount){
        this.attr(filterPrimitive, {stdDeviation: blurAmount});
        return filterPrimitive;
    },

    appendBlurredImage: function(options){
        var filterId = "svgFilterBlur" + parseInt(Math.random * 1000);
            svg = this.createRoot(options.container),
            filter = this.createFilter("feGaussianBlur", filterId, {stdDeviation: options.blur}),
            image = this.createImage(options.src, {
                width: options.width,
                height: options.height
            });

        this.setDimensions(svg, options.width, options.height);
        svg.appendChild(filter);
        this.applyFilter(image, filterId);
        svg.appendChild(image);

        return {
            svg: svg,
            image: image,
            filter: filter,
            filterPrimitive: filter.childNodes[0]
        };
    }
};
	<!doctype html>
	<html lang=en>
	<head>
	<meta charset=utf-8>
	<title>SVG Blur</title>
	</head>

	<body>
	<h1>SVG filters: blurring</h1>

	<h2>Original image</h2>
	<div>
	<a href="http://www.flickr.com/photos/dharmasphere/2411178217">
	<img src="http://farm3.static.flickr.com/2178/2411178217_bb667466e6.jpg" width=500 height=309>
	</a>
	</div>

	<h2>Blurred image</h2>
	<p>If you don't see an image, then your browser doesn't support SVG (or JavaScript). If you see the image but it is not blurred, then your browser doesn't support SVG filters.</p>
	<div id="blurredImageContainer">
	<!-- blurred image to be appended in here -->
	</div>

	<!-- Lightweight SVG manipulation -->
	<script src="svgtoolkit.js"></script>

	<!-- Create the blurred image -->
	<script>
	if (svgToolkit.browserSupported()){
	svgToolkit.appendBlurredImage({
	container: "blurredImageContainer",
	src: "http://farm3.static.flickr.com/2178/2411178217_bb667466e6.jpg",
	blur: 3,
	width: 500,
	height: 309
	});
	}
	</script>
	</body>
	</html>
	var svgToolkit = {
	browserSupported: function(){
	// from http://diveintohtml5.org/everything.html#svg
	return supportsSVG = !!(document.createElementNS && document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect);
	},

	attr: function(elem, attr){
	var prop;

	for (prop in attr){
	if (attr.hasOwnProperty(prop)){
	elem.setAttribute(prop, attr[prop]);
	}
	}
	return elem;
	},

	empty: function(elem){
	if (elem){
	while (elem.firstChild) {
	elem.removeChild(elem.firstChild);
	}
	}
	return this;
	},

	// NOTE: Creating the <svg> element this way allows it to render on iPad et al, whereas including the <svg> element directly in the HTML document does not. Inspired by http://keith-wood.name/svg.html
	createRoot: function(container){
	var svg = this.createElement("svg");
	svg.setAttribute("version", "1.1");

	container = typeof container === "string" ? document.getElementById(container) : container;
	container.appendChild(svg);
	return svg;
	},

	setDimensions: function(svg, width, height){
	svg.setAttribute("width", width);
	svg.setAttribute("height", height);
	return svg;
	},

	// Create an SVG namespaced element
	createElement: function(nodeName){
	return document.createElementNS("http://www.w3.org/2000/svg", nodeName);
	},

	// Create an SVG image
	createImage: function(src, attr){
	var image = this.createElement("image"),
	prop;

	image.setAttributeNS("http://www.w3.org/1999/xlink", "href", src);
	this.attr(image, attr);
	return image;
	},

	// Create an SVG filter element and append a filter primitive, e.g. feGaussianBlur
	createFilter: function(filterPrimitiveName, filterId, attr){
	var filter = this.createElement("filter"),
	filterPrimitive = this.createElement(filterPrimitiveName); // e.g. "feGaussianBlur"

	if (filterId){
	filter.id = filterId; // e.g. "svgFilterBlur"
	}

	if (attr){
	this.attr(filterPrimitive, attr); // e.g. {stdDeviation: 3}
	}

	filter.appendChild(filterPrimitive);

	return filter;
	},

	// Apply a filter id to a element
	applyFilter: function(elem, filterId){
	elem.style.filter = "url(#" + filterId + ")";
	return elem;
	},

	changeFilterBlur: function(filterPrimitive, blurAmount){
	this.attr(filterPrimitive, {stdDeviation: blurAmount});
	return filterPrimitive;
	},

	appendBlurredImage: function(options){
	var filterId = "svgFilterBlur" + parseInt(Math.random * 1000);
	svg = this.createRoot(options.container),
	filter = this.createFilter("feGaussianBlur", filterId, {stdDeviation: options.blur}),
	image = this.createImage(options.src, {
	width: options.width,
	height: options.height
	});

	this.setDimensions(svg, options.width, options.height);
	svg.appendChild(filter);
	this.applyFilter(image, filterId);
	svg.appendChild(image);

	return {
	svg: svg,
	image: image,
	filter: filter,
	filterPrimitive: filter.childNodes[0]
	};
	}
	};