Before we can talk about why SVG images are so great for web design, we need to talk about what they are. SVG is an image file format, like JPG, PNG or GIF, except that where those other formats are made up of individual pixels, SVGs are made up of scalable vectors. What this means is that, unlike older image formats which degrade and become pixelated when you enlarge them, SVGs are basically just a set of code that defines the shapes and colors included in the image, and so can be made as large as you could conceivably want them to be. Need to cover the side of a building? SVG has you covered.
This means you can create one version of whatever graphic you happen to be designing, and it can be used everywhere, rather than the old way of creating a set of resolution-dependent images for every conceivable possible use.
So now that you know what an SVG is, when should you use it, and why?
When to Use SVG
In order to explain when you should use an SVG, I should first explain one of the caveats of SVG usage — they don’t do photographic images very well. Sure, you could take a photograph into Illustrator and trace it (turn the pixels into vectors) and save that as an SVG, but the end result would be far shy of the quality you would get from a standard pixel-based image.
So except for photographic images, when should you use SVG? Whenever you can. You should make sure you or your designer is building as much of the design using scalable vectors as possible.
Why Use SVG?
“Yeah yeah,” you may be saying to yourself, “all this sounds great, but I already know how to make pixel-based images, and when I look at my website, it looks fine.” To which I reply, “Does it? Does it REALLY?” To illustrate my point, check out one of our previous posts on Retina displays. As you’ll see there, Apple introduced a super high-resolution display with one of their iPads a few years back, and since then Retina displays have steadily increased their market-share. If you look at a website designed for a standard display on a Retina display, any pixel-based graphics are going to appear blurry, while any SVG graphics will remain crisp and perfect.
So if SVGs are so great, why don’t you see more people using them? Well, the answer is really a combination of things. One, lots of people just haven’t heard of them, or don’t understand how to fold them into their workflow. Also, while modern browsers have pretty good SVG support, it’s not ironclad, so it’s important that your designer really understand them and which of their capabilities are currently usable for modern web design.
Lucky for you, the designers at Solamar are SVG experts, so if you want a website design that looks beautiful no matter where someone is looking at it, contact the Solamar design team today.