Building a responsive image

How to create a logo that responds to its own aspect ratio

Nils Binder
May 29, 2018 · 9 min read

There are two things I learned that really got me excited.

The idea was born

The final result


Step by step (…uuh Baby ♬ )

1. Designing the logo

Logo Variations: 1. Skyscraper — 2. Portrait — 3. Square — 4. Landscape

2. Setting up the SVG file

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

3. Exporting SVG-symbols

Place all symbols on seperate artboards before you export them as SVG
(All gists are saved as HTML-files and not as SVG If it was saved as SVG, you’d sadly only see the rendered image. 😕)

4. Building the symbols

<svg width=”100%” height=”100%” xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">
<symbol id=”ix” viewBox=”0 0 160 160">
<!-- Insert Symbol Content here -->
</symbol>
<symbol id=”typography” viewBox=”0 0 144 16">
<!-- Insert Symbol Content here -->
</symbol>
</svg>

5. Using our symbols

<use xlink:href=”#ix” x=”0" y=”0" width=”100" height=”100”/>
<use xlink:href=”#ix” x=”5%" y=”5%" width=”90%" height=”90%”/>

6. Combining symbols inside a new symbol

Portrait-Version: Purple: viewBox — Red: Position — Turquoise: Width and Height
<symbol id=”portrait” viewBox=”0 0 160 180">
<use xlink:href=”#ix” x=”40" y=”32" width=”80" height=”80"/>
<use xlink:href=”#typo” x=”3" y=”130" width=”154" height=”16"/></symbol>
<use xlink:href=”#portrait” x=”5%" y=”5%" width=”90%" height=”90%”/>

7. Hide and show

<use class="square" xlink:href=”#ix” x=”5%” y=”5%” width=”90%” height=”90%”/>
<use class="portrait" xlink:href=”#portrait” x=”5%” y=”5%” width=”90%” height=”90%”/>
<style>  .square { visibility: hidden; }
.portrait { visibility: visible; }
@media (min-aspect-ratio: 1/1) {
.square { visibility: visible; }
.portrait { visibility: hidden; }
}
</style>
<style>  .square,
.landscape { visibility: hidden; }
.portrait { visibility: visible; }
@media (min-aspect-ratio: 1/1) {
.portrait,
.landscape { visibility: hidden; }
.square { visibility: visible; }
}
@media (min-aspect-ratio: 2/1) {
.portrait,
.square { visibility: hidden; }
.landscape { visibility: visible; }
}
</style>

8. A little bit of transformation

<symbol id=”skyscraper” viewBox=”0 0 64 328">  <use xlink:href=”#ix” x=”0" y=”264" width=”64" height=”64"/>
<use xlink:href=”#typography” x=”-90" y=”109" width=”246" height=”27" transform=”rotate(-90 32 123)”/>
</symbol>

Over to you: I hope this tutorial has been useful and I’d certainly love to see some of your results.

If you’ve enjoyed this piece and would like to see more, you might want to check out our Website, follow us on Twitter or subscribe to our Newsletter.

9elements

We craft digital products and services.

Thanks to Wojtek Gorecki, Anja Hülsmans, Mirko Budszuhn, and Felix Rau.

Nils Binder

Written by

Hey, I'm a UI/UX designer and part-time coder @9elements. Also, I'm an origami enthusiast spending hours folding paper.

9elements

9elements

We craft digital products and services.