Оптимальні параметри експорту SVG-файлів для Інтернету з Illustrator?


128

Я хочу використовувати логотип SVG для веб-сайту, щоб він чудово виглядав на чуйному дизайні для всіх пристроїв.

Але оскільки є проблеми , я хочу підтримувати якомога більше пристроїв та браузерів. Швидкість завантаження також є важливою увагою. Як налаштування експорту в Adobe Illustrator вписуються у все це?

У Illustrator є кілька варіантів експорту SVG. По-перше, який SVG-профіль найкращий?

введіть тут опис зображення

Я припускаю, що SVG Tiny має менший розмір файлу? Чи багато пристроїв підтримують SVG Tiny? Які найважливіші відмінності? (Без того, щоб читати це чудовисько W3 .)

По-друге, я припускаю, що найкращим варіантом розташування зображення є "посилання"? (Див. Опис після знака оклику.)

введіть тут опис зображення

Як альтернатива, як підтримується веб-переглядач для опції "embed"?

введіть тут опис зображення

Дякую!

PS Буде опція резервного альфа-PNG, але я хочу, щоб SVG підтримувався якнайкраще. (Подумайте про це, такий варіант резервного копіювання - як JPG - мабуть, найкраще подаватиметься в цьому випадку, оскільки альфа-PNG сам потребує рішення для старих IE.)

Оновлення: Є також більше параметрів, які можна налаштувати. Я не працюю з текстом, тому єдине, що я бачу, - це десяткові знаки. Для логотипів щось відображається максимально 200x200px (тобто 400x400px на дисплеях Retina), "3" - це найкращий параметр? Або "2", щоб мінімізувати розмір файлу?

введіть тут опис зображення


4
І питання, і відповідь справді хороші в цьому - підкріплюють і Баумр, і Дуопіксель.
aendrew

Відповіді:


215

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.


Дякую! Яка детальна відповідь! Я припускаю, що SVG Tiny має менший розмір файлу? І коли ви сказали: "Лише кілька пристроїв підтримують SVG Tiny, а не повну специфікацію" , ви мали на увазі, що не багато пристроїв підтримують SVG Tiny? Я здогадуюсь, що я насправді запитую, які найважливіші відмінності? (Без читання цього монстра W3 .) Ще раз дякую! Оновлення: до оригінального питання я додав додаткову частину про десяткових знаків, якщо вас цікавить. Я відкрив SVG в текстовому редакторі - що читати, щоб знати, який XML вийняти?
Баумр

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

Знову дякую. Не кажіть таких речей, як "ви б тільки отримували покриття для старих телефонів BlackBerry" - змушує мене розглянути це незалежно від того, як застаріли: P
Баумр

4
якісь пропозиції для розділу "розширені варіанти"?
RZKY

1
@Duopixel, будь ласка, можете оновити свою відповідь за допомогою "Додаткові параметри"? Властивості CSS, десяткові місця (вже у відповіді), кодування, оптимізація для Adobe SVG Viewer, включення даних про нарізки, включення XMP, виведення менших елементів <tspan> і останнє використання елемента <textPath> для тексту на шляху.
PussInBoots
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.