Creating Circular Images with jQuery and SVG - Round Image

File Size: 2.64 KB
Views Total: 7051
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Creating Circular Images with jQuery and SVG - Round Image

Round Image is a super tiny jQuery plugin to generate Google+ profile image-like circular images with just one JS call. The plugin makes use of SVG clippath to cut off the edges of a rectangle image to make it rounded. No any CSS needed. 

How to use it:

1. Insert a local or external image into your html page.

<img class="img-round" src="1.jpg" alt="">

2. Add the jQuery library and the jQuery round image into your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.roundimage.js"></script>

3. Call the plugin on the image and we're done.

$(document).ready(function() {
  $('.img-round').roundImage();
});

This awesome jQuery plugin is developed by monobasic. For more Advanced Usages, please check the demo page or visit the official website.