Tools 4 All
Головна
Інструменти для зображень

Онлайн-редактор SVG

Швидкий професійний векторний редактор у браузері: малюйте пером, редагуйте вузли, поєднуйте фігури, стилізуйте градієнтами, анімуйте й експортуйте оптимізований SVG чи PNG. Нічого не завантажується на сервер.

БезкоштовноБез реєстраціїПрацює локально — файли не залишають ваш пристрій

Швидкий старт і гарячі клавіші

Виберіть інструмент ліворуч (або натисніть його клавішу), тягніть на полотні, щоб малювати, і стилізуйте виділення на панелі «Дизайн» праворуч. Будь-коли натисніть ?, щоб побачити повний список гарячих клавіш.

  • Навігація: прокручуйте для панорамування, Ctrl/⌘ + прокручування чи зведення пальців для масштабу, утримуйте Space й тягніть для панорамування. Shift+1 — масштаб за розміром.
  • Виділення: клацання, Shift-клацання чи рамка. Двічі клацніть групу, щоб увійти в неї, контур — щоб редагувати вузли, або текст — щоб вводити.
  • Трансформуйте: тягніть маркери для масштабування (Shift зберігає пропорції, Alt масштабує від центру), тягніть круглу ручку для повороту, а Ctrl/⌘-перетягування бічного маркера нахиляє.
  • Перо: клацайте для кутів, тягніть для кривих, клацніть перший вузол, щоб замкнути контур, і натисніть Enter, щоб завершити.
  • Файли: перетягуйте SVG чи зображення будь-куди в редактор, вставляйте код SVG чи знімки екрана, а автозбереження зберігає вашу роботу.
Untitled
Guide, features and FAQ

Як користуватися редактором SVG

  1. Відкрийте файл або почніть малювати

    Перетягніть SVG, PNG чи JPEG на полотно, відкрийте файл або почніть із порожньої сторінки. Нічого не завантажується на сервер: редактор працює повністю у вашому браузері.

  2. Малюйте й редагуйте

    Використовуйте перо, олівець та інструменти фігур, потім уточнюйте контури вузол за вузлом, поєднуйте фігури логічними операціями й стилізуйте заливки, обведення й градієнти.

  3. Упорядковуйте

    Групуйте, впорядковуйте й блокуйте об’єкти на панелі шарів, вирівнюйте й розподіляйте їх, використовуйте графіку повторно як символи й редагуйте код SVG безпосередньо.

  4. Експорт

    Завантажуйте оптимізований SVG, PNG, JPEG чи WebP у будь-якому масштабі або копіюйте результат як код SVG, data URI, компонент React чи готовий для Tailwind SVG, що бере колір із CSS.

Професійний редактор SVG, що працює повністю у вашому браузері

Редактор SVG від Tools 4 All — повноцінний застосунок для векторної графіки, що відкривається миттєво без завантаження, облікового запису й передавання файлів. Малюйте логотипи, іконки, ілюстрації, діаграми й елементи інтерфейсу або очищайте й доводьте до ладу наявні файли SVG. Він побудований довкола самого формату SVG, тож експортований файл — це той самий документ, який ви редагували: жодного пропрієтарного формату й прихованих конвертацій.

