Forum:Illustrations .. is it best to use SVG or PNG or GIF

Some time ago an experienced wiki sysop recommended to me that PNG be used for images to preserve detail and especially to avoid quality loss commonly introduced by the compression done for JPG images. So traditionally I have used JPG only for photographs (which otherwise would have been huge files in PNG) and have used PNG for most illustrations (typically screen shots from a game or some software GUI). Elsewhere I read that GIF is the appropriate choice for animated images.

I am now faced with soliciting a specific wiki community's help to create numerous (several 10's of) illustrations using a template of icons (supplied at the wiki) and have done a little research on SVG over at Wikipedia. As a result of that I am thinking that SVG file format is best for these illustrations. I have tested OpenOffice.org Draw (OOo Draw) and confirmed that images can be exported in SVG file format. This is not my area of expertise and so I am asking for your advice.
 * The Help:SVG is terse, and therefore ... unhelpful!

These illustrations are not complex.
 * 1) They will be created from a palette of icons provided via an Open Document file compatible with OOo Writer and OOo Draw and
 * 2) The number of colors to be used is finite and small - maybe fewer than 16 colors
 * 3) Some images may benefit from a small amount of animation. Whilst I currently have no experience with creating animated images I read that the XML that is used for the SVG format can support animation.
 * 4) In most article the images will appear either
 * 5) * within a table using the Thumb feature
 * 6) * or using Gallery tags
 * 7) I do want the images within articles to scale nicely whenever a visitor with poor eyesight decides to uses their browser's zoom in/out feature.

Since OOo Draw is capable of exporting to the SVG file format I thought "Wow, SVG would be ideal ... wouldn't it?"


 * Now I understand that in articles these images are served up as PNG and not as SVG. Does this negate the scalable aspect of the SVG format?
 * Are there any other heads up or caveats you think I should be looking at before proceeding?

If you care to read more detail (or view an example image) then see this section of the vsk.wikia.com "Manual of Style".

--najevi 02:51, November 8, 2009 (UTC)


 * For icons that lend themselves to vector-based shapes, SVG is the most memory efficient choice, but for noisy or photographic images, I prefer PNG for its alpha transparency and 24-bit capabilities. I think SVGs get rendered as PNGs when scaled, but only for temporary use (cached?). Maybe you can link to some examples of the types of images you will be using? -- Fandyllic  (talk &middot; contr) 1:56 AM PST 11 Nov 2009


 * Inkscape is a great and free tool to create SVG images. In fact, it was created only for that. About MediaWiki and Wikia SVG rendering: SVG images are served always as PNG images, rendered in PNG at Wikia servers. That means that no animation could be done. Also, if you use text in the SVG images, you'll need to convert the text to a path, because the txt renderization on Wikia servers depends on what fonts have Wikia installed, and normally they don't look the same as when you edited the SVG file.
 * The conversion to PNG doesn't negate the scale part of SVG. You can change the size of the image in the article, and Wikia will generate a new thumb from the original SVG image. But if you get the thumb, it can't be resized without losing quality.
 * SVG Images are always served as PNG because not all browsers can handle SVG images. --Ciencia Al Poder (talk) -WikiDex 11:45, November 15, 2009 (UTC)