Как создать SVG-иконку в Pixso: пошаговое руководство

Векторная графика широко используется в современном дизайне интерфейсов. Благодаря математическому описанию векторные иконки масштабируются для экранов высокого разрешения, в том числе Retina, без растровой пикселизации. UI-дизайнерам и фронтенд-разработчикам векторные ресурсы помогают передавать графику для разных разрешений и сокращать объём файлов простых геометрических элементов интерфейса.

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

1. Что такое SVG?

SVG расшифровывается как Scalable Vector Graphics — масштабируемая векторная графика. Это открытый формат векторных изображений на основе XML, поддерживаемый консорциумом W3C. Геометрия описывается текстовой разметкой, поэтому векторные фигуры можно увеличивать для разных экранов без увеличения самого файла и потери чёткости контура.

В отличие от растровых PNG и JPEG, встроенная в HTML графика SVG может непосредственно взаимодействовать с DOM и CSS. Разработчики и дизайнеры могут изучать контуры, программно менять цвет обводки и анимировать элементы для интерактивных состояний интерфейса.

2. Зачем использовать SVG-иконки в современном интерфейсе?

Продуктовые команды выбирают векторные иконки вместо растровых изображений по трём основным причинам:

1. Меньше затрат на поддержку и разработку: при встроенном размещении SVG в разметке и настройке цветов через currentColor или CSS-переменные один ресурс можно адаптировать к светлой и тёмной темам без дублирования файлов. Дизайнер готовит один векторный ресурс вместо нескольких растровых экспортов, сокращая сопутствующую работу разработчиков.
2. Динамическая настройка: поскольку контуры SVG могут управляться CSS и JavaScript, веб-приложение позволяет менять цвета, толщину линий и анимацию при наведении прямо во время работы.
3. Небольшие файлы и быстрая загрузка: для простых иконок и геометрических знаков SVG обычно занимает меньше места, чем растровые форматы. Правильное сжатие и способ встраивания векторных ресурсов помогают избежать лишней сетевой нагрузки в адаптивном веб-интерфейсе.

3. Пошагово: как создать SVG-иконку в Pixso

В Pixso есть векторный холст и инструменты точной работы с фигурами, с которыми небольшую SVG-иконку можно сделать за несколько минут. Ниже создадим сбалансированный значок «Добавить».

Шаг 1. Создайте новый файл в Pixso

Войдите в аккаунт Pixso и выберите New File («Новый файл») в рабочем пространстве, чтобы открыть пустой холст для совместной работы.

Шаг 2. Создайте фрейм иконки

Выберите инструмент Frame («Фрейм») на верхней панели или нажмите F. Создайте квадратный фрейм размером 16×16 px — распространённую основу для компактных интерфейсных иконок.

Шаг 3. Добавьте внешнюю окружность

Выберите Ellipse («Эллипс», O). Нарисуйте окружность размером 14×14 px и задайте её левый верхний угол в точке (1, 1) внутри фрейма: центр окажется в точке (8, 8). В правой панели свойств уберите заливку и установите обводку толщиной 1 px с цветом #000000. Отступ геометрии на 1 px от краёв фрейма оставляет место для обводки; проверьте, что её внешняя граница не обрезается.

Шаг 4. Соберите знак «плюс»

Выберите Rectangle («Прямоугольник», R). Нарисуйте вертикальную полоску размером 1×8 px со скруглением углов 1 px. Создайте копию (Command+C / Ctrl+C, затем Command+V / Ctrl+V), поверните её на 90 градусов и совместите центры обеих полосок с центром окружности (8, 8). На снимке ниже те же инструменты показаны на примере буквы T в окружности. Для описанного здесь знака «плюс» два прямоугольника должны пересекаться именно своими центрами.

Шаг 5. Экспортируйте SVG

В панели слоёв выберите родительский фрейм 16×16 px. Откройте панель Export («Экспорт»), укажите SVG и экспортируйте иконку. Полученный исходный векторный файл готов к проверке перед использованием в разработке.

4. Практические правила дизайна векторных иконок

Чтобы иконки оставались чёткими на разных операционных системах, соблюдайте несколько основных принципов:

• Используйте единые размеры фреймов: создавайте иконки на одинаковых квадратных фреймах, например 16×16 px, 20×20 px или 24×24 px. Единая ограничивающая рамка задаёт предсказуемое место в интерфейсе и упрощает выравнивание рядом с текстовыми подписями.
• Оставляйте защитные внутренние отступы: подбирайте внутреннее свободное пространство, обычно 1–2 px в зависимости от сетки и толщины обводки. Запас внутри фрейма помогает избежать обрезания внешней границы обводки и сглаженных краёв на границе viewBox.
• Экспортируйте выбранный родительский фрейм: в этом векторном сценарии экспорт родительского фрейма сохраняет в SVG заданную область viewBox и исходное расположение элементов.

5. Элементы SVG и свойства оформления

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

На следующем снимке показан экспортированный код примера с буквой T в окружности. Значения width и height, равные 16, задают размеры SVG, а отсутствие заливки относится к оформлению фигур; это не указание диаметра окружности. Для созданного по шагам выше знака «плюс» состав контуров будет другим — проверяйте фактический код своего экспорта.

Частые вопросы

1. Нужно ли преобразовывать обводки в контуры перед экспортом SVG-иконок?

Преобразование обводок в замкнутые контуры с заливкой связывает их толщину с геометрией фигуры и убирает зависимость от наследуемых CSS-свойств обводки. Сохранённая обводка, напротив, позволяет разработчику менять stroke-width и stroke-linecap через CSS. Выбор зависит от того, нужна ли динамическая настройка или фиксированная геометрия.

2. Почему в веб-разработке SVG-иконки часто предпочитают иконочным шрифтам?

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

3. Как сделать SVG-иконки доступными для пользователей программ экранного доступа?

Чисто декоративную иконку скрывают от вспомогательных технологий атрибутом aria-hidden="true". Если SVG находится внутри кнопки поиска или навигации, задайте понятное доступное имя самой кнопке, например через aria-label; декоративный SVG внутри неё можно скрыть через aria-hidden="true", чтобы имя не читалось дважды. Отдельному смысловому изображению SVG, напротив, нужны подходящая роль role="img" и доступное название, например через элемент title и связь aria-labelledby.

4. Как убрать лишние метаданные из экспортированного SVG?

Векторные редакторы иногда добавляют собственные метаданные, пустые или стандартные группирующие элементы и избыточное число знаков после запятой. Перед использованием в продукте команды часто обрабатывают экспорт инструментом вроде SVGO: удаляют лишние XML-узлы, упрощают координаты контуров и приводят код в порядок.

Итоги

Создавать аккуратные масштабируемые векторные ресурсы проще, когда освоены базовые инструменты фигур и выравнивание внутри общей рамки.

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

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

Попробуйте Pixso для создания векторных иконок и подготовки согласованных ресурсов вашего интерфейса.