Генератор SVG-спрайтов

Генератор SVG-спрайтов

📁 Перетащите SVG-файлы сюда или

Загрузите SVG-иконки

Имя спрайта: Размер иконок (px): Цвет иконок:

Удалить ненужные атрибуты

Минифицировать SVG

CSS код для использования:

/* CSS код появится здесь после загрузки иконок */

SVG код спрайта:

/* SVG код появится здесь после загрузки иконок */

Генератор SVG-спрайтов онлайн

Добро пожаловать в наш Генератор SVG-спрайтов! Этот инструмент позволяет объединять несколько SVG-иконок в один файл-спрайт с оптимизацией и автоматической генерацией CSS кода.

Что такое SVG-спрайт?

SVG-спрайт — это техника объединения нескольких SVG-изображений в один файл, что уменьшает количество HTTP-запросов и ускоряет загрузку вашего сайта. Каждая иконка в спрайте доступна по уникальному идентификатору.

Преимущества использования

Ускорение загрузки страниц: Один файл вместо множества отдельных иконок
Автоматическая оптимизация: Удаление лишних атрибутов и метаданных
Гибкие настройки: Изменение размера и цвета всех иконок
Простота использования: Генерация готового CSS кода
Адаптивность: SVG-иконки идеально масштабируются на любых экранах

Как использовать

Пошаговая инструкция:

1. Загрузите SVG-файлы, перетащив их в область загрузки или выбрав через диалог

2. Настройте параметры спрайта: имя, размер и цвет иконок

3. Выберите опции оптимизации для уменьшения размера файла

4. Скопируйте сгенерированный CSS код или экспортируйте спрайт в файл

5. Используйте иконки в HTML с помощью тега <svg><use xlink:href="sprite.svg#icon-id"></use></svg>

Пример использования в HTML

<svg width="24" height="24">
  <use xlink:href="my-sprite.svg#icon-home"></use>
</svg>
<svg width="24" height="24">
  <use xlink:href="my-sprite.svg#icon-user"></use>
</svg>

Попробуйте сейчас!

Начните использовать наш генератор SVG-спрайтов для оптимизации вашего веб-проекта!