Працюємо з векторною графікою онлайн

Векторные онлайн-редакторы
Поняття векторних зображень переважній кількості рядових користувачів ПК не говорить зовсім нічого. Дизайнери ж, в свою чергу, все більше схиляються до використання саме такого типу графіки для своїх проектів.

Раніше, щоб працювати з SVG-картинками, вам обов'язково довелося б встановити на свій комп'ютер одне зі спеціалізованих десктопних рішень на зразок Adobe Illustrator або Inkscape . Тепер же подібні інструменти доступні онлайн, без необхідності скачування.

Читайте також: Вчимося малювати в Adobe Illustrator

Як працювати з SVG онлайн

Виконавши відповідний запит в Google, ви зможете ознайомитися з величезною кількістю всіляких векторних онлайн-редакторів. Але переважна більшість таких рішень пропонують досить мізерні можливості і найчастіше не дозволяють працювати з серйозними проектами. Ми ж розглянемо кращі сервіси для створення і редагування SVG-зображень прямо в браузері.

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

Спосіб 1: Canva

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

Перейти до онлайн-сервісу Canva

  1. Відкрийте головну сторінку сайту, посилання на який наведено вище, і натисніть»Увійти" або »зареєструватися" . Векторные онлайн-редакторы 6 рабочих вариантов_001

    Вкажіть логін і пароль від облікового запису в сервісі, якщо вона у вас є, або пройдіть процедуру реєстрації – це можна зробити по електронній пошті або або через аккаунт в Apple, Facebook або Google.

    Векторные онлайн-редакторы 6 рабочих вариантов_002

    За необхідності підтвердьте вибір.

  2. Векторные онлайн-редакторы 6 рабочих вариантов_003
  3. Авторизувавшись в Canva, скористайтеся розташованої вгорі кнопкою " створити дизайн» , Векторные онлайн-редакторы 6 рабочих вариантов_004

    Виберіть пункт " Настроюваний розмір» і вкажіть бажані значення висоти та ширини.

    Векторные онлайн-редакторы 6 рабочих вариантов_005

    Також можете змінити одиниці виміру.

    Векторные онлайн-редакторы 6 рабочих вариантов_006

    Після введення натисніть " створити дизайн» .

  4. Векторные онлайн-редакторы 6 рабочих вариантов_007
  5. Відкрийте меню " Файл» , по необхідності задайте бажане ім'я майбутнього проекту і змініть такі параметри його відображення, як лінійка, напрямні, поля і випуск. Це буде корисно для розуміння розміру елементів на робочому полотні, їх вирівнювання, дотримання симетрії і т.д. скасувати і повторити будь-яку дію можна за допомогою розташованих на верхній панелі кнопок, виконаних у вигляді кругових стрілок. Підтримуються і гарячі клавіші «Ctrl+Z» і «Ctrl+Y» відповідно. Векторные онлайн-редакторы 6 рабочих вариантов_008

    Для більш зручної взаємодії із зображенням на нижній панелі передбачена можливість зміни його масштабу і переходу в повноекранний режим перегляду, завдяки чому ви легко зможете оцінити внесені зміни на будь-якому з етапів. Бічна панель згортається кліком по розташованій на її правій межі стрілкою.

  6. Векторные онлайн-редакторы 6 рабочих вариантов_009
  7. Ключова особливість платформи Canva – редаговані шаблони, в достатку представлені в бібліотеці. Саме з їх допомогою можна створити практично будь-який дизайн або публікацію.Векторные онлайн-редакторы 6 рабочих вариантов_010

    Якщо це те, що входить в вашу задумку, виберіть відповідне рішення у вкладці «шаблони» . Для зручності можете задіяти пошук і додаткові фільтри.

  8. Векторные онлайн-редакторы 6 рабочих вариантов_012
  9. У вкладці «елементи» ви знайдете всілякі фігури та лінії, Векторные онлайн-редакторы 6 рабочих вариантов_014

    Наклейки, фотографії, аудіо та відеофайли та рамки.

    Векторные онлайн-редакторы 6 рабочих вариантов_015

    Для розуміння основного принципу роботи з графікою в сервісі опишемо, як ми наклали малюнок поверх шаблонного фону, взятого з розділу»Фото" вкладки «елементи» . Подібне зображення цілком можна знайти і серед " шаблонів» .

    Векторные онлайн-редакторы 6 рабочих вариантов_016

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

    Векторные онлайн-редакторы 6 рабочих вариантов_017

    Примітка: більшість шаблонів у бібліотеці Canva – це багатошарові документи, що складаються з декількох об'єктів (написи, рамки, логотипи тощо), кожен з яких можна змінювати на свій розсуд. Кілька можливих прикладів нами було розглянуто в окремих статтях.

    Детальніше: як створити турнірну таблицю / презентацію / оголошення / запрошення / грамоту в онлайн-сервісі Canva

    Векторные онлайн-редакторы 6 рабочих вариантов_013

    Другу картинку ми взяли в розділі «графіка» вкладки «елементи» .

    Векторные онлайн-редакторы 6 рабочих вариантов_019

    Її можна перемістити в будь-яке зручне місце полотна, змінити розмір, зрушуючи в потрібну сторону розташовані по кутах рамки маркери.

    Векторные онлайн-редакторы 6 рабочих вариантов_020

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

    Векторные онлайн-редакторы 6 рабочих вариантов_021

    Натискання на кнопку " редагувати» на верхній панелі відкриє набір доступних в Canva ефектів і фільтрів,

    Векторные онлайн-редакторы 6 рабочих вариантов_022

    Кожен з яких можна застосувати до виділеної частини проекту,

    Векторные онлайн-редакторы 6 рабочих вариантов_023

    За необхідності відрегулювавши додаткові параметри і застосувавши їх.

    Векторные онлайн-редакторы 6 рабочих вариантов_024

    Ефекти та фільтри, представлені в розділі " рекомендовані» ,

    Векторные онлайн-редакторы 6 рабочих вариантов_025

    Попередньо потрібно підключити.

    Векторные онлайн-редакторы 6 рабочих вариантов_026

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

    Векторные онлайн-редакторы 6 рабочих вариантов_027

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

    Детальніше: Як замінити колір / вирізати обличчя / затемнити / поліпшити або погіршити якість фото за допомогою онлайн-сервісу Canva

  10. Векторные онлайн-редакторы 6 рабочих вариантов_028
  11. У вкладці»Завантаження" доступна можливість додавання в бібліотеку сервісу власних мультимедійних файлів – зображень, аудіо та відео. Також можна записати себе за допомогою вбудованої або підключеної до ПК веб-камери. Векторные онлайн-редакторы 6 рабочих вариантов_029

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

  12. Векторные онлайн-редакторы 6 рабочих вариантов_030
  13. У вкладці " Текст» представлені різні написи – як порожні текстові поля, так і якусь подобу стікерів, шаблонний вміст яких можна змінювати на свій розсуд. Векторные онлайн-редакторы 6 рабочих вариантов_031

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

    Векторные онлайн-редакторы 6 рабочих вариантов_032

    Читайте також: як поставити дату на фото в онлайн-сервісі Canva

  14. Якщо крім графіки в вашому проекті використовуються і різні написи, а розглянутих на попередньому кроці рішень недостатньо, рекомендуємо скористатися шаблонними варіантами у вкладці «стилі» . Векторные онлайн-редакторы 6 рабочих вариантов_033

    Тут представлені поєднання шрифтів і кольорів, які можна використовувати як комплексно,

    Векторные онлайн-редакторы 6 рабочих вариантов_034

    Так і незалежно один від одного.

    Векторные онлайн-редакторы 6 рабочих вариантов_035

    Крім цього, є можливість " створити свій стиль» .

  15. Векторные онлайн-редакторы 6 рабочих вариантов_036
  16. У вкладці «фони» , як можна зрозуміти з назви, міститися фонові зображення. Векторные онлайн-редакторы 6 рабочих вариантов_037

    Як і всі представлені в бібліотеці сервісу макети, вони можуть бути змінені.

  17. Векторные онлайн-редакторы 6 рабочих вариантов_038
  18. Останній з доступних в рамках редактора розділ " більше» містить в собі інтеграції з різними веб-додатками і сервісами. Тут теж є шаблони, які можна використовувати в проектах. Велика частина відведена під можливості перегляду і експорту на різних платформах, але також доступно і додавання контенту з них (наприклад, смайлів і анімації з GIPHY, стікерів з Pixton, стокових фотографій з Pexels і т.д.). Векторные онлайн-редакторы 6 рабочих вариантов_039

    Особливу увагу рекомендуємо звернути на блок «інші програми в Canva» , так як з його допомогою можна дещо розширити і без того багату функціональність і бібліотеку сервісу. Звідси ви можете додати на бічну панель такі розділи, як »Фото" «аудіо» , »відео" і " діаграми» .

    Векторные онлайн-редакторы 6 рабочих вариантов_040

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

    Детальніше:
    як замінити фон на фото в онлайн-сервісі Canva
    як зістарити фото в онлайн-сервісі Canva

  19. Векторные онлайн-редакторы 6 рабочих вариантов_041
  20. Коли робота з графікою буде завершена, оцініть підсумковий результат, приховавши для зручності бічну панель і збільшивши масштаб відображення.
  21. Векторные онлайн-редакторы 6 рабочих вариантов_042
  22. Якщо вас все влаштовує, натисніть на кнопку»завантажити" , розгорніть випадаючий список «Тип файлу» і виберіть у ньому SVG. Векторные онлайн-редакторы 6 рабочих вариантов_043

    На жаль, так просто отримати файл в даному форматі не вийде – потрібно оформити підписку Canva Pro. Благо тут передбачений 30-денний безкоштовний період.

    Векторные онлайн-редакторы 6 рабочих вариантов_044

    Вкажіть необхідні відомості для підключення послуги, підтвердіть свій намір,

    Векторные онлайн-редакторы 6 рабочих вариантов_045

    Після чого ви зможете»завантажити" самостійно створене векторне зображення (додатково буде доступна можливість збереження прозорості фону, якщо це актуально)

    Векторные онлайн-редакторы 6 рабочих вариантов_046

    І після короткої процедури експорту

    Векторные онлайн-редакторы 6 рабочих вариантов_047

    Помістити його в зручне місце на диску ПК.

    Векторные онлайн-редакторы 6 рабочих вариантов_048

    Після завершення експорту з'явиться пропозиція " копіювати» публічне посилання на проект.

    Векторные онлайн-редакторы 6 рабочих вариантов_049

    Крім цього, ви можете»поділитися" їм з іншими користувачами Сервісу (якщо працюєте в команді) і зробити відкритим для редагування,

    Векторные онлайн-редакторы 6 рабочих вариантов_050

    Перетворити на презентацію, поділитися в соціальних мережах та інших сервісах.

    Векторные онлайн-редакторы 6 рабочих вариантов_051

    Скасувати пробну підписку Canva Pro можна в будь-який момент,

    Векторные онлайн-редакторы 6 рабочих вариантов_052

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

  23. Векторные онлайн-редакторы 6 рабочих вариантов_053

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