Що можна робити

  • Малюйте точно: перо з кривими Безьє, олівець для малювання від руки зі згладжуванням, прямокутники з незалежними заокругленими, скошеними чи увігнутими кутами, еліпси, лінії, пензель-клякса, гумка, ніж і ножиці, а також редаговані фігури: багатокутники, зірки, трикутники, хрести, рамки, кільця, сектори, півмісяці, стрілки, бульбашки реплік, шестерні, серця, хмари, квіти, спіралі й текст.
  • Редагуйте контури вузол за вузлом: переміщуйте вузли й маркери, перетворюйте вузли між кутовими, гладкими й симетричними, додавайте й видаляйте вузли, з’єднуйте й розривайте контури, згинайте сегменти безпосередньо й прив’язуйте маркери до дотичних.
  • Поєднуйте фігури: об’єднання, віднімання, перетин, виключення й поділ, а також перетворення обведення на контур, зсув контуру, спрощення й обертання напрямку — усе обчислює наш власний геометричний рушій зі збереженням кривих у фоновому воркері.
  • Стилізуйте все: суцільні кольори, лінійні й радіальні градієнти з маркерами на полотні, візерунки, окрема непрозорість заливки й обведення, штрихи, кінці ліній, з’єднання, наконечники стрілок, режими накладання, ефекти розмиття й тіні, обтравочні контури й маски.
  • Порядок у всьому: панель шарів з перетягуванням для зміни порядку, перейменуванням і вкладеністю, блокування й приховування, групування й розгрупування, вирівнювання й розподіл відносно виділення, монтажної області чи ключового об’єкта, зразки документа й повторно використовувані символи.
  • Працюйте як профі: розумні напрямні з мітками відстаней і підказками рівних інтервалів, прив’язка до сітки, пікселів, напрямних лінійок, вузлів і контурів, числові поля X/Y/W/H/поворот, необмежене скасування й гарячі клавіші в стилі Figma та Illustrator.
  • Код і експорт: двобічний перегляд коду SVG, оптимізований експорт SVG із показом розміру, PNG/JPEG/WebP у будь-якому масштабі й копіювання як SVG, data URI, React (JSX чи TSX), Tailwind SVG або тло CSS.
  • Створено для вебвиробництва: кольори документа із заміною одним кліком і перетворенням на currentColor, текст у криві, обведення в контур, застосування трансформацій і розгрупування, підгонка полотна під вміст і спрощення зашумлених контурів.
  • Справжній робочий простір: кілька малюнків у вкладках, кожен із власною історією скасувань, короткі меню з підменю, бічна панель, що згортається (Ctrl/⌘+B), і редагування на весь екран на телефонах і комп’ютерах.

Чому важливий редактор, рідний для SVG

Багато інструментів дизайну вважають SVG форматом експорту: ви малюєте в їхній власній моделі, а SVG створюється наприкінці. Для простих іконок це працює. Але не тоді, коли треба відредагувати наявний файл, зберегти id, від яких залежить ваш CSS чи JavaScript, або зрозуміти, чому файл удесятеро більший, ніж мав би бути. Цей редактор працює безпосередньо з документом SVG. Групи залишаються групами, градієнти — градієнтами, а <symbol>, використаний п’ять разів, залишається одним символом. Перейменовуючи шар, ви задаєте id елемента.

Швидкий навіть із великими файлами

Швидкість була метою з першого рядка коду. Малюнок відображається нативно вашим браузером в ізольованому шарі. Маркери виділення, підсвічування під курсором і напрямні малюються на окремому накладному шарі, тож рух миші ніколи не торкається документа. Просторовий індекс (R-дерево) за мікросекунди знаходить, що під курсором, навіть серед десятків тисяч фігур. У важких документах панорамування й масштабування передаються компоновнику GPU, а вектори знову чітко відображаються, коли ви зупиняєтеся. Ресурсомістка робота, як-от логічні операції, зсув контурів і оптимізація SVG, виконується у Web Worker, тож інтерфейс залишається чуйним.

Точні інструменти для векторної роботи

Пером клацайте для кутів і тягніть для плавних кривих. Утримуйте Shift, щоб зберігати кути 45°, і Alt, щоб розірвати маркер. Інструментом вузлів можна тягнути сегмент, щоб зігнути його, двічі клацнути, щоб додати вузол, або вибрати кілька вузлів і вирівняти їх. Розумні напрямні показують, коли об’єкт вирівнюється з краями чи центрами сусідів і коли відстані між об’єктами однакові. Також можна витягувати напрямні з лінійок. Для точних значень вводьте X, Y, ширину, висоту й поворот на панелі «Дизайн». Поля приймають арифметику, як-от 120+16 чи 200/3.

