If you’ve spent any time in the last year or so talking to someone who works with web graphics, you’ve probably heard SVG mentioned, especially in relation to Responsive Design. What is an SVG file and why are you hearing about it? Good question!
SVG stands for Scalable Vector Graphics, and is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. That’s the short answer. For a more in-depth explanation, go here.
Because the graphic is a vector format, it can scale up and down without being pixelated (try resizing a 50x50 px raster-based JPG to 100x100 px and you’ll see what I mean). This means it will look great at all screen resolutions, including retina displays. Making sure the SVG scales automatically up and down is pretty standard in today’s modern web browsers, but what if you want to change the amount of detail an image displays at certain resolutions?
For instance, a complex logo or icon with lots of fine detailing is readable at Desktop resolutions, but by the time you get to a phone resolution where all of that detail will become muddy, a more simplified version of that logo or icon will work a lot better.
Author’s Note: Technically this might be more of an Adaptive method because you’re offering different content to different devices instead of just scaling something up and down, but I’m not going to argue semantics at this point.
Method 1 - Image Sprite
If you haven’t seen the Responsive Icons that Joe Harrison created, check them out (they’re beyond cool!) because they’re a really good example of what we’re talking about.
That example uses an image sprite. Image spriting is a method that combines multiple images into a single image. This technique is used a lot for buttons that have default, hover and active states so a browser only has to load a single file. Sometimes multiple buttons and icons on a site are included in one image sprite.
You can read more about sprites here. The sprite is then combined with CSS to shift the image and display a different part of it at different resolutions and situations.
This method is great if you want to use a sprite for the images that display at different resolutions. But what if you want to take it a step further and directly manipulate the SVG file itself and display or not display different parts of the file at different resolutions (much like turning layers on or off in Photoshop)?
Method 2 - Direct SVG Manipulation
Because SVG files are XML based, all of the graphic elements inside them have ID tags and (from a Designer’s standpoint, this means all of the layers in the Illustrator file used to create the SVG) can be selected and styled just like HTML elements via CSS – think borders, background color, fills etc. In the example above by Sara Soueidan over at Codrops, she does just that. You can see from the image that as the SVG gets smaller, the outer border disappears and the background color switches to white while the other information changes to blue. Even smaller and the outer ring of information disappears leaving the inner ring and anchor. At its smallest, only the anchor glyph remains. She uses media queries to determine what gets displayed at certain resolutions.
The benefit of this method is you can create one SVG file (with an eye towards what will get turned off or changed) as opposed to multiple versions at varying detail of the same image. And instead of shifting the image to a different section at different resolutions, you can use the same SVG displaying more or less detail.
For a more in-depth explanation of this method, including code examples, read Making SVGs Responsive with CSS (specifically the section entitled: “Making SVGs Adaptive Using CSS Media Queries”).
So the next time you’re planning a logo redesign or an infographic that needs to display different levels of detail at different resolutions, think about creating a responsive SVG file. This is one of the many things we do here at SilverTech as a part of totally responsive site solution.