Реклама мешает? Идти Без рекламы Сегодня 

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

РазработчикМатематика

Реклама · УДАЛИТЬ?

ВХОД

ВЫХОД

Клиентская сторона

Загрузите файлы SVG и нажмите Создать, чтобы создать спрайт-шиту.

Лист спрайтов в формате SVG

Снятие образца типа

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

Встроенный фрагмент HTML

Реклама · УДАЛИТЬ?

Гид

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

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

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

Перенесите или перетащите свои файлы с иконками в формате SVG на зону загрузки, щелкнув для просмотра содержимого. Каждый SVG разбирается и отображается в сетке предварительного просмотра вместе с автоматически генерируемым идентификатором символа. Редактируйте любой идентификатор символа, нажав на него. Переключите опции оптимизации для удаления заполнений/контуров или удаления метаданных. Нажмите "сгенерировать", чтобы объединить все иконки в один спрайт-ситт. Загрузите комбинированный файл SVG или скопируйте встроенный HTML-код. Используйте сгенерированные фрагменты кода для ссылки на отдельные иконки в вашем проекте.

Возможности

Перенос файлов через drag-and-drop Загрузите несколько файлов формата SVG одновременно с помощью перетаскивания или выбирая файл
Грид просмотра иконок Посмотрите все загруженные иконки в адаптивной сетке с метками
Идентификаторы символов для редактирования – Автоматически сгенерировано из имен файлов, нажмите для настройки перед объединением
Листовая генерация картинок – Объединяет SVG-файлы в один файл, сохраняя элементы-символы и свойство `viewBox`.
Примеры кода Получите готовый код для внешнего ссылочного использования, встроенного ссылочного метода и методов фона CSS.
Удаление заливки/контура Удалите атрибуты заполнения и контура для иконок, которые вы хотите окрасить с помощью CSS.
Оптимизация Удалите комментарии, метаданные и пространства имен редактора для минимизации размера файла.
Сравнение размеров файлов Посмотрите размеры отдельных и комбинированных файлов и экономия места

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

Что такое спрайт-ситовый лист SVG и почему стоит его использовать?

Элемент SVG-спрайта — это один файл SVG, содержащий несколько иконок как элементы-символы. Вместо загрузки 20 отдельных файлов SVG (20 HTTP-запросов) вы загружаете один спрайтовый файл и ссылаетесь на индивидуальные иконки с помощью элемента ``. Это снижает количество HTTP-запросов, улучшает скорость загрузки страницы и упрощает управление иконами. Каждый символ сохраняет свой собственный `viewBox`, что позволяет иконам рендериться в правильных пропорциях. Спрайты особенно ценны для сайтов с множеством иконок на разных страницах.
Что отличает внешние и встроенные ссылки на спрайты?

Внешние ссылки используют отдельный спрайтовый файл SVG и ссылаются на иконки через href, указывая путь к файлу плюс идентификатор символа, например sprite.svg#icon-name. Браузер загружает спрайтовый файл один раз и кэширует его. Встроенная ссылка встраивает весь спрайтовый SVG напрямую в страницу HTML (обычно скрытый) и ссылается на иконки только через хэш и идентификатор. Встроенные спрайты работают сразу без дополнительного запроса файлов, но увеличивают размер HTML и не могут кэшироваться отдельно. Внешние спрайты лучше подходят для многостраничных сайтов, а встроенные — для одностраничных приложений.
Почему бы мне удалить заполнения и контуры из иконок в формате SVG?

Удаление атрибутов наполнения и контура (fill и stroke) из иконок SVG позволяет полностью управлять их цветом с помощью CSS. Это необходимо для систем иконок, где иконки должны менять цвет при наведении мыши, в темном режиме или в разных контекстах пользовательского интерфейса. Без удаления исходных атрибутов изменения цвета через CSS могут не работать, так как inline-атрибуты SVG имеют большую специфичность по сравнению с правилами CSS. Опция удаления наполнения/контура в данном инструменте избавляет от этих атрибутов, чтобы вы могли задавать цвет с помощью свойств fill и stroke в CSS или ключевого слова currentColor.
Как генерируются идентификаторы символов из имен файлов?

Инструмент преобразует каждый имя файла в безопасный для URL идентификатор символа, удаляя расширение .svg, переводя в нижний регистр, заменяя пробелы и специальные символы на тире и удаляя последовательные тире. Например, My Icon (v2).svg становится my-icon-v2. Вы можете редактировать любой сгенерированный идентификатор перед их объединением. Каждый идентификатор должен быть уникальным внутри спрайт-шита, так как он служит ссылкой при использовании иконки. Значимые идентификаторы, такие как icon-arrow-right или icon-close, делают код более читаемым по сравнению с обобщёнными именами.