Спосіб 2: Vectr

Продуманий векторний редактор від творців знайомого багатьом сервісу Pixlr. Цей інструмент буде корисний як новачкам, так і досвідченим користувачам в роботі з SVG.

Незважаючи на велику кількість функцій, загубитися в інтерфейсі Vectr буде досить складно. Для початківців передбачені докладні уроки і об'ємні інструкції по кожній зі складових сервісу. Серед інструментів редактора є все для створення SVG-картинки: фігури, іконки, рамки, тіні, кисті, підтримка роботи з шарами і т.п. намалювати зображення можна з нуля або ж завантажити власне.

Перейти на сервіс Vectr

  1. Перед початком користування ресурсом бажано авторизуватися в ньому за допомогою однієї з доступних соцмереж або Створити обліковий запис на сайті з нуля.
    Окно авторизации в Vectr
    Це не тільки дозволить завантажувати результати вашої роботи на комп'ютер, але і в будь-який момент зберігати зміни в &171;хмарі&187;.
  2. Інтерфейс сервісу максимально простий і зрозумілий: зліва від полотна розташовані доступні інструменти, а праворуч &8212; змінні властивості кожного з них.
    Рабочий интерфейс векторного онлайн-редактора Vectr
    Підтримується створення множини сторінок, для яких є розмірні шаблони на будь-який смак &8212; від графічних обкладинок під соцмережі, до стандартних листових форматів.
  3. Експортувати готове зображення можна, натиснувши на кнопку зі стрілкою в панелі меню праворуч.
    Экспорт изображения SVG из Vectr
  4. У вікні, що відкриється, визначте параметри завантаження та натисніть &171;Download&187; .
    Окно экспорта SVG с сервиса Vectr