Чисті й компактні експорти

Редактори часто залишають у збережених файлах метадані, невикористані означення, зайві групи й надто точні числа. Діалог експорту запускає у фоні оптимізатор у стилі SVGO. Він округлює числа до вибраної точності, перетворює дані контурів на найкоротшу форму, видаляє метадані редактора й невикористані означення, скорочує id та кольори й згортає непотрібні групи. Кожну оптимізацію можна вимкнути, а діалог показує розмір файлу до й після. Для растрового виведення виберіть PNG, JPEG чи WebP у масштабі 1×, 2×, 4× або точного розміру в пікселях, із прозорим тлом чи без нього.

Створено для вебвиробництва

SVG, що потрапляють на сайти й у застосунки, потребують іншого, ніж друкована графіка. Список «Кольори документа» показує кожен колір у файлі: змініть один — і все, що його використовує, зміниться теж, або перетворіть його на currentColor, щоб іконка React чи Tailwind брала колір із CSS. Імпортовані файли часто мають вкладені групи й трансформації, що ускладнюють редагування контурів: «Застосувати трансформації й розгрупувати» вбудовує їх у координати за один крок, а «Підігнати під вміст» обрізає viewBox до графіки разом з обведеннями. «Текст у криві» й «Обведення в контур» перетворюють текст і товщину ліній на прості контури, що всюди мають однаковий вигляд, а «Спростити» прибирає сотні точок із трасованої чи намальованої від руки фігури.

Ваші файли залишаються на вашому пристрої

За редактором немає сервера. Відкриваючи файл, ви зчитуєте його з диска на сторінку, а експорт створює файл на вашому пристрої. Автозбереження записує у приватне сховище IndexedDB вашого браузера, де зберігається й список нещодавніх файлів. Якщо випадково закрити вкладку, останній документ відновиться під час наступного візиту.

Більше інструментів для зображень

Поширені запитання

