Working with the SVG image format for scalability

If you have spent any time working with media in a responsive capacity, no doubt you will find that some image formats don't resize well. To get around it, it may be necessary to provide several different versions of our image and set the code to pick the right one at the appropriate point.

Do we want to be doing that all the time? Somehow I don't think so. It's a real pain to produce all those different versions! There's a better way to achieve the same result if we switch to using the vector-based SVG format, which will resize smoothly without loss of quality. Let's delve into an example to see how it works:

We'll start with preparing the images that we will use for the purposes of this demo. We'll use the dark modern LCD display SVG image that is available from the XOO.me website at http://xoo.me/template/details/12636-dark-modern-lcd-display-vector. If you prefer to use an alternative, then please alter the code accordingly; we will need PNG and SVG versions of the same image.

Add this code to a new file and save it as svgfallback.html in the root of our project folder:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/svgfallback.css">
</head>
<body>
  This is an image displayed using SVG, with PNG fallback:
  <br>
  <div id="lcd"></div>
</body>
</html>

Next, add the following CSS styles to a new file and save it as svgfallback.css in the css subfolder of our project folder:

#lcd { background: url('../img/lcd.png');
  background-image: url('../img/lcd.svg'), none;
  width: 576px; height: 383px; background-repeat: no-repeat; }

Let's see what happens when we preview the results in most browsers; it will show the SVG image of our LCD monitor. Let's first look at the source code of our page in a DOM inspector where we can see both PNG and SVG ticked as shown in this screenshot; the latter takes precedence:
To prove it works, the following is the SVG image in all its glory:
To force our demo to display the PNG fallback, we need to emulate a browser that doesn't support SVG images natively; IE8 is a perfect candidate for this. I recommend using a recent version of IE, such as 9 or 10. We can use its Emulation mode to force it to display in IE8 mode, and therefore choose the PNG image instead:

The beauty of using SVG is that we can actually edit the content of the image using a text editor; SVG images are after all just plain XML files! SVG images are great for several reasons:

They are small file sizes that compress well
They scale to any size without losing clarity (except very tiny)
They look great on retina display
They design control like interactivity and filters

Using standard images such as PNGs or JPGs will work, but they won't resize properly beyond their native resolution; instead, we are likely to need several versions of the same image in order to view them properly. It's worth spending time getting to know the SVG format. There is a useful article by Nick Salloum at http://callmenick.com/2014/04/02/svg-fallback-with-png/, which extols different mechanisms we can use to provide fallback for SVG images.

If you really want to get into editing SVG images, take a look at http://css-tricks.com/using-svg/. It's a great article by Chris Coyier that shows us how we can edit the content to really alter its appearance.

Responsive Media in HTML5

By : Alex Libby

Responsive Media in HTML5

By: Alex Libby

Overview of this book

Working with the SVG image format for scalability

Responsive Media in HTML5

By : Alex Libby

Responsive Media in HTML5

By: Alex Libby

Overview of this book

Working with the SVG image format for scalability

Create a Note

Delete Bookmark

Delete Note

Edit Note

Confirmation

Buy this book with your credits?