До можливостей експорту відноситься також одна з найбільш відмінних можливостей Vectr &8212; підтримка прямих посилань на SVG-проект в редакторі. Багато ресурсів не дозволяють завантажувати векторні картинки до себе безпосередньо, але тим не менше дозволяють їх віддалене відображення. В цьому випадку Вектр можна використовувати як справжнісінький хостинг SVG, чого інші сервіси робити не дозволяють.

Слід зазначити, що редактор не завжди коректно обробляє складну графіку. З цієї причини деякі проекти можуть відкриватися у Vectr з помилками або візуальними артефактами.

Спосіб 3: Sketchpad

Простий і зручний веб-редактор для створення SVG-зображень, заснований на платформі HTML5. З огляду на набір доступних інструментів, можна стверджувати, що сервіс призначений виключно для малювання. За допомогою Sketchpad ви можете створювати красиві, ретельно опрацьовані картинки, але не більше.

Інструмент має в своєму розпорядженні широким асортиментом настроюються кистей різних форм і типів, набір фігур, шрифтів і стікерів для накладення. Редактор дозволяє повноцінно маніпулювати шарами & 8212; контролювати їх розміщення і режими змішування. Ну і в якості бонусу, додаток повністю переведено на російську мову, так що ніяких складнощів з його освоєнням у вас виникнути не повинно.

