Огляд софта для роботи з SVG-графікою. Відкриваємо файли векторної графіки SVG Svg відкрити

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

Расшіреніе.svg: чим відкрити?

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

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

за замовчуванням?

Як відомо, найпростішим способом відкриття файлу будь-якого типу є подвійний клік в звичайному «Провіднику». При цьому операційна система (в даному випадку Windows) сама визначає, який саме засіб з її набору буде використано для відкриття файлу заданого типу. При цьому SVG-файл є, по суті, універсальним.

По суті будь-яка програма, що підтримує стандарт Scalable Vector Graphics, звідки, власне, і пішло скорочення, може працювати з ним без проблем. В принципі той же Adobe Illustrator або остання версія даного або подібні до них програмні пакети здатні обробляти файли такого типу. При встановлених програм проблем виникнути не повинно.

Але от якщо використовується якась простенька утиліта типу звичайного «майкрософтсофского» Paint, Paint .NET або редакторів, що входять до складу основного пакету Microsoft Office будь-якої версії і року випуску, тут на щось особливе розраховувати не доводиться. Вони хоч і можуть працювати з такими даними, але не завжди є кращими утилітами для редагування. Файл SVG ними може і не розпізнаватися.

У кращому випадку можна просто переглянути зображення, змінити його позицію на аркуші, трохи «підредагувати» фарби або насиченість, але в іншому все залишиться, як було (а то й гірше). Спробуємо подивитися на те, чим відкривати SVG-файл в плані редагування із застосуванням супутніх програм і додатків.

Засоби обробки даних формату SVG

Як не дивно це звучить, але вважається, що саме расшіреніе.svg не має приналежності зіставленої програми, хоча і вважається форматом масштабируемой графіки. Чим відкривати SVG-файл, особливо не має значення. В принципі, при достатній кількості встановлених програм і додатків операційна система сама запропонує вибрати найбільш підходяще додаток (будь-який пакет Adobe, варіації Paint, Corel і т.д.).

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

підсумок

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

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

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

SVG (Scalable Vector Graphics) є файлом масштабированной векторної графіки з дуже широкими можливостями, написаним на мові розмітки XML. Давайте з'ясуємо, за допомогою яких програмних рішень можна переглянути вміст об'єктів з даними розширенням.

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

Спосіб 1: Gimp

Перш за все, розглянемо, як переглянути малюнки досліджуваного формату в безкоштовному графічному редакторі Gimp.

Спосіб 2: Adobe Illustrator

Наступною програмою, яка вміє відображати і змінювати зображення зазначеного формату, є Adobe Illustrator.

Спосіб 3: XnView

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

Існує й інша можливість переглянути SVG в XnView. Вона здійснюється за допомогою вбудованого браузера.

Спосіб 4: IrfanView

Наступним переглядачем зображень, на прикладі якого ми розглянемо перегляд досліджуваного виду малюнків, є IrfanView. Для показу SVG в названій програмі теж потрібно плагін CAD Image DLL, але на відміну від XnView, він спочатку не встановлено в зазначеному додатку.

Картинку в цій програмі можете переглянути методом перетягування файлу з «Провідника» в оболонку IrfanView.

Спосіб 5: OpenOffice Draw

Переглядати SVG вміє також додаток Draw з офісного пакету OpenOffice.

Також зображення можна переглянути шляхом перетягування файлу в стартову оболонку OpenOffice.

Можна провести запуск і через оболонку Draw.

Спосіб 6: LibreOffice Draw

Підтримує відображення Scalable Vector Graphics і конкурент OpenOffice - офісний пакет LibreOffice, який в своєму складі також має додаток для редагування зображень під назвою Draw.

Інший метод відкриття передбачає перетягування файлу з файлового менеджера в стартову оболонку LibreOffice.

Також в LibreOffice, як і у попереднього описаного нами пакету програм, можна переглянути SVG і через оболонку Draw.

Спосіб 7: Opera

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

Спосіб 8: Google Chrome

Наступним браузером, який вміє відображати SVG, є Google Chrome.

Спосіб 9: Vivaldi

Наступним веб-оглядачем, на прикладі якого буде розглянута можливість перегляду SVG, є Vivaldi.

Спосіб 10: Mozilla Firefox

Визначимо, як відобразити SVG в ще одному популярному браузері - Mozilla Firefox.

Спосіб 11: Maxthon

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

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

Спосіб 12: Internet Explorer

Розглянемо варіанти перегляду SVG ще й на прикладі стандартного браузера для операційних систем лінійки Віндовс по Windows 8.1 включно - Internet Explorer.

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

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

Що за формат SVG і де використовується

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

Як і всі формати, SVG має свої плюси і мінуси. До перших відносяться масштабованість без втрати якості, відносно малу вагу, можливість інтеграції в SVG-документи PNG, GIF, JPG-зображень, редагування (при наявності відповідного досвіду) в текстових редакторах, індексування пошуковими роботами, підтримка анімації та поширеність. До переваг формату слід також віднести хорошу стисливість, відкритість і адаптивність.

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

Кращі редактори для роботи з файлами SVG

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

Adobe Illustrator

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

Boxy SVG

