Blog

Images are everywhere on the internet. Crisp, clear, well-defined graphics are an excellent way to enhance the design of a website and create a better overall user experience. Conversely, nothing discredits a website more than a barrage of blurry, pixelated blobs. Not all images are created equal, and if you want to be certain an icon looks as smooth as the proverbial baby’s bottom, SVGs are the way to go.

SVG is an acronym for Scalable Vector Graphic, and all that really means is exactly what it sounds like. Instead of rendering an image like a JPG or PNG, SVGs are vector graphics, or a collection of mathematical paths that create a graphic. Because SVGs are comprised of these paths rather than an actual image, it can scale to any size regardless of the actual size of the SVG without compromising quality. If you’ve ever attempted to upscale a 300 pixel JPG or a PNG to say 600 pixels, I’m sure you noticed that you’ve lost any and all quality the image originally had. In our modern culture where responsive design reigns supreme, this is an incredible setback to a website. You need your images to look stellar on everything from toasters to televisions. Trust me. Soon that toaster will be your favorite browsing device. Soon…

Luckily, SVGs aren’t really all that new and are easily obtainable. There are many programs out there that can help you edit and create SVGs, namely Adobe Illustrator. And what’s even better is there isn’t really anything different you need to do to include SVGs on your website. It’s simply a matter of changing the file. And if you weren’t sold on SVGs yet, and you order within the next 10 minutes, there are even more benefits to these wonderful digital morsels.

Aside from being infinitely scalable, SVGs are also considerably smaller files than their counterparts. We’re talking like 2-3KB small (for a simple icon). Compared to simple transparent PNGs that can range from 300-400KB, multiplied by the number of icons your site contains… that’s some serious bandwidth you’re saving, and your users will be thankful for it. Not only will your site appear more user friendly and pleasing to the eye, but you won’t send your user’s data plans through the roof.

If you want to get really fancy you can even convert SVGs into HTML just by dragging the image into your favorite text editor. By including the SVG as HTML on your website you can manipulate the image with CSS to create really cool hover effects that would normally require the use of multiple PNG images. The transitions not only look smoother, but it also requires much less memory and much less code to achieve the desired results. Have you ever seen logos or text that appear to be drawn onto the webpage as if someone were writing it in? This is accomplished through the use of SVGs and CSS. There are numerous web animations that can only be utilized with the use of SVGs and they can really make a site stand out if done properly.

Even if you have no interest in animations and hover effects, SVGs are still incredibly useful for their responsiveness, compact file size, and ease of use. By now you’re most likely accustomed to seeing SVGs in the apps and websites you use every day, so why not give your users the same quality experience?