Hot on the heels of the iPhone 4 release is a seemingly unrelated update concerning Raphaël (a library for displaying vector graphics on the Web). I say “seemingly unrelated” because vector graphics will become ever more relevant if the trend of increasingly higher pixel density displays continues.
The “retina display” on the new iPhone, for example, supposedly has a pixel density that rivals some laser jet printers, and this improvement makes the individual pixels practically impossible to distinguish at a certain distance with the naked eye. While no device can truly be ‘perfect’, other devices will follow this example as the new iPhone’s retina display is receiving high praises by those that have already seen them in person.
The problem with this is that the majority of the graphics being shown on these devices were built using pixels rather than vectors, and this causes the graphics be be 1/2 their original size due to the fact that the pixels are 2x smaller. There are a few ways around this issue.
- Show the original graphics at their intended dimensions (this enlarges the pixels so that there’s a decrease in fidelity)
- Create higher-resolution graphics (this has a higher quality image, but results in larger file-sizes)
- Use vector graphics (this has the smallest file-size, and doesn’t loose any definition when being enlarged)
Connect with HRB:
Vector-based graphics definitely isn’t a new idea, but their native implementation on the web has yet to be widely utilized. SVG is a format that a vector graphic can be saved as and it’s one method that modern Web browsers support. Raphaël is one of the most popular JavaScript libraries that is trying to aid the adoption of SVG in Website design. I suggest checking out some of the demos & free icons on their Website if you’re interested in seeing what vector graphics are capable of on the Web. The company behind Raphaël, Sencha, has a lot of interesting projects that I look forward to covering in future posts.
New Look! 