<?xml version="1.0"?>
<?xml-stylesheet href="css_xml/mozilly-new.css" type="text/css"?>
<?xml-stylesheet href="css_html/test-index.css" type="text/css"?>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<style>
	polygon:hover {
		fill-opacity:0.3;
	}
	em{
		background-color:yellow;
		font-weight: bold;
		}
		body{
			background-color: #B7F5FD;}
</style> 
</head>

	<body>
		<h1 class="top">SVG: Inline and Embedded</h1>
	<h3 class="toph3">This page contains two types of SVG</h3>
<table align="center">
<tr>
<td>

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="150px"  >

<g transform="translate(o,-35)">
	<polygon class="flamelarge" x="0px" y="0px" points="221 144 231 134 252 126 241 137 241 145 261 142 267 136 277 123 273 139 271 148 262 157 252 170 226 179 182 149 123 124 69 90 74 73 85 79 93 79 98 83 107 93 126 105 134 107 146 100 157 98 151 104 150 110 182 123 197 116 215 114 205 123 203 132" />
	<polygon class="taildark"   x="0px" y="0px" points="110 128 115 128 120 129 127 132 129 136 131 147 126 138 124 136 118 134 114 134 109 136 98 153 88 157 76 154 71 147 47 136 67 127 79 142 88 146 95 144 98 139 107 130" />
	<polygon class="blkribs"   x="0px" y="0px" points="51 90 72 102 74 111 72 122 69 132 68 140 59 137 45 135 40 115 46 102" />
	<polygon class="spine"   x="0px" y="0px" points="61 62 45 64 51 67 42 70 48 73 40 76 45 78 38 81 41 84 35 88 38 91 31 95 36 98 29 103 33 105 28 109 34 111 28 113 33 115 27 117 30 118 31 120 26 124 30 124 26 130 34 128 59 68" />
	<polygon class="arm-r"   x="0px" y="0px" points="67 92 70 102 73 107 80 119 79 126 80 133 78 138 75 142 75 143 76 143 79 140 79 140 80 141 79 145 80 147 80 145 82 142 83 141 83 142 83 145 84 147 85 145 85 143 86 142 86 141 88 142 89 143 88 145 90 145 90 143 90 141 89 138 87 133 87 128 82 99 75 92" />
	<polygon class="ribs"   x="0px" y="0px" points="53 94 75 102 74 110 63 107 49 99" />
	<polygon class="ribs"   x="0px" y="0px" points="49 102 73 112 72 120 65 117 59 115 51 111 44 108" />
	<polygon class="ribs"   x="0px" y="0px" points="44 109 56 117 72 121 70 128 56 125 49 122 42 116" />
	<polygon class="ribs"   x="0px" y="0px" points="43 119 49 124 56 127 70 129 69 139 61 136 53 134 49 131 46 130 41 128" />
	<polygon class="body"   x="0px" y="0px" points="71 53 66 55 52 68 37 93 37 127 40 140 37 148 33 155 28 159 34 159 37 157 37 160 40 163 41 159 43 154 50 158 44 149 45 137 46 131 43 120 45 109 53 96 60 97 68 100 73 107 73 116 68 132 69 148 65 157 69 156 73 161 73 156 78 159 73 149 74 143 72 137 74 131 74 126 78 110 78 100 83 102 87 103 87 99 82 95 73 90 72 83 76 75 83 81 89 83 95 83 98 81 101 79 102 75 98 73 92 70 93 63 89 58 82 54 76 53" />
	<polygon class="arm-l"  x="0px" y="0px" points="57 73 58 79 53 85 49 94 47 99 44 104 41 107 39 111 38 118 39 126 41 129 43 132 44 134 44 135 43 135 40 132 40 131 39 132 40 134 40 136 41 138 38 136 38 135 37 133 36 133 35 135 36 137 34 139 34 137 34 135 33 133 32 132 31 133 30 134 30 136 28 137 28 134 29 133 30 130 31 125 33 122 37 91 51 73" />
	<polygon class="eyeblk" x="0px" y="0px" points="83 67 92 65 92 69 88 70 83 70 77 69 73 66 78 62 81 63" />
	<polygon class="eyeylw" x="0px" y="0px" points="78 63 80 64 82 65 82 67 82 69 79 69 77 69 74 66" />
	<polygon class="eyeylw" x="0px" y="0px" points="83 67 89 67 92 67 92 68 86 69 84 69" />
	<polygon class="upperjaw"  x="0px" y="0px" points="91 71 99 76 95 77 92 80 83 76 73 73 80 71" />
	<polygon class="upperjaw" x="0px" y="0px" points="82 55 88 58 87 60 88 64 80 60 76 57 67 56 72 54" />
	<polygon class="upperjaw"   x="0px" y="0px" points="68 57 74 58 72 60 71 64 69 68 66 69 66 92 55 92 59 82 60 75 58 69 55 69 52 72 44 81 52 68 63 59" />
	<polygon class="nostil" x="0px" y="0px" points="83 72 86 74 90 77 97 75 100 77 93 80 89 80 84 78 79 75 80 73" />
	<polygon class="nosehole" x="0px" y="0px" points="84 75 86 74 87 76 88 77 87 78 85 77" />
	<polygon class="nosehole"  x="0px" y="0px" points="94 78 94 77 95 77 96 76 97 77 95 78" />
	<polygon class="nosehole"   x="0px" y="0px" points="55 92 66 92 69 93 72 94 74 96 77 98 82 101 78 100 73 98 70 96" />
	<polygon class="flamered"   x="0px" y="0px" points="197 117 211 115 195 121 189 125 180 127 154 113 181 125" />
	<polygon class="flamered"   x="0px" y="0px" points="140 108 153 101 143 109 178 129 143 114 130 111 121 109 95 95 122 107" />
	<polygon class="flamered"  x="0px" y="0px" points="218 147 240 133 223 148 231 153 240 151 253 148 258 145 262 142 270 132 263 145 254 152 235 160 209 149 200 147 174 133 201 145" />
	<polygon class="teeth"   x="0px" y="0px" points="80 91 81 90 82 91 81 94 78 93" />
	<polygon class="teeth"   x="0px" y="0px" points="86 95 88 94 88 95 86 98 84 97" />
	<polygon class="teeth"   x="0px" y="0px" points="82 80 78 82 79 78" />
	<polygon class="teeth"   x="0px" y="0px" points="91 83 88 87 88 83" />
	<polygon class="teeth"   x="0px" y="0px" points="96 83 94 86 93 83" />
	<polygon class="teeth"   x="0px" y="0px" points="86 82 83 86 83 81" />
	<polygon class="nails"   x="0px" y="0px" points="30 135 28 140 28 135" />
	<polygon class="nails"   x="0px" y="0px" points="36 136 35 142 34 137" />
	<polygon class="nails"   x="0px" y="0px" points="44 133 45 137 42 134" />
	<polygon class="nails"   x="0px" y="0px" points="40 135 42 141 38 136" />
	<polygon class="nails"   x="0px" y="0px" points="48 154 52 158 53 162 46 156" />
	<polygon class="nails"   x="0px" y="0px" points="40 159 40 166 37 159" />
	<polygon class="nails"   x="0px" y="0px" points="34 158 34 159 26 161 31 156" />
	<polygon class="nails"   x="0px" y="0px" points="77 142 73 145 76 141" />
	<polygon class="nails"   x="0px" y="0px" points="81 144 80 150 79 144" />
	<polygon class="nails"   x="0px" y="0px" points="85 145 84 150 83 145" />
	<polygon class="nails"   x="0px" y="0px" points="90 144 90 145 87 148 88 144" />
	<polygon class="nails"   x="0px" y="0px" points="68 156 63 159 67 153" />
	<polygon class="nails"   x="0px" y="0px" points="73 158 74 165 71 158" />
	<polygon class="nails"   x="0px" y="0px" points="76 156 81 162 75 157" />
</g>
</svg><br/>Run your mouse over this one.</td><td>
<embed class="tjp" src="svgimages/mozillycus.svg" width="300px" height="150px" />
</td>
</tr>
</table>
<p class="moziinfo">The images above are an example of the big differences between the level of naturally supported SVG in Mozilla and the SVG that is rendered with the Adobe plugin.<br/>
 The image on the right is using filters and animation of the fill colors of the flame. The image on the left is inline SVG and has the styling set to <em>HOVER</em> opacity change.
As you might guess they were the same image at one time. The original was drawn in Trajectory Pro from <a href="http://www.jasc.com/webdraw.asp" target="_blank">Jasc</a>. This program has been renamed and is called WebDraw. The image on the left is of course the copy that was converted to render in Mozilla, which means that it is written into the script of this XML document. Where as the image on the right is a seperate SVG file that is being rendered by the plugin. If you don't see the image on the right and a 'Get or Missing Plugin' message is there, then please see the info on the 
<a href="page1.html#plugin">start</a> page.
<p class="moziinfo2">The image on the right has also had some filtering added to it. As time goes by, perhaps I'll add some more animation and some of the other features that are possible with the plugin type of SVG. For the moment, the color change is just to show a little of the differences in the SVG supported by Mozilla and the plugin style of SVG.</p></p>
<p class="bottomlinks">
  <a href="http://www.skeeter-s.com/svg">Home</a>
  <a href="svg_pageone.xml">Hacking Tips</a>
  <a href="landschaft.xml">Landscape</a>
  <a href="the-lion-roars.xml">Cute Lyon</a>
  <a href="smiley.xml">Smiley</a>
	<a href="mozilly.xml">Mozilly</a>
  <a href="landscape.html">Landscape</a>
  <a href="cute-lyon.htm">Cute Lyon</a><br/>
  <a href="mailto:Steve@skeeter-s.com">Email</a>
</p>
</body>
</html>

