What Are SVGs and Why Are They Awesome?
The definition from Wikipedia:
SVG stands for Scalable Vector Graphics. This an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C). All major modern web browsers- including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari – have at least some degree of SVG rendering support.
What does that mean, exactly? Well, it means they’re awesome! But really, SVGs allow you to easily change their appearance using basic CSS – a language all front-end developers live and breath. This means developers can, on the fly, change colors, stroke weights, sizes, and even animations. As an added bonus, SVGs are a dramatically smaller file size compared to standard image formats used on the web (see chart below.)
Notice the SVG has the same file size at either 600px or 1200px. This is because Vector style graphics allow for scaling up or down without any loss of quality. Images with the file extension JPG, GIF, or PNG, however, are Bitmap style images, which can appear jagged and pixelated when resized.
SVGs Are Not for Everything
SVGs are amazing, but not ideal for everything on the web. First, they are only really appropriate for logos, icons, and other non-photo elements. Leave the photos to Bitmap graphics – that’s what they’re really for.
Since SVGs are text based files, the “image” isn’t able to be cached. Meaning every time the website is loaded, this “image” needs to be loaded too. Additionally, if you want to use CSS to control the colors, line weights, and other attributes, you must put the SVG in-line into your web document.
There is also a bit of spotty support for SVGs with different browsers, depending on their use. Check out this article to learn which browsers support what usage.
Back to Why SVGs Are Awesome
Recently at Launch, we had a project that needed custom icons in the main navigation of a website. “Not a problem,” I thought. “I’ll just make a transparent PNG file and it’ll be fine. Oh, wait! The color of the icon needs to change on hover. Ok, I’ll make a second PNG with the icon in another color and use CSS to change the image on hover…”
As usual, it wasn’t that simple. The icon needed to have an additional color state after the page scrolls a bit, and then another on hover. So, I would need four different files for one icon AND to call them in separately depending on where the page is and whether the mouse is hovering over the icon.
When developing websites, the goal is to have as few HTTP requests and as small of files as possible, so the website viewer doesn’t have to wait for elements to load. Using the Dodge logo as an example, if the website had to load the logo four times at 7kb each, that’s 28kb and four HTTP requests dedicated to loading just one image.
But if the logo is a SVG, it requires only one 2.5kb file and one HTTP request. Saving three HTTP requests and 25.5kb of data transfer is HUGE!
Plus, I can change the color and size as many times as I want! This is great stuff!
Learn More About SVGs
If you’re interested in learning more about SVG use, check out CSS-Tricks. They have a great tutorial on different uses and how to control the various SVG elements.