Відкрити SVG-картинки також можна за допомогою спеціально створеного для роботи з цим форматом програми Boxy SVG. Даний редактор багато в чому поступається Adobe Illustrator, проте в ньому ви знайдете всі базові інструменти для створення і редагування зображень SVG. Додатком підтримуються робота з фігурами і об'єктами, імпорт шрифтів і картинок популярних форматів, робота з бібліотекою Pixabay, перегляд і редагування вихідного коду SVG і CSS. Програма Boxy SVG доступна як онлайн-сервіс і як додаток для Windows 10, MacOS і Chrome OS.

Vectr

Чим відкрити файл SVG ще? Для роботи з файлами цього типу є програма Vectr, дуже навіть непогано справляється з покладеними на неї завданнями редагування. У додатку доступні такі функції, як зміна окремих частин векторного зображення, робота з шарами, щоб додати текст і примітивів, застосування ефектів (наприклад, прозорість, обведення, зовнішня і внутрішня тінь), використання градієнтів, пера, ліній та інших інструментів. Утиліта Vectr безкоштовна, є версії для Windows, Linux і Chrome OS.

Inkscape

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

До речі, змінити колір SVG можна шляхом редагування вихідного коду файлу, але для цього потрібно мати хоча б базові уявлення про мову CSS і кодах квітів. Відредагувавши, наприклад, параметр style в виділеному на скріншоті блоці коду, ми замінили білий колір на червоний. А так, звичайно, якщо ніж і редагувати SVG, то Inkscape і подібними йому програмами.

Чим відкрити SVG онлайн

Якщо вам потрібен онлайн-редактор SVG, використовуйте веб-версії програм Boxy SVG, Vectr і Inkscape. Функціональний набір таких редакцій практично один в один, як у десктопних варіантів. Додаток Inkscape, наприклад, можна запустити в рамках проекту www.rollapp.com/app/inkscape.

Якщо ж ви шукайте щось простіше, спробуйте онлайновий векторний редактор Sketchpad, доступний за адресою sketch.io/sketchpad. В активі Sketchpad є такі інструменти, як кисті, лінії, стрілки, примітиви, кліпарт, перо, крейда, аерограф, заливка і т.п. Є робота з шарами, палітрою і градієнтами.

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

Конвертери SVG в PNG

Переглянути файл SVG як звичайну картинку можна просто перетягнувши його на вікно браузера, але буває і так, що SVG-документ необхідно конвертувати в більш доступний і звичний графічний формат, скажімо, PNG. Якщо конвертованих файлів багато, є сенс скористатися безкоштовною ТУЛЗ SVG2PNG, Що дозволяє перетворювати SVG в PNG в пакетному режимі. Щоб конвертувати SVG в PNG, запустіть утиліту, перетягніть в її вікно векторні файли, натисніть «Start» і отримаєте результат.

Найбільш часто зустрічається проблемою, через яку користувачі не можуть відкрити цей файл, є невірно призначена програма. Щоб виправити це в ОС Windows вам необхідно натиснути правою кнопкою на файлі, в контекстному меню навести курсор на пункт "Відкрити за допомогою", а випадаючому меню вибрати пункт "Вибрати програму ...". В результаті ви побачите список встановлених програм на вашому комп'ютері, і зможете вибрати відповідну. Рекомендуємо також поставити галочку напроти пункту "Використовувати цей додаток для всіх файлів SVG".

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

• Спробуйте знайти потрібний файл в іншому джерелі в мережі інтернет. Можливо вам пощастить знайти більш відповідну версію. Приклад пошуку в Google: "Файл filetype: SVG". Просто замініть слово "файл" на потрібне вам назву;
• Попросіть надіслати вам вихідний файл ще раз, можливо він був пошкоджений під час передачі;

Від автора: SVG-зображення не так поширені, як наші улюблені растрових форматів PNG і JPG, проте переваги векторної графіки привертають все більше дизайнерів. Дизайнери все частіше використовують векторну графіку в своїх проектах. Раніше нам потрібно було викачувати десктопні програми типу Adobe Illustrator і Inkscape, але в 2017 проектувати векторну графіку можна, не виходячи з браузера. Якщо ви шукали безкоштовний SVG-редактор, то можете почати з цих шести безкоштовний інструментів.

Vectr

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

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

При завантаженні складних ілюстрацій в Vectr можуть виникати помилки (карти або детальні діаграми). Редактор не завжди добре обробляє складну графіку. Однак для більш простого SVG (іконки, логотипи і т.д.) цього редактора буде досить.

JavaScript. Швидкий старт

Якщо в онлайн версії немає потрібних вам функцій, можна скачати десктоп версію програми. Редактор доступний для 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 місяців ми вже розповідали про нього. Не буду робити детальний огляд, так як це вже зроблено в цієї статті.

JavaScript. Швидкий старт

Вивчіть основи JavaScript на практичному прикладі зі створення веб-додатки

Що важливо, з часів огляду від Alex в BoxySVG додали інспектор коду, що робить його одним з найбільш актуальних SVG інструментів для веб-розробників.

Janvas

Декілька років тому Janvas був дуже популярним SVG-редактором. На жаль, останнім часом цей редактор не розробляється, але навіть так він до сих пір працює. Веб рухається вперед, а Janvas стоїть на місці, тому інтерес до нього згас. Alex з сайту SitePoint працював з цим інструментом трохи в 2013-14 (в тому числі з платною версією) і навіть відповідав на питання деякий час на сторінці Google+. Janvas був досить потужним інструментом.

Головна проблема Janvas - він трохи застарів. Браузери розвиваються, а додатки, які не йдуть за браузерами, з кожним днем \u200b\u200bстають все менш стабільними. У 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.