Учебник Snap.svg

Введение
- Что такое Snap.svg
- История создания и развитие библиотеки
- Отличия от Raphael.js
- Преимущества использования SVG
- Когда стоит выбрать Snap.svg
- Установка и подключение
- Базовая структура проекта
- Совместимость с браузерами
Основы работы с Snap.svg
- Создание рабочей области
- Система координат и viewport
- Размеры и атрибуты холста
- Получение ссылки на существующий SVG
- Очистка и удаление элементов
- Метод paper.clear()
- Работа с группами элементов
Базовые фигуры
- Прямоугольники
- Скругленные углы
- Круги и эллипсы
- Линии
- Ломаные линии (polyline)
- Многоугольники (polygon)
- Текстовые элементы
- Изображения
Пути
- Синтаксис path
- Команды перемещения
- Прямые линии
- Кривые Безье
- Квадратичные кривые
- Дуги
- Замыкание контура
- Относительные и абсолютные координаты
- Методы для работы с путями
- Получение длины пути
- Точка на пути по длине
- Создание путей программно
Атрибуты и стилизация
- Установка атрибутов через attr()
- Заливка (fill)
- Обводка (stroke)
- Толщина линии
- Типы пунктира
- Прозрачность (opacity)
- Граничные точки линий
- Соединение линий
- Порядок отрисовки элементов
- Классы и идентификаторы
- Встроенные стили vs внешний CSS
Трансформации
- Перемещение (translate)
- Масштабирование (scale)
- Поворот (rotate)
- Наклон (skew)
- Матрицы трансформации
- Цепочка трансформаций
- Глобальные и локальные трансформации
- Получение текущей матрицы
- Применение пользовательских матриц
- Сброс трансформаций
Градиенты и заливки
- Линейные градиенты
- Радиальные градиенты
- Цветовые остановки
- Направление градиента
- Единицы измерения для градиентов
- Паттерны (patterns)
- Создание собственных паттернов
- Масштабирование паттернов
Маски и обтравочные контуры
- Создание масок
- Применение масок к элементам
- Clipping paths
- Разница между масками и clipping
- Инвертированные маски
- Группировка с масками
Фильтры
- Размытие (blur)
- Тени (drop shadow)
- Цветовые матрицы
- Смещение (offset)
- Композитинг
- Морфологические операции
- Освещение
- Turbolence и шумы
- Цепочки фильтров
- Оптимизация производительности фильтров
Анимация
- Метод animate()
- Параметры анимации
- Функции плавности (easing)
- Встроенные easing-функции
- Пользовательские функции плавности
- Задержка анимации
- Последовательные анимации
- Параллельные анимации
- Бесконечная анимация
- Остановка анимации
- Анимация трансформаций
- Анимация путей
- Колбэки и события анимации
События
- Обработчики событий мыши
- Click и dblclick
- Mousedown, mouseup, mousemove
- Mouseenter и mouseleave
- Mouseover и mouseout
- Обработчики касаний
- Drag and drop
- Встроенная поддержка перетаскивания
- Пользовательская логика drag
- Делегирование событий
- Удаление обработчиков
- Всплытие событий
- Получение координат события
Работа с элементами
- Выборка элементов
- Селекторы
- Метод select()
- Метод selectAll()
- Обход дерева элементов
- Родительские элементы
- Дочерние элементы
- Соседние элементы
- Клонирование элементов
- Вставка элементов
- Append и prepend
- Позиционирование в DOM
Группы и структура
- Создание групп (g)
- Вложенные группы
- Трансформации групп
- Атрибуты групп
- Применение стилей к группе
- Использование defs
- Переиспользование элементов
- Symbol и use
- Область видимости определений
Текст
- Создание текстовых элементов
- Форматирование текста
- Многострочный текст (tspan)
- Выравнивание текста
- Текст вдоль пути (textPath)
- Шрифты и начертание
- Размер и интервалы
- Декорирование текста
- Измерение текста
- Границы текстового блока
Работа с данными
- Привязка данных к элементам
- Data-атрибуты
- Динамическое создание элементов из данных
- Обновление элементов при изменении данных
- Удаление элементов
- Паттерн enter-update-exit
Интерактивность
- Всплывающие подсказки
- Подсветка элементов
- Изменение курсора
- Интерактивные графики
- Zoom и pan
- Границы масштабирования
- Ограничение перемещения
- Реакция на изменение размера окна
Маркеры
- Создание маркеров
- Стрелки на концах линий
- Пользовательские маркеры
- Размещение маркеров
- Ориентация маркеров
- Масштабирование маркеров
Импорт и экспорт
- Загрузка внешних SVG
- Парсинг SVG из строки
- Метод Snap.parse()
- Вставка загруженного SVG
- Экспорт в строку
- Метод toString()
- Получение outer и inner SVG
- Сохранение SVG в файл
Расширенная работа с путями
- Объединение путей
- Пересечение путей
- Вычитание путей
- Определение точек пересечения
- Упрощение сложных путей
- Конвертация фигур в пути
- Разбиение пути на сегменты
Производительность
- Оптимизация отрисовки
- Уменьшение количества перерисовок
- Работа с большим количеством элементов
- Использование requestAnimationFrame
- Отложенная отрисовка
- Кэширование элементов
- Профилирование и отладка
Адаптивность и масштабируемость
- Responsive SVG
- Сохранение пропорций
- ViewBox и preserveAspectRatio
- Адаптация под разные экраны
- Масштабирование элементов
- Перерасчет координат
Интеграция с фреймворками
- Использование с React
- Использование с Vue
- Использование с Angular
- Управление жизненным циклом
- Очистка ресурсов
- Реактивность и обновления
Расширение функциональности
- Создание плагинов
- Расширение прототипов
- Добавление пользовательских методов
- Создание переиспользуемых компонентов
- Обертки и хелперы
Отладка и тестирование
- Инспекция SVG в браузере
- Типичные ошибки
- Проблемы с координатами
- Проблемы с трансформациями
- Отладка анимаций
- Тестирование SVG-компонентов
- Визуальное тестирование
Практические задачи
- Построение графиков
- Линейные графики
- Столбчатые диаграммы
- Круговые диаграммы
- Создание иконок
- Интерактивные карты
- Визуализация данных
- Создание игр на SVG
- Анимированные инфографики
- Схемы и диаграммы связей
Библиотеки и инструменты
- Редакторы SVG
- Inkscape
- Adobe Illustrator
- Figma и экспорт SVG
- Оптимизация SVG
- SVGO
- Конвертация форматов
- Генераторы SVG
Справочник API
- Конструктор Snap
- Методы paper
- Методы Element
- Методы Set
- Методы Matrix
- Статические методы Snap
- Утилитарные функции
- События и их параметры