Як редагувати файли SVG у браузері

Оновлено

Щоб редагувати SVG у браузері, відкрийте його у векторному редакторі EditItAll. Змінюйте форму контурів інструментом pen tool, коригуйте або об'єднуйте фігури булевими операціями, редагуйте текст і змінюйте колір будь-чого. Збережіть знову як SVG або експортуйте PNG із масштабом 2×. Кожна зміна відбувається на вашому пристрої, нічого не завантажується.

Зробіть просто зараз — безплатно, у браузері

Open the vector editor

Чому варто редагувати саме SVG

SVG (Scalable Vector Graphics) зберігає зображення як фігури й контури: математику, а не пікселі. Тому логотип, збережений як SVG, залишається бездоганно чітким, чи то у вигляді favicon, чи білборда, і саме тому це правильний формат для іконок, логотипів та ілюстрацій. Це також означає, що ви можете відкрити файл і редагувати самі фігури, а не пересувати пікселі.

Редагувати вихідний файл SVG майже завжди краще, ніж редагувати експортований PNG. Перемістіть опорну точку, і крива залишається плавною; змініть заливку, і колір буде точним; масштабуйте весь об'єкт, і нічого не розмиється. Для цього потрібен редактор, який розуміє вектори.

Відкриття та редагування SVG крок за кроком

Векторний редактор EditItAll відкриває файли SVG прямо у браузері:

  • Відкрийте редактор і завантажте свій файл .svg: логотип, набір іконок або ілюстрацію.
  • Використовуйте інструмент виділення (V), щоб переміщувати та змінювати розмір цілих об'єктів, і інструмент прямого виділення (A), щоб захоплювати окремі опорні точки.
  • Змінюйте колір заливок і контурів, редагуйте будь-який текст інструментом тексту (T) і підганяйте фігури за допомогою розумних напрямних і комбінацій клавіш у стилі Illustrator.

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

Зміна форми та об'єднання контурів

Справжня сила полягає у зміні форми контурів. Pen tool (P) розставляє опорні точки з важелями безьє, тож ви можете перемалювати криву, додати точку до логотипа або накреслити нову фігуру з нуля. Олівець призначений для довільного малювання.

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

Збереження як SVG або експорт у PNG

Коли закінчите, збережіть знову як .svg, щоб файл залишався повністю редагованим, або експортуйте PNG із масштабом 2×, коли потрібне растрове зображення для вебу чи документа. Якщо у вас уже є SVG і потрібен лише PNG, спеціальний конвертер SVG у PNG зробить це за один крок.

Два чесні обмеження: редактор читає стандартний SVG, а не файли .ai чи .eps від Adobe, і не підтримує градієнтну сітку, заливки візерунком чи колір CMYK. Однак для редагування повсякденних логотипів, іконок та ілюстрацій у форматі SVG усе необхідне працює на вашому пристрої. Відкрийте векторний редактор, щоб почати.

Готові спробувати?

Безплатно, без реєстрації, і жоден відкритий файл не залишає ваш пристрій.

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

Чи завантажуються мої файли SVG, коли я їх редагую?+

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

Чи може він відкривати файли .ai з Adobe Illustrator?+

Ні. Редактор відкриває стандартний SVG, а не файли .ai чи .eps від Adobe. Якщо ваша робота в Illustrator, спочатку експортуйте або збережіть її як SVG, а потім відкрийте цей SVG тут.

Чи можу я експортувати свій SVG як PNG?+

Так. Ви можете експортувати PNG із масштабом 2× для чіткого растрового зображення або скористатися спеціальним конвертером SVG у PNG, якщо вам потрібне лише перетворення без редагування.

Чого редактор не вміє робити?+

Він не читає файли .ai чи .eps від Adobe і не має градієнтної сітки, заливок візерунком чи кольору CMYK. Для повсякденних логотипів, іконок та ілюстрацій у SVG його pen tool, фігури, булеві операції, текст і шари цілком впораються із завданням.

Чи втрачу я свою роботу, якщо оновлю сторінку?+

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

Схожі посібники

Більше посібників: Вектор і SVG →