Logos That Change

SVG is code. And we can control this code via media queries right inside the image file!

Art Direction in SVG:

Imagine a logo: on desktop it has text, on mobile — only icon.

<svg ...>
  <style>
    @media (max-width: 400px) {
      .text-part { display: none; }
    }
  </style>
  <circle class="logo-part" ... />
  <text class="text-part" ... >BrendName</text>
</svg>

Advantages:

• One file: You don't need to load different logo versions.
• Perfect sharpness: SVG doesn't lose quality at any scale.