Редактирането на иконки може да изглежда лесно, но дори малка промяна, например замяната на една буква, понякога се превръща в неочаквано предизвикателство. Тази история е предназначена и за читатели, които не са дизайнери или разработчици. Тя показва как комплект иконки може да бъде адаптиран с безплатни инструменти, търпение и малко изобретателност.
Защо го направих
За един мой проект трябваше да редактирам комплект SVG иконки, като заменя буквата N с E. Задачата не се оказа толкова проста, защото оригиналното N беше изчертано като векторен контур (path), а не като текст. Освен това SVG файлът използваше UTF-16 вместо UTF-8. Не исках да инсталирам цяла програма за векторна графика само за пет иконки, затова комбинирах два онлайн редактора с малко ръчна работа в обикновен текстов редактор.
Стъпка 1: Method Draw
Започнах с Method Draw (https://editor.method.ac), където отворих оригиналната иконка с N. Изчертах буквата E с инструментите на редактора, но получената форма имаше незапълнени участъци. Добавих правоъгълници, за да направя буквата плътна, което създаде няколко отделни обекта. След това копирах генерирания SVG код, вече кодиран като UTF-8.
Стъпка 2: Boxy SVG
След това преминах към BoxySVG (https://boxy-svg.com/app). Отворих отново оригиналната иконка и замених стария код със SVG кода от първия редактор. Премахнах старото N и временната буква E, която използвах за ориентир. Остана новото E - със закръглена форма и подходяща дебелина, но все още изградено от множество обекти.
Стъпка 3: Обединяване в една пътека
Маркирах всички обекти, които образуваха буквата E, и ги групирах. Това създаде проблем, защото BoxySVG не ми позволи по-късно да разгрупирам резултата. Копирах отново SVG кода, отворих го в обикновен текстов редактор, например Notepad, и ръчно премахнах таговете <g>. След това подредих кода и отстраних излишните стилове.
Стъпка 4: Класове вместо стилове
За да сменям лесно цветовете на иконките, премахнах inline стиловете и използвах съществуващите CSS класове от оригиналната иконка. Така промяната на цвета изисква редакция само на две стойности и поддръжката става значително по-лесна.
Резултат
Запазих иконките в SVG формат, създадох пет цветови варианта и ги прегледах в браузър. Резултатът изглеждаше правилно и иконките вече се използват.
ChatGPT ми предложи списък с онлайн редактори, който ми помогна да намеря работещ подход. Комбинацията от Method Draw, BoxySVG и малко ръчно редактиране в текстов редактор даде необходимия резултат.