Чим відкривати SVG-файли: основні аспекти. Чим відкрити файл у форматі SVG - кращі програми і онлайн-редактори В якій програмі відкривати svg

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

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

Але питання не тільки в розмірі і якості розробка дизайну для web-сторінки виявляється справою, що вимагає від дизайнера знання широкого спектру різнопланових технологій і програмних продуктів, оскільки для різних видів графічної інформації доводиться використовувати різноманітні формати файлів і різні технології їх створення. Для статичної графіки застосовують формати GIF, JPG або PNG, створювати які можна в самих різних графічних пакетах. Для анімаційних об'єктів використовують формати animation GIF і Flash, а розробляють такі об'єкти в спеціалізованих програмних додатках (особливих для кожного з названих типів форматів). Інтерактивні елементи (ролловеров, карти посилань ImageMap і т.п.) теж, як правило, створюються в спеціалізованих додатках і являють собою набір графічних зображень, зв'язок між якими встановлюється в доповнює їх файлі з HTML-кодом.

Вдалим рішенням названих проблем може стати перехід на графічний формат SVG (Scalable Vector Graphics масштабируемая векторна графіка), заснований на мові XML, завдяки чому будь-який SVG-зображення можна уявити набором командних рядків (рис. 1), а сам SVG-файл можна відкрити в будь-якому текстовому редакторі, включаючи блокнот. Ця порівняно нова технологія спочатку розроблялася компанією Adobe спеціально для web, а сьогодні становить великий інтерес і для мобільних пристроїв, забезпечуючи створення високоякісної статичної, анімаційної та інтерактивної графіки. Тому немає нічого дивного в тому, що вона активно підтримується консорціумом W3C (http://www.w3.org/Graphics/SVG) в 2003 році стандарт SVG 1.1 був прийнятий в W3C в якості рекомендації, а на даний момент йде розробка специфікації SVG 1.2 (http://www.w3.org/TR/SVG12/).

з відповідним йому зображенням

Технологія SVG дозволяє об'єднати в одному форматі текст, графіку, анімацію та інтерактивні компоненти і базується на трьох типах графічних зображень: векторних формах, малюнках і тексті. Форми, як це прийнято в векторній графіці, представлені або прямолінійними і криволінійними контурами, або графічними примітивами (прямокутниками, еліпсами і ін.), А малюнки є імпортовані растрові зображення. Крім цього формат SVG підтримує різні види анімаційних (нагадують GIF- і flash-анімацію) і інтерактивних об'єктів, таких як ролловеров, карти посилань і інші елементи навігації. А оскільки даний стандарт заснований на мові XML, то SVG-файл поряд з елементами, призначеними для візуального відображення, може містити також різні метадані.

Плюси і мінуси застосування формату SVG

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

висока якість зображень незалежно від їх розмірів, що пояснюється векторної природою SVG-формату. Зображення можуть необмежено зменшуватися або збільшуватися без втрати якості (рис. 2) відповідно до розміру дисплея, що дозволяє отримувати якісне зображення графічної інформації на різних типах пристроїв (десктопах, кишенькових комп'ютерах і ін.), А також дає можливість більш ретельно розглянути окремі деталі це важливо, наприклад, при роботі з технічними малюнками;
набагато менший розмір файлів в порівнянні з форматами GIF, JPG, PNG і animation GIF, а тим більше з форматом Flash. Наприклад, якщо протестований для статті файл формату GIF, стиснений в режимі LZW-компресії, становив 26 Кбайт, то розмір відповідного йому SVG-файлу зайняв 1220 байт, а при стисканні в форматі SVGZ склав всього 685 байт.

Але справа не тільки в цьому. У порівнянні з традиційними варіантами графічного представлення Мережі застосування SVG-формату має чимало інших незаперечних переваг.

Так, для розробників важливими плюсами є:

можливості суміщення в одному форматі розробки статичних, анімаційних та інтерактивних елементів, а також поєднання векторних і растрових об'єктів;
поліпшена робота з текстом, включаючи кернінг, текст по кривій і необмежене використання шрифтів;
більш ефективне управління точністю передачі кольорів і найширші можливості в плані використання в web-зображеннях градієнтних заливок з високою роздільною здатністю, тіней, фільтрів і т.п .;
текстова природа SVG-формату і підтримка їм каскадних таблиць стилів, що значно спрощує процес оновлення web-сайту і дозволяє при необхідності вносити в нього зміни без звернення до спеціальних програм;
інтеграція з побудованими на стандартах XML (Extensible Markup Language) і CSS (Cascading Style Sheets) базами даних, що дозволяє зберігати SVG-зображення в базі даних і створювати з їх використанням динамічні web-сторінки різні для різних платформ, персональних налаштувань і т. д .;
відсутність проблем індексації SVG-файли індексуються будь-якими пошуковими машинами (на відміну, наприклад, від SWF-файлів).

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

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

SVG-зображення слабо підтримуються виробниками Інтернет-браузерів. В результаті для перегляду SVG-графіки з браузера користувачі змушені додатково встановлювати забезпечує цю можливість плагін від сторонніх виробників, наприклад SVG Viewer від компанії Adobe. Теоретично це нескладно відповідні плагіни прості в установці, безкоштовні, мають невеликий обсяг і їх можна швидко завантажити з Мережі. На практиці все виявляється набагато складніше, оскільки більшість Інтернет-користувачів не здогадуються про існування даних можливостей і тому не можуть переглядати даний вид графіки без плагіна вона просто не видно. Однак ситуація поступово змінюється, і в минулому році два провідних розробника web-браузерів впровадили підтримку формату SVG. Навесні компанія Opera Software випустила 8-ю версію браузера Opera, що підтримує SVG 1.0 Tiny; в що з'явилася трохи пізніше версії Opera 9.0 реалізована часткова підтримка формату SVG 1.0 Basic. Другим розробником, які ввімкнули підтримку SVG, стала The Mozilla Organization до складу випущеного нею браузера Firefox 1.5 включений модуль Mozilla SVG project, що забезпечує перегляд SVG-графіки специфікації 1.1. Крім того, в середині 2005 року активну роботу по впровадженню підтримки SVG 1.1 почали розробники браузера Safari, який функціонує на комп'ютерах під управлінням Mac OS X;
в порівнянні з іншими графічними форматами формат SVG поки слабо підтримується і розробниками графічного ПО, хоча такі провідні графічні пакети, як Adobe Illustrator, Corel DRAW і ін., дозволяють експортувати графіку в SVG-файли. Звичайно, SVG-файли можуть бути створені і в будь-якому текстовому редакторі, однак це недоцільно в сенсі швидкості і дешевизни розробки. В текстовому редакторі зручно підправити файл в разі необхідності (що, до речі, можливо тільки при наявності глибоких знань про XML-технології), але створювати його з нуля нерозумно, оскільки це вимагатиме надмірних витрат часу і сил. Для цього потрібні прості і зручні засоби швидкої візуальної розробки графіки в форматі Scalable Vector Graphics з можливістю редагування в цьому ж середовищі відповідного зображенню програмного коду, проте таких продуктів зовсім небагато і вони недостатньо відомі.

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

Але можна подивитися на ситуацію і з іншого боку: підтримка SVG (хоча поки і не в повному обсязі) двома популярними Інтернет-браузерами, так само як і інтерес до технології іменитих розробників говорить про те, що «крига скресла» і що у SVG з'явився реальний шанс перетворитися в один з популярних форматів для представлення web-інформації. Цей шанс підвищується і в зв'язку з ростом інтересу до технології SVG щодо мобільних пристроїв, де вимоги до розміру і якості зображень набагато вище. Компанія Opera Software, наприклад, передбачає спочатку реалізувати повну підтримку формату SVG на десктопах і лише потім перенести її на мобільні платформи. Тому саме час задуматися про використання SVG і web-дизайнерам інакше вони ризикують в найближчому майбутньому опинитися в числі відстаючих.

Модулі для перегляду SVG-графіки

Як уже було відзначено, поки що більшості користувачів для перегляду SVG-графіки в повному обсязі в вікні браузера доведеться скористатися одним з відповідних плагінів, найбільш відомими з яких є безкоштовні модулі Adobe SVG Viewer і Corel SVG Viewer. Перший з них Adobe SVG Viewer поставляється як окремий додаток, відрізняється компактністю і зручністю, працює на різних платформах, підтримує велику кількість Інтернет-браузерів і тому набагато більш популярний серед користувачів. Додаток Corel SVG Viewer входить до складу пакету Corel Smart Graphics Studio, але є і як freeware.

Існують і інші варіанти перегляду SVG-графіки можна, наприклад, скористатися відповідними модулями з пакетів Amaya (http://www.w3.org/Amaya/), Apache Batik (http://xml.apache.org/batik), KDE KSVG (http://www.kde.org) і ін. Повний список програм, що забезпечують перегляд SVG-зображень, наведено за адресою: http://wiki.svg.org/Viewer_Implementations.

Adobe SVG Viewer

Розробник: Adobe Systems, Inc.

Розмір дистрибутива: 2,25 Мбайт

Спосіб поширення: freeware (http://download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe)

Ціна: безкоштовно

Робота під управлінням: Windows 95/98 / Me / NT / 2000 / XP, Mac OS 8.6 / 9 / X, Linux, Solaris

Підтримка браузерів: Internet Explorer версії 4.0 і вище, Netscape Navigator або Communicator версій від 4.5 до 4.78 (за винятком версій 6.x)

Corel SVG Viewer

Розробник: Corel Corp

Розмір дистрибутива: 4,9 Мбайт

Спосіб поширення: freeware (модуль можна скачати за адресою: http://www.corel.com/servlet/Satellite?pagename\u003dCorel/Downloads/Details&id\u003d1042152917172)

Ціна: безкоштовно

Робота під управлінням:Windows 98 / NT / 2000 / Me / XP

Підтримка браузерів: Microsoft Internet Explorer 5.5 і вище, Netscape Navigator або Communicator версій 4.79, 7.02

Програми для створення SVG-графіки

Всі програми для створення SVG-графіки можна розбити на три великі групи. В першу входять популярні двовимірні графічні пакети, орієнтовані на роботу з векторною графікою і дозволяють разом з тим експортувати зображення в формат SVG. Найбільш популярні з них Adobe Illustrator і CorelDRAW; крім того, подібний експорт в тій чи іншій мірі підтримує безліч інших додатків: AutoCAD, Microsoft Visio і ін. Основною перевагою даної групи додатків є те, що вони мають розширеним інструментарієм для створення векторних зображень і дозволяють домогтися унікальних ефектів за рахунок використання прозоростей, градієнтних заливок, різноманітних фільтрів та ін. Але зазначені додатки вимагають серйозної спеціальної підготовки і тому більшою мірою розраховані на професійних дизайнерів. Крім того, вони за великим рахунком не орієнтовані на SVG-дизайн (хоча і дозволяють отримувати графіку в форматі Scalable Vector Graphics) забезпечуючи зручне візуальне створення і відображення зображень, ці програми не допускають коригування їх на текстовому рівні, що актуально в відношенні SVG- графіки. Істотним є і той факт, що підтримка формату Scalable Vector Graphics в них реалізована не в повному обсязі, в результаті чого не всі елементи векторного зображення можуть бути без помилок експортовані в SVG.

Другу групу програмних продуктів утворюють пакети, призначені виключно для створення SVG-графіки. Вони мають набагато меншими можливостями в плані візуальної розробки векторних зображень, хоча і включають весь необхідний інструментарій. Але зате вони надають зручні засоби для редагування вихідного коду і дозволяють працювати з SVG-об'єктами паралельно і у візуальному режимі, і на рівні коду, причому між цими варіантами представлення інформації можна легко перемикатися. Всі додатки з цієї групи дуже прості і доступні і не вимагають багато часу на освоєння. До того ж вони мають відносно невеликі за обсягом дистрибутиви (в порівнянні з додатками першої групи), тому без проблем можуть бути придбані через Інтернет. Однак програм з такими можливостями зовсім небагато, і нижче ми детально розглянемо лише чотири, що представляють найбільший інтерес і розраховані на різні категорії користувачів. З повним списком доступних для створення SVG-графіки додатків можна ознайомитися за адресою: http://wiki.svg.org/Design_Tools.

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

Повнофункціональні графічні додатки, що дозволяють створювати SVG-графіку

Adobe Illustrator CS2

Розробник: Adobe Systems, Inc.

Розмір дистрибутива: Macintosh-версія 428,9 Мбайт, Windows-версія 398,6 Мбайт

Спосіб поширення: shareware (30-денна демонстраційна версія пакету доступна за адресою: http://www.adobe.com/products/tryadobe/main.jsp#product\u003d27)

Ціна: 665 дол.

Робота під управлінням: Windows 2000 з Service Pack 3 або Windows XP, Mac OS X версій від 10.2.4 до 10.2.7, Java Runtime Environment 1.4.1

Починаючи з 9-ї версії в Adobe Illustrator (рис. 3) реалізовані імпорт та експорт SVG-файлів, причому на значно вищому в порівнянні з аналогічними графічними додатками рівні. Пакет підтримує всі існуючі SVG-специфікації, кодування ISO 8859-1, UTF-8 та UTF-16, різні варіанти експорту тексту і дозволяє експортувати зображення як в звичайному форматі SVG, так і в стислому SVGZ.

У створюваної в його середовищі SVG-графіку можна використовувати градієнти, прозорості, а також цілу серію спеціально передбачених для цього SVG-ефектів (Effect \u003d\u003e SVG Filters) у вигляді різних тіней, розмиття і ін. Зображення з такими ефектами зберігають чіткість при перегляді в web-браузері з будь-яким збільшенням. Крім статичної графіки Illustrator дозволяє отримувати і інтерактивну графіку в форматі SVG для цієї мети передбачена спеціальна палітра SVG Interactivity (її можна відкрити з меню Window \u003d\u003e SVG Interactivity), в якій задаються дії для інтерактивних об'єктів. Варто відзначити, що робота над інтерактивними SVG-елементами в програмі Illustrator вимагає знання мови Java Script і розуміння основних принципів об'єктно-орієнтованого програмування. Крім того, за допомогою формату Scalable Vector Graphics в даній програмі можна створювати графіку динамічних даних (Dynamic Data-Driven Graphics).

CorelDRAW Graphics Suite 12

Розробник:Corel Corp.

Розмір дистрибтива: 200 Мбайт

Спосіб поширення: shareware (демонстраційну версію можна скачати з сайтів Інтернет-магазинів, наприклад за адресою: http://allsoft.ru/Download.php?ver\u003d17605)

Ціна: 290 дол. (Allsoft.ru)

Робота під управлінням:Windows NT / 2000 / XP

Відоме додаток для розробки професійної векторної графіки CorelDRAW (рис. 4), що входить до складу пакету CorelDRAW Graphics Suite 12, забезпечує імпорт і експорт в форматах SVG і SVGZ на базовому рівні, а отже, може використовуватися для створення статичної та інтерактивної SVG-графіки.

в SVG-файл в CorelDRAW

У додатку реалізована підтримка нерозпізнаних даних, атрибутів і метаданих, а також передбачена можливість попереднього перегляду SVG-файлів в браузері перед експортом. Крім того, можлива кодування Unicode для методів кодування UTF-8 і UTF-16 і різні варіанти експорту тексту і bitmap-зображень. В останній версії значно покращена підтримка експорту символів, тексту, тіней, контурів, шарів, впроваджених довічних зображень тощо.

Mayura Draw 4.3

Розробник: Mayura Software

Розмір дистрибутива: 1,3 Мбайт

Спосіб поширення:shareware (демонстраційна версія http://www.mayuradraw.com/mdraw.zip)

Ціна: 39 дол.

Робота під управлінням: Windows 95/98 / Me / NT / 2000 / XP

Mayura Draw (рис. 5) дуже проста і дешева програма створення векторної графіки, розрахована на широкого користувача. Отримані в ній векторні зображення при бажанні можна експортувати в формат SVG, і тому Mayura Draw може стати можливим рішенням для розробки статичної SVG-графіки. Програма підтримує всі основні інструменти векторної графіки і дозволяє отримувати векторні зображення на основі графічних примітивів, лінійних і криволінійних контурів і тексту. У переліку її можливостей зручні засоби вирівнювання, розподілу і впорядкування об'єктів, управління прозорістю, використання напрямних і лінійок для точного розміщення об'єктів і різноманітні трансформації.

Спеціалізовані пакети для створення SVG-графіки

EvolGrafiX XStudio 6.1

Розробник:EvolGrafiX

Розмір дистрибутива:7,25 Мбайт

Спосіб поширення: http://www.evolgrafix.de/htDocs/files/trials/xstudio6x/XStudio6-Trial.exe)

Ціна: 449 дол. Комерційна ліцензія, 249 дол. Академічна ліцензія

Робота під управлінням: Windows 2000 / XP

Професійний пакет XStudio (рис. 6) являє собою зручний інструмент для створення різнопланової SVG-графіки для Мережі і мобільних пристроїв і забезпечує повний контроль як над SVG-проектом в цілому, так і над векторними зображеннями, анімацією, скриптами та ін. Додаток відрізняється зручним , інтуїтивно зрозумілим і легко настроюється для користувача інтерфейсом, надає широкий набір інструментальних засобів, має високу швидкість роботи, дозволяє створювати SVG-графіку всіх існуючих специфікацій і підтримує всі стильові оформлення Scalable Vector Graphics. Все це в поєднанні з відносно невисокою для професійного пакета ціною дозволяє вважати його найкращим професійним рішенням подібного плану. Пакет XStudio поставляється з докладною документацією, доповненої серією уроків, і простий в освоєнні.

Мал. 6. Поєднання візуального створення зображення з правкою вихідного коду
в EvolGrafiX XStudio

Додаток має всі необхідні можливості для створення і обробки векторних зображень і в цьому плані дуже нагадує пакет Adobe Illustrator. При цьому XStudio орієнтований безпосередньо на підготовку статичної, інтерактивної і анімаційної SVG-графіки і тому поряд з класичними засобами роботи з векторними об'єктами доповнений специфічними SVG-можливостями. Вбудована інструментальна панель Document Object Model (DOM) забезпечує ієрархічне уявлення SVG-об'єктів, зручний XML-редактор дозволяє виправляти вихідний код на текстовому рівні, а скриптовой редактор доповнювати його Java-скриптами. Робота з кодом організована дуже зручно: автоматично виділяються фрагменти коду вибраного об'єкту, є можливість пошуку тексту і установки закладок та ін. Будь-які зміни коду миттєво відображаються в візуальному вікні перегляду, а візуальні зміни у вікні редактора.

Inkscape

Розробник: IOSN (International Open Source Network Міжнародна мережа відкритого ПЗ)

Розмір дистрибутива: 8,7 Мбайт

Ціна:безкоштовно

Робота під управлінням: Windows 9x / NT / 2000 / XP, Mac OS X, Linux

Inkscape (рис. 7) найперспективніший векторний редактор на базі моделі Open Source, який є набір інструментів, написаний і представляє собою потужний інструмент для розробки графіки відповідно до стандарту Scalable Vector Graphics. Своїми функціональними можливостями роботи з векторними зображеннями, так само як і інтерфейсом, Inkscape дуже нагадує CorelDRAW. У ньому реалізовані підтримка alpha-каналів, робота з шарами, використання обтічного тексту, ефектні градієнтні заливки, велике число фільтрів і ефектів, різноманітні трансформації, зручна робота з контурами і об'єктами, угруповання об'єктів і багато іншого. Можливі імпорт даних з файлів JPEG, PNG і TIFF і впровадження їх в SVG-зображення.

вбудованого редактора Inkscape

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

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

Corel WebDraw

Розробник: Corel Corp

Розмір дистрибутива:15,6 Мбайт

Спосіб поширення: shareware (30-денна демонстраційна версія http://www5.jasc.com/pub/wdw102ev.exe)

Ціна: 179 дол. Download-версія, 199 дол. CD-версія

Робота під управлінням: Windows 98 / NT4 / 2000 / Me / XP

Пакет Corel WebDraw (рис. 8), більш відомий як Jasc WebDraw, універсальне рішення для створення високоякісної графіки та анімації в форматі SVG, орієнтоване на професійних дизайнерів. А інтуїтивно зрозумілий інтерфейс програми робить її привабливою і для широкого кола користувачів.

У додатку доступний великий набір стандартних графічних інструментів, характерних для повнофункціонального додатки роботи з векторною графікою: базові форми (еліпс, прямокутник, зірка і ін.), Перо, полігон, полілінія, текст і т.п. Поряд з векторними об'єктами WebDraw дозволяє доповнювати SVG-об'єкти зовнішніми растровими зображеннями. Крім звичайних заливок і накладення готових стилів можна використовувати складні градієнти, заливки, в тому числі і створені власноруч візерунки. Для отримання більш ефектних зображень можна скористатися фільтрами як досить простими (розмиття і накладення тіні), так і складними (текстурирование і освітлення). Для точного розміщення об'єктів призначені сітки, напрямні та лінійки, а вбудована інструментальна панель Document Object Model (DOM) являє SVG-об'єкти у вигляді ієрархічного дерева, що істотно спрощує управління.

WebDraw оснащений універсальним лінійкою розкадровки анімації Animation Timeline, яка побудована на базі об'єктної моделі SVG DOM (Document Object Model), що дозволяє вибирати і анімувати практично будь-який атрибут або властивість об'єкта всіх типів в будь-який час. Механізм перетягування дозволяє редагувати безпосередньо в монтажній лінійці початкову і кінцеву точки анімації, а також тривалість кожної фази анімації. Оскільки ключові точки анімації (keytime) вставляються кожен раз при установці параметрів анімації для атрибута або властивості об'єкта, їх можна переносити на інші ділянки розкадровки з метою автоматичної настройки розподілу ефектів анімації в часі.

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

Sketsa SVG Editor 3.2.3

Розробник:KIYUT

Розмір дистрибутива:5,99 Мбайт

спосіб поширення: Shareware (демонстраційна версія, що додає мітку на зображення, http://www.kiyut.com/products/sketsa/sketsa.zip)

Ціна: 49 дол.

Робота під управлінням: Windows 2000 / XP, Java VM (JRE) 1.5 і вище (http://www.java.com/getjava), UNIX і Linux

Додаток Sketsa (рис. 9) відноситься до найпопулярніших з SVG-редакторів і дозволяє створювати професійну SVG-графіку, в тому числі з оптимізацією в форматі SVGZ. Пакет вдало поєднує в собі простоту і зручність роботи з широким переліком можливостей і сумісний з Windows-, Mac- і Linux-системами.

Sketsa підтримує класичний набір характерних для будь-якого векторного додатки інструментальних засобів, що дозволяють створювати і трансформувати будь-які векторні об'єкти на основі як контурів, так і графічних примітивів і тексту, які при бажанні нескладно доповнити растровими зображеннями. Можливо управління прозорістю, використання градієнтних заливок і фільтрів. Все це вдало доповнено спеціалізованими SVG-можливостями, завдяки яким будь-яке зображення можна редагувати не тільки візуально, але і в текстовому режимі. Для редагування SVG-коду в пакеті передбачений вбудований текстовий редактор XML. З метою зручності управління об'єктами є вбудована інструментальна панель Document Object Model (DOM), що представляє собою ієрархічний деревовидний набір об'єктів в документі 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» і отримаєте результат.

Повна назва формату svg - Scalable Vector Graphics. По суті своїй це текстовий документ з розміткою XML, переглянути який можна за допомогою програми Notepad ++. Спочатку розроблявся як формат векторних зображень для використання на веб-сайтах, проте незабаром перекочував і «в звичайне життя». Крім статичної графіки є підтримка анимированной. Зображення складається з декількох фігур, які можна переміщати, групувати, накладати маски, фільтри, ефекти.

Чим відкрити файл з розширенням SVG

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

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

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

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

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

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

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

Форматів для зображень існує дуже багато, але всі вони діляться на два великі класи - растрові і векторні. Перші в основному використовуються для різної складної і детальної графіки, наприклад, фотографії. У них кожен піксель - найдрібніший елемент, може мати власний колір, і в файлі, в загальному, просто зберігаються кольору для кожної точки зображення. Звичайно, використовуються різні методи, щоб стиснути обсяг інформації, і від цього відбувається багато растрових форматів - bmp, png, jpg і інші. Зазвичай найкращу ефективність показує jpg, так як виходить невеликий файл при досить хорошій деталізації. Але у нього є недолік - втрата інформації при стисненні інформації. Тому, якщо зменшувати розмір файлу, відбувається погіршення зображення.

Робота з файлами SVG.

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

Загальний опис розширення

Тип файлу SVG - скорочення від Scalable Vector Graphics, тобто масштабируемая векторна графіка. Для опису зображення використовуються мови розмітки VML і PGML. По суті, це текстовий документ, в якому для кожної фігури описані координати вершин і ліній, що проходять через них, а також кольору різних елементів. Перша версія цього формату вийшла в 2001 році, і зараз активно розробляється друга версія. Тобто він є перспективним і розвивається. Одна з переваг - малий розмір файлу, в якому можуть бути збережені досить складні малюнки. Тому зараз все більше іконок, піктограм, логотипів та інших елементів сайтів використовується саме в цьому форматі, а не в растрових. Це прискорює завантаження сайту. До унікальних можливостей формату SVG відносяться інтерактивність і анімація. Перша дозволяє зображенні реагувати на дії користувача, наприклад, на клік мишкою або переміщення якихось елементів. Анімація дозволяє створювати досить складні сценарії. Все разом дозволяє створювати дуже красиві і живі графічні елементи для сайтів. Їх навіть можна вбудовувати в звичайні растрові зображення в форматах png, jpg і інших.

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

В Інтернеті можна знайти безліч таких картинок на фотостоках, в тому числі безкоштовних. Створюються вони в графічних редакторах Adobe Photoshop, Illustrator, Corel Draw, і деяких інших. Але виникає питання - чим відкрити формат SVG. Адже вбудовані засоби Windows не показують, які картинки в них містяться. Хоча редагувати SVG можна навіть в текстовому редакторі, наприклад, в Блокноті, адже це текстовий документ, але для цього потрібно мати чималі знання в мовах розмітки. Відкрити файл SVG можна або в програмі, в якій він створювався, або в якому-небудь іншому графічному редакторі, який підтримує цей формат. Найпопулярніші:

Звичайно, цими назвами список програм для роботи з векторною графікою не вичерпується. Їх дуже багато, в тому числі і найпопулярніший редактор Adobe Photoshop може зберігати зображення як вектори і має плагін для їх відкриття. Не варто забувати і про популярний редактор векторної графіки Corel Draw, який можна назвати найпопулярнішим.

Що ще може викликати проблеми з файлом

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