Dude - totally awesome! I love how you've done it all in SVG.
Here's a little bit of mediocre shading that might help out a bit.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="900px" height="600px" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>A dwarf!
</desc>
<script type="text/ecmascript">
<![CDATA[
var svgNS = "http://www.w3.org/2000/svg";
// colors!
var c_amber = "rgb(255,191,0)";
var c_amethyst = "rgb(153,102,204)";
var c_aquamarine = "rgb(127,255,212)";
var c_auburn = "rgb(111,53,26)";
var c_black = "rgb(0,0,0)";
var c_brass = "rgb(181,166,66)";
var c_bronze = "rgb(205,127,50)";
var c_brown = "rgb(150,75,0)";
var c_buff = "rgb(240,220,130)";
var c_burnt_sienna = "rgb(233,116,81)";
var c_burnt_umber = "rgb(138,51,36)";
var c_charcoal = "rgb(54,69,79)";
var c_chestnut = "rgb(205,92,92)";
var c_chocolate = "rgb(210,105,30)";
var c_cinnamon = "rgb(123,63,0)";
var c_cobalt = "rgb(0,71,171)";
var c_copper = "rgb(184,115,51)";
var c_dark_brown = "rgb(101,67,33)";
var c_dark_chestnut = "rgb(152,105,96)";
var c_dark_peach = "rgb(255,218,185)";
var c_dark_tan = "rgb(145,129,81)";
var c_dark_taupe = "rgb(72,60,50)";
var c_ecru = "rgb(194,178,128)";
var c_emerald = "rgb(80,200,120)";
var c_flax = "rgb(238,220,130)";
var c_gold = "rgb(212,175,55)";
var c_golden_yellow = "rgb(255,223,0)";
var c_goldenrod = "rgb(218,165,32)";
var c_gray = "rgb(128,128,128)";
var c_gray_taupe = "rgb(139,133,137)";
var c_heliotrope = "rgb(223,115,255)";
var c_jade = "rgb(0,168,107)";
var c_light_brown = "rgb(205,133,63)";
var c_mahogany = "rgb(192,64,0)";
var c_medium_taupe = "rgb(103,76,71)";
var c_ochre = "rgb(204,119,34)";
var c_pale_brown = "rgb(152,118,84)";
var c_pale_chestnut = "rgb(221,173,175)";
var c_pale_pink = "rgb(250,218,221)";
var c_pale_taupe = "rgb(188,152,126)";
var c_peach = "rgb(255,229,180)";
var c_pink = "rgb(255,192,203)";
var c_pumpkin = "rgb(255,117,24)";
var c_raw_umber = "rgb(115,74,18)";
var c_russet = "rgb(117,90,87)";
var c_rust = "rgb(183,65,14)";
var c_saffron = "rgb(244,196,48)";
var c_sandy_taupe = "rgb(150,113,23)";
var c_sepia = "rgb(112,66,20)";
var c_silver = "rgb(192,192,192)";
var c_slate_gray = "rgb(112,128,144)";
var c_tan = "rgb(210,180,140)";
var c_turquoise = "rgb(48,213,200)";
var c_white = "rgb(255,255,255)";
function changeSkinColor(evt) {
var skincolor = evt.target.getAttributeNS(null,"fill");
var face = document.getElementById("face");
face.setAttributeNS(null, "fill", skincolor);
}
function changeHairColor(evt) {
var haircolor = evt.target.getAttributeNS(null,"fill");
var face = document.getElementById("hair");
face.setAttributeNS(null, "fill", haircolor);
}
function changeEyeColor(evt) {
var eyecolor = evt.target.getAttributeNS(null,"fill");
var irises = document.getElementById("irises");
irises.setAttributeNS(null, "fill", eyecolor);
}
function addButton(parentTag, color, label, event) {
var parent = document.getElementById(parentTag);
var index = (parent.childNodes.length - 3) / 2;
var button = document.createElementNS(svgNS, "circle");
button.setAttributeNS(null,"cx",8 + 150*Math.floor(index/25));
button.setAttributeNS(null,"cy",32+20*(index%25));
button.setAttributeNS(null,"r","8");
button.setAttributeNS(null,"fill",color);
button.setAttributeNS(null,"onclick",event);
parent.appendChild(button);
var text = document.createElementNS(svgNS, "text");
text.setAttributeNS(null,"font-size",16);
text.setAttributeNS(null,"font-family","Herculanum");
text.setAttributeNS(null,"x",20 + 150*Math.floor(index/25));
text.setAttributeNS(null,"y",37+20*(index%25));
var textNode = document.createTextNode(label);
text.appendChild(textNode);
parent.appendChild(text);
}
function setupSkinMenu() {
addButton("skinmenu", c_brown, "Brown", "changeSkinColor(evt)");
addButton("skinmenu", c_burnt_umber, "Burnt Umber", "changeSkinColor(evt)");
addButton("skinmenu", c_cinnamon, "Cinnamon", "changeSkinColor(evt)");
addButton("skinmenu", c_copper, "Copper", "changeSkinColor(evt)");
addButton("skinmenu", c_dark_brown, "Dark Brown", "changeSkinColor(evt)");
addButton("skinmenu", c_dark_peach, "Dark Peach", "changeSkinColor(evt)");
addButton("skinmenu", c_dark_tan, "Dark Tan", "changeSkinColor(evt)");
addButton("skinmenu", c_ecru, "Ecru", "changeSkinColor(evt)");
addButton("skinmenu", c_pale_brown, "Pale Brown", "changeSkinColor(evt)");
addButton("skinmenu", c_pale_chestnut, "Pale Chestnut", "changeSkinColor(evt)");
addButton("skinmenu", c_pale_pink, "Pale Pink", "changeSkinColor(evt)");
addButton("skinmenu", c_pale_taupe, "Pale Taupe", "changeSkinColor(evt)");
addButton("skinmenu", c_peach, "Peach", "changeSkinColor(evt)");
addButton("skinmenu", c_pink, "Pink", "changeSkinColor(evt)");
addButton("skinmenu", c_raw_umber, "Raw Umber", "changeSkinColor(evt)");
addButton("skinmenu", c_sandy_taupe, "Sandy Taupe", "changeSkinColor(evt)");
addButton("skinmenu", c_sepia, "Sepia", "changeSkinColor(evt)");
addButton("skinmenu", c_tan, "Tan", "changeSkinColor(evt)");
}
function setupHairMenu() {
addButton("hairmenu", c_amber, "Amber", "changeHairColor(evt)");
addButton("hairmenu", c_auburn, "Auburn", "changeHairColor(evt)");
addButton("hairmenu", c_black, "Black", "changeHairColor(evt)");
addButton("hairmenu", c_brown, "Brown", "changeHairColor(evt)");
addButton("hairmenu", c_buff, "Buff", "changeHairColor(evt)");
addButton("hairmenu", c_burnt_sienna, "Burnt Sienna", "changeHairColor(evt)");
addButton("hairmenu", c_burnt_umber, "Burnt Umber", "changeHairColor(evt)");
addButton("hairmenu", c_charcoal, "Charcoal", "changeHairColor(evt)");
addButton("hairmenu", c_chestnut, "Chestnut", "changeHairColor(evt)");
addButton("hairmenu", c_chocolate, "Chocolate", "changeHairColor(evt)");
addButton("hairmenu", c_cinnamon, "Cinnamon", "changeHairColor(evt)");
addButton("hairmenu", c_copper, "Copper", "changeHairColor(evt)");
addButton("hairmenu", c_dark_brown, "Dark Brown", "changeHairColor(evt)");
addButton("hairmenu", c_dark_chestnut, "Dark Chestnut", "changeHairColor(evt)");
addButton("hairmenu", c_dark_tan, "Dark Tan", "changeHairColor(evt)");
addButton("hairmenu", c_dark_taupe, "Dark Taupe", "changeHairColor(evt)");
addButton("hairmenu", c_ecru, "Ecru", "changeHairColor(evt)");
addButton("hairmenu", c_flax, "Flax", "changeHairColor(evt)");
addButton("hairmenu", c_gold, "Gold", "changeHairColor(evt)");
addButton("hairmenu", c_golden_yellow, "Golden Yellow", "changeHairColor(evt)");
addButton("hairmenu", c_goldenrod, "Goldenrod", "changeHairColor(evt)");
addButton("hairmenu", c_gray, "Gray", "changeHairColor(evt)");
addButton("hairmenu", c_gray_taupe, "Gray Taupe", "changeHairColor(evt)");
addButton("hairmenu", c_light_brown, "Light Brown", "changeHairColor(evt)");
addButton("hairmenu", c_mahogany, "Mahogany", "changeHairColor(evt)");
addButton("hairmenu", c_medium_taupe, "Medium Taupe", "changeHairColor(evt)");
addButton("hairmenu", c_ochre, "Ochre", "changeHairColor(evt)");
addButton("hairmenu", c_pale_brown, "Pale Brown", "changeHairColor(evt)");
addButton("hairmenu", c_pale_chestnut, "Pale Chestnut", "changeHairColor(evt)");
addButton("hairmenu", c_pale_taupe, "Pale Taupe", "changeHairColor(evt)");
addButton("hairmenu", c_pumpkin, "Pumpkin", "changeHairColor(evt)");
addButton("hairmenu", c_raw_umber, "Raw Umber", "changeHairColor(evt)");
addButton("hairmenu", c_russet, "Russet", "changeHairColor(evt)");
addButton("hairmenu", c_saffron, "Saffron", "changeHairColor(evt)");
addButton("hairmenu", c_sandy_taupe, "Sandy Taupe", "changeHairColor(evt)");
addButton("hairmenu", c_sepia, "Sepia", "changeHairColor(evt)");
addButton("hairmenu", c_tan, "Tan", "changeHairColor(evt)");
addButton("hairmenu", c_white, "White", "changeHairColor(evt)");
}
function setupEyeMenu() {
addButton("eyemenu", c_amethyst, "Amethyst", "changeEyeColor(evt)");
addButton("eyemenu", c_aquamarine, "Aquamarine", "changeEyeColor(evt)");
addButton("eyemenu", c_brass, "Brass", "changeEyeColor(evt)");
addButton("eyemenu", c_bronze, "Bronze", "changeEyeColor(evt)");
addButton("eyemenu", c_cobalt, "Cobalt", "changeEyeColor(evt)");
addButton("eyemenu", c_copper, "Copper", "changeEyeColor(evt)");
addButton("eyemenu", c_emerald, "Emerald", "changeEyeColor(evt)");
addButton("eyemenu", c_gold, "Gold", "changeEyeColor(evt)");
addButton("eyemenu", c_heliotrope, "Heliotrope", "changeEyeColor(evt)");
addButton("eyemenu", c_jade, "Jade", "changeEyeColor(evt)");
addButton("eyemenu", c_ochre, "Ochre", "changeEyeColor(evt)");
addButton("eyemenu", c_raw_umber, "Raw Umber", "changeEyeColor(evt)");
addButton("eyemenu", c_rust, "Rust", "changeEyeColor(evt)");
addButton("eyemenu", c_silver, "Silver", "changeEyeColor(evt)");
addButton("eyemenu", c_slate_gray, "Slate Gray", "changeEyeColor(evt)");
addButton("eyemenu", c_turquoise, "Turquoise", "changeEyeColor(evt)");
}
]]>
</script>
<defs
id="defs2858">
<linearGradient
id="linearGradient8208">
<stop
id="stop8210"
style="stop-color:#000000;stop-opacity:0"
offset="0" />
<stop
id="stop8212"
style="stop-color:#000000;stop-opacity:0.13274336"
offset="1" />
</linearGradient>
<linearGradient
id="linearGradient5239">
<stop
id="stop5241"
style="stop-color:#000000;stop-opacity:0.31858408"
offset="0" />
<stop
id="stop5243"
style="stop-color:#000000;stop-opacity:0"
offset="1" />
</linearGradient>
<radialGradient
cx="125"
cy="150"
r="100"
id="radialGradient5191"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,1.25,0,-37.5)">
<stop
id="stop5145"
style="stop-color:#000000;stop-opacity:0"
offset="0" />
<stop
id="stop5147"
style="stop-color:#000000;stop-opacity:0.18584071"
offset="1" />
</radialGradient>
<filter
color-interpolation-filters="sRGB"
id="filter5224">
<feGaussianBlur
id="feGaussianBlur5226"
stdDeviation="0.80948238" />
</filter>
<linearGradient
x1="101.6"
y1="180.67"
x2="123.94"
y2="180.50999"
id="linearGradient5229"
gradientUnits="userSpaceOnUse"
spreadMethod="reflect">
<stop
id="stop5198"
style="stop-color:#000000;stop-opacity:0.08849557"
offset="0" />
<stop
id="stop5200"
style="stop-color:#000000;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
x1="25"
y1="217.5"
x2="48.305"
y2="209.87"
id="linearGradient5245"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="66.314003"
y1="291.23001"
x2="77.542"
y2="268.98001"
id="linearGradient5268"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="125"
y1="310"
x2="127.7"
y2="294.17999"
id="linearGradient5272"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="157.25"
y1="302.47"
x2="148.92999"
y2="284.17999"
id="linearGradient5286"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="231.39999"
y1="228.77"
x2="210.5"
y2="217.5"
id="linearGradient5290"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse" />
<linearGradient
x1="125"
y1="250"
x2="125"
y2="180"
id="linearGradient5298"
gradientUnits="userSpaceOnUse">
<stop
id="stop5294"
style="stop-color:#000000;stop-opacity:0.24778761"
offset="0" />
<stop
id="stop5296"
style="stop-color:#000000;stop-opacity:0"
offset="1" />
</linearGradient>
<linearGradient
x1="73.988647"
y1="192.07895"
x2="99.607864"
y2="227.58411"
id="linearGradient5310"
gradientUnits="userSpaceOnUse"
spreadMethod="reflect">
<stop
id="stop5306"
style="stop-color:#000000;stop-opacity:0.03539823"
offset="0" />
<stop
id="stop5308"
style="stop-color:#000000;stop-opacity:0"
offset="1" />
</linearGradient>
<radialGradient
cx="85"
cy="135"
r="7"
id="radialGradient5318"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse" />
<radialGradient
cx="165"
cy="135"
r="7"
id="radialGradient5328"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse" />
<radialGradient
cx="85"
cy="135"
r="20"
fx="85"
fy="135"
id="radialGradient8216"
xlink:href="#linearGradient8208"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.75,0,33.75)" />
<radialGradient
cx="165"
cy="135"
r="20"
fx="165"
fy="135"
id="radialGradient8670"
xlink:href="#linearGradient8208"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1,0,0,0.75,0,33.75)" />
<linearGradient
x1="56.737289"
y1="215"
x2="83.686447"
y2="228.34746"
id="linearGradient8686"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse"
spreadMethod="pad" />
<linearGradient
x1="195.93221"
y1="205.46609"
x2="160.59323"
y2="227.07628"
id="linearGradient8690"
xlink:href="#linearGradient5239"
gradientUnits="userSpaceOnUse"
spreadMethod="pad" />
</defs>
<!-- face -->
<g id="face">
<circle
cx="125px" cy="125px" r="100px"
stroke-width="0px"
/>
<rect
x="25px" y="125px" width="200px" height="50px"
/>
<circle
cx="125px" cy="175px" r="100px"
stroke-width="0px"
/>
</g>
<path
d="M 125,25 C 69.772,25 25,69.772 25,125 v 50 c 0,55.23 44.772,100 100,100 55.23,0 100,-44.77 100,-100 V 125 C 225,69.772 180.23,25 125,25 z"
id="noggin_shade"
style="fill:url(#radialGradient5191);stroke-width:0px" />
<!-- beard -->
<g id="hair">
<path id="beard"
d="M 25 125 l 0 100 l 25 60 l 55 25 l 40 0 l 55 -25 l 25 -60 l 0 -100 l -10 75 l -30 40 l -45 20 l -30 0 l -45 -20 l -30 -40 l -10 -75 z"
fill-opacity="1"
/>
<path id="moustache"
d="M 100 180 l 10 10 l 30 0 l 10 -10 l 20 10 l 15 55 l 0 5 l -15 0 l -15 -40 l -20 5 l -20 0 l -20 -5 l -15 40 l -15 0 l 0 -5 l 15 -55 l 10 -5 z"
fill-opacity="1"
/>
</g>
<!-- eyes -->
<ellipse
cx="85px" cy="135px" rx="20px" ry="15px"
fill="white"
/>
<ellipse
cx="165px" cy="135px" rx="20px" ry="15px"
fill="white"
/>
<g id="irises">
<circle
cx="85px" cy="135px" r="7px"
/>
<circle
cx="165px" cy="135px" r="7px"
/>
</g>
<!-- skin menu -->
<g id="skinmenu" transform="translate(250,0)" onload="setupSkinMenu()">
<text font-size="16" font-family="Herculanum">
<tspan x="0" y="16">Skin Color</tspan>
</text>
</g>
<!-- hair menu -->
<g id="hairmenu" transform="translate(400,0)" onload="setupHairMenu()">
<text font-size="16" font-family="Herculanum">
<tspan x="0" y="16">Hair Color</tspan>
</text>
</g>
<!-- eye menu -->
<g id="eyemenu" transform="translate(700,0)" onload="setupEyeMenu()">
<text font-size="16" font-family="Herculanum">
<tspan x="0" y="16">Eye Color</tspan>
</text>
</g>
<g
id="hair_shade"
style="fill-opacity:1">
<path
d="m 100,180 10,10 h 30 l 10,-10 20,10 15,55 v 5 h -15 l -15,-40 -20,5 H 115 L 95,210 80,250 H 65 v -5 l 15,-55 10,-5 z"
id="moustache_sh1"
style="fill:url(#linearGradient5298);fill-opacity:1" />
<path
d="m 100,180 10,10 h 30 l 10,-10 20,10 15,55 v 5 h -15 l -15,-40 -20,5 H 115 L 95,210 80,250 H 65 v -5 l 15,-55 10,-5 z"
id="moustache_sh2"
style="fill:url(#linearGradient8686);fill-opacity:1" />
<path
d="m 100,180 10,10 h 30 l 10,-10 20,10 15,55 v 5 h -15 l -15,-40 -20,5 H 115 L 95,210 80,250 H 65 v -5 l 15,-55 10,-5 z"
id="moustache_sh3"
style="fill:url(#linearGradient8690);fill-opacity:1" />
<path
d="m 25,125 v 100 l 25,60 55,25 h 40 l 55,-25 25,-60 V 125 l -10,75 -30,40 -45,20 H 110 L 65,240 35,200 25,125 z"
id="beard_shade_1"
style="fill:url(#linearGradient5245)" />
<path
d="m 25,125 v 100 l 25,60 55,25 h 40 l 55,-25 25,-60 V 125 l -10,75 -30,40 -45,20 H 110 L 65,240 35,200 25,125 z"
id="beard_shade_2"
style="fill:url(#linearGradient5268)" />
<path
d="m 25,125 v 100 l 25,60 55,25 h 40 l 55,-25 25,-60 V 125 l -10,75 -30,40 -45,20 H 110 L 65,240 35,200 25,125 z"
id="beard_shade_3"
style="fill:url(#linearGradient5272)" />
<path
d="m 25,125 v 100 l 25,60 55,25 h 40 l 55,-25 25,-60 V 125 l -10,75 -30,40 -45,20 H 110 L 65,240 35,200 25,125 z"
id="beard_shade_4"
style="fill:url(#linearGradient5286)" />
<path
d="m 25,125 v 100 l 25,60 55,25 h 40 l 55,-25 25,-60 V 125 l -10,75 -30,40 -45,20 H 110 L 65,240 35,200 25,125 z"
id="beard_shade_5"
style="fill:url(#linearGradient5290)" />
</g>
<ellipse
cx="85"
cy="135"
rx="20"
ry="15"
id="eye_white_l"
style="fill:url(#radialGradient8216);fill-opacity:1" />
<ellipse
cx="165"
cy="135"
rx="20"
ry="15"
id="eye_white_r"
style="fill:url(#radialGradient8670);fill-opacity:1;stroke:none" />
<g
id="irises_shade">
<circle
cx="85"
cy="135"
r="7"
id="iris_shade_l"
style="opacity:0.98000004;fill:url(#radialGradient5318)" />
<circle
cx="165"
cy="135"
r="7"
id="iris_shade_r"
style="fill:url(#radialGradient5328)" />
</g>
<path
d="m 114.88,153.5 21.133,-0.6356 c 0.49323,4.6081 0.31779,14.92 2.8602,18.432 2.5424,3.5123 9.1938,1.6634 11.6,10.328 2.4058,8.6651 -11.583,12.871 -18.273,12.871 h -16.525 c -6.6903,0 -15.335,-4.5217 -15.572,-11.758 -0.23695,-7.2367 3.4587,-8.0512 9.2161,-12.235 5.7575,-4.184 5.5449,-12.235 5.5614,-17.002 z"
id="schnoz"
style="fill:url(#linearGradient5229);fill-rule:nonzero;filter:url(#filter5224)" />
</svg>