Если вы разрабатываете дизайн интерфейсов, скорее всего, вам приходится каждый день работать в команде с программистами. Ваша работа также состоит в решении всевозможных проблем. Вы находите способы решать проблемы визуально и логически. Лично я, как и многие, люблю сесть с командой 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"?>

<svg width="24px" height="25px" viewBox="0 0 24 25″ version="1.1″ xmlns=">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 (11 970) — www.bohemiancoding.com/sketch

<title>add</title>

<desc>Created with Sketch.</desc>

<defs></defs>

<g id="Icons" stroke="none" stroke-width="1″ fill="none" fill-rule="evenodd" sketch: type="MSPage">

<g id="add" sketch: type="MSArtboardGroup" transform="translate (0.0, 0.210 938)">

<rect id="Rectangle-14″ sketch: type="MSShapeGroup" x="0″ y="0″ width="24″ height="24″ rx="2"></rect>

<path d="M13,13 L13,19 L11,19 L11,13 L5,13 L5,11 L11,11 L11,5 L13,5 L13,11 L19,11 L19,13 L13,13 Z" id="Fill-5″ fill="#0″ sketch: type="MSShapeGroup"></path>

</g></g></svg>

Большая часть этого кода бесполезна и нам не нужна. По сути, нам нужны только <viewbox> и <path d>. Остальную часть мусора можно выкинуть, потому что все это можно контролировать посредством css глобально для всего набора, а не настраивать каждую иконку индивидуально. Тогда настоящей головной болью были <rect id>, <transform> и <translate>. Что бы я ни делал, Sketch все равно экспортировал эти атрибуты. Это была настоящая проблема, потому что как только вы открываете .svg в html, иконка портится. Особенно, если манипулировать иконкой так, как это делаем мы.

Поиск способов чистого экспорта иконок в .svg из Sketch…корректный метод
Sketch генерирует целую кучу беспорядочного кода.
Чтобы решить проблему, нужно вернуться назад и пройти каждый шаг снова, чтобы отыскать решение.

Так как же все-таки иконки экспортируются в Sketch?

Все довольно просто, и я нашел три способа сделать это. Но, есть только один верный способ экспортировать чистый код .svg. Давайте проанализируем некоторые возможные решения:

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

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

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

SVG Sketch Создайте артборд

Создайте артборд с точным размером иконки для экспорта. Легко, правда?

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

<?xml version="1.0″ encoding="UTF-8″ standalone="no"?>

<svg width="25px" height="25px" viewBox="0 0 25 25″ version="1.1″ xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink«>

<defs></defs>

<g stroke="none" stroke-width="1″ fill="none" fill-rule="evenodd">

<g transform="translate (0.500 000, 0.800 000)">

<g>

<path d="M16,7.4 L14.4 864 865,6 L8,12 L14.4 864 865,18 L16,16.6 L11.27 027,12 L16,7.4 Z" fill="#0″ transform="translate (12.0, 12.0) rotate (-180.0) translate (-12.0, -12.0) «></path>

<rect x="0″ y="0″ width="24″ height="24″ rx="2"></rect>

</g></g></g></svg>

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

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

SVG Sketch Создайте артборд баг1
Во-первых, позиция 400.5 и -416.2.
Проблема: Sketch экспортировал параметр transformation (преобразование).

Я заметил, что позиция моего артборда была 400.5 x и -416.2 y. И это стало проблемой. Все артборды должны быть pixel-perfect. А поскольку позиция моего артборда таковой не была, Sketch экспортировал следующее:

[dt_code]<g transform="translate (0.500 000, 0.800 000)">[/dt_code]

Без понятия, откуда взялось 0.800 000, но в любом случае, нам такое не нужно.

Решение: Выбирайте позиции на четных числах. Это поможет избежать любых преобразований в коде. Кроме того, так как позиция была смещена полупикселями, Sketch изменил размер моей области просмотра на 0 0 25 25. Мой артборд изначально был 24×24 пикселя. Этот баг даже добавил параметров в код.

