MORE EXAMPLES
 AND VML DEMO
VML

XML namespace
Enlarge method
Global style setting
Style target

DRAWING BODY

Background frame
Background object
Hair
Ears
Face
Eyes
Pupil
Brow
Nose
Mouth

 SVG

XML namespace
Enlarge method
Global style setting
Style target

DRAWING BODY

Background frame
Background object
Hair
Ears
Face
Eyes
Pupil
Brow
Nose
Mouth


HTML+VML Source. Total file size: ~ 1.7 Kb
<html xmlns:v>

<head>
<style>
v\:*{behavior:url(#default#VML); position:absolute}
v\:shape{width:10000; height:10000; left:3095; top:1985}
v\:oval{top:31285; height:4772}
v\:group{width:66; height:66}
</style>
</head>

<body>

<v:shapetype id=ea path=m11,94c68,64,5,26,12,12,23,,64,,76,10v15,15,16,47,7,66c81,89,57,104,39,118,25,134,75,166,,146ns>
<v:fill colors=0&#fff2a6;1&#ff3838 method=none type=gradient focus=.089 angle=90 rotate=t /></v:shapetype>

<v:shapetype id=b path=m-73,-27v7,6,48,-1,60,28nf>
<v:stroke color=#93661e weight=4.4 endcap=round /></v:shapetype>

<v:group style=top:-15>

<v:rect style=left:360;top:870;width:3450;height:3645  fillcolor=#599443 strokeweight=6.5 />

<v:rect style=left:615;top:2100;width:2925;height:900  fillcolor=#ec264d />

<v:shape path=m-101,-75r,-65c-132,-167,-68,-166,-96,-148nf>
<v:stroke color=#805128 weight=3.7 endcap=square /></v:shape>

<v:shape type=#ea />
<v:shape type=#ea style=left:-8941;flip:x />

<v:shape type=#ea path=m-102,-79v171,7,171,287,,294c-274,208,-274,-72,-102,-79 strokecolor=#fff2a6>
<v:fill type=gradientTitle focusposition=.5,.45 rotate=f /></v:shape>

<v:group id=ey>
<v:oval style=left:18862;width:7045  strokeweight=.4 />
<v:oval style=left:20710;width:3409  fillcolor=#4044ff stroked=f />
</v:group>
<v:vmlframe src=#ey style=left:149;top:117;width:35;height:25 />

<v:shape type=#b />
<v:shape type=#b style=left:-8981;flip:x />

<v:shape type=#ea path=m-103,21v8,,25,44,25,58c-49,77,-63,107,-102,107v-38,,-55,-28,-28,-26c-130,67,-112,21,-103,21>
<v:fill focus=1 rotate=f angle=0 /><v:stroke color=#ff3a3a weight=.2 opacity=.4 /></v:shape>

<v:shape path=m-31,125v-24,22,-129,,-144,6c-145,168,-73,186,-31,125x>
<v:fill color=#731a1a opacity=.7 /><v:stroke color=#eb512f weight=11 /></v:shape>

</v:group>

</body>
</html>

^TOP PAGE^


HTML+SVG Source. Total files size: ~2 Kb
<html>

<body>

<iframe src="SVG-File.svg" name="" height=100% width=100% frameborder=0 marginwidth=0 scrolling=no>
<?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 version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="l0">
<stop style="stop-color:#ff3838" offset=".11"/>
<stop style="stop-color:#fff2a6" offset="1"/>
</linearGradient>
<linearGradient xlink:href="#l0" x1="0" y1="1.08" x2="0" y2=".05" id="l1"/>
<linearGradient xlink:href="#l0" x1="1.33" y1="0" x2="-.05" y2="0" id="l2"/>
<radialGradient xlink:href="#l0" cx=".5" cy=".45" r=".49" fx=".5" fy=".5" id="r1"/>
</defs>

<g transform="scale(3)">

<rect width="76.7" height="80" x="4.7" y="14.3" style="fill:#599443; stroke:#000; stroke-width:3"/>

<rect width="65" height="20" x="10.3" y="41.7" style="fill:#ec264d"/>

<path d="M 43 22 v -14 c -7 -6 7 -6 1 -2" style="fill:none; stroke:#805128; stroke-width:1.65; stroke-linecap:square"/>

<g id="ea">
<path d="M 68 59 c 12 -6 -1 -14 0 -17 2 -3 11 -3 14 -1 3 2 4 10 2 14 -1 4 -6 7 -10 10 -3 3 8 11 -9 6" style="fill:url(#l2)"/>
</g>
<use xlink:href="#ea" transform="translate(86) scale(-1,1)"/>

<ellipse cx="42.9" cy="53.5" rx="28.4" ry="32.5" style="fill:url(#r1)"/>

<g id="ey">
<ellipse cx="29.75" cy="44" rx="5.1" ry="3.47" style="fill:#fff; stroke:#000; stroke-width:.38"/>
<ellipse cx="29.77" cy="44" rx="2.45" ry="3.47" style="fill:#4044ff"/>
<path d="M 22 39 c 2.5 -6.5 11 -5 13 -6.4" style="fill:none; stroke:#93661e; stroke-width:2; stroke-linecap:round"/>
</g>
<use xlink:href="#ey" transform="translate(85.5) scale(-1,1)"/>

<path d="M 43 43.6 c 2 0 5 10 5 13 7 0 3 6 -5 6 -9 0 -12 -6 -6 -6 0 -3 4 -13 6 -13"
style="fill:url(#l1); stroke:#ff3a3a; stroke-width:.3; stroke-opacity:.4"/>

<path d="M 27 68 c 6, 7 22 12 31 -1 -4 4 -32 -1 -31 1 z"
style="fill:#731a1a; fill-opacity:.7; stroke:#eb512f; stroke-width:4.84; stroke-linejoin:round"/>

</g>

</svg>
</iframe>

</body>
</html>

^TOP PAGE^