Welcome to the demo site of the modern, flexible and powerful jQuery script for creating hi-res avatars on your site by your visitors.
Please get familiar with full features' list and try a demo by yourself.
Such vector based Avatars maker was never created before.
One break point - 480px. Dimensions of all SVG elements are changed dynamically.
SVG Avatars is a vector based app, which mean it is presented perfect on high-resolution displays.
Works good on touch enabled devices with combination of responsive functionality.
Upload one folder, define CSS and JS files and add only one row of code into your HTML file.
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.
Ready to use 2 color schemes. Also it's very easy to change them (separate block in CSS file).
Script lets your visitors spend more time on your site. Good for SEO.
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).
2 sizes of ready PNGs and also one SVG file! These options can be customized. Special PNG size for iOS Retina devices.
SVG Avatars currently support Firefox, Safari, Chrome, Opera 12+, Internet Explorer 9+, iOS Safari, Android "Internet" Browser, Firefox for Android.
Please show your interest and new graphic parts and features will be added periodically. Support is also available.
Both males and females avatars can be created.
The generator comes with more than 300 graphic parts to play with (faces, eyes, hair, clothes, etc).
The most outstanding feature is the ability to apply any color to the most graphic parts.
The Avatars maker automatically calculates colors for shadows and highlights.
The script lets user to play with random combination of parts and colors.
Also user can reset his/her avatar to initial state to start to create again. (Modal warning will appear).
The most parts can be adjusted by setting their positions and scale. The whole figure can be controlled too.
Backgrounds can be disabled and transparent PNG will be created. So your visitor can use his/her avatar in any design projects.
Now ready avatars can be shared in Facebook and Pinterest as image, in Twitter and Google Plus as links.
Now your visitors can upload created avatars to gravatar.com without leaving your site!
Special Note ONE:
In this Demo the possibility to download SVG file format is disabled. Also there is a watermark on ready PNG images. A production 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 at Pinterest as image, at 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. On this demo this feature is disabled.
Special Note SIX:
Despite the difference in version numbers (for jQuery - 1.3.2, for Wordpress - 1.1.2) the appearance and functionality of both plugins are the same.
The intergration of SVG Avatars maker script into your project is very simple.
<body> ... <div id="svgAvatars"></div> <-- Yes! That's all! --> ... </body>
The intergration of SVG Avatars Generator in WordPress is very simple too.
[svgAvatars] <-- Very simple, huh? -->
For WordPress Plugin:
The download package of jQuery version includes:
The download package of WordPress version includes:
id="svgAvatars"exactly if you use jQuery version or add only one shortcode
<p class="svga-credit">',crd_msg,'<a href="http://svgavatars.com" target="_blank">svgAvatars.com</a></p>and delete it.
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...