DesignTalk.club продовжує великий і цікавий туторіал про SVG.
Написання SVG для Інтернету
Оскільки SVG є мовою XML, вона виглядає дуже схожою на HTML, де теги вкладені, і все написано з використанням цих впізнаваних кутових дужок.
Незважаючи на те, що в більшості випадків ви, ймовірно, будете використовувати програмне забезпечення для виведення своїх SVG, все одно варто вивчити основні теги. Навчання цим тегам дозволить вам оптимізувати та швидко вносити зміни до будь-якого елемента вашого SVG. Вам, напевне, знадобиться це знання, щоб використовувати фільтри, ефекти, шаблони, маски та анімацію.
SVG надає дизайнерам можливості, які вони будь-коли мали після згасання спалаху flash. Але на цей раз вміст доступний для читачів екрана та нативно підтримується у браузерах.
Основні теги форми
Ці теги використовуються для створення більшості елементів усередині SVG.
Текстовий тег
Теги доступності
Груповий тег
Defs тег
Як встановити SVG для Інтернету
01. Експортувати SVG
Експортуючи файл із графічного редактора, ми будемо використовувати простий ландшафтний малюнок у SVG, створений Стівеном Робертсом. sketch та illustrator експортують зображення як SVG, як і багато інших редакторів.
02. Обріжте жир
Після експорту файлу відкрийте його за вашим вибором у IDE або текстовому редакторі. Звідси ви можете видалити небажані теги та коментарі та оновлювати теги доступності.
03. SVGO
SVGO – це інструмент оптимізації, який запускається в командному рядку, цей інструмент справді корисний і має ряд варіантів, доступних користувачеві, щоб вибрати, як оптимізувати будь-який SVG.
04. svgomg
Єдина проблема з SVGO полягає в тому, що ви не можете бачити зміни, які ви вносите під час оптимізації. SVGOMG запускається в браузері та візуально показує зміни, які ви робите.
05. Оптимізуйте
Використовуючи веб-програму, вам потрібно імпортувати SVG або файл, або скопіювати розмітку з редактора та вставити її. Тут вам запропоновано безліч варіантів, які дозволяють швидко ввімкнути або вимкнути їх під час візуального перегляду внесення змін.
06. Експортуйте файл знову
Чим більше ви працюєте з SVG і залежно від ваших намірів для будь-якого SVG, ви хочете, щоб налаштування дещо відрізнялися. Редактор показує, наскільки розмір файлу змінився поруч із кнопкою завантаження. Коли ви задоволені налаштуваннями, натисніть кнопку завантаження, щоб експортувати файл.
Далі: фільтри та ефекти SVG
Вам також буде ЦІКАВО: