Как сверстать таймлайн с пунктирной линией и кружком из SVG

При создании лендингов и сайтов-портфолио часто возникает задача реализовать красивый таймлайн (хронологию событий). В макете дизайнер может использовать SVG-элементы: пунктирную линию и кружок. Разберём, как правильно интегрировать такую графику в вёрстку, чтобы таймлайн выглядел точно как в дизайне, был адаптивным и доступным.

Способы вставки SVG в таймлайн

Есть три основных подхода:

• Inline SVG (встроенный код) - самый гибкий вариант. Вы копируете код SVG прямо в HTML. Это позволяет управлять цветами, размерами и анимацией через CSS.
• Тег img с src - подходит, если SVG статичен и не требует стилизации. Минус - сложнее адаптировать под разные экраны.
• SVG как background-image - удобно для декоративных элементов. Можно использовать в псевдоэлементах ::before или ::after.

Для таймлайна с кружком и пунктиром чаще всего выбирают inline SVG, чтобы точно позиционировать кружок относительно текста.

Структура таймлайна

Типичная разметка состоит из контейнера, внутри которого находятся блоки событий. Каждый блок содержит точку (кружок) и текст. Пунктирная линия обычно соединяет все точки.

<div class='timeline'>
  <div class='timeline__item'>
    <div class='timeline__dot'>
      <svg>...</svg>
    </div>
    <div class='timeline__content'>
      <h3>2024</h3>
      <p>Запуск проекта</p>
    </div>
  </div>
</div>

Позиционирование SVG-линии и кружка

Чтобы линия проходила ровно по центру кружков, используйте CSS Flexbox или Grid. Кружок фиксированного размера (например, 20×20 px) выравнивается по центру колонки. Пунктирная линия рисуется либо как отдельный SVG-элемент между точками, либо как фон с повторяющимся паттерном.

Пример стилей для inline SVG:

.timeline__dot svg {
  width: 20px;
  height: 20px;
  display: block;
}
.timeline__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #333, #333 4px, transparent 4px, transparent 8px);
}

Адаптивность и ретина

SVG отлично масштабируется, поэтому проблем с ретиной не возникает. Главное - задать размеры через CSS, а не атрибуты width/height в SVG, если нужна гибкость. Для мобильных версий можно скрывать линию или менять её толщину.

Доступность (a11y)

Не забывайте добавлять атрибут role='img' и aria-label к декоративным SVG, если они несут смысловую нагрузку. Для чисто декоративных элементов используйте aria-hidden='true'.

Частые ошибки при вёрстке

• Использование растровых изображений вместо SVG - теряется чёткость.
• Жёсткая привязка к пикселям - на мобильных кружок может съехать.
• Игнорирование свойства viewBox - без него SVG может неправильно масштабироваться.

Правильно организованный таймлайн с SVG-линией и кружком не только повторяет макет, но и остаётся удобным для пользователя на любом устройстве.