SVG Avatars Generator (Creator) - Now a WordPress Plugin Too!

Welcome to the demo site of the modern, flexible and powerful jQuery script for creating hi-res avatars on your site by your visitors.

This script (coded with JavaScript and PHP) is based on SVG (Scalable Vector Graphic) and HTML5 features which are supported in all modern major browsers. There are no any usual images, like JPGs or PNGs (except avatars are ready for downloading), but only vectors which give us clean and perfect look on any devices including Retina.

Please get familiar with full features' list and try a demo by yourself.

Please click here to show a top bar for easy responsive test. It allows you to change a viewport with one click on an appropriate icon.

Generator's global features

Brand New

Such vector based Avatars maker was never created before.

Responsive Interface

One break point - 480px. Dimensions of all SVG elements are changed dynamically.

Retina Perfect

SVG Avatars is a vector based app, which mean it is presented perfect on high-resolution displays.

Touch Support

Works good on touch enabled devices with combination of responsive functionality.

Easy Integration

Upload one folder, define CSS and JS files and add only one row of code into your HTML file.

Easy to Translate

From v1.3 there are 7 ready to use translations: English, German, Spanish, French, Italian, Portuguese and Russian. If you want you can translate about 200 words to your language with easy too.

Dark & Light Color Schemes

Ready to use 2 color schemes. Also it's very easy to change them (separate block in CSS file).

User Behaviour Factors

Script lets your visitors spend more time on your site. Good for SEO.

Save on Server

Ready avatars can be stored on your server in a separate folder. This option can be disabled. You can save links of users' avatars in your database (needs additional PHP code).

3 Download Options

2 sizes of ready PNGs and also one SVG file! These options can be customized. Special PNG size for iOS Retina devices.

All Modern Browsers

SVG Avatars currently support Firefox, Safari, Chrome, Opera 12+, Internet Explorer 9+, iOS Safari, Android "Internet" Browser, Firefox for Android.

Free Updates & Support

Please show your interest and new graphic parts and features will be added periodically. Support is also available.

Graphic engine features

Males and Females

Both males and females avatars can be created.

Graphic Data

The generator comes with more than 300 graphic parts to play with (faces, eyes, hair, clothes, etc).

Any Color!

The most outstanding feature is the ability to apply any color to the most graphic parts.

Shadows and Highlights

The Avatars maker automatically calculates colors for shadows and highlights.

Random Function

The script lets user to play with random combination of parts and colors.

Reset Function

Also user can reset his/her avatar to initial state to start to create again. (Modal warning will appear).

Position Controls

The most parts can be adjusted by setting their positions and scale. The whole figure can be controlled too.

Transparent Background

Backgrounds can be disabled and transparent PNG will be created. So your visitor can use his/her avatar in any design projects.

Share function (from v1.2)

Now ready avatars can be shared in Facebook and Pinterest as image, in Twitter and Google Plus as links.

Gravatar Ready (from v1.3)

Now your visitors can upload created avatars to gravatar.com without leaving your site!

Some examples

Try it yourself! (UPDATED v1.3)

Special Note ONE:

In this Demo the possibility to download SVG file format is disabled. Also there is a watermark on ready PNG images. Ready version is spared from these restrictions. Thanks for the understanding.

Special Note TWO:

Save button gives you, as a site owner, extended functionality – ready avatar is saved in a separate folder on your server. You can add additional PHP code for ex. for storing links of ready avatars in your database for registered users (IMPORTANT: you need to write this code by yourself, it’s NOT included in this pack).

Special Note THREE:

If you work on any iOS device or Windows 8 tablet or phone, the download option will be only ONE due to some restrictions of this devices.

Special Note FOUR:

From v1.2 ready avatars can be shared in Facebook and Pinterest as image, in Twitter and Google Plus as links. In share function You can easy replace watermark "Created on svgAvatars.com" with yours, for ex. "Created on yoursitename.com". Or disable this watermark at all.

Special Note FIVE:

From v1.3 ready avatars can be uploaded to secure.gravatars.com and used by your visitors as default gravatars. You must have PHP cURL extention is enabled on your server for this functionality to work.

Special Note SIX:

Despite the difference in version numbers (for jQuery - 1.3, for Wordpress - 1.0) the appearance and functionality of both plugins are the same.


