Найкращий спосіб експорту SVG з ескізу

І що ви повинні знати, перш ніж використовувати Копіювати SVG-код.

Експорт SVG-файлу з програми "Ескіз" є простим, але процес створення ефективного та надійного SVG, адаптованого до ваших потреб, є набагато більшою темою. Це насправді така складна тема, що я пройшов цілий курс про неї, яку сьогодні випускаю після 8 місяців розробки! Але ця стаття - не крок продажів; це технічний посібник із поширених питань, які задають дизайнери.

Поширене питання при експорті SVG з Ескізу: “Яку функцію потрібно використовувати для експорту? Скопіювати SVG-код? Кнопка Експорт? Щось ще?"

Я глибоко вивчив кожну з цих особливостей і склав свої висновки та рекомендації для вас у цій статті.

Що стосується форматів растрових зображень, то не має значення, чи були у вас шари в зрізі або в Artboard; чи витягнули ви дизайн із списку шарів для зручності чи використовували кнопку Експорт у Інспекторі. Ваша кінцева графіка буде однаковою.

Але SVG відрізняються. Вони описують ваш дизайн, містять багато інформації про ваші шари. І є тонкі способи, коли ці описи змінюються залежно від способу виведення SVG з ескізу. Графіка буде виглядати однаково, але код під нею буде відрізнятися.

Основні змінні:

Яку особливість виконує експорт
Чи використовується кнопка "Експорт" у "Інспектор", "Копіювати SVG-код" чи перетягуєтесь зі списку шарів або попереднього перегляду експорту інспектора?

Що ви експортуєте
Ви експортуєте Artboard, шар або фрагмент? Якщо ви експортуєте лише вибрані шари або фрагменти, чи містяться вони в Artboard або плавають навколо на полотні?

Інші процеси
Ви покладаєтесь на плагін SVGO Compressor Sketch для оптимізації файлу?

У поєднанні ці змінні дозволяють принаймні з десяток способів експорту SVG зі свого дизайну. То що найкраще?

Витягнення та рекомендації

Якщо вам не байдужі технічні деталі, що містять круту, ось мої поради щодо вашої роботи з експорту SVG:

  • Атборди є ключовими. Завжди майте Artboard навколо своїх шарів і експортуйте Artboard, а не шари або фрагменти всередині нього.
  • Не соромтеся використовувати кнопку Експорт у Інспекторі або функцію Копіювати SVG-код у меню Правка, але, знову ж таки, використовуйте їх у своїй Artboard.
  • Копіювати SVG-код виключає кілька дрібниць, які вам можуть захотіти у своєму SVG-файлі, наприклад, заголовок (для поліпшення доступності) або декларацію XML (що доцільно для SVG-файлів, які використовуються як незалежна графіка).
  • Якщо ви хочете використовувати плагін SVGO Compressor Sketch Sketch, пам’ятайте, що він навмисно працює лише з кнопкою Експорт, а не скопіювати SVG-код.
  • Ознайомтеся із порадами комбінацій клавіш нижче, щоб підвищити свою ефективність!

Щоб зрозуміти, як я дійшов до цих висновків, і які конкретні відмінності між кожним методом експорту, нам потрібно зрозуміти, як розташовані шари в SVG.

"Я звідти, але я переїхав сюди"

Кожен SVG має сітку або "систему координат", в якій розміщуються елементи. Це є принциповим для роботи SVG.

У SVG також є щось, що називається viewBox, і це схоже на Artboard в ескізі. ViewBox визначає, яка частина сітки SVG відображається у вашій кінцевій графіці - все, що всередині, буде видно, а все зовнішнє буде вирізане.

Як загальноприйнята практика, viewBox часто розміщується біля джерела сітки. Іншими словами, верхній лівий кут оглядуBox розміщений у 0,0 (нуль як на осях x, так і y). Він може бути розміщений у будь-якій точці мережі, але більшість сценаріїв виграють від дотримання цієї конвенції.

Під час експорту графіки із Sketch (у будь-якому форматі) існують деякі підходи, які дозволяють вам, користувачеві, визначати розміри вашої графіки та інші, у яких Sketch визначає розміри для вас. Наприклад, якщо ви експортуєте Artboard або фрагмент, ви контролюєте. Якщо ви виберете будь-який шар і натисніть Зробити експортованим, Sketch контролює і створить графіку, яка точно відповідає розміру вибраного шару (плюс його тіні та межі).

Якщо ми експортуємо саме цей червоний шар прямокутника як SVG, навколо прямокутника не буде зайвого місця - viewBox буде такого ж розміру, як і прямокутник. Таким чином, ви можете очікувати, що Sketch позиціонує і viewBox, і прямокутник на 0,0 в новій сітці SVG.

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

