How to Create Responsive SVG Images
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).
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:
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
andfull
versions by default. - Then at screens of at least 500px we hide the
square
and reveal thelandscape
. - Then at screens of at least 1200px we keep the
square
hidden, hide thelandscape
, 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
- How to Hand Code SVGKezz Bracey21 Apr 2023
- SVG Viewport and viewBox (For Complete Beginners)Kezz Bracey16 Jun 2022