by Gabriel Franck

SvgAvatar is a javascript module assembling different svg object to create an avatar. This will allow us to not store svg files or images of avatars but just the index of each part.

SvgAvatar will be designed to support custom librairies of avatars, a tutorial will be coming soon.

If you want to use it with AngularJs please consider svg_avatar_angularjs

Link to npm Link to gitHub

Here is a link to the live demo

Install it via npm :

npm install svg_avatar

Or via bower :

bower install svg_avatar

If you are in a NodeJS environement, you just need to include svgAvatar to your javascript project :

svgAvatar = require('svg_avatar')

If you're not, include the bundle.js before the files where you're going to use SvgAvatar :

<script src="bower_components/svg_avatar/bundle.js"></script>
or
<script src="node_modules/svg_avatar/bundle.js"></script>

and then you can :

svgAvatar = require('svg_avatar')

{
	"form":{
		"pattern":0,
		"colors":0}
	},
	"mouth":{
		"pattern":0,
		"colors":0
	},
	"eye":{
		"pattern":0,
		"colors":0}
	}
}
// or in string
"{'form':{'pattern':0,'colors':0},'mouth':{'pattern':0,'colors':0},'eye':{'pattern':0,'colors':0}}"

<rect x='15' y='15' fill='#3941c3' stroke='#3941c3' stroke-width='0' stroke-miterlimit='10' width='220' height='220'/>
<polygon fill='#3941c3' stroke='#000000' stroke-width='0' stroke-miterlimit='10' points='111.5,113.08 48.84,92.974 97.583,48.761 '/>
<polygon fill='#3941c3' stroke='#000000' stroke-width='0' stroke-miterlimit='10' points='141.144,114.607 203.804,94.5 155.061,50.288 '/>
<rect x='59.532' y='175.689' fill='#3941c3' stroke='#000000' stroke-width='0' stroke-miterlimit='10' width='130.936' height='20.073'/>
<rect x='59.532' y='159.062' fill='#3941c3' stroke='#000000' stroke-width='0' stroke-miterlimit='10' width='17.994' height='36.7'/>
<rect x='172.475' y='159.062' fill='#3941c3' stroke='#000000' stroke-width='0' stroke-miterlimit='10' width='17.993' height='36.7'/>

Return the content of the current avatar_lib.json (wich contains all svg parts of the avatar) in a JSON object

svgAvatar.lib_json() //-> JSON object (content of avatar_lib.json by default)

Return the value of an avatar converted to string, could be useful to store avatars into a database

svgAvatar.stringify_avatar(avatar_json) //-> String (avatar)

Return an avatar svg value in string

svgAvatar.render_svg(avatar) //-> SVG String (avatar_svg)

Generate a random avatar object or Svg string

svgAvatar.random_avatar() //-> Object (avatar)
svgAvatar.render_random_svg() //-> SVG String (avatar_svg)

Return an avatar object or Svg string with a color or pattern changed, you can choose the direction "next" to increment or "previous" to decrement

svgAvatar.modify_avatar(avatar, part, change, direction) //-> Object (avatar)
svgAvatar.modify_avatar_svg(avatar, part, change, direction) //-> Object (avatar)

Return an avatar object or Svg string with a color or pattern changed, you can choose the direction "next" to increment or "previous" to decrement (it loops when max/min value is reached)

svgAvatar.next_color_avatar(avatar, part) //-> Object (avatar)
svgAvatar.previous_color_avatar(avatar, part) //-> Object (avatar)

svgAvatar.next_color_svg(avatar, part) //-> SVG String (avatar_svg)
svgAvatar.previous_color_svg(avatar, part) //-> SVG String (avatar_svg)

svgAvatar.next_pattern_avatar(avatar, part) //-> Object (avatar)
svgAvatar.previous_pattern_avatar(avatar, part) //-> Object (avatar)

svgAvatar.next_pattern_svg(avatar, part) //-> SVG String (avatar_svg)
svgAvatar.previous_pattern_svg(avatar, part) //-> SVG String (avatar_svg)

To run test you simply need to run this following command :

npm test

To update the bundle.js you need to install Browserify :

npm install -g browserify

And then run :

browserify -r ./index.js:svg_avatar > bundle.js