Перейти на сервіс Sketchpad

  1. Все що потрібно для роботи з редактором &8212; браузер і доступ в мережу. Механізм авторизації на сайті не передбачений.
    Интерфейс онлайн-редактора векторной графики Sketchpad
  2. Щоб завантажити готову картинку на комп'ютер, натисніть на значок дискети в панелі меню зліва, а потім виберіть потрібний формат у спливаючому вікні.
  3. Скачиваем готовую SVG-картинку с онлайн-редактора Sketchpad

При необхідності ви можете зберегти незавершений малюнок як проект Sketchpad, а потім в будь-який момент закінчити його редагування.

Спосіб 4: Method Draw

Ця веб-програма призначена для базових операцій з векторними файлами. Зовні інструмент нагадує десктопний Adobe Illustrator, але по частині функціоналу тут все значно простіше. Втім, є в Method Draw і деякі особливості.

Крім роботи з SVG-зображеннями, редактор дозволяє імпортувати растрові картинки і створювати на їх основі векторні. Робити це можна на основі ручного трасування контурів за допомогою пера. Додаток містить всі необхідні інструменти для компонування векторних малюнків. Є Розширена бібліотека фігур, Повнокольорова палітра і підтримка клавіатурних скорочень.

Перейти на сервіс Method Draw

  1. Ресурс не вимагає від користувача реєстрації. Просто переходите на сайт і працюєте з уже наявними векторним файлом або створюєте новий.
    Рабочий интерфейс онлайн-редактора векторной графики Method Draw
  2. Окрім створення фрагментів SVG у графічному середовищі, ви також можете редагувати зображення безпосередньо на рівні коду.
    Редактируем SVG-изображение на уровне кода в Method Draw
    Для цього перейдіть в &171;View&187; &8212; &171;Source&8230;&187; або скористайтеся комбінацією клавіш &171;Ctrl + U&187; .
  3. Закінчивши роботу над картинкою, її можна відразу зберегти на комп'ютер.
  4. Скачиваем SVG-картинку на компьютер с сервиса Method Draw
    Щоб експортувати зображення, відкрийте пункт меню &171;File&187; і натисніть &171;Save Image&8230;&187; . Або ж використовуйте шорткат &171;Ctrl+S&187; .

Method Draw однозначно не підійде для створення серйозних векторних проектів &8212; причиною тому брак відповідних функцій. Але завдяки відсутності зайвих елементів і грамотно організованому робочому простору, сервіс може відмінно служити для швидкого редагування або точкового доопрацювання простих SVG-картинок.

Спосіб 5: Gravit Designer

Безкоштовний веб-редактор векторної графіки для просунутих користувачів. Багато дизайнерів ставлять Gravit в один ряд з повноцінними настільними рішеннями, як той же Adobe Illustrator. Справа в тому, що цей інструмент є кросплатформним, тобто в повному обсязі доступний на всіх комп'ютерних ОС, а також в якості веб-додатки.

Gravit Designer знаходиться в стадії активної розробки і регулярно отримує нові функції, яких вже і так вистачає для компонування складних проектів.

Перейти на Gravit Designer

Редактор пропонує вам всілякі інструменти для малювання контурів, фігур, шляхів, накладання тексту, заливок, а також різних настроюваних ефектів. Є велика бібліотека фігур, тематичних картинок і значків. Кожен елемент у просторі Gravit має перелік властивостей, доступних для зміни.

Редактируем шаблонное изображение в онлайн-сервисе Gravit Designer