Отже, експортуючи саме цей червоний прямокутник, Sketch створює панель перегляду з розмірами прямокутника, але зберігає viewBox на рівні 0,0. Ескіз також поважає початкове положення прямокутника в його Artboard і використовує трюк для переміщення прямокутника на 0,0, не змінюючи його основних атрибутів позиції.

Цей трюк називається перекладом перекладу. Існує багато типів перетворень, таких як масштаб і обертання, але переклад є самим основним: він просто переміщує елемент. Так - «перекласти» - це просто фантазійне слово для «переміщення».

Можливо, здасться зайвим створити елемент в одному місці, а потім негайно перемістити його кудись в інше місце. Але цей двоетапний процес необхідний для збереження початкової інформації про прямокутник прямої позиції, а також дотримується конвенції про розміщення огляду в 0,0 у сітці SVG. Це може здатися дурними причинами, але вони можуть бути важливими, коли ви фактично працюєте з кодом SVG. Ось сценарій у реальному світі:

Коли переклади перетворень є корисними

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

Уявіть, що ви експортували завжди чарівну піктограму "М'ять кита" як SVG, і витратили час на її оптимізацію, налаштування, можливо, анімацію або розміщення її в спрайті. Але тоді ви вносите деякі зміни….

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

Грубе спрощення нового SVG-коду:

  
    <шлях id = "рот" d = "[векторні точки]" ... />
    <шлях id = "спрей-1" ... />
    <шлях id = "спрей-2" ... />
    ...
  
(Жирний = Зміни, які ви скопіювали б в оригінал)
Усі нові шляхи вектора розташовані в тій самій сітці SVG, що і оригінал, тому їх можна легко вставити. Ітерація в SVG - навіть після того, як вона залишила Sketch - стає майже без зусиль.

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

Примітка про оптимізацію

Якщо ви використовуєте Копіювати SVG-код для вибраних шарів і включаєте їх у існуючий SVG (як описано вище), будьте обережні, вводячи цей скопійований код через оптимізатор, наприклад SVGOMG.

Я великий шанувальник SVGOMG, і охоплюю всі його варіанти в моєму курсі, але деякі оптимізації будуть переставляти або згладжувати перекладацьку трансформацію - ту, яку не слід копіювати, коли ви включаєте елемент назад у свій існуючий SVG . Оптимізації, такі як Згорнути непотрібні групи, і Перемістити атрибути від груп до елементів можуть перенести атрибут перетворення на елемент, який ви хочете скопіювати (а не залишати його в групі контейнерів). У такому випадку видалити їх все ще досить просто. Але оптимізація круглих / переписаних шляхів може згладити перетворення у векторні точки цього елемента - фактично зробивши його постійним.

Непогано запускати скопійований SVG-код через SVGOMG - просто переконайтеся, що ви все ще можете знайти цю трансляцію перетворення. А якщо ви копіюєте шари, які перетворяться на <путь> елементи, вам краще скопіювати весь Artboard, щоб взагалі не було перетворення перекладу.

Порада для клавіатур

Якщо ви почнете використовувати і любити Копіювати SVG-код, ось рада, щоб зробити ваш робочий процес ще більш ефективним.

Встановіть дивовижний плагін Sketch Commands; вона додає функцію для вибору аркуша шару, з яким ви працюєте. Потім створіть спеціальні комбінації клавіш у Налаштуваннях системи для цієї команди Поточна дошка та Копіювати SVG-код. Вибрані вами ключі - це особисті переваги - я відобразив їх для переключення ⌘ A (замінивши функцію Select Sketch Select All Artboards) та опцію управління ⌘ S відповідно.

Ці нові комбінації клавіш дозволяють обрати Artboard одним натисканням клавіші та скопіювати її SVG-код в інший!

Як працює кожен метод

Якщо вам цікаво знати точні відмінності між експортними функціями Sketch та всіма згаданими вище змінними, я зробив тут результати своїх тестів:

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

Ця стаття була натхненна моїм новим курсом SVG Workflows у ескізі. Мені б хотілося, щоб у мене були такі ресурси, коли я вивчав SVG, тому я вирішив надати деякі з цих відсутніх творів іншим дизайнерам. Курс має на меті подолати розрив між тим, що ви знаєте в ескізі, та дивовижними речами, які ви створите за допомогою SVG.

Ви також можете підписатись на мій розсилку, щоб першими дізнатися, коли я публікую нові статті та ресурси дизайну.