Експорт із ескізу для шрифту значка

Я намагаюся експортувати SVG піктограми з Sketch для імпорту у Fontello, однак SVG не здається правильним для програми (вони також не працюють в IcoMoon).

Піктограма, яку я намагаюся створити як тест, - це проста іконка стилю «гамбургер», яка є лише кількома рядками, але вони працюватимуть неправильно. Найменш шкода сказати.

Хтось має з цим досвід і міг би розлучитися зі своїми знаннями? Дякую.

Я зрозумів, як експортувати SVG із ескізу для правильного імпорту icomoon:

Крок 1

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

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

Крок 2

Експортуйте кожен значок / svg, натиснувши на вкладку Зробити експортер інспектора та обравши формат SVG.

Крок 3

Імпортуйте піктограми SVG в icomoon, як звичайно, тепер набір повинен відображати піктограми правильно, а розмір сітки повинен бути точним. ПРИМІТКА. Переконайтесь, що всі ваші SVG на ескізі мають однакову висоту.

ОНОВЛЕННЯ 2016 Дякуємо @jackocnr за те, що він зазначив:

У 2016 році опцією меню "Ескіз" є "Шар> Перетворити на контури"

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

Загальне рішення

1. Створіть аркуш для кожної піктограми (вставте -> аркуш).
2. Переконайтесь, що в позиції кожного аркуша немає півпікселів і є парне число.
3. Видаліть усі обертання значків.
4. Видаліть усі обмежувальні поля, щоб Sketch не експортував непотрібний код.
5. Не дозволяйте SVG створюватись поза межею шару> контури> штрих векторних розмірів (спасибі Гас )
6. експорт Чистий .svg

* це ікона, яку письменник намагався експортувати

Ескіз помилок, які експортують

Помилка №1

фіксований експорт трансформує ескіз, змінивши положення артборду на рівне число. Це видаляє будь-яке перетворення в коді. З іншого приводу, оскільки положення було вимкнено напівпікселями, Sketch змінив розмір мого вікна перегляду на 0 0 25 25. Оригінальний аркуш склав 24 х 24 пікселі. Ця помилка навіть додала специфікації до коду. Ніякого буено.

Помилка №2

Проблема: За допомогою дизайну для кожної піктограми було встановлено ширину: 24 пікселя, висоту: 24 пікселів та радіус межі: 3 пікс. Проблема полягає в тому, що при експорті прямокутник був доданий у шлях, що ускладнює масштабування будь-якого розміру за допомогою css.

Рішення: Видаліть будь-яке прозоре обмежувальне поле і дозвольте css зробити магію. Все, що потрібно було розробникам, - це вікно перегляду, встановлене на 24 х 24 пікселів. Вони можуть додавати ширину, висоту та радіус облямівки.

Помилка №3

Проблема: Ескіз експортує поворот (-180.000000).

<path d=”M16,7.4 L14.4864865,6 L8,12 L14.4864865,18 L16,16.6 L11.027027,12 L16,7.4 Z” fill=”#000000" transform=”translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) “></path>

Рішення: Відкрийте свій .svg значок в Adobe Illustrator, поверніть його, потім перетягніть назад у Sketch. Це видаляє обертання всіх разом.

Помилка №4 Проблема: за допомогою інструменту "Експарт" фрагментів перекладати та перетворювати знову. Рішення: Нічого. Просто не робіть цього. Це займе занадто багато часу, щоб все-таки скинути, і це марна трата часу.

Якщо ви використовуєте піддоріжки, вирівняйте форму перед експортом. Я все ще отримав помилку у Fontello щодо створення складних контурів вручну, але, здається, він працював правильно.

(моя форма являла собою коло з двома фігурами, вирізаними з неї.)