UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Поиск способов чистого экспорта иконок в .svg из Sketch …корректный метод
Редакція
Редакція

Опубліковано • Оновлено

Поиск способов чистого экспорта иконок в .svg из Sketch …корректный метод

Если вы разрабатываете дизайн интерфейсов, скорее всего, вам приходится каждый день работать в команде с программистами. Ваша работа также состоит в решении всевозможных проблем. Вы находите способы решать проблемы визуально и логически. Лично я, как и многие, люблю сесть с командой UI-разработчиков и разобрать их логику, рабочий процесс, чтобы найти методы сделать их жизнь проще. В этом ключе давайте поговорим о передаче чистых файлов .svg из Sketch для их стилизации в css вместо индивидуальной стилизации каждой иконки в отдельности. Эта задача является одной из самых проблемных в Sketch. Экспортируется беспорядочный, непонятный код, встроенный в файлы .svg. Методом проб и ошибок эта проблемы была фактически решена, в конечном итоге мы нашли правильное решение для экспорта чистого файла для команд, которые работают в Sketch. Sketch делает жизнь проще массой разных способов, но экспорт .svg файлов - это просто катастрофа. Этот баг нужно устранить. Давайте я поясню вам на этом конкретном примере, который и сбил с толку, и раскрыл глаза одновременно. Не так давно мне нужно было сделать набор иконок для нашего нового продукта на Lucidworks. Весь процесс был довольно прост, но как только я начал экспортировать этих засранцев, все пошло коту под хвост. Как только вы открываете файл .svg в Sublime Text, вы видите весь мусор, который был сгенерирован в Sketch. Большая часть этого кода бесполезна, только создает проблемы с .svg, если работаешь с файлами в коде. В нашем случае же требовался полный контроль. Чтобы ускорить рабочий процесс на моей стороны, мне нужно было экспортировать чистый код, чтобы моя команда могла продолжить работу над проектом, а не копаться в каждом файле .svg и удалять весь мусор вручную. Когда вы экспортируете из Sketch, генерируется куча беспорядочного кода. В этом примере я нарисовал простую иконку со стрелочкой вправо. И вот что я получил:

<?xml version=”1.0" encoding=”UTF-8" standalone=”no”?> http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" xmlns:sketch=”http://www.bohemiancoding.com/sketch/ns"> <! — Generator: Sketch 3.3 (11970) — http://www.bohemiancoding.com/sketch → add Created with Sketch.

Большая часть этого кода бесполезна и нам не нужна. По сути, нам нужны только и . Остальную часть мусора можно выкинуть, потому что все это можно контролировать посредством css глобально для всего набора, а не настраивать каждую иконку индивидуально. Тогда настоящей головной болью были , и . Что бы я ни делал, Sketch все равно экспортировал эти атрибуты. Это была настоящая проблема, потому что как только вы открываете .svg в html, иконка портится. Особенно, если манипулировать иконкой так, как это делаем мы. Поиск способов чистого экспорта иконок в .svg из Sketch…корректный метод Sketch генерирует целую кучу беспорядочного кода. Чтобы решить проблему, нужно вернуться назад и пройти каждый шаг снова, чтобы отыскать решение. Так как же все-таки иконки экспортируются в Sketch? Все довольно просто, и я нашел три способа сделать это. Но, есть только один верный способ экспортировать чистый код .svg. Давайте проанализируем некоторые возможные решения:

  1. ) Можно создать артборд для каждой иконки, которую нужно экспортировать
  2. ) Использовать инструмент нарезки и нарезать все по нужным размерам
  3. ) Выделить несколько иконок на одном большом артборде, кликнуть и экспортировать в формат .svg

*примечание: Вы можете перейти в Layers > Path > Flatten и попробовать этот способ, но Sketch никогда не активировал опцию после выделения иконки.

1.) Создайте артборд

SVG Sketch Создайте артборд Создайте артборд с точным размером иконки для экспорта. Легко, правда? Это был мой первый способ, самый простой. Для этого примера я создал артборд 24 x 24 пикселя. Кликнул на экспорт, и вот что произошло:

<?xml version=”1.0" encoding=”UTF-8" standalone=”no”?> http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">

Откуда ни возьмись, появились viewBox, transform, и translate. Проблема в том, что мне это все не нужно.

И появляется баг #1.

SVG Sketch Создайте артборд баг1 Во-первых, позиция 400.5 и -416.2. Проблема: Sketch экспортировал параметр transformation (преобразование). Я заметил, что позиция моего артборда была 400.5 x и -416.2 y. И это стало проблемой. Все артборды должны быть pixel-perfect. А поскольку позиция моего артборда таковой не была, Sketch экспортировал следующее: [dt_code][/dt_code] Без понятия, откуда взялось 0.800000, но в любом случае, нам такое не нужно. Решение: Выбирайте позиции на четных числах. Это поможет избежать любых преобразований в коде. Кроме того, так как позиция была смещена полупикселями, Sketch изменил размер моей области просмотра на 0 0 25 25. Мой артборд изначально был 24 x 24 пикселя. Этот баг даже добавил параметров в код.

Баг #2

SVG Sketch Создайте артборд баг 2 Удалите границы для чистого кода Проблема: По дизайну каждая иконка была размером width: 24px , height: 24px, и border-radius: 3px. Проблема возникала при экспорте, добавлялся прямоугольник границ, и в css не получалось нормально масштабировать иконки. [dt_code][/dt_code] Решение: Удалите любую прозрачную граничную рамку, и пусть css творит свою магию. Всем разработчикам нужно, чтобы параметр viewbox был равен 24 x 24px. Они сами могут добавить ширину, высоту и border-radius.

Баг #3:

Проблема: Sketch экспортирует поворот (-180.000000).

Чтобы легко воссоздать иконку со стрелочкой, я повернул каждую иконку на 90 градусов, чтобы получить все четыре варианта. Каждый раз, когда вы вращаете что-то в Sketch, добавляется соответствующий атрибут. Если вы уберете вращение в Sketch, иконка автоматически вернется в свое первоначальное положение. И так все возвращается на круги своя, и я опять нет нужного решения. Решение: Откройте свою иконку .svg в Illustrator, поверните ее, а затем перетащите мышкой обратно в Sketch. Это вообще решит все проблемы с поворотом. *примечание: Я бы с легкостью экспортировал эту иконку из Illustrator, но Adobe также генерирует кучку фигового кода при экспорте. Плюс, я уже вдоль и поперек перекопал Sketch в поиске решения.

2.) Использование инструмента Slice

Проблема: еще больше мусора (translate и transform), потому что позиция каждой иконки привязана к артборду. И вот что Sketch экспортировал:

<?xml version=”1.0" encoding=”UTF-8" standalone=”no”?> http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">

Решение: Его нет. Просто не делайте так. На слайсинг уходит слишком много времени, причем безрезультатно.

3.)Выделите любую иконку и экспортируйте ее в .svg

Использование инструмента Slice Просто выделите все иконки и экспортируйте в .svg Проблема: Такие же проблемы с transform и translate в коде. Это очень мешает, если вы хотите полный контроль иконок в css. Решение: Опять же, сэкономьте себе время и просто не делайте так.

Верный способ после всех экспериментов

  1. ) Создайте артборд для каждой иконки.
  2. ) Убедитесь, что позиция каждого артборда не содержит полупикселей, и описывается четными числами.
  3. ) Удалите все повороты иконок.
  4. ) Уберите все граничные рамки, чтобы Sketch не пришлось экспортировать ненужный код.

Чистый .svg экспорт выглядит так:

<?xml version=”1.0" encoding=”UTF-8" standalone=”no”?> http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink">

Откиньтесь на спинку кресла, расслабьтесь и выпейте пива, чтобы смыть все свои печали. Надеюсь, что Sketch разберется и выдаст решение для этой проблемы, потому что сам продукт я люблю всем сердцем.

От нашего пользователя Александра Шовтюка:

Хотел добавить, что можно пойти еще дальше и автоматизировать процесс очистки и оптимизации СВГешек в проекте, чему фронт-енд разработчики будут только рады. Для этого понадобится таск-раннер, к примеру Grunt и несколько толковых плагинов https://www.npmjs.com/package/grunt-svgstore (свг спрайт) https://github.com/sindresorhus/grunt-svgmin (минифкация) Хотя можно юзать и GUI https://github.com/svg/svgo[/dt_quote]


Перевод статьи Sean Kesterson

Топ коментарі (0)