Nearby:

QA· qa-dev· W3C Icons

W3C "valid" icons transparency test

This is a followup to the transparency test page for the usual "valid X" badges.

These badges suffer from chronic transparency issue, color, sharpness inconsistencies, and lack of new versions for recent or upcoming formats. This page and the badges linked from it are an attempt at using SVG as a flexible source to generate the whole batch of our icons, with the non-negligible bonus of being able to provide SVG versions for free (good publicity).

Below is the generated icon from SVG template:

http://www.w3.org/2004/07/IconsTest/88x31/template.png

And for the comparison, the current icon is given below:

http://www.w3.org/Icons/valid-xhtml11.png

generation process

Having one SVG template and using a consistent process will guarantee better consistency in color and style than the current set. The difficulty was to find a way to create the PNGs in a way that the transparency mode would not make the rightside of the logo look ugly on broken implementations, such as MSIE/Win. We recently found that the following process gives exactly this result:

1. copy the SVG template to valid-foo.svg
2. edit the svg file
   • change the title
   • Look for "CHANGE ME" in a commentary (remove this line), change the text
   • if the text is very long/short/etc, edit the font size for each part of the text and their position
3. generate the png file with the batik rasterizer:
   % java -jar path/to/batik/batik-rasterizer.jar -a -1,0,780,300 -w 88 -h 31 valid-foo.svg -d foo.png
4. convert the PNGs to GIF with convert (imagemagick) and back (fixes transparency issues...):
   convert foo.png foo.gif
convert foo.gif foo.png
5. Compression tools such as pngcrush (or pngqnant, but I do not really recommend it, too brutal with color gradients) may then be used on the png version to make it even smaller