Все це розмаїття &171;упаковано&187; в стильний і інтуїтивно зрозумілий інтерфейс, так, що будь-який інструмент доступний буквально в пару кліків.

  1. Щоб приступити до роботи з редактором, вам не обов'язково створювати аккаунт в сервісі.
    Регистрируемся в онлайн-сервисе Gravit Designer
    Але якщо ви бажаєте використовувати готові шаблони, доведеться завести безкоштовну &171;учетку&187; Gravit Cloud.
  2. Для створення нового проекту з нуля у вітальному вікні перейдіть на вкладку &171;New Design&187; і виберіть потрібний розмір полотна.
    Создаем новый проект в онлайн-редкторе SVG Gravit Designer
    Відповідно, для роботи з шаблоном відкрийте розділ &171;New from Template&187; і виберіть потрібну заготовку.
  3. Gravit вміє автоматично зберігати всі зміни при виконанні Вами дій над проектом.
    Сохраняем изменения в проекте в облаке онлайн-сервиса Gravit Designer
    Щоб активувати цю можливість, скористайтеся поєднанням клавіш &171;Ctrl+S&187; і у вікні дайте назву малюнку, після чого клацніть по кнопці &171;Save&187; .
  4. Підсумкове зображення ви можете експортувати як у векторному форматі SVG, так і в растрових JPEG або PNG.
  5. Экспортируем изображение из онлайн-сервиса Gravit Designer
    Крім того, є варіант збереження проекту як документа з розширенням PDF.

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

Спосіб 6: Janvas

Популярний серед веб-розробників інструмент для створення векторної графіки. Сервіс містить ряд інструментів для малювання з детально налаштованим властивостями. Головна особливість Janvas & 8212; можливість створення інтерактивних SVG-картинок, анімованих за допомогою CSS. А в зв'язці з JavaScript сервіс і зовсім дозволяє будувати цілі веб-додатки.

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

Перейти на сервіс Janvas

  1. Для запуску веб-додатки в своєму браузері перейдіть за посиланням вище і клацніть по кнопці &171;Start to create&187; .
    Начинаем работу с веб-приложением Janvas
  2. У новому вікні відкриється робоча область редактора з полотном у центрі та панелями інструментів навколо нього.
    Рабочий интерфейс онлайн-сервиса для редактирования векторных изображений Janvas
  3. Експортувати готове зображення можна лише в вибране вами хмарне сховище, і лише в тому випадку, якщо ви придбали підписку на сервіс.
    Меню экспорта картинок в Janvas

Так, інструмент, на жаль не безкоштовний. Але це професійне рішення, яке і стане в нагоді далеко не кожному.

Спосіб 7: DrawSVG

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

За допомогою DrawSVG можна конструювати векторні об'єкти будь-якого виду і властивостей, змінювати їх параметри і рендерити в якості окремих картинок. Є можливість вбудовувати в SVG сторонні мультимедійні файли: відео та аудіо з комп'ютера або мережевих джерел.

Перейти на сервіс DrawSVG

Цей редактор, на відміну від більшості інших, не схожий на порт браузера настільного додатка. Зліва розташовані основні інструменти для малювання, а зверху & 8212; елементи управління. Основний простір займає Полотно для роботи з графікою.

Интерфейс онлайн-сервиса DrawSVG

Закінчивши роботу з картинкою, ви можете зберегти результат як SVG або в якості растрового зображення.

  1. Для цього знайдіть в панелі інструментів іконку &171;Save&187; .
    Переходим к сохранению результата работы в DrawSVG на компьютере
  2. Після натискання на цей значок відкриється спливаюче вікно з формою для завантаження SVG-документа.
    Скачиваем картинку с DrawSVG на компьютер
    Введіть потрібну назву файлу та натисніть &171;Save as file&187; .
  3. DrawSVG можна назвати полегшеною версією Janvas. Редактор підтримує роботу з атрибутами CSS, але на відміну від попереднього інструменту, не дозволяє анімувати елементи.

Читайте також: відкриваємо файли векторної графіки SVG

Перераховані в статті сервіси &8212; аж ніяк не всі доступні в мережі векторні редактори. Однак тут ми зібрали здебільшого безкоштовні і перевірені онлайн-рішення для роботи з SVG-файлами. При цьому деякі з них цілком здатні конкурувати з десктопними інструментами. Ну а то, яким користуватися, залежить лише від ваших потреб і переваг.

більше статей на цю тему: