Many web designers have grown accustomed to designing sites for a limited number of screen resolutions. However, with high-definition screens at one extreme and smartphones at the other, the number of potential screen resolutions has increased. This means that a web designer who only works with traditional resolutions is likely to build sites that ignore a good percentage of their potential visitors. More than ever, websites need to be dynamic, and the Scalable Vector Graphics (SVG) format offers a solution to make a web designer’s job easier.

High-definition (HD) screens pose a problem for web design professionals because images constitute a major part of modern websites. These images can be broadly classified into two types: bitmapped images (composed of bits mapped to a particular location) and Scalable Vector Graphics. When a bitmapped image is enlarged, the image first becomes blurry, and then pixilated. Scalable Vector Graphics comprise shapes that do not change when they are enlarged; not only do they not present the same problem as bitmaps, but they can also be easily compressed into a smaller image without losing any of the information, thus preventing pixelation. There are trade-offs between the two image types, but for the purpose of web design, the scalable format works better.

When it comes to coding a high-definition website, Scalable Vector Graphics really start to shine. A high-definition screen can be set to any size that the viewer wishes and their use presents a number of advantages, from increased visibility for those with vision problems, to improved detail in gaming. Bitmapped images quickly become useless on HD screens, whereas Scalable Vector Graphics look good no matter what resolution is chosen. This applies equally to small screens, where bitmapped images lose definition. The SVG format also ensures that when the viewer accesses the site on a high-definition screen, the images can be enlarged, and remain as clear as the smaller version.

From a coder’s perspective, Scalable Vector Graphics offer definite advantages. A coder can use Flash, or manipulate images through XML, or other languages. However, Apple devices do not support Flash, which leaves only manipulation through coding for a designer looking to ensure universal clarity for his site. Scalable Vector Graphics present several advantages compared to formats like EPS which rely on scaling, making it easy for web designers to use.

In short, using Scalable Vector Graphics to create an HD website is a winning option. Not only do sites look great in high definition, but also they look equally good when viewed on a regular monitor, or a device such as a smartphone or a reader. Thinking in terms of HD web design is something that all designers should do, especially since the tricks from the former era of web design are becoming obsolete.

Photo by Ricardo Reis