Це менше фрагмент, а більше нагадування про те, що я часто шукаю. Під час створення файлів SVG в Adobe Illustrator існує кілька різних методів експорту файлів. Обидва методи включають кілька варіантів, деякі з яких я повністю забуваю, що вони означають і що вибрати.
Спосіб 1: Зберегти як…
Можливо, ви не використовували б цей метод, щоб зберегти SVG для використання в Інтернеті. Це в основному для збереження головного документа. Насправді ви можете просто зберегти у форматі Illustrator безпосередньо. Ви б використали деякі інші варіанти експорту для Інтернету.
Найпоширенішим способом збереження файлу у форматі SVG в Adobe Illustrator є вибір File > Save As… опції в головному меню.
Illustrator запустить діалогове вікно із запитом, як назвати файл та де його зберегти. Що ще важливіше, він також запитує, який тип файлу зберігати як який, у цьому випадку SVG. Не стиснуто SVG (svgz). Рівнина СВГ.
Натисніть кнопку Зберегти, і з’явиться інший набір параметрів. Тут моя пам’ять, як правило, підводить мене, і мені доводиться шукати відповіді в Інтернеті. Ось знімок екрана абсолютно оптимального способу збереження файлу SVG в Adobe Illustrator.
- Профілі SVG : Це встановлює тип документа XML на початковому
тегу. SVG 1.1 є останньою версією, охоплює найширшу підтримку та, ймовірно, найбільш підходящий варіант. Все інше - це або старіша версія, або підмножина SVG 1.1, і я ще не стикався з проблемою при її виборі. - Шрифти> Тип : Вибір пункту «Перетворити на контур» гарантує, що будь-який набраний текст у файлі буде експортовано як векторні шляхи, а не гліфи. Гліфи мають шанс не бути відображеними, але векторні контури - це завжди великі пальці вгору.
- Опції> Розташування зображення : Якщо у файлі використовуються растрові зображення (читати: JPG.webp, PNG, GIF), тоді ми хочемо вибрати параметр «Посилання». В іншому випадку растрове зображення буде вбудовано у файл, і це висмоктує переваги продуктивності прямо з SVG, збільшуючи розмір файлу, включаючи ці додаткові ресурси. Краще посилатися на них як на посилання та обов’язково включати ці вихідні файли в той самий каталог, що і файл SVG.
- Параметри> Розташування зображення> Зберегти можливості редагування Illustrator : це має значний вплив на вихідні дані файлу SVG. Оскільки ви, мабуть, зберігаєте тут "головну" копію, не призначену для нас в Інтернеті, ви залишите це позначеним. Це збереже власні речі Illustrator (наприклад, посібники) під час наступного відкриття файлу. Якщо не встановити прапорець, подібні речі будуть позбавлені і загублені.
- Додаткові параметри> Властивості CSS : Я вибираю «Презентаційні атрибути» для цього, оскільки він розміщує властивості (наприклад, заливки, штрихи тощо) на найнижчому рівні конкретності. Наприклад
. Це стилює елемент, але його дуже легко замінити в CSS. - Додаткові параметри> Десяткові місця : Якщо ви переглядали код для
, то ви знаєте, що значення, що вказують ці фігури, можуть бути надзвичайно точними. Однак багато разів вони є надто точними та додають до загального розміру файлу SVG. Оскільки ви, ймовірно, зберігаєте тут головний файл, ви можете зберегти його досить високим, оскільки розмір файлу не викликає особливих проблем. - Додаткові параметри> Кодування : Я не люблю кодування UTF, але якщо залишити це в “Unicode UTF-8”, це гарантує зворотну сумісність. Крім того, розміри файлів UTF-8, як правило, менші, ніж UTF-16, так що це виграш сам по собі.
- Додаткові параметри> Адаптивний : Якщо не встановити цей прапорець, у SVG будуть встановлені фіксовані
heightтаwidthатрибути. Я перевіряю цей параметр, оскільки він дозволяє мені встановлювати ці атрибути або в коді, або в CSS.
Спосіб 2: Експорт як
Інший спосіб отримати SVG з Adobe Illustrator - вибрати File > Export > Export As… параметр у головному меню. Однак є другий спосіб дістатися за допомогою панелі "Дії" у робочій області Illustrator.
Цей варіант ідеально підходить, якщо ви знаєте, що збираєтесь використовувати цей файл безпосередньо в Інтернеті, і не плануєте пізніше втручатися в дизайн. Він забезпечує набагато менше налаштувань і кілька опцій, які дозволяють файлу додатково оптимізувати файл для кращої роботи. Насправді найкраще робити це на копії файлу, а не на самому головному файлі, тому є одна версія, яку можна відкрити та відредагувати пізніше в Illustrator, а інша, яка більше підходить для розміщення на робочому веб-сайті.
- Стилістика : ми розглянули цю проблему раніше в налаштуваннях Методу 1, але тут я вибираю “Атрибути презентації”, оскільки це спосіб впорядкувати властивості за атрибутами найвищого рівня. Це додає порядку розмітці, гнучкість нашої можливості стилізувати наступні атрибути за допомогою CSS і часто призводить до менших розмірів файлів.
- Шрифт : це ще один, про який ми говорили вище, але при виборі «Перетворити на контури» міняються гліфи на векторні шляхи для символів, що забезпечує правильний візуалізацію тексту.
- Зображення : Це ще одне, про яке ми говорили вище, але вибір “Посилання” запобіжить упаковці растрових зображень у SVG, що робить файл набагато більшим.
- Ідентифікатори об’єктів : Цей параметр дає Illustrator розпорядження щодо маршових ідентифікацій у розмітці. Ви можете сказати йому називати ідентифікатори на основі того, як шари іменовані у файлі.
- Десяткове число : Менше десяткових знаків у коді означає менший розмір файлу. Встановлення цього значення
1ідеально і нормально у багатьох випадках і не матиме помітної різниці в дизайні, але,2як правило, безпечно. У будь-якому випадку, варто перевірити, як відображається SVG. - Зменшити : Так, будь ласка! Це зменшує код, щоб зменшити пробіли та збільшити веб-ефективність, подібно до мініфікації CSS.
- Чуйний : Точно так само, як і перший метод, вибір цього варіанту є ідеальним, оскільки фіксовані
heightтаwidthатрибути будуть розміщені в SVG.