Специализация
Python Backend Developer
Java Backend Developer
Node.js Backend Developer
Golang Backend Developer
React Frontend Developer
Выберите навыки
React
JavaScript
Git
Redux
Webpack
Сложность
1-3
4-6
7-8
9-10
Рейтинг вопросов
1
2
3
4
5
Подпишись на React Developer в телеграм
Что такое SVG?
SVG (Scalable Vector Graphics) — это формат векторной графики, который позволяет отображать изображения, масштабируемые без потери качества. SVG используется для создания логотипов, иконок, диаграмм и других графических элементов, которые остаются четкими при любом разрешении. Элементы SVG можно анимировать и управлять ими через CSS и JavaScript.
Какие преимущества и недостатки использования SVG вместо растровой графики в веб-дизайне?
SVG имеет ряд преимуществ перед растровой графикой, таких как масштабируемость без потери качества, небольшой размер файлов и возможность применения стилей через CSS. Однако SVG может быть сложным для представления фотографий и иметь проблемы с производительностью при отображении сложных или детализированных изображений.
Как интегрировать SVG в CSS и использовать стили для управления его внешним видом?
SVG можно встраивать непосредственно в HTML-код или использовать как фоновое изображение в CSS. Встроенные SVG поддерживают стилизацию через обычные CSS-свойства, такие как fill и stroke, что позволяет легко менять их цвет и прозрачность.
Какие подходы используются для оптимизации SVG-анимаций и видео в вебе?
SVG и видео оптимизируют разными способами, но цель одна — снизить вес и нагрузку на браузер. Для SVG используют упрощение path, удаление лишних данных и CSS-анимации. Видео оптимизируют через кодеки, разрешение и стриминг. Часто SVG используют для простых анимаций, а видео — для сложных визуальных сцен. Выбор формата напрямую влияет на производительность.
Какие плюсы и минусы у многоэтапных анимаций (video → SVG → scale / transform)?
Многоэтапные анимации позволяют добиться вау-эффекта и гибкости, но усложняют реализацию и поддержку. Они увеличивают количество ассетов и логики синхронизации. Часто такие анимации тяжелее оптимизировать и тестировать. Их используют, когда один формат не даёт нужного результата. Важно понимать, оправдана ли такая сложность.
Какие способы оптимизации ассетов ты знаешь (видео, изображения, SVG)?
В чём особенности работы с SVG при отрисовке в Canvas?
Как Fabric.js работает с группами и слоями SVG?
Как можно восстановить иерархию групп SVG, если библиотека её «плоско» разворачивает?
Рейтинг:
5
Сложность:
6
Оптимизация ассетов заключается в уменьшении их размера и загрузке только тогда, когда они реально нужны. Для изображений используют сжатие и современные форматы, для видео — кодеки и снижение разрешения, для SVG — очистку и упрощение структуры. Также важны lazy loading и code splitting. Грамотная оптимизация ассетов напрямую улучшает Core Web Vitals. Это базовый навык для production-фронтенда.
Рейтинг:
3
Сложность:
5
SVG и Canvas используют разные модели рендеринга. SVG — декларативный и объектный, Canvas — императивный и пиксельный. При отрисовке SVG в Canvas теряется его структура и интерактивность. Поэтому SVG обычно сначала парсится, а затем «перерисовывается» в Canvas.
Рейтинг:
4
Сложность:
6
Fabric.js при импорте SVG преобразует элементы в объекты Canvas. Группы SVG могут быть объединены в Group, но иерархия часто упрощается. Слоёв в классическом смысле нет, порядок объектов определяется их позицией в массиве. Управление группами и порядком отрисовки выполняется программно.
Рейтинг:
5
Сложность:
7
Если библиотека «сплющивает» SVG, иерархию можно восстановить на этапе парсинга. Для этого используют исходный SVG DOM или метаданные элементов. Группы собираются вручную на основе id, data-* атрибутов или вложенности. Далее эта структура маппится на объекты Canvas.
Рейтинг:
1
Сложность:
3
Рейтинг:
2
Сложность:
5
Рейтинг:
2
Сложность:
4
Рейтинг:
4
Сложность:
6
Рейтинг:
3
Сложность:
7
