SVG Animation & Interactivity

(Анимация и интерактивность)

Поздравляю, мы добрались до финала! Статичная векторная графика — это прекрасно, но SVG по-настоящему раскрывается, когда начинает двигаться и реагировать на действия пользователя.

В отличие от растровых картинок (JPEG/PNG), SVG — это часть HTML-документа (DOM). Это значит, что мы можем управлять каждым кусочком иллюстрации отдельно.

1. Три способа анимации SVG

A. CSS Анимации (Рекомендуемый для старта)

Так как теги SVG (<rect>, <path>, <circle>) являются валидными элементами DOM, к ним применяются стандартные CSS-классы, псевдоклассы (:hover) и @keyframes.

Плюсы: Просто, знакомо верстальщикам, аппаратное ускорение.
Идеально для: Смены цвета при наведении, простых вращений, появления элементов.

B. SMIL (Native SVG Animation)

Это анимация, прописанная прямо внутри SVG-кода с помощью тегов <animate>.

Плюсы: Работает даже если вставить картинку через <img> (CSS анимации в таком случае часто не работают из-за изоляции). Картинка становится самодостаточной "мини-программой".
Минусы: Синтаксис отличается от всего остального в вебе.

C. JavaScript (GSAP, Anime.js)

Идеально для: Сложных сценарных анимаций (морфинг фигур, физика, последовательности). Библиотека GSAP — золотой стандарт для SVG-анимации в продакшене.

2. Анимация через CSS: Пример

Давайте заставим сердце биться.

<svg width="100" height="100" viewBox="0 0 100 100">
  <style>
    .heart {
      fill: crimson;
      transform-origin: center; /* Важно для вращения/зума от центра */
      animation: beat 1s infinite alternate;
    }
    
    @keyframes beat {
      to { transform: scale(1.2); }
    }
  </style>
  
  <path class="heart" d="M50 30 L60 10 ... (код сердца)" />
</svg>

3. Магия SVG: Анимация отрисовки контура

Вы наверняка видели эффект, когда линия рисуется сама собой, "как ручкой". Это уникальная фишка SVG, основанная на свойствах обводки (stroke) из Step 4.

Механика фокуса:

1. stroke-dasharray: Делаем линию пунктирной. Размер штриха задаем равным всей длине линии. Получается один длинный штрих на всю длину.
2. stroke-dashoffset: Сдвигаем этот штрих так, чтобы он ушел за пределы видимости (прячем линию).
3. Анимация: Плавно меняем stroke-dashoffset до 0.

<svg width="200" height="100">
  <style>
    .draw-me {
      fill: none;
      stroke: black;
      stroke-width: 2;
      /* Допустим, длина линии 300px (можно узнать через JS: path.getTotalLength()) */
      stroke-dasharray: 300;
      stroke-dashoffset: 300; /* Линия полностью скрыта */
      animation: draw infinite 2s forwards ease-in-out;
    }

    @keyframes draw {
      to { stroke-dashoffset: 0; }
    }
  </style>
  
  <path class="draw-me" d="M10 50 C 50 10, 150 90, 190 50" />
</svg>

4. SMIL: Анимация без CSS

Если вы хотите, чтобы иконка крутилась, даже когда вы сохраните её как файл icon.svg и откроете в просмотрщике картинок на компьютере, используйте SMIL.

Тег <animate> вкладывается внутрь фигуры, которую нужно оживить.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" fill="blue">
    <!-- Меняем радиус (r) от 20 до 40 и обратно -->
    <animate attributeName="r" 
             values="20; 40; 20" 
             dur="2s" 
             repeatCount="indefinite" />
  </circle>
</svg>

5. Интерактивность: Ссылки и JS

SVG поддерживает ссылки так же, как HTML. Это невероятно удобно для создания интерактивных карт или меню нестандартной формы.

Ссылки <a>

Оборачиваем любую фигуру или группу в тег <a>.

<svg viewBox="0 0 200 100">
  <a href="https://google.com" target="_blank">
    <rect x="10" y="10" width="80" height="80" fill="blue"/>
    <text x="50" y="50" fill="white" text-anchor="middle">Click Me</text>
  </a>
</svg>

JavaScript События

Так как у SVG элементов есть ID и классы, мы можем вешать на них прослушиватели событий.

<svg width="100" height="100">
  <circle id="myBtn" cx="50" cy="50" r="30" fill="green" />
</svg>

<script>
  const btn = document.getElementById('myBtn');
  
  btn.addEventListener('click', () => {
    alert('Вы нажали на круг!');
    btn.setAttribute('fill', 'red'); // Меняем атрибут через JS
  });
</script>

Заключение курса

Мы прошли путь от рисования простых квадратов до манипуляции кривыми Безье, группировки систем иконок и анимации. И помните что в большинстве случаев вы не будете создавать сложные картинки или анимации вручную, но знать особенности работы очень полезно. Вы сможете пройти обучающие видео по созданию SVG графике на youtube когда она станет доступной

Что запомнить:

• SVG — это код. Его можно читать, писать и менять в реальном времени.
• viewBox — ваше окно в мир координат.
• Оптимизация (через <defs>, <use> и SVGO) — залог быстрой загрузки.
• Векторная графика — это не только картинки, это мощный инструмент интерфейса.