Редагування SVG онлайн: перефарбування та видалення тла без встановлення програм

1. Що вміє онлайн-редактор SVG

Перша думка про редагування SVG зазвичай — встановити Illustrator, але для легких завдань, як-от перефарбування, видалення тла чи прибирання елементів, онлайн-редактора цілком достатньо. Онлайн-редактор SVG від PolySVG працює в браузері, він безкоштовний, не потребує встановлення чи реєстрації і підтримує операції на рівні шляхів: видалення клацанням, видалення тла одним кліком, малювання мазком, стирання через маску, перефарбування, скасування та повтор, а наприкінці — експорт у SVG або PNG. Можна завантажити SVG напряму або взяти результат перетворення одним кліком з інструмента «Зображення в SVG». Для дизайнерів це зручний спосіб зробити фінальне прибирання перед передаванням; для розробників — швидкий спосіб підлаштувати колір і розмір піктограм перед тим, як вони потраплять на сторінку, без повернення до графічного редактора.

2. Перефарбування: дайте піктограмі новий колір теми

Клацніть кольоровий блок на полотні, щоб вибрати відповідний шлях, а потім змініть заливку на панелі кольорів. Типові сценарії: перемикання набору піктограм між світлою й темною темами, калібрування векторизованого логотипа до фірмового кольору та уніфікація палітр між ресурсами з різних джерел. Порівняно з пошуком атрибута fill у коді, перефарбування клацанням набагато інтуїтивніше й значно менше ризикує пошкодити інші шляхи.

3. Видалення тла: автоматично і вручну

Натисніть «видалення тла одним кліком», і рушій визначить домінантний колір по краю та прибере шар тла, тож SVG із білим тлом стає прозорим за кілька секунд. Будь-який шлях тла, що залишився, можна вибрати мишею й видалити. Якщо у вас все ще растр, скористайтеся інструментом «зображення в прозорий вектор», щоб конвертувати й прибрати тло за один крок, а потім завершіть прибирання в редакторі.

4. Мазок і гумка: малювання та стирання

Мазок додає: малює відсутні штрихи, і сліди автоматично векторизуються в нові шляхи, зливаючись з вихідним рисунком — ідеально для відновлення обривів ліній у векторизованому логотипі. Гумка віднімає: ховає ділянку маскою, не руйнуючи вихідні дані шляхів, і її можна скасувати, якщо стерли зайве. Обидва працюють разом зі скасуванням і повтором, тож можна вільно експериментувати. Сліди мазка додаються у файл як окремі шляхи, і їх пізніше можна перефарбувати клацанням; ефект маски гумки застосовується під час експорту, тож експортований SVG відповідає тому, що ви бачите на полотні.

5. Скасування, повтор та експорт

Редактор зберігає повну історію ваших дій: скасуйте помилку й повторіть, якщо передумали. Коли робота завершена, експортуйте SVG для вебу або подальшого редагування чи експортуйте PNG для документів чи зображення-перегляду. Про способи відкривання й перегляду SVG-файлів читайте посібник «Як відкрити SVG-файл»; пряме посилання на редактор — /editor. Під час експорту PNG оберіть достатню роздільність, щоб зображення лишилося чітким у документі; для вебу експортуйте SVG, щоб зберегти векторні властивості.

6. Швидка довідка з типових завдань редагування

• Перефарбування піктограм під тему: клацніть шлях і змініть його заливку, а потім експортуйте одну версію для світлої й одну для темної теми;
• Прозоре тло для ресурсу з білим фоном: видалення тла одним кліком, видаліть решту шляхів, експортуйте прозорий SVG;
• Відновлення обривів ліній у логотипі: намалюйте мазком уздовж прогалини, щоб сліди векторизувалися автоматично, а потім перефарбуйте рівномірно;
• Видалення зайвих елементів: клацніть кожен кольоровий блок, який не потрібен, і видаліть його, а для дрібниць на краях скористайтеся гумкою;
• Зображення для документів: коли редагування завершено, експортуйте PNG і вставте його у Word, PowerPoint або в чат.