Баг #2

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

[dt_code]<rect x="0″ y="0″ width="24″ height="24″ rx="2"></rect>[/dt_code]

Решение: Удалите любую прозрачную граничную рамку, и пусть css творит свою магию. Всем разработчикам нужно, чтобы параметр viewbox был равен 24×24px. Они сами могут добавить ширину, высоту и border-radius.

Баг #3:

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

<path d="M16,7.4 L14.4 864 865,6 L8,12 L14.4 864 865,18 L16,16.6 L11.27 027,12 L16,7.4 Z" fill="#0″ transform="translate (12.0, 12.0) rotate (-180.0) translate (-12.0, -12.0) «></path>

Чтобы легко воссоздать иконку со стрелочкой, я повернул каждую иконку на 90 градусов, чтобы получить все четыре варианта. Каждый раз, когда вы вращаете что-то в Sketch, добавляется соответствующий атрибут.

Если вы уберете вращение в Sketch, иконка автоматически вернется в свое первоначальное положение. И так все возвращается на круги своя, и я опять нет нужного решения.

Решение: Откройте свою иконку .svg в Illustrator, поверните ее, а затем перетащите мышкой обратно в Sketch. Это вообще решит все проблемы с поворотом.

*примечание: Я бы с легкостью экспортировал эту иконку из Illustrator, но Adobe также генерирует кучку фигового кода при экспорте. Плюс, я уже вдоль и поперек перекопал Sketch в поиске решения.

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

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

<?xml version="1.0″ encoding="UTF-8″ standalone="no"?>

<svg width="24px" height="24px" viewBox="0 0 24 24″ version="1.1″ xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink«>

<defs></defs>

<g stroke="none" stroke-width="1″ fill="none" fill-rule="evenodd">

<g transform="translate (-96.0, -220.0)">

<g transform="translate (-321.0, 188.0)"></g>

<rect stroke="#0″ stroke-width="0.5″ fill="#FFFFFF" x="72″ y="196″ width="72″ height="104″ rx="2"></rect>

<g transform="translate (96.0, 220.0)">

<g transform="translate (13.0, 12.0) rotate (-180.0) translate (-13.0, -12.0) translate (9.0, 6.0)" fill="#0">

<path d="M7.4,1.4 L6,0 L0,6 L6,12 L7.4,10.6 L2.8,6 L7.4,1.4 Z"></path>

</g>

<rect x="0″ y="0″ width="24″ height="24″ rx="2"></rect>

</g>

</g>

</g>

</svg>

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

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

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

Решение: Опять же, сэкономьте себе время и просто не делайте так.

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

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

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

<?xml version="1.0″ encoding="UTF-8″ standalone="no"?>

<svg width="24px" height="24px" viewBox="0 0 24 24″ version="1.1″ xmlns="http://www.w3.org/2000/svg" xmlns: xlink="http://www.w3.org/1999/xlink«>

<defs></defs>

<g id="Icons" stroke="none" stroke-width="1″ fill="none" fill-rule="evenodd">

<g id="chevron_right" fill="#0">

<path d="M8,7.4 L9.51 351 351,6 L16,12 L9.51 351 351,18 L8,16.6 L12.972 973,12 L8,7.4 Z" id="Shape"></path>

</g>

</g>

</svg>

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

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

Хотел добавить, что можно пойти еще дальше и автоматизировать процесс очистки и оптимизации СВГешек в проекте, чему фронт-енд разработчики будут только рады.

Для этого понадобится таск-раннер, к примеру Grunt и несколько толковых плагинов

https://www.npmjs.com/package/grunt-svgstore (свг спрайт)
https://github.com/sindresorhus/grunt-svgmin (минифкация)

Хотя можно юзать и GUI
https://github.com/svg/svgo[/dt_quote]