Get a Quote

SVGs and the Scalable Web

Monday, September 7 2015 12:44 PM
By Kalen Kubik
SVGs and the Scalable Web

Screensizes are constantly growing, whether it be the phone in your pocket or the flatscreen in your living room. We want it bigger, we want the image clearer and we want it now. But, how's your website adapting to these changes? Apple's Retina devices have been displaying images @2x since 2012. Nearly ever conference room in America browses the web on a high-definition television. Yet, here we are in 2015, uploading PNGs and JPGs for every user interface icon. Why? Our interfaces adapt to fit all viewports, our Javascript can alter its behavior based on device, shouldn't our images scale appropriately. When you build a website using SVG's they can.

Benefits of SVGs

  • Scalable
  • Lightweight
  • Ease of styling
  • Animation capabilities
  • Compatibility

+ Scalable

Without going into too much detail, a vector graphic is a computer graphic that can be express in a mathmatical equation. This means that it never loses clarity, never pixelates, and can scale to infinity. Your company's logo file is most likely a vector graphic. With most browsers now supporting SVGs, the time is ripe to begin using SVGs throughout your website to allow for a more beautiful, scalable, web experience. Instead of uploading multiple icon sets and supplementary Javascript to account for various devices, you can upload one SVG file per asset just as you used to do back in the 960 days.

+ Lightweight

We're not loading an image asset here. We're loading an XML file that contains instructions on how the browser should draw a shape. With websites requiring higher and higher resolution images, the XML files is typically lighter than your PNG and PNG@2X. This allows loadtimes to be faster and keeps your page from being bogged down with images. It also frees you from loading supplementary @2x Javascript and other device-based graphic handling code. 

+ Ease of styling

If you find yourself reconstructing a dozen icons for a simple color change, stop. Since SVGs are code-based elements, they are capable of being styled by CSS. Color changes to one or all icons is a line of CSS. Hover effects are just as easily accomplished. You can smoosh, scale and color the XML SVGs to give your user selection feedback without having to create intricate stage sprite sheets. Change opacity, rotate, make it bounce. This leads us into our next benefit.

+ Animation Capabilities

The web world continues to trend towards animation and motion to enhance user experience. Possibly the coolest part of using SVG's is the ability to animate them. Want your company logo to draw itself on load? Want your fullpage background to slowly rotate? Need an icon to morph when clicked? These animations are all doable with SVG's and a little imagination. These animations do take time to write and perfect, however, they keep your audience from needing to load an HTML5 Canvas and assets.

+ Compatibility

SVGs are widely supported. Being XML files, most browsers have no issue. For more information on browser support, visit caniuse.com. There are some IE8 fallbacks that will need to be added if you still support that browser.

Where to start?

SVGs take a little practice to get the hang of. The good news is that vector-based programs, such as Adobe Illustrator, can export these files for you. Icon and logo replacements are easy to do. You're simply adding a uploading an XML file instead of a PNG and the reference changes slightly. If you're looking to perform advanced animations, it will take some patience to get the hang of it.

  1. Beginners guide to SVGs
  2. Animating SVGs
Share the love

Submit Your Comment