ARCHIVE: GIF, PNG, or SVG?

When you create drawings, logos, and composite images, should you create GIF files, PNG, files, Photoshop files, or impress everybody with SVG?

People create banners using Photoshop because that is the only way they know. The Photoshop file starts with each element in a different layer so all the elements can be juggled around until the image is perfect. Then the layers are squashed down into one layer and saved. The image may be saved in Photoshop format, in GIF for a logo, in PNG for a logo with too many colours for the GIF format, or as a JPEG with lots of compression to make a really really small file.

A month later the Web site owner asks the graphic designer to replace the blue elephant with a purple micropachycephalosaurus. The blue elephant is on top of a field of sunflowers and under the Web site's red ribbon device. You should be able to just slip the elephant out from the middle layer and slip in the micropachycephalosaurus. Unfortunately the original image creator did not save the image as separate layers. PNG, GIF, and JPEG do not have layers. Some image editing software can store layers but only if the image editor remembers to make a special copy of the image file before flattening the layers. The designer wants to create the whole banner from the start and charge you more than they charged the first time. What do you do to make sure your composite images can always be reworked?

Use SVG

SVG (Scalable Vector Graphics) files contain all the image elements as separate elements all the time. Lines are stored as instructions to draw the lines. An SVG file has all the best attributes of PNG, specialised image editing files, and a type of CAD, for those used to drawing in CAD programs.

Another advantage of using SVG over proprietary formats, such as Photoshop's PSD, is that SVG is a free and open standard graphical format, based on XML, that can be supported freely and easily by any graphics editing software on the market. Most high-end graphics programs and several free, open source ones currently support the standard. Indeed, as it is a text-based XML format, it can even be edited in any plain-text editor, including Windows Notepad! You no longer have to worry about all your designers having access to the same (possibly expensive) graphics editing software. SVG is currently managed by the World Wide Web Consortium's SVG Working Group which means it has a big advantage in ensuring it works well with other Web standards.

You can change an SVG images to any size at any time because the lines and other elements are redrawn for every display. At this point you need to understand vector versus raster. Raster images are fixed size because they are drawn at a fixed size before saving as a file. Vector images can easily vary in size because the file contains the instructions for drawing the image instead of a finished image. When you display a vector image, you draw a fresh image at the size it is displayed. SVG contains vector images and can contain raster image elements as textures and background images for vector elements.

Some modern browsers can display SVG files direct without any help. For other browsers, you save a copy of the SVG file as PNG or JPEG. You then keep the original SVG file and use the original to create new JPEGs when you need your image displayed in a different size.

Inkscape is the most commonly used free open source software for creating SVG files. http://drupal.org/node/325892 describes a use of Inkscape for composite images. The Inkscape site links to tutorials that explain both Inkscape and SVG. Even if you never use Inkscape, the tutorials will help you understand SVG.

Consider making SVG the required format for any composite image you buy. You can then modify and resize the image without having to track down the original image creator.

Example

oneidalakeview.com did not have a map. They added a map in oneidalakeview.com/about. They converted the SVG map to PNG for display on their site because one of their browsers did not display the SVG. The map development is discussed in drupal.org/node/347510.