Файли SVG: від Illustrator до Веб

Scalable Vector Graphics (SVG) – векторний формат зображень. який почав розвиватися з 1998 року. Він завжди розроблявся з урахуванням веб, проте тільки зараз веб власне почав надолужувати згаяне. Сьогодні ніхто не заперечує його важливість, так що давайте поглянемо, як перенести SVG з Illustrator до веб-браузера.

Зверніть увагу: я використовую Adobe Illustrator CC для демонстрації прикладів у цьому посібнику, проте в інших версіях є подібні (якщо не ідентичні) опції та інструменти.

Чим корисний SVG?

Формат був розроблений та підтримується World Wide Web Consortium (W3C) (* Консорціум Всесвітньої павутини. Тут і надалі примітка перекладача). W3C складається з групи розумних людей, які намагаються стандартизувати веб, роблячи його відкритим та доступним місцем для всіх.

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

Розмір файлу завжди становить проблему у веб (ніхто не хоче чекати, поки зображення розміром 5Tb завантажиться у браузер по мобільному з'єднанню), і тому ми маємо SVG – спрощений векторний формат. Він заснований на XML, і багато зайвого «мотлоху» видаляється, завдяки чому виходить відносно легковагий файл.

Нарешті, за наявності цих будівельних блоків XML вмістом файлу SVG можна маніпулювати та задавати для нього стильове оформлення таким же чином, як і для будь-якого іншого елементу веб-сторінки. Частини всередині SVG може бути ізольовано, кольори та насиченість шрифту можуть бути змінені, як і прозорість, ми навіть можемо застосувати певні фільтри (такі як фільтр для додання ефекту розмитості), навіть додати анімацію – все це за допомогою коду CSS та JavaScript.

Коли б вам міг стати у пригоді SVG?

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

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

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

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

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

Анімація: за допомогою CSS та JavaScript для веб відкрився цілий світ анімації. SVG також є чудовим посередником у цей світ через всі перелічені мною раніше причини. Можете уявити кнопки, які анімуються, коли ви переміщуєте курсор мишки поверх них? Іконки, які надають вам безпосередній персональний зворотний зв'язок? Дійсно, меж нема.

Що ж, ось що з себе являє SVG. Векторний формат, розроблений з урахуванням веб. Давайте подивимося, як ми можемо його використовувати.

Зберігаємо файл у форматі SVG

Ми будемо працювати з найпростішим зображенням, щоб продемонструвати вам, як працювати з SVG.

Новий документ

Відкрийте Illustrator, почніть створювати новий документ (File > New Document), дайте йому назву за бажанням та задайте в якості розмірів Artboard (* монтажної області) 300 x 300px.

Вибираємо зображення

На цьому етапі те, що ви використовуєте в якості своєї демоверсії вектора, особливого значення не має, проте виберіть щось відносно просте. Я скористався гліфом "No Pirates Allowed", який безкоштовно доступний у складі шрифту "Webdings" (ніколи не думав, що він мені може стати у пригоді!).

Перейдіть до панелі Glyphs (Type > Glyphs), потім виберіть шрифт "Webdings" для перегляду різних доступних персонажів.

Після вибору інструмента Text Tool виберіть Artboard, потім двічі натисніть по вашому гліфу, щоб їм скористатися.

Перетворюємо на контур

Тепер ми перетворюємо цей гліф на контур.

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

Виберіть гліф за допомогою Selection Tool (V):

Потім виберіть Type > Create Outlines.

Супер! Тепер ми маємо векторний об'єкт, створений на основі шляхів.

Зберігаємо результат

Для того щоб зберегти цей документ у форматі SVG, виберіть File > Save або File > Save As.. У з'явившемуся діалоговому вікні виберіть розташування для файлу, дайте йому назву (якщо ще цього не зробили) і, що надзвичайно важливо, виберіть в якості формату SVG:

Далі з'явиться інше діалогове вікно, у цей раз із деякими опціями SVG.

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

Ми трохи ознайомимося з деякими з них пізніше, проте у цей раз натисніть OK.

У нас є файл SVG!

І потім йдуть ті опції SVG

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

Порівняння SVG з SVGZ

Почнемо з того, що ми могли би вибрати два потенційних формати у діалоговому вікні для зберігання файлу.

SVGZ – сильно стиснута (архіватором zip, я гадаю) версія SVG. У результаті виходить файл меншого розміру, проте код XML у самому файлі стає незрозумілим, що завадило би нам маніпулювати векторами за допомогою коду CSS та JavaScript, якщо би ми того захотіли.

SVG Profiles (* Профілі SVG)

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

Вони означають (приблизно) наступне:

• SVG 1.0: перше втілення SVG (2001)
• SVG 1.1: майже те саме, що й SVG 1.0, за винятком того, що у версії SVG 1.1 можуть бути виділені подальші підтипи, якими є...
• SVG Tiny 1.1: це перший підтип SVG 1.1, оптимізований з урахуванням мобільного веб. Це дуже спрощена форма SVG, призначена для «мобільних пристроїв з дуже обмеженими можливостями». Ця версія не підтримує можливість додання градієнтів, прозорості, масок, символів, патернів, підкресленого тексту, вертикально-орієнтованого тексту або ефектів, що реалізуються за допомогою фільтрів SVG.
• SVG Tiny 1.1+: трохи вдосконалена версія SVG Tiny 1.1, в якій додано підтримку градієнтів та прозорості.
• SVG Basic 1.1: це другий підтип SVG 1.1, розроблений для більш просунутих мобільних пристроїв, таких як смартфони. У цій версії нема підтримки вирізання непрямокутної області та деяких ефектів, що реалізуються за допомогою фільтрів SVG.
• SVG Tiny 1.2: спочатку передбачалося, що ця версія стане наступною повною специфікацією SVG, проте врешті-решт стала вдосконаленням підтипу Tiny. Не запитуйте мене, у чому полягає різниця.

Скоро ми зможемо додати SVG 2.0 до цього переліку. Насправді нюанси цих профілів нам майже не цікавлять. За допомогою SVG ми можемо реалізувати все що завгодно, проте при роботі з простими векторами дотримуйтеся поточної версії за налаштуванням – SVG 1.1, і з вашою графікою буде все завжди у порядку у веб.

Fonts (* Шрифти)

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

• Adobe CEF: при цьому значення опції використовується гінтінг (* механізм зменшення насиченості (товщини контурів)) для покращення типографської розмітки тексту. Проте цей варіант не підтримується всіма програмами перегляду SVG.
• SVG: при цьому значення опції підтримується максимум можливостей; цей варіант підтримується всіма програмами перегляду SVG, проте нема покращення типографської розмітки тексту.
• Convert To Outlines: при цьому значенні опції видаляється підтримка всіх можливостей редагування, проте текст залишається тим самим, де б він не переглядався. У результаті вибору цього варіанту трохи збільшується розмір файлу, оскільки потрібно описати шляхи, а не просто вказати, які знаки присутні.

Частина опції для налаштування оброблення шрифту включає до себе Subsetting. Налаштовувати цю опцію варто тільки тоді, коли ви вирішили не перетворювати ваш текст на контур.

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

Options

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

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

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

Зверніть увагу: рекомендується, щоб ви мали робочій AI-файл (* файл у форматі Adobe Illustrator Artwork), яким можна скористатися для редагування зображення.

Декілька кнопок

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

• More Options: давайте на будемо їх зараз обговорювати, добре?
• SVG Code...: показ коду XML, що міститься у SVG-файлі, прямо у текстовому редакторі.
• Globe: відкриття SVG-файлу прямо у веб-браузері. Саме так ви можете перевірити, чи все з ним гаразд.

Використання SVG у веб

Якщо ви не працювали безпосередньо з веб, HTML, браузерами та подібним, то вам потрібно звернути вашу увагу на декілька моментів.

Веб-браузери

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

Старіші веб-браузери, такі як Internet Explorer 8 та більш ранні версії, не підтримують формат SVG, і, нажаль, не підіграють нам.

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

Перше, на що варто звернути увагу, – те, що у зображення залишилися початково задані розміри. Наше зображення відобразилося в області з розмірами 300 x 300px, зовнішні границі якої було задано на основі розмірів монтажної області, і іконка пірата розмістилася там, де й повинна бути, – у центрі.

Додавання SVG до веб-сторінки

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

Для початку нам потрібна веб-сторінка. Нам достатньо буде пустого файлу з розширенням .html, збереженого у звичайному текстовому редакторі. До нього не потрібно додавати ніякого коду, проте якщо ви зацікавлені в опануванні основ HTML, то погляньте на посібник The Best Way to Learn HTML, коли у вас буде час.

Нижче наведено мій файл, відкритий у TextEdit для Mac OS X, проте ви можете використати будь-який текстовий редактор або редактор коду, який вам до вподоби.

Цей файл відкриється у веб-браузері цілком нормально у тому вигляді, в якому він зараз є, проте нам потрібно додати деякий код HTML-розмітки, щоб додати SVG. І для цього є декілька підходів:

Підхід, який реалізується за допомогою тегу  <img>

По-перше, ми можемо скористатися тегом для додання зображень (який, ви ймовірно, використовували для додання файлів JPG, PNG тощо), в якому вказано точний шлях до файлу в атрибуті src="". Додайте цей фрагмент коду до вашого HTML-файлу:

<img src="SVG-Test.svg" />

Якщо шлях вказано коректно, то ваша HTML-сторінка відкриється у браузері подібним чином:

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

<img src="SVG-Test.svg" width="900" />

Цей підхід, мабуть, – найпростіший, проте має свої недоліки. Деякі браузери, з міркувань безпеки, обмежать коло ваших можливостей для роботи з SVG (наприклад, за допомогою JavaScript). Давайте поглянемо на альтернативні підходи.

Підхід, який реалізується за допомогою тегу  <object>

Тег <object> використовується подібним чином, проте ви вказуєте шлях до файлу наступним чином:

<object type="image/svg+xml" data="SVG-Test.svg"></object>

Результат виходить той самий:

Ви можете навіть помістити попередження у вмісті <object> для відображення у випадку, якщо браузер на підтримує SVG:

<object type="image/svg+xml" data="SVG-Test.svg">This browser sucks</object>

Багато веб-дизайнерів згодні з тим, що цей підхід наразі – найнадійніший та найгнучкіший спосіб використання SVG у веб-сторінці.

Підхід, при якому код SVG додається безпосередньо у документ

Ми говорили про те, що SVG працює на основі XML, і якщо ви відкриєте ваш текстовий редактор, то побачите дещо подібне:

Вау, що за куча нісенітниці! Власне, по закінченні стартового шоку у вас повинно буде вийти побачити деякий смисл серед неї. Ми можемо використовувати цей код XML прямо у документі, додавши його безпосередньо до HTML-файлу.

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

За бажанням можете запросто видалити рядок з  <!DOCTYPE>, коментар з <!-- Generator: Adobe Illustrator і навіть код з <?xml.

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

<svg>
  <path/>
</svg>

Наш SVG:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

	<path d="M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743
		c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150c0-19.533,6.914-36.213,20.743-50.042
		C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742C213.87,113.786,220.784,130.467,220.784,150z
		 M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.537,150,90.537c-14.693,0-27.6,4.753-38.72,14.261
		l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705,36.819c0,16.422,5.804,30.438,17.415,42.048
		c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791l-10.199-10.112l7.778-8.643l10.804,10.717
		C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236
		c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.071-5.013-7.605-11.092-7.605-18.236v-15.212
		c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2.708,0.994-5.069,2.982-7.087
		c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.593c7.548,5.302,11.322,12.044,11.322,20.225
		V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z
		 M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z
		 M170.311,128.824l-2.247-4.84l-39.67,4.754v5.186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z
		 M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45-3.774,3.674-7.173,3.674
		c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z
		 M138.678,151.728l-2.939,3.112l-2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z"/>

</svg>

Підхід, при якому SVG-зображення додається у складі фонового зображення, що задається у коді CSS

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

Ми виходимо за межі цього посібника зараз, проте якщо ви хочете розібратися з основами CSS, то погляньте на The Best Way to Learn CSS.

Ми можемо скористатися окремим файлом CSS, підключаючи його у нашому HTML-документі, або ж тегами <style> безпосередньо у нашому HTML-документі. Наше стильове правило виглядало би наступним чином:

html { background-image: url(SVG-Test.svg); }

Воно стверджує, що наш SVG-файл повинен відображуватися в якості фону нашого HTML-елемента.

Завершення

На цьому ми завершуємо з основними відомостями! У цьому посібнику ми розглянули, як створювати SVG та основи використання SVG у веб.

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

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