Create Gmail Like Text Avatars with jQuery and SVG - initial.js

initial.js is a lightweight jQuery plugin used to generate a SVG based user profile picture from the data-name attribute of your IMG tag, just like the text avatars as you see on Gmail.

How to use it:

1. Include the jQuery javascript and initial.js in the html document.

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

2. Create an image in your document and use data-name attribute to specify the name of the user which the profile picture should be generated.

<img data-name="jQuery" class="demo" />

3. Initialize the plugin with default options.

<script type="text/javascript">
$(document).ready(function(){
$('.demo').initial({width:80,height:80});
})
</script>

4. Style the user profile picture in the CSS as you wish.

.demo{
...
}

5. Available options to customize the profile picture (text avatar).

<script type="text/javascript">
$(document).ready(function(){
$('.demo').initial({
name: 'Name', // Name of the user
charCount: 1, // Number of characherts to be shown in the picture.
textColor: '#ffffff', // Color of the text
seed: 0, // randomize background color
height: 100,
width: 100,
fontSize: 60,
fontWeight: 400,
fontFamily: 'HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica, Arial,Lucida Grande, sans-serif',
radius: 0
});
})
</script>

Change logs:

2016-09-20

• allows using unicode in initial.js

2015-08-25

• adds seed setting to randomize background color

2015-08-13

• added option for rounded corners

2014-11-26

• Corrected color selection by replacing DIV with MOD.

2014-06-04

• fix bug for IE

---

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