I wanted to take a minute to let everyone know that this is a truly exceptional work. The code is clean, portable, and well commented. Dee’s attention to detail is without equal. The avatar’s heads can be tilted, the mouths adjusted, and probably a whole lot more that I just haven’t found yet. If it were just the quality product alone, i may not have commented. But, I needed to ask a question and learned quickly that Dee provides top notch support. This App? It’s simply Outstanding! CreativelyMe, on CodeCanyon

Rarely do you see such a detailed, well thought out, artistic piece of coding offered for such a small price. A tremendous amount of work has gone into this app – and to find both an artist and coder in 1 person is pretty unusual. Dee is a huge asset to our community and I hope to see many more projects by this author! mspanish, on CodeCanyon


Great work Dee!! Damn me if you haven't created the best avatar creator i've seen ...
... this product really is under priced amazing quality and only getting better DuCarlion, on CodeCanyon




Thank you for this great script! hiegl, on CodeCanyon



This is one of the best script I ever buy... Thanks for making this Dee, hope you regularly update this script and add more elements... adieska, on CodeCanyon




Great script. Five stars! tokiso, on CodeCanyon


How to intergrate into your project

The intergration of SVG Avatars maker script into your project is very simple.

  1. Change desired variables values in the script.
  2. Upload one folder to your server.
  3. Define neccessary CSS and JS files in your HTML file.
  4. And place one row of code somewhere inside body tag.
<body>
  ...
  <div id="svgAvatars"></div>
  <-- Yes! That's all! -->
  ...
</body>

The intergration of SVG Avatars Generator in WordPress is very simple too.

  1. Install the plugin usually as any other one.
  2. Make any desired changes on the plugin's settings page.
  3. And add one sortcode in any page or post.
[svgAvatars]
<-- Very simple, huh? -->

Frequently asked questions

SVG Avatars Generator is available in two separated packs: a jQuery integrated script which you can insert into any HTML page and a WordPress Plugin.
The pack for jQuery also includes some PHP code for your server side.

For jQuery:

  • jQuery 1.8.2 and up
  • PHP 5.3 and up
  • Facebook App ID for share on this platform (see the Documentation after purchasing)
  • PHP cURL extension on your server for work with Gravatar API

For WordPress Plugin:

  • WordPress 3.7 or WordPress 3.8
  • PHP 5.3 and up
  • Facebook App ID for share on this platform (see the Documentation after purchasing)
  • PHP cURL extension on your server for work with Gravatar API

The download package of jQuery version includes:

  • Folder for uploading to your server with compressed files.
  • Folder with developer uncompressed files.
  • Documentation.
  • License info.

The download package of WordPress version includes:

  • Folder for uploading to your server with plugin's files.
  • Documentation.
  • License info.
Yes, of course. After purchasing you can contact me via email contact form on my profile page on CodeCanyon. Please feel free to ask any questions. I live UTC+2 so please keep in mind that sometimes my reply will not be fast.
No, you need to buy one regular license for each website. More info about the licenses is here...
Yes, but you need the CodeCanyon Extended License. More info about the licenses is here...
There is an official bug of Android Chrome (not desktop version) with render engine. You can find more info here.... If it's be fixed by their team my script will work fine too. Please use default Android "Internet" browser or Firefox for Android (best choice) instead.
No. Your must define only one div with unique id="svgAvatars" exactly if you use jQuery version or add only one shortcode [svgAvatars] in WordPress.
Yes, of course. To do this in jQuery version open SVG Avatars maker JS file, find this part of code: <p class="svga-credit">',crd_msg,'<a href="http://svgavatars.com" target="_blank">svgAvatars.com</a></p> and delete it.
To do this in WordPress simply disable appropriate option on a plugin's setting page.
But I will really appreciate if you leave it. Thank you!
To improve performance and due to some restrictions, this functionality has been disabled and will not be implemented again. The one way to choose a gender again is a reloading of a page.
Basicaly no, it's not a simple process. This item is based on vector graphic and no regular images are used. All graphic data is stored in a JSON format and it’s not easy to add your own. But this Generator will be periodically updated with new elements.

Feel Free to Drop Me a Line

Presale questions and Support

I'll be glad to hear something from you and answer to any presale questions. Also for any existing customers' support please use a contact form on my profile page on CodeCanyon here...