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

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

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

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

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

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

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

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

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

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

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

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

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

Груповий тег

Defs тег

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

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

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

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

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

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

03. SVGO

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

04.

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

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

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

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

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

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

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

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