Руководства и статьи

SVG против PNG: Какой Формат Выбрать?

Используйте SVG для иконок сайтов, логотипов и интерфейсов, так как векторные контуры остаются четкими на любом экране. Используйте PNG, когда нужно растровое изображение фиксированного размера.

Как Анимировать SVG-Иконки с Помощью CSS

Добавьте CSS-класс к встроенному тегу SVG и используйте ключевые кадры transform или stroke-dasharray. Наш живой редактор создает плавные анимации 60fps без JavaScript.

Как Редактировать SVG в Figma или Браузере

Скопируйте код SVG с сайта SVG Nexus и вставьте его прямо на холст Figma или Illustrator, либо откройте иконку в нашей Векторной Студии в браузере.

Как Использовать SVG в React, Next.js и Vue

Выберите вкладку React TSX или Vue 3 на странице любой иконки, чтобы скопировать готовый компонент с поддержкой currentColor и Tailwind CSS.

Встроенный SVG против тега картинки

Используйте встроенный SVG или компоненты, когда нужны смена цвета при наведении и CSS анимация. Используйте тег картинки с шириной, высотой и alt, если хотите попасть в поиск изображений.

Убираем совпадения идентификаторов градиентов

Цветные наборы часто повторяют внутренние идентификаторы вроде paint0_linear. Если два значка на странице делят один идентификатор, рисуется неверный градиент. SVG Nexus делает область каждого идентификатора своей для значка.

Доступные иконки и зеркало для RTL

Скрывайте декоративные значки через aria-hidden и focusable false. Давайте кнопкам без текста понятный aria-label. Отражайте стрелки по горизонтали для языков справа налево.

Очистка чужих SVG файлов

SVG это формат XML, поэтому недоверенный файл может содержать скрипты и обработчики событий. Удаляйте теги script и отдавайте файлы с строгой политикой безопасности и заголовком nosniff.