Цей редактор SVG справді безкоштовний і приватний?
Так. Він безкоштовний, не потребує облікового запису й працює на 100% у вашому браузері. Ваші малюнки ніколи не завантажуються на сервер: файли читаються локально, автозбереження йде у власне сховище браузера (IndexedDB), а експорти створюються на вашому пристрої.
Чи відкриває він файли SVG з Illustrator, Inkscape, Figma чи бібліотек іконок?
Так. Редактор працює безпосередньо з документом SVG, тож реальні файли зберігають свою структуру, id, стилі, градієнти, символи, обтравочні контури й маски. Неохайні чи недійсні файли виправляються під час відкриття, скрипти вимкнено під час редагування, а файли .svgz розпаковуються автоматично.
Чи є в ньому перо й логічні операції, як в Illustrator?
Так. Перо малює контури Безьє з кутовими, гладкими й симетричними вузлами, а інструмент вузлів дає змогу додавати, видаляти, перетворювати, з’єднувати, розривати й вирівнювати вузли. Об’єднання, віднімання, перетин, виключення й поділ працюють із кривими й зберігають їх кривими; також можна перетворювати обведення на контури, зсувати й спрощувати контури.
Чи можна анімувати SVG?
Так. Відкрийте робочий простір «Анімація», перемістіть курсор відтворення й змініть положення, поворот, масштаб, непрозорість чи кольори об’єкта: кожна зміна стає ключовим кадром із кривою пом’якшення, а властивості, що вже анімовані, автоматично отримують новий ключовий кадр. Анімації зберігаються як стандартний SVG (SMIL), тож відтворюються в будь-якому браузері без скриптів.
Чи можна редагувати код SVG безпосередньо?
Так. Панель «Код» показує живий код SVG із підсвічуванням синтаксису. Редагування коду оновлює малюнок, а редагування малюнка — код. Будь-яку зміну з будь-якого боку можна скасувати.
Які формати експорту підтримуються?
Оптимізований SVG, створений вбудованим оптимізатором у стилі SVGO з показом розміру до й після, а також PNG, JPEG і WebP у масштабі 1×, 2×, 4× чи довільного розміру з необов’язковою прозорістю. Також можна скопіювати виділення як код SVG, як data URI чи як JSX для React.
Чи втрачу я роботу, якщо браузер закриється?
Ні. Документ автоматично зберігається в локальне сховище браузера за мить після кожної зміни. Наступного разу редактор відновить останню сесію, а старіші документи залишаються доступними в меню Файл → Нещодавні файли.
Чи можна зробити так, щоб іконка використовувала currentColor для React чи Tailwind?
Так. Розділ «Кольори документа» показує всі кольори малюнка (кожен варіант запису кольору рахується один раз). Клацніть зразок, щоб виділити все, що його використовує, і змінити колір усюди одразу, або виберіть «Перетворити на currentColor»: тоді іконка братиме колір із CSS, наприклад з класу Tailwind text-…, зберігаючи свій вигляд у редакторі. Скопіюйте її як компонент React чи Tailwind SVG з меню «Редагування» або контекстного меню.
Як перетворити текст на контури чи обведення на заповнену фігуру?
Виділіть текст і виберіть «Текст у криві» (Ctrl/⌘+Shift+O): кожен гліф стає контуром точно там, де його намалював браузер, зокрема текст по контуру й стилізовані фрагменти. Для обведень «Обведення в контур» перетворює обведення на заповнену фігуру з тією самою товщиною, кінцями, з’єднаннями й штрихами, тож логотип зберігає вагу ліній за будь-якого розміру.
Чи може він очистити імпортовані SVG із трансформаціями й вкладеними групами?
Так. «Застосувати трансформації й розгрупувати» записує кожну трансформацію в координати контурів і розформовує групи за один крок скасування, залишаючи лише те, без чого змінився б вигляд (обтравлені, замасковані чи використовувані групи). «Підігнати під вміст» обрізає полотно (viewBox, ширину й висоту) до графіки разом з обведеннями, з необов’язковим відступом, а «Спростити» зменшує кількість точок на зашумлених контурах.
Чи можна працювати з кількома малюнками одночасно?
Так. Кожен малюнок відкривається у власній вкладці над полотном із власною історією скасувань, виділенням і масштабом. Вільно перемикайтеся між ними; закрита вкладка залишає файл у меню Файл → Нещодавні файли, а відкриті вкладки повернуться під час наступного візиту.
Де всі команди? Меню короткі.
Пов’язані команди зібрано в підменю (Упорядкувати, Трансформувати, Контур, Обтравка й маска, Копіювати як, Вирівняти й розподілити…). Наведіть чи торкніться їх або скористайтеся клавішами зі стрілками. Кожна команда має також гарячу клавішу: натисніть ?, щоб побачити повний список. На комп’ютері бічну панель можна згорнути комбінацією Ctrl/⌘+B, щоб дати полотну більше місця.
Чи працює він на телефонах і планшетах?
Так. На малих екранах інструменти переміщуються на нижню панель, а панелі відкриваються як аркуші. Зводьте пальці для масштабу, тягніть двома пальцями для панорамування й довго натискайте для контекстного меню.
Якими великими можуть бути мої малюнки?
Редактор створено для важких файлів. Він використовує просторовий індекс для визначення влучань і виділення, окремий накладний шар для маркерів і напрямних, панорамування й масштабування лише засобами компоновника для великих документів і Web Workers для геометрії й оптимізації. Документи з десятками тисяч елементів залишаються чуйними.
Усі інструменти для зображень →
Стиснення зображень Зменшуйте розмір файлів зображень, зберігаючи якість. Конвертер зображень Конвертуйте зображення між PNG, JPEG, WebP, GIF, BMP, ICO, TIFF та іншими форматами. Зміна розміру зображень Змінюйте розмір зображень до точних розмірів — ідеально для фото на паспорт. Зображення в PDF Об’єднуйте одне чи кілька зображень в один документ PDF.