We updated our site and are excited to include a feature new to HTML5—SVG vector graphics. While using vector graphics throughout our updated site has made the site easy on the eyes, it has also made the site far more lightweight and load friendly. Read on to learn a bit about what vectors are and how we used them.
VECTOR VERSUS BITMAP
Vector images are stored as a series of points, color codes and equations instead of a grid of colored pixels. Though this may seem a trivial difference, the real-world impacts of the technology difference are huge: vector files are much smaller, load and draw faster in most cases, and can be scaled indefinitely without pixelation. Whether they realize it or not, everyone that uses a computer has interacted with and manipulated vector graphics before: virtually all fonts are stored as vectors. This is why you never have to worry about pixelation or distortion when upping the font size like you do when enlarging an image. The web first implemented vectors as things other than type through packages like Font Awesome that place logos and UI elements using font (vector) technology—even though the shapes drawn aren’t letters. Vector graphics are what make font awesome icons so lightweight, scalable, retina-friendly—and ultimately awesome.
HTML5/CSS3
With HTML5 and CSS3, there is increased support of vector graphics. They can now be defined inline with pure HTML and implemented in novel ways through CSS. As cross-browser support for the new features made available in the updated web increases, we are excited for the possibilities, as are web design and development gurus everywhere. In fact, the logo for HTML5 itself is a vector design.
MISSION BAY MEDIA
In our site, vector-encoded graphical elements proved indispensable as a lightweight, cross-platform solution to serve many purposes. We used standard Font Awesome icons where possible, as well as a range of custom-made vector elements. The left/right buttons on our homepage’s main image slider are custom .svg’s. More interestingly, the “low-poly art” banners on the portfolio, blog, and contact headers as well as the background image for the entire testimonials section are .svg vector files. In use, the .svg file format proves far more versatile than any other way of encoding responsive banners like these. Initially, we used responsive CSS combined with a set of banners of different width to “snap” and adjust to 4 different screen sizes. Additionally, we made the graphics retina-ready using Retina.js, a script that detects high pixel density retina displays and swaps out bitmap images with their double resolution counterparts (marked @2x on your server). While this is an indispensable tool for handling many sorts of images (we use it on our main slider and “about” section images), it forced us to upload 8 files per banner and ultimately forced a compromise between beautiful retina display and file size. The low-poly vector banners we created and used are far more versatile. Because a vector is not pixels but equations, by its very nature it is retina-ready. Additionally, vectors like the poly banner we used are easily squished and scaled with no consequences, so a single file (along with the CSS “background-size: cover;”) is used for the banner on devices of all screen sizes and pixel densities. As an added bonus, the largest of our vector banners weighs in at 30KB, whereas with .png or .jpg banners, it was difficult to get even a single good looking image on retina screens anywhere under ten times that size. To demonstrate the versatility of vectors, I recycled the very same 28KB file that we used as a 261px-tall section header banner for the background on our admin page, which can be thousands of pixels tall. Of course, the vector took nicely to the new application and now provides a subtle texture to the background of our admin page.
