SVG для дизайнеров

Введение

Масштабируемая векторная графика (от англ. Scalable Vector Graphics, или SVG) — это основанный на разметке XML векторный формат изображений, который поддерживает анимацию и интерактивность. Формат поддерживается всеми основными современными браузерами, легко сжимается, масштабируется и распознается большинством устройств. А еще превосходно смотрится на любом из поддерживаемых устройств. Для дизайнеров дополнительным преимуществом является тот факт, что данный формат распознается всеми современными инструментами дизайна — как при чтении, так и при письме.

SVG имеет большое значение в работе дизайнеров, так как позволяет обходиться без тяжелых графических файлов и не вызывает проблем с разрешением. На каком бы экране вы ни открыли изображение, оно всегда будет четким и чистым, и загружаться при этом гораздо быстрее таких форматов, как PNG или JPG. Поэтому во многих аспектах SVG — лучший вариант, если не считать сложного механизма экспорта.

Так как SVG — текстовый формат, высока вероятность того, что используемый вами редактор при экспорте будет использовать далеко не самый «чистый» код. В отличие от растровых изображений, код представляет собой описание разработанной вами графики, которое затем помещается в читабельный текстовый файл, вследствие чего размер файла не зависит от его разрешения. Код содержит описание использованных фигур, градиентов, слоев, эффектов, масок и т.п. Поэтому, из-за таких особенностей, все ваши действия с графикой будут отражаться в самом коде.

К сожалению, это главный недостаток SVG. Здесь не получится нажимать «Сохранить как...» в самый разгар рабочего процесса, чтобы получать на выходе задуманное. Скорее всего, вам придется немало повозиться с графикой, чтобы не разочароваться в результате.

Все больше дизайнеров начинают изучать кодирование, но даже если вы не относитесь к их числу, не пугайтесь. Любой человек, владеющий основами HTML, способен оптимизировать SVG-файлы. В этой статье приведены некоторые советы, которые могут оказаться полезными при работе с такими файлами.

Создание графики

Какой бы редактор вы ни использовали, всегда можно найти несколько способов построения абсолютно идентичных фигур. Взять хотя бы круг. Вы можете создать овал с равной шириной и высотой, определенной толщиной и цветом обводки. Кроме того, ту же самую форму можно преобразовать в контур, или даже получить новую в результате булевых операций между двумя овалами разного размера.

Несмотря на то, что эти три формы кажутся идентичными, их SVG при экспорте будут различаться. Используемый вами редактор преобразует фигуры в код, и так как все три фигуры были созданы по-разному, их код также будет отличаться.

Три одинаковых на вид фигуры были построены тремя разными способами.

Номенклатура слоев

Подборка имен для слоев имеет большое значение. Большинство редакторов оставляют те имена, которые вы сами даете слоям, используя их в качестве ID в коде SVG. Это может вызвать ряд проблем. Например, если вы попытаетесь экспортировать из своего макета некоторые детали, у которых общее название слоя — предположим, «Oval», — редактор выдаст вам код, в котором ID для этих деталей также будет «Oval». В коде HTML все ID должны быть уникальны, иначе может быть сбой в программе — например, искажение изображения или смешение фигур при отображении дизайна.

У двух кругов одинаковый ID

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

Стили и эффекты

Как и при создании фигур, существует несколько способов достичь желаемого результата во время использования каких-то стилей и эффектов для слоев. Лучше всего всегда придерживаться правила «чем проще, тем лучше», так как это избавит вас от лишних проблем. Данное правило относится и к приемам наложения.

Если обойтись без наложения в вашем дизайне нельзя, всегда загружайте ваш файл после экспорта в нескольких браузерах, чтобы посмотреть, отображается ли он корректно. Если результат вас не устраивает, скорее всего, придется искать другой выход.

Например, в Adobe Illustrator есть SVG фильтры. Используя данные фильтры, вы получите гораздо более качественный результат. Если бы вместо них вы использовали обычные фильтры Photoshop, макет бы при экспорте был уже не векторным, а растровым из-за примененного эффекта, описанного в вашем файле SVG.

Конечно, все зависит от того, как вы намерены использовать вашу графику, поэтому, опять же, не существует какого-то универсального пути решения. Как только вы поймете, как выбранный вами способ отражается на коде всего макета, вы почувствуете, что работать вам становится гораздо легче.

Текст и кастомные шрифты

Файлы SVG поддерживают кастомные шрифты, но это не значит, что нужно ими злоупотреблять. Учитывая, что в данном формате они работают по тому же принципу, что и во время создания сайта, использование кастомных шрифтов заметно скажется на времени загрузки самого сайта.

SVG слова с использованием кастомного шрифта

SVG с использованием контурного шрифта

Например, если вы захотите использовать шрифт Avenir и на вашем сайте, и в вашем макете, то никаких глобальных проблем возникнуть не должно. Но если вы загрузите еще один шрифт специально для логотипа, который был экспортирован в SVG, вы можете усложнить ситуацию.

В таких случаях лучше всего использовать контуры существующих букв вместо нового шрифта. Однако, скорее всего, придется произвести некоторые корректировки, так как светлое начертание, вероятно, не получится идеальным. И когда мы, наконец, добьемся нужного результата, текст будет соответствовать задуманному дизайну, при этом не влияя на время загрузки.

Но нужно принимать во внимание некоторые вещи: учитывая, что текст станет графикой, поисковый движок не сможет его распознать. Для таких случаев в формате SVG существуют некоторые инструменты наподобие <title>, которые можно использовать в качестве альтернативы.

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

Если же приходится конвертировать в контуры большое количество текста, это может усложнить ситуацию. Итоговый экспорт может получиться гораздо тяжелее, чем если бы мы просто сделали ссылку на пользовательский шрифт, поэтому выбор как поступить падает на плечи дизайнера. В некоторых редакторах есть возможность упростить данные фигуры без потери формы, избавившись от ненужных точек и отрегулировав кривые Безье.

Как происходит графический экспорт

Когда с дизайном макета покончено и все готово, нужно все экспортировать в SVG. Здесь вы увидите, что в файле присутствует большое количество лишнего кода.Фигуры же будут отражаться точно таким же образом и без этих добавлений.

Часть нашей работы будет заключаться в том, чтобы тщательно изучить все экспортируемые файлы и проверить код. Как уже говорилось ранее, чем проще будет код, тем меньше проблем может ожидать нас в дальнейшем, особенно если приходится иметь дело сразу с несколькими SVG файлами.

Сейчас существует большое количество разнообразных инструментов и плагинов, которые помогут автоматизировать этот процесс. Например, SVGO Compressor. Этот специальный плагин для Sketch, помимо своих основных функций, также наводит порядок среди ID в нашем файле, убирая неиспользуемые и сокращая количество используемых с помощью округления значений до трех десятичных. Кроме того, он удаляет комментарии, описания и лишние части кода. Он работает в фоновом режиме каждый раз, когда вы что-то экспортируете из Sketch в SVG. Настройки можно менять для более удобного использования.

SVGOMG — это еще один полезный в графическом дизайне инструмент, работающий онлайн в свободном доступе. Он позволяет увидеть все изменения, которые мы вносим в файл, что особенно удобно при работе со сложной графикой. Как и SVGO Compressor, он также основан на SVGO.

Заключение

В настоящее время существует множество разнообразных способов работы с графическими инструментами, все зависит от ваших конкретных целей. Помните, что постоянный контакт с разработчиками позволит вам достигнуть задуманного результата, достаточно простого в осуществлении и дальнейшем использовании.