Від автора: SVG-зображення не так поширені, як наші улюблені растрові формати PNG і JPG, однак переваги векторної графіки залучають все більше дизайнерів. Дизайнери все частіше використовують векторну графіку в своїх проектах. Раніше нам потрібно було скачувати десктопні програми типу Adobe Illustrator і Inkscape, але в 2017 проектувати векторну графіку можна, не виходячи з браузера. Якщо ви шукали безкоштовний SVG-редактор, то можете почати з цих шести безкоштовний інструментів.
Vectr
Vectr – хороший вибір для новачків і просунутих користувачів SVG. Інтерфейс акуратний і не переповнений безліччю інструментів, якими ви не будете користуватися. Редактор добре підходить для новачків у векторній ілюстрації. Користувач не повинен губитися серед інструментів, які незрозуміло для чого використовуються. У комплекті йде кілька уроків. Навіть якщо ви повний нуль з SVG, у вас є можливість швидко навчитися.
Проте все перераховане вище не означає, що в Vectr убогий функціонал. В ньому є весь базовий набір для створення звичайного зображення: фігури, текст, шари, тіні, рамки, фони і т. д. Йому не зрівнятися з повноцінним десктопним редактором, але для швидких дизайнів і правок цього більш ніж достатньо. Зображення можна створювати з нуля або завантажити існуючий.
При завантаженні складних ілюстрацій в Vectr можуть виникати помилки (карти або детальні діаграми). Редактор не завжди добре обробляє складну графіку. Однак для більш простого SVG (іконки, логотипи тощо) цього редактора буде достатньо.
Якщо в онлайн версії немає потрібних функцій, можна завантажити десктоп версію програми. Редактор доступний для Windows, Mac, Linux і Chromebook.
Можливо, найкрутіша функція в Vectr – ви можете робити посилання і вставляти зображення прямо з сайту Vectr, що робить його ефективним хостингом для SVG. Безліч сервісів блокують завантаження зображень для SVG файлів, тому це серйозний плюс. Ви можете показувати зображення SVG з Vectr на віддалених сайтах типу WP, Medium, Tumblr і т. д., які блокують пряме завантаження SVG, але дозволяють її показ по удаленке.
Vectr дозволяє ділитися векторною графікою в панелі редактора, щоб інші користувачі могли змінювати створену вами графіком. Тобто можна, наприклад, зробити SVG-шаблон логотипу, який користувачі вже будуть доопрацьовувати під себе. Все це в браузері.
З цією метою Vectr нещодавно випустили версію редактора у вигляді плагіна для WP.
RollApp
На відміну від інших інструментів зі списку, коли ви заходите на домашню сторінку RollApp, перед вами не відкривається редактор. RollApp – це пакет додатків, а SVG-редактор – лише один з додатків. Відмінний інструмент, це браузерна версія Inkscape.
Для роботи в RollApp потрібен аккаунт. Можна зареєструвати новий або увійти за допомогою Google, Facebook, Amazon. Дуже зручно, я ненавиджу створювати тисячі нових акаунтів лише для того, щоб побачити додаток.
Після авторизації відкриється наступна сторінка:
Inkscape у всій красі! Без сумніву, RollApp – найбагатше на функціонал додаток зі списку. Ви використовуєте Inkscape в браузері! Я не порівнював все до дрібниць, але на вигляд в цьому додатку є ВСЕ фукнції Incscape, такі як шари, об’єкти, текст, шляхи, фільтри, ефекти, розширення і т. д.
Великі файли обробляються не так швидко, адже дії виконуються на серверах програми та через інтернет. Коротко – якщо потрібно редагувати великі і складні файли, RollApp не буде ідеальним варіантом, але для інших завдань, що не входять в базовий набір, цей редактор підходить краще за інших.
BoxySVG
Якщо ви давно читаєте SitePoint, вам має бути знайомий редактор BoxySVG, тому що за останні 12 місяців ми вже розповідали про нього. Не буду робити детальний огляд, так як це вже зроблено в цій статті.
Що важливо, з часів огляду від Alex в BoxySVG додали інспектор коду, що робить його одним з найбільш актуальних SVG інструментів для веб-розробників.
Janvas
Пару років тому Janvas був дуже популярним SVG-редактором. На жаль, останнім часом цей редактор не розробляється, але навіть так він досі працює. Веб рухається вперед, а Janvas стоїть на місці, тому інтерес до неї згас. Alex з сайту SitePoint працював з цим інструментом трохи в 2013-14 (у тому числі з платною версією) і навіть відповідав на питання деякий час на сторінці Google+. Janvas був досить потужним інструментом.
Головна проблема Janvas – він трохи застарів. Браузери розвиваються, а додатки, які не слідують за браузерами, з кожним днем стають все менш стабільними. У Janvas безліч функцій: фігури, текст, інструменти малювання, шляхи, маски і шари. Однак користувачі на форумах кажуть, що множина цих функцій не приносять бажаного результату.
Є хороша новина – вийде нова версія у вигляді Chrome-додатки. Сподіваємося, вони пофиксят проблеми.
DrawSVG
Можливо, ви вже вибрали собі безкоштовний онлайн SVG редактор. Якщо ж ні, то йдемо далі. DrawSVG – повністю сумісний SVG-редактор з безліччю функцій. Мені дуже подобається, що у цього додатка дизайн реально заточений під веб і не схожий на порт десктопного програми під браузер. Меню розташовано ліворуч, при натисканні відкривається меню другого рівня і т. д.
З допомогою DrawSVG можна малювати, редагувати і рендери об’єкти. Малювати можна прості фігури, є криві Безьє, прямий і вигнутий текст, безліч стилів ліній і заливок і т. д. Також SVG можна експортувати в PNG.
SVG-edit
SVG-edit – дідусь онлайн редакторів векторної графіки, з’явився в середині 2000-х. Серверного функціоналу немає, все працює в браузері. Зберегти свою роботу без додавання свого власного функціоналу не можна.
Тим не менш, для редактора, чиє життя почалося з дуже обмеженою і непомітною програми для малювання векторної графіки, функціонал SVG-edit постійно поліпшувався.
З допомогою SVG-edit можна малювати прості фігури (лінії, прямокутники, кола, багатокутники, лінії від руки і т. д.), використовувати шляху, шари, градієнти, можна переглядати і редагувати SVG-сурси, експортувати в PNG, JPEG, BMP, WEBP і т. д.
Висновок
Крім цих 6 SVG-редакторів є і інші, але мало хто пропонує більший функціонал, ніж п’ятірка показаних вище.
Якщо ви хочете серйозно зайнятися SVG, а в цих інструментах немає потрібного вам функціоналу, ви завжди можете завантажити десктоп SVG-редактор типу Illustrator або Inkscape. Однак для легкості, швидкості та гнучкості всі вищеперелічені редактори пропонують корисний набір функцій.
PS: також можна спробувати Figma. Це більше інструмент для створення UI, а не SVG-редактор. Тим не менш, він має відмінний набір інструментів і генерує добре оптимізований код SVG.
