Менеджер SVG-спрайтів

SVG Sprite Manager: онлайн-менеджер SVG-спрайтів

SVG Sprite Manager допомагає швидко привести SVG-спрайт до робочого стану без бекенду, збірки чи додаткових інструментів. Імпортуйте готовий спрайт або набір окремих іконок, перегляньте всі symbol-елементи у сітці, відкрийте будь-яку іконку в редакторі й одразу завантажте оновлений sprite.svg.

Інструмент створений для щоденної роботи з іконками у frontend- і WordPress-проєктах: коли треба додати новий SVG, перейменувати ID, підігнати viewBox під реальні межі графіки, перевести заливки у currentColor або вручну відредагувати SVG-код — усе це у візуальному інтерфейсі, прямо у браузері.

Що вміє інструмент

• імпорт SVG-спрайтів і окремих SVG-файлів з автоматичним визначенням типу;
• перегляд усіх symbol-іконок у сітці з пошуком, сортуванням і регулюванням кількості колонок;
• редагування ID, viewBox і SVG-коду в редакторі з навігацією між іконками;
• підгонка viewBox під реальні межі графіки (fit) та переведення заливок у currentColor;
• мультивибір, drag-and-drop сортування, видалення та мініфікація перед експортом;
• експорт усього sprite.svg або окремих іконок; сесія зберігається у localStorage.

Коли потрібен менеджер SVG-спрайтів

Такий тул корисний, коли спрайт часто змінюється: додаються нові іконки, частина назв потребує нормалізації, а окремі SVG мають зайві відступи або різний viewBox. Замість ручного редагування XML можна зробити все у візуальному інтерфейсі й одразу отримати готовий sprite.svg.

Як це працює

Імпорт, редагування, мініфікація та експорт виконуються повністю у браузері — SVG-файли нікуди не надсилаються. Підгонка viewBox рахує реальні межі графіки через getBBox з урахуванням товщини обведення, а внутрішні id іконок автоматично отримують префікс, щоб не конфліктувати між собою у спільному спрайті.

Питання про SVG Sprite Manager

Як імпортувати SVG-спрайт?
Натисніть «Завантажити» або перетягніть SVG-файл у вікно. Інструмент сам визначить, це спрайт чи окрема іконка, покаже symbol-елементи у сітці й збере поточний sprite.svg.

Чи можна завантажувати окремі SVG-іконки?
Так. Окремий SVG перетворюється на symbol у спрайті, може бути автоматично підігнаний під межі графіки, мініфікований і збережений разом з іншими іконками.

Чи відправляються файли на сервер?
Ні. Уся обробка відбувається у браузері, а стан сесії зберігається у localStorage на вашому пристрої.

Це ще один інструмент розділу — усі утиліти зібрані на сторінці онлайн-інструментів.