SVG и работа с ним через JS

Что такое SVG и зачем он нужен? 🎨

SVG (Scalable Vector Graphics) — это формат векторной графики, основанный на XML. В отличие от растровых изображений (JPEG, PNG), SVG можно масштабировать без потери качества, анимации и интерактивности — его родная стихия!

Где применяется?

• Интерактивные карты
• Диаграммы и графики
• Анимированные иконки
• Логотипы
• Игровые элементы

💡 SVG — это не просто картинка, а полноценный DOM-элемент, которым можно управлять через JavaScript, как обычным HTML-тегом!

Основы SVG: рисуем первую фигуру ✏️

Любой SVG-элемент начинается с тега <svg>. Внутри него размещаются фигуры — круги, прямоугольники, линии и другие.

<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="tomato" />
</svg>

Разберём атрибуты:

• width/height — физические размеры SVG-холста
• viewBox — система координат (x, y, ширина, высота)
• cx/cy — координаты центра круга
• r — радиус
• fill — цвет заливки

Подключаем JavaScript: оживляем графику 🏗️

1. Получаем доступ к SVG-элементу

Есть два способа:

• Через document.querySelector()
• Через getElementById()

const svgElement = document.querySelector('svg');
const circle = document.querySelector('circle');

2. Меняем свойства динамически

Пример: меняем цвет круга при клике.

circle.addEventListener('click', () => {
  circle.setAttribute('fill', 'skyblue');
});

3. Создаём элементы через JS

Добавим прямоугольник программно:

const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '80');
rect.setAttribute('height', '30');
rect.setAttribute('fill', 'limegreen');

svgElement.appendChild(rect);

🔥 Важно! Для SVG-элементов используем createElementNS с указанием пространства имён, а не обычный createElement.

Анимации и трансформации 🌀

1. CSS-анимации

SVG прекрасно работает с CSS:

circle {
  transition: fill 0.3s ease;
}

circle:hover {
  fill: gold;
}

2. SMIL-анимации (встроенные)

Пример анимации движения:

<circle cx="50" cy="50" r="10" fill="purple">
  <animate 
    attributeName="cx"
    from="50" 
    to="150" 
    dur="2s"
    repeatCount="indefinite" />
</circle>

3. GSAP — мощная библиотека анимаций

Установка:

npm install gsap

Пример:

gsap.to('circle', {
  duration: 1,
  x: 100,
  y: 50,
  fill: 'orange'
});

Работа с путями (path) 🛣️

Элемент <path> — самый мощный инструмент SVG. Он позволяет рисовать сложные фигуры с помощью команд:

• M — переместить (Move To)
• L — линия (Line To)
• C — кривая Безье (Curve To)
• Z — закрыть путь

Пример:

<path d="M10 10 L90 10 L50 90 Z" fill="navy" />

🧩 Для сложных путей лучше использовать векторные редакторы (Figma, Illustrator), а затем экспортировать код.

Интерактивность: обработка событий 🖱️

SVG-элементы поддерживают стандартные DOM-события:

const path = document.querySelector('path');

path.addEventListener('mouseenter', () => {
  console.log('Мышка над фигурой!');
});

path.addEventListener('click', (e) => {
  console.log(`Кликнули в точке: ${e.clientX}, ${e.clientY}`);
});

Оптимизация производительности ⚡

1. Минимизируйте количество узлов — сложные SVG тормозят рендеринг.
2. Используйте спрайты — объединяйте иконки в один файл.
3. Применяйте CSS — стилизация через классы эффективнее инлайновых атрибутов.
4. Рассмотрите Canvas — для очень сложной динамической графики.

Практический пример: создаём интерактивную карту 🗺️

1. Разметка:

<svg id="map" width="800" height="600" viewBox="0 0 800 600">
  <path id="country1" d="..." fill="#a5d8ff" />
  <path id="country2" d="..." fill="#74c0fc" />
</svg>

2. JavaScript:

document.querySelectorAll('path').forEach(country => {
  country.addEventListener('mouseenter', () => {
    country.style.fill = '#ff8787';
    country.style.transition = 'fill 0.3s';
  });

  country.addEventListener('mouseleave', () => {
    country.style.fill = '#74c0fc';
  });
});

Полезные библиотеки и инструменты 🧰

Теперь ты вооружён знаниями, чтобы создавать потрясающую векторную графику! Экспериментируй, комбинируй техники и покажи нам свои творения. 😊