Вёрстка векторного логотипа с использованием SVG

Задача — сверстать логотип так, чтобы:

  • Он был векторным.
  • Менял цвет при наведении.
  • Делал это плавно.
  • Умещался в одном файле.
  • Работал во всех браузерах (с откатом на PNG в случае необходимости).

Очень просто это можно сделать с помощью SVG-стека. Используя псевдокласс :target в SVG, можно хранить в одном файле несколько картинок. Например, при подключении logo.svg#normal мы увидим обычный логотип, а при подключении logo.svg#hover — подсвеченный.

Но пока подключение таких картинок фоном в CSS работает только в Файрфоксе. Зато через тег object — везде. (Лучше было бы использовать тег img, но это не работет в вебките). А значит мы можем сделать так:

<div class="logo">
  <object data="logo.svg#normal" type="image/svg+xml" class="logo__image"></object>
  <a href="/" class="logo__link">Oleg Breslavtsev</a>
</div>

И вот так:

.logo,
.logo__link,
.logo__image {
  display: block;
  width: 260px;
  height: 48px;
}
.logo {
  position: relative;
}
.logo__link,
.logo__image {
  position: absolute;
  left: 0;
  top: 0;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.logo__link {
  background: url(logo.svg) no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-size: auto;
  opacity: 0;
}
.logo:hover .logo__link {
  opacity: 1;
}
.logo:hover .logo__image {
  opacity: 0;
}
.no-svg .logo__image {
  display: none;
}
.no-svg .logo__link {
  opacity: 1;
  background: url(logo.png);
}

Теперь у нас только обычный вариант логотипа использует псевдокласс :target, а значит подсвеченный мы можем подключить CSS-фоном. Для старых браузеров используется PNG, класс no-svg добавляет Modernizr. Теперь остаётся подготовить SVG-файл:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 48">
  <g id="normal">
    <!-- собственно, логотип -->
  </g>
  <style>
  g {
    fill:#c399cc;
    }
  g:target {
    fill:#222;
    }
  </style>
</svg>

Получается вот так:

P. S. Горячо рекомендую статью Вадима Макеева «Непростая простая кнопка», которая и сподвигла меня на эксперименты с логотипом.

Вы можете улучшить этот пост, отредактировав его на Гитхабе.

Обо мне

Я живу в Берлине и работаю фронтенд-разработчиком в Вэйфейре, а в свободное время фотографирую, глажу своих собак и пью кофе.

Читайте обо мне на моём сайте и подписывайтесь на мой блог о фотографии и твитер.