SVG-профілі
- SVG 1.0: всі сучасні настільні та мобільні браузери підтримують SVG 1.1, тому ніколи не вибирайте цю опцію.
- SVG 1.1: Ви майже завжди цього хочете.
- SVG Tiny / Basic: це підмножина SVG, призначена для мобільних пристроїв. Лише декілька пристроїв підтримують SVG Tiny, а не повну специфікацію, тому перейдіть на SVG 1.1.
Примітка: SVG Tiny не зменшує розмір файлу, це лише підмножина SVG, яка є достатньою для пристроїв з низькою потужністю обробки. Він відкине градієнти, непрозорість, вбудовані шрифти та фільтри. Ерік Даллстрем каже: Усі повні глядачі SVG 1.1 повинні мати можливість відображати весь вміст SVG 1.1 Tiny / Basic (відповідно до специфікації), а також, ймовірно, і весь вміст SVG 1.2 Tiny, який створює і Illustrator.
Примітка шрифтів : якщо у вас немає тексту на зображенні, це налаштування не має значення.
Adobe CEF: ніколи не використовуйте цю опцію, яку ви маєте намір відображати в браузерах. Це спосіб Adobe вбудовувати шрифти у файли SVG, наскільки я знаю, це підтримується лише плагіном для перегляду SVG Adobe Adobe.
SVG: цей шрифт вбудовується як SVG, який не підтримується Firefox, але є хорошим варіантом, якщо ви маєте намір підтримувати лише мобільні пристрої (які зазвичай запускають webkit).
Створюйте контури: ви хочете робити це більшу частину часу , якщо у вас не буде великої кількості тексту. Якщо у вас є велика кількість тексту, ви хочете вставити шрифт за допомогою WOFF, але вам доведеться це зробити вручну.
Підмножина :
Нічого: це заперечить попереднє налаштування і не вставить жодного шрифту, якщо вам не байдуже, що шрифт повернеться до якогось іншого шрифту на комп'ютері користувача, виберіть це.
Використовуються лише гліфи: цього ви хочете більшу частину часу, якщо вирішите вставити шрифт. Він вбудовує лише використовувані символи, щоб він не надував розмір вашого файлу.
[решта підмножини]: це досить зрозуміло, ви можете вибрати, щоб включити весь шрифт або його підмножини. Це корисно лише в тому випадку, якщо ваш SVG є динамічним і текст може змінюватися на основі введення користувача.
Зображення : це важливо лише, якщо ви включаєте растрові зображення
Вставити: зазвичай це те, що ви хочете , воно кодує зображення як урі даних, так що ви просто завантажуєте один файл замість файлу svg з його супутніми растровими зображеннями.
Посилання: використовуйте це лише у тому випадку, якщо у вас є кілька файлів svg, на які посилається один файл растрових зображень (тому він не завантажується щоразу, коли він регенерує файл svg).
Зауважте, що пов'язані растрові зображення не відображатимуться, якщо SVG відображатиметься через <img>
тег, оскільки img
не дозволяє завантажувати зовнішні ресурси. Крім того: у веб-програмі є помилка, яка не відображає растрові зображення у файлах svg, навіть якщо ви вставляєте їх. Якщо коротко: використовуйте звичайний <svg>
тег, якщо ви збираєтесь вставляти або пов’язувати растрові зображення, не використовуйте <img>
.
Зберегти можливості редагування ілюстраторів
Я вважаю за краще зберегти .ai-файл як своє вихідне зображення та вважати файл SVG як Export for web
особливість. Таким чином ви зосереджуєтесь на зменшенні розміру файлу і отримуєте незайману копію вашого векторного файлу з усіма можливостями редагування. Тому не вибирайте цього.
Десяткові місця
За замовчуванням 3
- це нормальне налаштування, і про нього можна здебільшого забути.
Однак якщо у вас дійсно складні шляхи, у яких багато точок знижують цей параметр до 1 або навіть 0, істотно зменшиться розмір файлу. Але ви повинні бути обережними, тому що сегменти "без'єр" дуже чутливі до цієї настройки, і вони можуть здатися дещо спотвореними. Тож якщо ви знизите цей параметр, завжди переконайтеся, що він виглядає прийнятним у веб-переглядачі.
Кодування
Пояснення кодування символів досить технічне, і воно стосується лише файлів svg з текстом. Найімовірніше, що вам потрібно кодування - UTF-8 , не змінюйте цього, якщо ви не знаєте, що робите.
Оптимізуйте для Adobe SVG Viewer
Adobe SVG Viewer - це плагін веб-переглядача, коли браузери не підтримували SVG оригінально. Я не знаю, що це робить, але це не має значення, не перевіряйте цього .
Включити дані нарізки
Це додає розширення метаданих до вашого SVG-файлу, якщо ви не плануєте відкривати файл SVG пізніше в Illustrator та знаходити свої фрагменти (якщо у вас є), не перевіряйте це
Включити XMP
Більше метаданих щодо файлу ви можете прочитати на XMP тут . не перевіряйте цього
Виведіть менше <tspan>
елементів
Це буде сірим, якщо у вас немає тексту. SVG не підтримує таблиці кернінгу, тому певні послідовності символів здадуться занадто розставленими, тобто AVA
. Illustrator працює навколо, додаючи tspan
елементи і трохи змінюючи позиції символів. Це додає файлу трохи тексту, не перевіряйте це, якщо ви не піклуєтесь більше про розмір файлу, ніж про вигляд тексту .
Використовуйте <textpath>
елемент для тексту на шляху
Це буде сірим, якщо у вас немає тексту на шляху. Браузери, як правило, сильно відрізняються, коли мова йде про розміщення тексту на шляху, тому Illustrator намагається бути корисним, застосувавши обертання та положення до символу, а не залишаючи завдання браузеру. не перевіряйте це, якщо вас більше не хвилює розмір файлу, ніж вигляд тексту .
Загалом, я б рекомендував вам заглянути в SVG взагалі, ви побачите, що він дуже схожий на HTML і дозволяє налаштувати речі, які неможливо зробити в Illustrator.