SVG-графика для сайта

Name: SVG-графика для сайта
Price: 80 RUB
Availability: InStock

62 участника

АИ Автор Артём Исламов Школа Glo Academy

О чём курс

Вам нужен инструмент для создания лёгкой, масштабируемой и интерактивной графики, которая не теряет качество при любом разрешении экрана. Здесь вы разберете работу с SVG-форматом: от внедрения векторных объектов в структуру HTML до создания анимаций и сложных фильтров.

Внутри разбираются:

Техники встраивания графики через теги img, object, background-image и прямую вставку кода.
Управление атрибутами viewBox и preserveAspectRatio для корректного отображения.
Анимация векторов с помощью CSS, SMIL и JavaScript-библиотек Snap.js и SVG.js.
Создание кастомных прелоадеров и элементов интерфейса с использованием SVG-фильтров (размытие, изменение цветовой матрицы).

Курс подойдет веб-разработчикам, которые хотят улучшить визуальную составляющую интерфейсов. На выходе вы получите навыки создания анимированных SVG-компонентов, готовых к внедрению на сайт.

Программа обучения

Подготовительный урок
- Знакомство с курсом. Настройка рабочего пространства.
- Установка редактора кода
- Установка векторного редактора
Урок №1. Вставка SVG на страницу. Размеры SVG
- Способы встраивания SVG графики в html структуру. Манипулирование с размерами изображения.
- Как создавать svg-изображение, как размещать на странице
- Создаем и сохраняем svg для веба.
- Способы вставки SVG-изображения
  - Через тег
  - Как background-image
  - Через тег
  - Через тег
- Работа с SVG-документов
  - width, height
  - viewBox
  - preserveAspectRatio
Урок №2. Базовые фигуры SVG. Атрибуты и свойства
- Создание базовый фигур. Работа с атрибутами и свойствами.
- XML, редактирование svg прямо в html коде, базовый синтаксис.
- Настраиваем рабочее пространство
- Практика:
  - + подключение внешнего файла стилей
  - path
Урок №3. Анимирование векторного изображения
- Способы анимирования svg изображения, знакомство с библиотекой snap.js
- Анимирование с помощью css, js, SMIL.
- CSS анимирование
- SMIL
- JS (Snap.js)
Урок №4. SVG Preloader. Знакомство с библиотекой SVG.JS
- Создаем свой собственный прелоадер с нуля.
- Создаем SVG-изображение
- Вставляем на страницу.
- Подключаем библиотеку SVG.js
- Анимируем, используя библиотеку SVG.js
Урок №5. SVG Фильтры
- Фильтры svg и зачем их использовать.
- Поддержка браузерами
- Фильтр цветовой матрицы. Меняем цвет карточки товара.
- Фильтр размытия. Создаем элемент с частичным размытием
- Смешивание фильтров. Создание элемента интерфейса - меню.

Складчина создана 27 августа 2019 г. · описание обновлено 23 марта 2026 г.

Другие материалы автора 7

АИ Артём Исламов Все материалы

Практический курс по Yii2 112 ₽ 999 ₽ −89%И Интенсив по заработку для фрилансеров 80 ₽ 990 ₽ −92%

ИИнкубатор (на 1 месяц) 693 ₽ 2 490 ₽ −72%И Идеальное портфолио за 3 часа 80 ₽ 300 ₽ −73%

Вайбкодинг 990 ₽ 20 100 ₽ −95%В Верстка сайтов 124 ₽ 3 990 ₽ −97%

Нейропрезентации: Создавайте красивые презентации с помощью ИИ 3 099 ₽ 7 490 ₽ −59%

Отзывов пока нет. Будьте первым!

Почему полный курс стоит всего 80 ₽?

Влада Администратор сайта

Это не розничная цена — это ваш взнос в складчину. Мы собираем группу участников и делим между ними стоимость официального доступа: каждый платит только свою долю, а получает весь материал. Чем больше участников, тем меньше взнос. После того как сумма собрана, мы оформляем официальный доступ и раздаём материалы всем, кто участвовал.

Как получить курс?

Влада Администратор сайта

Нажмите кнопку «Получить доступ» на этой странице и следуйте инструкциям. Вас переведёт на форму оплаты — доступны все современные способы (карта, СБП, электронные кошельки). После оплаты на почту придёт письмо с доступом: материалы выдаются в разделе «Мои складчины» на нашем основном сайте skladchik.org. Учтите: в России skladchik.org открывается только через ускоритель интернета (VPN) — настроить его можно за пару минут по инструкции на skladchik-kak-voiti.online.

Можно ли скачать курс после покупки?

Влада Администратор сайта

Да, конечно. Все материалы — видео, PDF, дополнительные файлы — можно скачать к себе на компьютер и пользоваться ими сколько угодно, без ограничений по времени. Ссылки остаются активными в вашей библиотеке «Мои складчины».