Building a responsive image

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

Nils Binder
May 29, 2018 · 9 min read
Image for post
Image for post

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

The idea was born

The final result

Image for post
Image for post

Step by step (…uuh Baby ♬ )

1. Designing the logo

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post
Image for post
Image for post
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.

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app