www.webdeveloper.com
Results 1 to 13 of 13

Thread: SVG or GIF?

  1. #1
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,703

    SVG or GIF?

    A few years ago, this would have been an obvious answer, but no longer.

    I have a table which lists colours available in a character editor of an online game. Currently, the shaded colours (on the right side of the table) are shown as GIFs, but I wonder if it wouldn't be wiser to simply slip in a bit of SVG code and serve the whole page as XHTML. Or is Internet Explorer 8 and lower too common for that?

  2. #2
    Join Date
    May 2014
    Posts
    805
    As they are not animated -- why are you thinking SVG.... or GIF? Unless you have 16 colors or less, a palettized PNG would be the most efficient format for those.

    Actually... you seem to be using PNG not GIF, so... just what are you asking?

    I would avoid SVG, it's a grossly inefficient way of doing things as vector formats go because it's XML, and therein (despite what ignorant XML-tards claim) a human readable format. See why SVG fonts are two to three times the file size of the already inefficient TTF or Postscript. There's a REASON it's originator and champion (who had a plugin that made them work in IE 5 and 6) dropped it like a hot potato the moment they bought out Macromedia.

    Yes, I'm referring to Adobe. It's an XML reformulation of postscript that Adobe was pushing for web adoption fifteen years ago, and they deep sixed it as a bad bloated buggy idea the moment they bought the rights to flash... that it continues to have it's supporters today is... kinda strange.

    I WOULD be tempted to make those a renderable size image, so you could use CSS sprites as a single file to speed up the page load, but that would mean no longer scaling them to fit the available space in 'modern' browsers. Would change your page appearance, but would be WAY faster and more efficient.

    Would probably also be more efficient if you used SCOPE instead of HEADERS.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,703
    Whoops, thought they were GIFs. You're right, they are PNG. I just wondered if it would be better to slip in some SVG rectangles with gradients into the code itself rather than referring to an image file. And since I (being an ignorant XML-tard) did this page in XHTML anyways...

    How does SCOPE make things better? I've never used it.

  4. #4
    Join Date
    May 2014
    Posts
    805
    Nothing wrong with XHTML, it has stricter more consistent rules, I use it myself. Die-hard XML nutters are the ones I have issues with, as they spout completely ignorant nonsense like calling XML a "machine readable" format, which it isn't since it doesn't length-lead or zero term strings, doesn't store integers in binary, etc, etc.

    Scope is just heading in reverse. In THEAD a scope="col" would catch all headings it rowspans, the last ones in a row catching the tbody columns... so where you have:

    Code:
    					<table id="Param_Colour">
    					<caption>Colours</caption>
    					<thead>
    						<tr>
    							<th id="Colour_Num" rowspan="3">Num.</th>
    							<th id="Badge_Hair" colspan="3">Hair and Badge</th>
    							<th id="Eyes" colspan="2">Eyes</th>
    							<th id="Clothes" colspan="2">Clothing</th>
    							<th id="Fur" colspan="2">Fur/Markings</th>
    						</tr>
    						<tr>
    							<th id="Badge_Hair_Name" headers="Badge_Hair" rowspan="2">Name</th>
    							<th id="Badge_Hair_Samp" headers="Badge_Hair" colspan="2">Sample</th>
    							<th id="Eye_Name" headers="Eyes" rowspan="2">Name</th>
    							<th id="Eyes_Samp" headers="Eyes" rowspan="2">Sample</th>
    							<th id="Clth_Name" headers="Clothes" rowspan="2">Name</th>
    							<th id="Clth_Samp" headers="Clothes" rowspan="2">Sample</th>
    							<th id="Fur_Name" headers="Fur" rowspan="2">Name</th>
    							<th id="Fur_Samp" headers="Fur" rowspan="2">Sample</th>
    						</tr>
    						<tr>
    							<th id="Hair_Samp" headers="Badge_Hair_Samp">Hair</th>
    							<th id="Bdge_Samp" headers="Badge_Hair_Samp">Badge</th>
    						</tr>
    					</thead>
    					<tbody>
    						<tr>
    							<th id="ColNum_00" headers="Colour_Num">0</th>
    							<td headers="ColNum_00 Badge_Hair_Name">Blood Red</td>
    							<td headers="ColNum_00 Hair_Samp" class="colour_samp">&nbsp;</td>
    							<td headers="ColNum_00 Bdge_Samp" class="colour_samp">&nbsp;</td>
    							<td headers="ColNum_00 Eye_Name">Mahogany</td>
    							<td headers="ColNum_00 Eyes_Samp" class="colour_samp">&nbsp;</td>
    							<td headers="ColNum_00 Clth_Name">Red</td>
    							<td headers="ColNum_00 Clth_Samp" class="colour_samp"><img alt="Red sample" src="./Graphics/Colours/red.png" /></td>
    							<td headers="ColNum_00 Fur_Name">Cat Grey</td>
    							<td headers="ColNum_00 Fur_Samp" class="colour_samp"><img alt="Cat Gray sample" src="./Graphics/Colours/catgrey.png" /></td>
    						</tr>
    						<tr>
    							<th id="ColNum_01" headers="Colour_Num">1</th>
    							<td headers="ColNum_01 Badge_Hair_Name">Courage Red</td>
    							<td headers="ColNum_01 Hair_Samp" class="colour_samp">&nbsp;</td>
    							<td headers="ColNum_01 Bdge_Samp" class="colour_samp">&nbsp;</td>
    							<td headers="ColNum_01 Eye_Name">Tiger Orange</td>
    							<td headers="ColNum_01 Eyes_Samp" class="colour_samp">&nbsp;</td>
    							<td headers="ColNum_01 Clth_Name">Horse Brown</td>
    							<td headers="ColNum_01 Clth_Samp" class="colour_samp"><img alt="Horse Brown sample" src="./Graphics/Colours/horsebrown.png" /></td>
    							<td headers="ColNum_01 Fur_Name">Arctic</td>
    							<td headers="ColNum_01 Fur_Samp" class="colour_samp"><img alt="Arctic Fur sample" src="./Graphics/Colours/arctic_fur.png" /></td>
    						</tr>
    It could be done as:

    Code:
    	<table id="Param_Colour">
    		<caption>Colours</caption>
    		<thead>
    			<tr>
    				<th scope="col" rowspan="3">Num.</th>
    				<th scope="col" colspan="3">Hair and Badge</th>
    				<th scope="col" colspan="2">Eyes</th>
    				<th scope="col" colspan="2">Clothing</th>
    				<th scope="col" colspan="2">Fur/Markings</th>
    			</tr>
    			<tr>
    				<th scope="col" rowspan="2">Name</th>
    				<th scope="col" colspan="2">Sample</th>
    				<th scope="col" rowspan="2">Name</th>
    				<th scope="col" rowspan="2">Sample</th>
    				<th scope="col" rowspan="2">Name</th>
    				<th scope="col" rowspan="2">Sample</th>
    				<th scope="col" rowspan="2">Name</th>
    				<th scope="col" rowspan="2">Sample</th>
    			</tr>
    			<tr>
    				<th scope="col">Hair</th>
    				<th scope="col">Badge</th>
    			</tr>
    		</thead><tbody>
    			<tr>
    				<th scope="row">0</th>
    				<td>Blood Red</td>
    				<td class="colour_samp"></td>
    				<td class="colour_samp"></td>
    				<td>Mahogany</td>
    				<td></td>
    				<td>Red</td>
    				<td class="colour_samp">
    					<img alt="Red sample" src="./Graphics/Colours/red.png" />
    				</td>
    				<td>Cat Grey</td>
    				<td class="colour_samp">
    					<img alt="Cat Gray sample" src="./Graphics/Colours/catgrey.png" />
    				</td>
    			</tr><tr>
    				<th scope="row">1</th>
    				<td>Courage Red</td>
    				<td class="colour_samp"></td>
    				<td class="colour_samp"></td>
    				<td>Tiger Orange</td>
    				<tdclass="colour_samp"></td>
    				<td>Horse Brown</td>
    				<td class="colour_samp">
    					<img alt="Horse Brown sample" src="./Graphics/Colours/horsebrown.png" />
    				</td>
    				<td>Arctic</td>
    				<td class="colour_samp">
    					<img alt="Arctic Fur sample" src="./Graphics/Colours/arctic_fur.png" />
    				</td>
    			</tr>
    Establishes the exact same semantic relationships as "headers" in a heck of a lot less code. It's why you don't see 'headers' used on a lot of websites; well, that and developer ignorance that headers, scope, axis, and a bunch of other table attributes even exist.

    To be honest with you, it was REALLY nice to see someone using CAPTION, THEAD, TBODY and TH for a change... and doing so properly!
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,703
    I'd never used scope, as I didn't know what it did or what it was for. Cool.

    But back to the original topic, I though that throwing in some SVG code would cut down on the number of image calls, since I could code the "image" right into the markup.

  6. #6
    Join Date
    May 2014
    Posts
    805
    The issue would be how big are those going to be as SVG -- probably larger than the image files knowing how that works -- and how often people visit that page. The more you have in the markup, the slower LATER page-views can be as at least images are cached.

    I'd consider looking into if a inset box-shadow could replicate that appearance; you'd have the issue that IE8/ealier wouldn't/couldn't see it just as with SVG, but you could use a conditional stylesheet or even a selector hack to load the images instead.

    Check this out:
    http://www.cutcodedown.com/for_other.../template.html

    Uses CSS3 box-shadow. You could also use linear-gradient, but that's got so many vendor prefixes to try and deploy it right now I just wouldn't go there.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,703
    Good point--those images are fairly small in terms of file size. And the CSS trick is really cool--though I did notice the prefixes.

    I had thought about a sprite, but the problem was that the image was sized up to fill the whole table cell.


    Hmmm... I wonder if I should use both HEADERS and SCOPE...
    Last edited by Mr Initial Man; 06-03-2014 at 02:33 PM.

  8. #8
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,703
    Tried the SCOPE thing, ran into a minor issue:

    Code:
    /* Colour Backgrounds */
    td[headers="ColNum_00 Hair_Samp"].colour_samp{background:#630000;}
    td[headers="ColNum_00 Bdge_Samp"].colour_samp{background:#8F0707;}
    td[headers="ColNum_00 Eyes_Samp"].colour_samp{background:#5F000B;}
    td[headers="ColNum_01 Hair_Samp"].colour_samp{background:#AB0B0B;}
    td[headers="ColNum_01 Bdge_Samp"].colour_samp{background:#C71717;}
    td[headers="ColNum_01 Eyes_Samp"].colour_samp,
    td[headers="ColNum_03 Hair_Samp"].colour_samp,
    td[headers="ColNum_06 Bdge_Samp"].colour_samp{background:#BB5B17;}
    td[headers="ColNum_02 Hair_Samp"].colour_samp{background:#E32727;}
    td[headers="ColNum_02 Bdge_Samp"].colour_samp,
    td[headers="ColNum_20 Eyes_Samp"].colour_samp{background:#FF3737;}
    td[headers="ColNum_02 Eyes_Samp"].colour_samp,
    td[headers="ColNum_12 Hair_Samp"].colour_samp{background:#F7DF87;}
    td[headers="ColNum_03 Bdge_Samp"].colour_samp{background:#FF5F1B;}
    td[headers="ColNum_03 Eyes_Samp"].colour_samp,
    td[headers="ColNum_11 Hair_Samp"].colour_samp,
    td[headers="ColNum_13 Hair_Samp"].colour_samp{background:#DBBB47;}
    td[headers="ColNum_04 Hair_Samp"].colour_samp{background:#4B1717;}
    td[headers="ColNum_04 Bdge_Samp"].colour_samp{background:#6F072F;}
    td[headers="ColNum_04 Eyes_Samp"].colour_samp,
    td[headers="ColNum_28 Hair_Samp"].colour_samp{background:#6BA33F;}
    td[headers="ColNum_05 Hair_Samp"].colour_samp{background:#6F3333;}
    td[headers="ColNum_05 Bdge_Samp"].colour_samp{background:#8B3700;}
    td[headers="ColNum_05 Eyes_Samp"].colour_samp,
    td[headers="ColNum_22 Bdge_Samp"].colour_samp{background:#678BBB;}
    td[headers="ColNum_06 Hair_Samp"].colour_samp{background:#A34707;}
    td[headers="ColNum_06 Eyes_Samp"].colour_samp,
    td[headers="ColNum_20 Bdge_Samp"].colour_samp,
    td[headers="ColNum_21 Hair_Samp"].colour_samp{background:#174377;}
    td[headers="ColNum_07 Hair_Samp"].colour_samp{background:#D36F27;}
    td[headers="ColNum_07 Bdge_Samp"].colour_samp{background:#EB873F;}
    td[headers="ColNum_07 Eyes_Samp"].colour_samp,
    td[headers="ColNum_36 Bdge_Samp"].colour_samp,
    td[headers="ColNum_37 Hair_Samp"].colour_samp{background:#7B5B87;}
    td[headers="ColNum_08 Hair_Samp"].colour_samp{background:#7B3F3F;}
    td[headers="ColNum_08 Bdge_Samp"].colour_samp{background:#935F4F;}
    td[headers="ColNum_08 Eyes_Samp"].colour_samp{background:#8B7F57;}
    td[headers="ColNum_09 Hair_Samp"].colour_samp{background:#730F1B;}
    td[headers="ColNum_09 Bdge_Samp"].colour_samp{background:#83232F;}
    td[headers="ColNum_09 Eyes_Samp"].colour_samp{background:#6763FF;}
    td[headers="ColNum_10 Hair_Samp"].colour_samp{background:#6B5F13;}
    td[headers="ColNum_10 Bdge_Samp"].colour_samp{background:#9B6F1B;}
    td[headers="ColNum_10 Eyes_Samp"].colour_samp,
    td[headers="ColNum_23 Hair_Samp"].colour_samp,
    td[headers="ColNum_34 Hair_Samp"].colour_samp{background:#2F2FC7;}
    td[headers="ColNum_11 Bdge_Samp"].colour_samp{background:#F3D75B;}
    td[headers="ColNum_11 Eyes_Samp"].colour_samp,
    td[headers="ColNum_24 Bdge_Samp"].colour_samp,
    td[headers="ColNum_29 Hair_Samp"].colour_samp{background:#0B0B93;}
    td[headers="ColNum_12 Bdge_Samp"].colour_samp{background:#FBEBB7;}
    td[headers="ColNum_12 Eyes_Samp"].colour_samp{background:#008747;}
    td[headers="ColNum_13 Bdge_Samp"].colour_samp,
    td[headers="ColNum_25 Eyes_Samp"].colour_samp{background:#FFEF07;}
    td[headers="ColNum_13 Eyes_Samp"].colour_samp,
    td[headers="ColNum_19 Bdge_Samp"].colour_samp{background:#00878B;}
    td[headers="ColNum_14 Hair_Samp"].colour_samp{background:#9F8B3F;}
    td[headers="ColNum_14 Bdge_Samp"].colour_samp{background:#AF974F;}
    td[headers="ColNum_14 Eyes_Samp"].colour_samp,
    td[headers="ColNum_23 Bdge_Samp"].colour_samp{background:#135FFF;}
    td[headers="ColNum_15 Hair_Samp"].colour_samp{background:#37530B;}
    td[headers="ColNum_15 Bdge_Samp"].colour_samp{background:#436713;}
    td[headers="ColNum_15 Eyes_Samp"].colour_samp{background:#AB7777;}
    td[headers="ColNum_16 Hair_Samp"].colour_samp{background:#3F771F;}
    td[headers="ColNum_16 Bdge_Samp"].colour_samp{background:#4F8B2F;}
    td[headers="ColNum_16 Eyes_Samp"].colour_samp,
    td[headers="ColNum_43 Hair_Samp"].colour_samp{background:#874B4B;}
    td[headers="ColNum_17 Hair_Samp"].colour_samp{background:#5F9B43;}
    td[headers="ColNum_17 Bdge_Samp"].colour_samp{background:#6FAF5B;}
    td[headers="ColNum_17 Eyes_Samp"].colour_samp{background:#632B2B;}
    td[headers="ColNum_18 Hair_Samp"].colour_samp{background:#7BB753;}
    td[headers="ColNum_18 Bdge_Samp"].colour_samp,
    td[headers="ColNum_26 Eyes_Samp"].colour_samp,
    td[headers="ColNum_28 Bdge_Samp"].colour_samp{background:#97D70B;}
    td[headers="ColNum_18 Eyes_Samp"].colour_samp{background:#171313;}
    td[headers="ColNum_19 Hair_Samp"].colour_samp,
    td[headers="ColNum_22 Hair_Samp"].colour_samp{background:#476FA3;}
    td[headers="ColNum_19 Eyes_Samp"].colour_samp,
    td[headers="ColNum_32 Bdge_Samp"].colour_samp{background:#EF7F9F;}
    td[headers="ColNum_20 Hair_Samp"].colour_samp{background:#073363;}
    td[headers="ColNum_21 Bdge_Samp"].colour_samp{background:#2B578F;}
    td[headers="ColNum_21 Eyes_Samp"].colour_samp{background:#3F1313;}
    td[headers="ColNum_22 Eyes_Samp"].colour_samp{background:#C7CBE7;}
    td[headers="ColNum_23 Eyes_Samp"].colour_samp,
    td[headers="ColNum_25 Bdge_Samp"].colour_samp{background:#6F0F7F;}
    td[headers="ColNum_24 Hair_Samp"].colour_samp{background:#00007B;}
    td[headers="ColNum_25 Hair_Samp"].colour_samp,
    td[headers="ColNum_40 Hair_Samp"].colour_samp{background:#3F3737;}
    td[headers="ColNum_26 Hair_Samp"].colour_samp{background:#7F2393;}
    td[headers="ColNum_26 Bdge_Samp"].colour_samp{background:#933FA7;}
    td[headers="ColNum_27 Hair_Samp"].colour_samp{background:#A35BB7;}
    td[headers="ColNum_27 Bdge_Samp"].colour_samp{background:#B77FCB;}
    td[headers="ColNum_27 Eyes_Samp"].colour_samp{background:#6B5F5F;}
    td[headers="ColNum_28 Eyes_Samp"].colour_samp{background:#8FAF7B;}
    td[headers="ColNum_29 Bdge_Samp"].colour_samp{background:#1B1BAF;}
    td[headers="ColNum_29 Eyes_Samp"].colour_samp{background:#473777;}
    td[headers="ColNum_30 Hair_Samp"].colour_samp{background:#8F0B3F;}
    td[headers="ColNum_30 Bdge_Samp"].colour_samp{background:#AB0747;}
    td[headers="ColNum_31 Hair_Samp"].colour_samp{background:#C70753;}
    td[headers="ColNum_31 Bdge_Samp"].colour_samp{background:#D32767;}
    td[headers="ColNum_32 Hair_Samp"].colour_samp{background:#E34F7F;}
    td[headers="ColNum_33 Hair_Samp"].colour_samp{background:#B37B9F;}
    td[headers="ColNum_33 Bdge_Samp"].colour_samp{background:#C38FB7;}
    td[headers="ColNum_34 Bdge_Samp"].colour_samp{background:#4B47E3;}
    td[headers="ColNum_35 Hair_Samp"].colour_samp{background:#4F4343;}
    td[headers="ColNum_35 Bdge_Samp"].colour_samp,
    td[headers="ColNum_36 Hair_Samp"].colour_samp{background:#674773;}
    td[headers="ColNum_37 Bdge_Samp"].colour_samp{background:#8F6F9B;}
    td[headers="ColNum_38 Hair_Samp"].colour_samp{background:#8773BF;}
    td[headers="ColNum_38 Bdge_Samp"].colour_samp{background:#978FCF;}
    td[headers="ColNum_39 Hair_Samp"].colour_samp,
    td[headers="ColNum_39 Bdge_Samp"].colour_samp{background:#2B1F5B;}
    td[headers="ColNum_41 Hair_Samp"].colour_samp{background:#877B7B;}
    td[headers="ColNum_42 Hair_Samp"].colour_samp{background:#9F938B;}
    td[headers="ColNum_44 Hair_Samp"].colour_samp{background:#9BB78B;}
    Either I come up with a lot of class names for the flat colours, or I stick with the extra 11 KB.

  9. #9
    Join Date
    May 2014
    Posts
    805
    Why are you using complex selectors that won't even work prior to IE9 targeting via headers? Just set off the TR.... though your table structure is 'iffy' as I'm not sure I'd make that all one table since your row numbers (first column) seem to have nothing to do with the data...

    I would NEVER use selectors that painfully complex... part of why I'm not wild about this whole 'attributes as selectors' thing.
    Java is to JavaScript as Ham is to Hamburger.

  10. #10
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,703
    Quote Originally Posted by deathshadow View Post
    though your table structure is 'iffy' as I'm not sure I'd make that all one table since your row numbers (first column) seem to have nothing to do with the data...
    I suppose context is important: the table is actually part of a larger page: The Cross-Referenced Catalogue of DragonSpeak Lines, DragonSpeak being a scripting language for an online game, and the table showing a list of values that can be used with lines that deal with an avatar's colours (If you look under the Furres-Appearance tab, there's a link that can bring up that table. All colours are referred to numerically).




    Quote Originally Posted by deathshadow View Post
    Why are you using complex selectors that won't even work prior to IE9 targeting via headers? . . .
    I would NEVER use selectors that painfully complex... part of why I'm not wild about this whole 'attributes as selectors' thing.
    Well, I had the HEADERS already. Might as well put them to use. Those TD elements acually had style attributes at one time, setting the background.

    Maybe have one class on the TR and one on the TD?
    Last edited by Mr Initial Man; 06-04-2014 at 01:40 AM.

  11. #11
    Join Date
    May 2014
    Posts
    805
    Honestly, just a class on the TD -- it looks like you have the same values in several spots on the table, so keep what row it's on out of it. I mean, what's easier and clearer?

    td[headers="ColNum_01 Eyes_Samp"].colour_samp,
    td[headers="ColNum_03 Hair_Samp"].colour_samp,
    td[headers="ColNum_06 Bdge_Samp"].colour_samp{background:#BB5B17;}

    or
    .tigerOrange { background:#BB5B17; }
    Last edited by deathshadow; 06-04-2014 at 04:21 AM.
    Java is to JavaScript as Ham is to Hamburger.

  12. #12
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,703
    The former, I'm afraid.

    The same colour (such as #BB5B17) can have different names in different contexts (Tiger Orange for the eyes, Ember Orange for the hair, and Busy Orange for the badge)

    The same name (such as "Mahogany") can refer to different colours in different contexts (#5F000B for the eyes, #730F1B for the hair, and #83232F for the badge). No, it doesn't make sense. Yes, it's kind of confusing.
    Last edited by Mr Initial Man; 06-04-2014 at 05:00 AM.

  13. #13
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,703
    I eventually have the TR elements of that table an ID attribute and went with this (I took rows into account due to only one colour--indigo--being the same colour in both name and RGB value in all contexts):

    Code:
    /* Colour Backgrounds */
    /* Colour Backgrounds */
    #PrmClr00 td.hair{background:#630000;}
    #PrmClr00 td.bdge{background:#8F0707;}
    #PrmClr00 td.eyes{background:#5F000B;}
    #PrmClr01 td.hair{background:#AB0B0B;}
    #PrmClr01 td.bdge{background:#C71717;}
    #PrmClr01 td.eyes,
    #PrmClr03 td.hair,
    #PrmClr06 td.bdge{background:#BB5B17;}
    #PrmClr02 td.hair{background:#E32727;}
    #PrmClr02 td.bdge,
    #PrmClr20 td.eyes{background:#FF3737;}
    #PrmClr02 td.eyes,
    #PrmClr12 td.hair{background:#F7DF87;}
    #PrmClr03 td.bdge,
    #PrmClr24 td.eyes{background:#FF5F1B;}
    #PrmClr03 td.eyes,
    #PrmClr11 td.hair,
    #PrmClr13 td.hair{background:#DBBB47;}
    #PrmClr04 td.hair{background:#4B1717;}
    #PrmClr04 td.bdge{background:#6F072F;}
    #PrmClr04 td.eyes,
    #PrmClr28 td.hair{background:#6BA33F;}
    #PrmClr05 td.hair{background:#6F3333;}
    #PrmClr05 td.bdge{background:#8B3700;}
    #PrmClr05 td.eyes,
    #PrmClr22 td.bdge{background:#678BBB;}
    #PrmClr06 td.hair{background:#A34707;}
    #PrmClr06 td.eyes,
    #PrmClr20 td.bdge,
    #PrmClr21 td.hair{background:#174377;}
    #PrmClr07 td.hair{background:#D36F27;}
    #PrmClr07 td.bdge{background:#EB873F;}
    #PrmClr07 td.eyes,
    #PrmClr36 td.bdge,
    #PrmClr37 td.hair{background:#7B5B87;}
    #PrmClr08 td.hair{background:#7B3F3F;}
    #PrmClr08 td.bdge{background:#935F4F;}
    #PrmClr08 td.eyes{background:#8B7F57;}
    #PrmClr09 td.hair{background:#730F1B;}
    #PrmClr09 td.bdge{background:#83232F;}
    #PrmClr09 td.eyes{background:#6763FF;}
    #PrmClr10 td.hair{background:#6B5F13;}
    #PrmClr10 td.bdge{background:#9B6F1B;}
    #PrmClr10 td.eyes,
    #PrmClr23 td.hair,
    #PrmClr34 td.hair{background:#2F2FC7;}
    #PrmClr11 td.bdge{background:#F3D75B;}
    #PrmClr11 td.eyes,
    #PrmClr24 td.bdge,
    #PrmClr29 td.hair{background:#0B0B93;}
    #PrmClr12 td.bdge{background:#FBEBB7;}
    #PrmClr12 td.eyes{background:#008747;}
    #PrmClr13 td.bdge,
    #PrmClr25 td.eyes{background:#FFEF07;}
    #PrmClr13 td.eyes,
    #PrmClr19 td.bdge{background:#00878B;}
    #PrmClr14 td.hair{background:#9F8B3F;}
    #PrmClr14 td.bdge{background:#AF974F;}
    #PrmClr14 td.eyes,
    #PrmClr23 td.bdge{background:#135FFF;}
    #PrmClr15 td.hair{background:#37530B;}
    #PrmClr15 td.bdge{background:#436713;}
    #PrmClr15 td.eyes{background:#AB7777;}
    #PrmClr16 td.hair{background:#3F771F;}
    #PrmClr16 td.bdge{background:#4F8B2F;}
    #PrmClr16 td.eyes,
    #PrmClr43 td.hair{background:#874B4B;}
    #PrmClr17 td.hair{background:#5F9B43;}
    #PrmClr17 td.bdge{background:#6FAF5B;}
    #PrmClr17 td.eyes{background:#632B2B;}
    #PrmClr18 td.hair{background:#7BB753;}
    #PrmClr18 td.bdge,
    #PrmClr26 td.eyes,
    #PrmClr28 td.bdge{background:#97D70B;}
    #PrmClr18 td.eyes{background:#171313;}
    #PrmClr19 td.hair,
    #PrmClr22 td.hair{background:#476FA3;}
    #PrmClr19 td.eyes,
    #PrmClr32 td.bdge{background:#EF7F9F;}
    #PrmClr20 td.hair{background:#073363;}
    #PrmClr21 td.bdge{background:#2B578F;}
    #PrmClr21 td.eyes{background:#3F1313;}
    #PrmClr22 td.eyes{background:#C7CBE7;}
    #PrmClr23 td.eyes,
    #PrmClr25 td.bdge{background:#6F0F7F;}
    #PrmClr24 td.hair{background:#00007B;}
    #PrmClr25 td.hair,
    #PrmClr40 td.hair{background:#3F3737;}
    #PrmClr26 td.hair{background:#7F2393;}
    #PrmClr26 td.bdge{background:#933FA7;}
    #PrmClr27 td.hair{background:#A35BB7;}
    #PrmClr27 td.bdge{background:#B77FCB;}
    #PrmClr27 td.eyes{background:#6B5F5F;}
    #PrmClr28 td.eyes{background:#8FAF7B;}
    #PrmClr29 td.bdge{background:#1B1BAF;}
    #PrmClr29 td.eyes{background:#473777;}
    #PrmClr30 td.hair{background:#8F0B3F;}
    #PrmClr30 td.bdge{background:#AB0747;}
    #PrmClr31 td.hair{background:#C70753;}
    #PrmClr31 td.bdge{background:#D32767;}
    #PrmClr32 td.hair{background:#E34F7F;}
    #PrmClr33 td.hair{background:#B37B9F;}
    #PrmClr33 td.bdge{background:#C38FB7;}
    #PrmClr34 td.bdge{background:#4B47E3;}
    #PrmClr35 td.hair{background:#4F4343;}
    #PrmClr35 td.bdge,
    #PrmClr36 td.hair{background:#674773;}
    #PrmClr37 td.bdge{background:#8F6F9B;}
    #PrmClr38 td.hair{background:#8773BF;}
    #PrmClr38 td.bdge{background:#978FCF;}
    #PrmClr39 td.hair,
    #PrmClr39 td.bdge{background:#2B1F5B;}
    #PrmClr41 td.hair{background:#877B7B;}
    #PrmClr42 td.hair{background:#9F938B;}
    #PrmClr44 td.hair{background:#9BB78B;}
    Back to the original topic, though: I'd thought using SVG images right in the code would be a better way to do it since you wouldn't have all those calls for resources (the images)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles