This little plugin generates the popular clipped circle images (as example for avatar images) via javascript out of rectangle images. It works with replacement of the image with a SVG element and a clipping mask. The src attribute inside the svg provides backwards compatibility for some older browsers. (http://lynn.ru/examples/svg/en.html) - if you need more, it should be ease to add a modernizr check and render a standard img tag for unsupported browsers.
A way to use this is to add a class to all images on your site, that you want to replace and call the script like a normal jQuery method:
$(document).ready(function() {
$('.img-rounded').roundImage();
});
Please note:
- You need to include the width and height attributes for the image and they need to be consitent to the actual image size
- Checkout the included example.html
- Further chaining with other jQuery methods targets the svg element, not the original image