Поиск способов чистого экспорта иконок в .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”?>

<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 (11970) — http://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.000000, 0.210938)”>

<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=”#000000″ 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 x 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.500000, 0.800000)”>

<g>

<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>

<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.500000, 0.800000)”>[/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]<rect x=”0″ y=”0″ width=”24″ height=”24″ rx=”2″></rect>[/dt_code]

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

Баг #3:

Проблема: Sketch экспортирует поворот (-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>

Чтобы легко воссоздать иконку со стрелочкой, я повернул каждую иконку на 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.000000, -220.000000)”>

<g transform=”translate(-321.000000, 188.000000)”></g>

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

<g transform=”translate(96.000000, 220.000000)”>

<g transform=”translate(13.000000, 12.000000) rotate(-180.000000) translate(-13.000000, -12.000000) translate(9.000000, 6.000000)” fill=”#000000″>

<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=”#000000″>

<path d=”M8,7.4 L9.51351351,6 L16,12 L9.51351351,18 L8,16.6 L12.972973,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]

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Каллиграфия и леттеринг для начинающих

Изучение каллиграфии – непростой процесс, но с правильными методическими материалами это может занять меньше времени, чем вы думаете

Zeplin.io – способ подружить дизайнера и верстальщика

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.

Руководство дизайнера по DPI и PPI

Этот лонг-рид создан для продвинутых дизайнеров, которые хотят узнать больше о кросс DPI и кросс-платформенном дизайне с самых азов. Никакой сложной математики и нечитаемых графиков, только простые объяснения, разбитые на короткие разделы для лучшего понимания и быстрого применения в вашем дизайн-процессе.