Articles

Responsive logos with SVG

Responsive logos with SVG
In this article, we’ll look at Scalable Vector Graphics (SVG) and how we can use them to create responsive logos, perfect for today’s responsive websites.

Responsive design is an approach to web design targeting the creation of websites that provide an optimal experience across a wide range of devices, while using the same base code. The idea behind responsive logos is taking this responsive approach and apply it to logo design. A popular example is the Responsive Logos website.

If you resize the browser downwards you’ll see that the logos become smaller. But not just smaller, they change their design to display according to the screen size.

Definitely worth to see and play around resizing the browser.

ResponsiveLogos

This impressive demo, created by Joe Harrison, uses the image sprite technique.
With image sprites, a single file is used to combine the full set of logo sizes, so that the browser just has to load one single image.
The sprite is added as a CSS background-image, and each image included in the sprite is shifted around with CSS background-position property.

We usually see the image sprite technique with PNG images. For Responsive Logos, Joe used the same approach but with SVG files, instead of PNGs.

SVG (Scalable Vector Graphics) is an XML markup language for describing two-dimensional vector graphics. SVG is essentially to graphics what XHTML is to text.

Extracted from MDN.

The idea behind this demo is that each logo relies on a SVG sprite image, containing 4 logo variations. The logo displayed depends on the viewport size. To shift around different logos, he changes background-position property inside media queries.

In this article we’re going show how to create logos that respond to different screen sizes, but following a different strategy from the one described above. Rather than just showing parts of the SVG file while hiding others, we’ll resize it based on changing SVG element properties (fill, stroke, color, etc).

Why SVG

Probably your logo has always been a JPEG or PNG image since day 1. Why move to SVG?

Resolution-independent

  • SVGs scale to any size.
  • Looks great on retina displays.
  • Do not lose clarity, except for very tiny sizes.
  • Responsive SVG: optical correction for tiny sizes (we’ll walk through this topic latter on).

Create the file once and use it anywhere, at any scale and resolution.

David Bushell, Smashing Magazine.

 

Small file sizes

  • SVGs are usually small file sizes.
  • SVGs are text files, which makes easier to compress.
PNG SVG
12Kb 7Kb
3Kb GZIPPED

File manipulation

  • CSS styling control.
  • Interactivity and filters support.

 

Case study: London underground sign


underground-sign

Create the SVG file

The most popular tools available to draw SVGs are:

  • Adobe Illustrator
  • Inskspace (free tool)
  • Sketch (for OSX users only)

The London underground sign was created using Adobe Illustrator. Below are some tips for creating SVG files correctly in Adobe Illustrator.

  1. Create a new document
  2. To begin with, open Adobe Illustrator and go to File > New document to start from scratch.

    underground-newdoc

    When you select Profile: Web, Adobe Illustrator sets automatically the document size to 960 x 560 pixels. But if you’re planning to draw a small logo for your website, you should probably select a custom size to make it smaller.

  3. Rename each layer to easily identify elements in the SVG file
  4. underground-layers
  5. Save the file as SVG
  6. To do it correctly, you should go to File > Save a Copy, and pick SVG as the file format. For SVG Options you should pick the following settings (click in the image to expand):

    underground-svg-options
  7. Save the file as PNG
  8. It’s important to save the image in PNG as well, in File > Save for Web option. It will be useful in fallback cases.

  9. Optimize and clean up the generated code, if necessary.
  10. A tool to help you out with this task is SVG Editor.

  11. Import the SVG to the html file, using <img> tag.
  12. Note that here are a couple of different ways to do embed SVG beyond <img> tag (refer to further reading section).

 

Make SVG flexible

Technically speaking, make a web element flexible means make it fit its container.
For images, we usually use:

The image is resized to fit its container, but it won’t be bigger than its original size.
 
However, images can be resized to always fit the container, even if that means be larger than its original size, using:

 
When we use SVG, we need to provide the 100% width to the container (i.e. the wrapper element):

Then, we have to remove width and height attributes from the <svg> tag while editing the SVG file, and set preserveAspectRatio attribute as follows to keep the logo proportions:

<svg> tag before:

<svg> tag after:

As a result, SVG will adjust as we move the browser downwards:

flexible-SVG

See it live on this CodePen (resize the result box).

Make SVG adaptive

When we think about responsive design, we think about media queries as well. For those who are not so much familiar with what media queries actually do, media queries are a CSS mechanism that allows you to connect certain conditions to style rules.
For instance, if we have this media query:

We say that if the max-width is 600px, apply this style rule. This max-width refers to the browser viewport width.
 
To make SVG adaptive, we’re going to use SVG + media queries combo.
We’re going to add media queries directly in the SVG file, so it looks as follows:

But in this case the max-width is not related to the viewport of the browser window, it instead it’s the width of the image itself.
This means we’re going to define different style rules depending on what size the image is.
 
When we apply this strategy to the London underground sign SVG, here is the final result:

adaptive-SVG

With this technique we were able to created 4 different logos variation, depending on its actual size. As it goes smaller, all the details are dropped out, but we can still see what this logo is about.

You can find the full SVG file on this CodePen (resize the result box).

We adjusted stroke-width and fill depending on the image size. We also turned off some elements, such as UNDERGROUND word, by changing the opacity to 0.
Giving names to different elements in Adobe Illustrator proved to be very useful at this point: makes it easier to target each SVG element for CSS rules.

Make SVG bulletproof

And because logos are content, not decoration… having a fallback is mandatory. We should always display a PNG image for browsers that don’t support SVG (refer to the website Can I use).

A quick and easy way to do this is using an error attribute in <img> tag:

The drawback is that the SVG will always represent one asset to be request, even though the browser doesn’t support SVG.
 
You can find more advanced techniques to fallback SVG in the article Mastering SVG use for a retina web, fallbacks with PNG script, from Todd Motto.
 
If you find a workable fallback for older browsers, SVG can be a very viable solution to have your logo responsive in your personal or company’s website.
 

Further reading

4 Comments

  1. Brian Florea January 24, 2015 at 5:47 am

    Very nice, thanks

    Reply
  2. Dave Berner November 11, 2015 at 10:01 am

    Great read. Noticed your last code sample had a slight typo.

    Should be src= not scr=

    cheers :)

    Reply
  3. SystemDZ January 5, 2016 at 4:01 am

    That’s Usefull
    Thanks a lot !

    Reply
  4. Tahoe February 11, 2016 at 7:10 pm

    This is a great article and I’m surprised that there isn’t more discussions on the advantages of using SVGs. After years of using a PNG, we’ve started using an SVG logo and it’s been a huge improvement (www.insuretahoe.com). SVGs look so much cleaner and it’s a reflection of your brand and the pride you take in portraying your business.

    Reply

Add a comment


Captcha * Time limit is exhausted. Please reload CAPTCHA.

Search