Як використовувати SVG правильно: написання SVG для Інтернету

DesignTalk.club продовжує великий і цікавий туторіал про .

Читайте першу частину ТУТ!

Читайте другу частину ТУТ!

SVG демонстрація від Вінсента Харді синхронізована аудіо та графічна анімація, що поєднує , JavaScript та симульовану “камеру”

Написання SVG для Інтернету

Оскільки SVG є мовою XML, вона виглядає дуже схожою на HTML, де теги вкладені, і все написано з використанням цих впізнаваних кутових дужок.

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

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

Основні теги форми

SVG має мітки для всіх основних форм; прямокутники та квадрати (<rect>), кола (<circle>), еліпс (<ellipse>), рядок (<line>), полілінія (<polyline>), полігон (<polygon>) і шлях (<path>).

Ці теги використовуються для створення більшості елементів усередині SVG.

Текстовий тег

Текстовий тег (<text>) використовується для створення тексту усередині SVG, який буде вибиратися та доступний, як і будь-який текст у HTML.

Теги доступності

Теги (<title>) та опис (<desc>) призначені спеціально для забезпечення доступності вмісту та не будуть відображатися на екрані.

Груповий тег

Тег групи (<g>) дуже корисний у SVG. Цей тег використовується для групування елементів разом, що дозволяє додавати назви класів та застосовувати анімацію, фільтри, шаблони та ефекти до групи елементів.

Defs тег

Тег defs (<defs>) використовується для визначення елементів для подальшого повторного використання. Тут ви створюєте шаблони, фільтри та маски для повторного використання. Він також використовується для створення систем іконок.

Як встановити SVG для Інтернету

Ця демонстрація від Vincent Hardy поєднує в собі SVG, веб-шрифти та звуковий тег для створення візуально приємної анімації текстів

01. Експортувати SVG

Експортуючи файл із графічного редактора, ми будемо використовувати простий ландшафтний малюнок у SVG, створений Стівеном Робертсом. Sketch та Illustrator експортують зображення як SVG, як і багато інших редакторів.

02. Обріжте жир

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

03. SVGO

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

04. SVGOMG

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

05. Оптимізуйте

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

06. Експортуйте файл знову

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

Далі: фільтри та ефекти SVG

Вам також буде ЦІКАВО:

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь