Advertisement
  1. Web Design
  2. HTML/CSS
  3. SVG

How to Create Responsive SVG Images

Scroll to top

In this tutorial I’ll explain how to create responsive SVG images; more specifically, I’ll explain how to create SVG logos, icons, and images, which change depending on the screen they’re displayed with.

Responsive SVG Images

Let’s begin with a demo. Here’s what we’re working towards (check out the full screen version for maximum effect):

If you resize the container (hat tip to Rick Strahl for his jQuery Resizable plugin) or the browser window, you’ll see the SVG respond.

What We’re Doing

Follow the video to learn how to: 

  • Create this logo in Adobe XD
  • Export the SVG assets
  • Clean up and optimize the SVG using SVGOMG.

Once you have your SVG (download the optimized assets here if you like) the following steps describe how you make a responsive logo.

1. Hand Code the SVG Element

We’re going to hand code the beginnings of this SVG, pasting in pieces of our logo assets wherever needed. Begin by opening an SVG element.

Note: we need to include these peculiar namespace strings so that we can use href attributes etc. further down the line.

1
<svg width="100%" height="100%" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
2
</svg>

2. Define Some Symbols

Nested inside our svg we need to define some symbols; each of our components will have its own symbol. Here’s what a symbol looks like, including, in this case, a viewBox of 60x60 (matching the dimensions of our icon).

1
<symbol id="icon" viewBox="0 0 60 60">
2
</symbol>

Now we paste the contents of our SVG icon within the symbol element, but only the path elements for the flag and the castle. We end up with:

1
<symbol id="icon" viewBox="0 0 60 60">
2
    
3
    <path id="flag" d="M37.4 21.2c0 .5-.3 1-.8 1.3l-5 2.2v4.8c0 .8-.6 1.4-1.4 1.4-.8 0-1.4-.6-1.4-1.4V18.6c0-.5.2-.9.6-1.2.4-.3.9-.3 1.3-.1l5.8 2.6c.5.3.8.7.9 1.3z" fill="#f26322"/>
4
    <path id="castle" d="M30.2 0c16.6.1 30 13.8 29.8 30.4.1 14-9.5 26.3-23.2 29.6h-.2c-1.2.1-2.1-.8-2.2-2v-7.3c0-2.5-1.9-4.5-4.4-4.5-2.5 0-4.5 2.1-4.5 4.6v7.3c-.1 1.2-1.2 2-2.4 1.9C9.7 56.6.2 44.7 0 30.8-.2 14 13.2.2 30 0h.2zm24.2 30.4v-.6C54.3 16.2 43.2 5.4 29.6 5.6S5.3 16.9 5.5 30.4c0 6.1 2.3 12 6.4 16.6.3.2.6.2.9.2.9 0 1.6-.8 1.5-1.6v.4l2.5-16.4c0-.6.5-1 1.1-1h4.4c.6 0 1.1.5 1.1 1.2v3.4h3.4v-3.4c0-.6.5-1.1 1.1-1.2h4.4c.6 0 1.1.5 1.1 1.2v3.4h3.4v-3.4c0-.6.5-1.1 1.1-1.2h4.4c.6 0 1 .4 1.1 1l2.5 16.5.3.6c.6.6 1.5.7 2.1.1 4-4.5 6.2-10.4 6.1-16.4z" fill="#334047"/>
5
    
6
</symbol>  

Repeat this process of creating a symbol for the “type” SVG too.

3. Define Symbols For the Logo Versions

We now need to define more symbols; one for each version of the logo we designed previously (the landscape, and the full version).

logo versions in Adobe XDlogo versions in Adobe XDlogo versions in Adobe XD

These symbols are created just like before, making sure that the viewBox is the correct size in each case. For example:

1
<symbol id="landscape" viewBox="0 0 274 75">
2
    
3
</symbol>

The main difference comes now: instead of pasting in the svg path contents directly, we’re going to place use elements referencing our previous symbol parts by their id, like so:

1
<symbol id="landscape" viewBox="0 0 274 75">
2
    <use xlink:href="#icon" x="" y="" width="" height="" />
3
</symbol>

We can get the x, y, width, and height values from Adobe XD (or wherever you designed the icons). Here you can see the position and dimension values for the text icon:

position and dimensionsposition and dimensionsposition and dimensions

You should end up with something like this–the two versions as symbols:

1
<symbol id="landscape" viewBox="0 0 274 75">
2
    <use xlink:href="#icon" x="0" y="0" width="75" height="75" />
3
    <use xlink:href="#type" x="94" y="12" width="180" height="50" />
4
</symbol>
5
6
<symbol id="full" viewBox="0 0 180 150">
7
    <use xlink:href="#icon" x="42" y="0" width="92" height="92" />
8
    <use xlink:href="#type" x="0" y="100" width="180" height="50" />
9
</symbol>

4. Reveal the Symbols in Your Browser

We have a whole bunch of code now, but if you open the SVG in your browser you won’t see anything. We’ve defined our symbols, but we still need to actually use them. Let’s directly place three use elements on our canvas; one for each version:

1
<use class="square" xlink:href="#icon" x="0" y="0" width="60" height="60" />
2
<use class="landscape" xlink:href="#landscape" x="0" y="0" width="274" height="75" />
3
<use class="full" xlink:href="#full" x="0" y="0" width="180" height="150" />

If you now open your SVG in a browser you’ll see all three logos positioned in the same place, stacked on top of one another. 

5. Display Icons Selectively Using Media Queries

We’ll use media queries to display each of our icons individually, depending on the screen size, and we can do that directly within our SVG file.

After the opening svg tag add some style tags:

1
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">>
2
<style>
3
    
4
</style>

Within them, add some media queries targeting the icons via the class names we just assigned them.

1
.landscape,
2
.full {
3
    visibility: hidden;
4
}
5
6
@media screen and (min-width: 500px) {
7
    .square {
8
        visibility: hidden;
9
    } 
10
    .landscape {
11
        visibility: visible;
12
    } 
13
}
14
15
@media screen and (min-width: 1200px) {
16
    .landscape{
17
        visibility: hidden;
18
    } 
19
    .full {
20
        visibility: visible;
21
    } 
22
}
  • Here we begin by hiding the landscape and full versions by default. 
  • Then at screens of at least 500px we hide the square and reveal the landscape
  • Then at screens of at least 1200px we keep the square hidden, hide the landscape, and reveal the full version.

Conclusion

And we’re done! Save the SVG file and you’ll be able to use it just like a normal image (with an img element). Don’t forget you can check out the full screen version to get a full impression of the responsive effect we’ve created.

Learn More

Related Links

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.