← На главную

При разработке мобильных приложений на платформе 1С часто возникает задача подбора качественной графики. Создавать каждую иконку вручную или искать архивы с растровыми картинками под разные разрешения экранов (ldpi, mdpi, hdpi, xhdpi, xxhdpi) — процесс долгий и трудоемкий. Разберем по шагам, как сэкономить время, какие форматы изображений лучше использовать и где взять готовые наборы иконок.

Поддержка векторной графики (SVG) в 1С

Вместо того чтобы искать растровые картинки под каждое разрешение, рассмотрим использование векторного формата SVG. Начиная с версии платформы 8.3.9, 1С полноценно поддерживает SVG-иконки. А начиная с версии 8.3.19, появилась поддержка анимированного SVG.

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

Нюансы сборки мобильного приложения с SVG

При подготовке мобильного приложения с помощью сборщика векторные иконки рекомендуется разделять на два независимых слоя. Рассмотрим подробнее этот подход:

1. Фоновая графика (например, файл icon-background.svg) — этот слой не должен содержать прозрачных областей. Вместо векторной картинки для фона также можно использовать сплошной цвет заливки.
2. Значимая часть иконки (например, icon-foreground.svg или icon.svg) — содержит непосредственно сам логотип или символ приложения и имеет прозрачный фон.

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

Использование растровых картинок (PNG)

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

Обычные 8-битные PNG-иконки на современных экранах мобильных устройств с высокой плотностью пикселей часто отображаются некорректно: они могут выглядеть размытыми или распадаться на пиксели. Поэтому перед загрузкой графики в вашу конфигурацию всегда проверяйте параметры сохранения изображений.

Стандартная библиотека картинок 1С

Прежде чем искать графику на сторонних ресурсах, посмотрим на встроенные возможности. При наличии доступа к порталу 1С:ИТС разработчики могут скачать Библиотеку стандартных картинок. Это большой набор графических элементов, которые уже стилизованы под интерфейсы системы 1С и полностью готовы к загрузке в ветку метаданных ОбщиеКартинки.

Популярные ресурсы с готовыми иконками

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

1. Material Design Icons — официальная библиотека иконок от Google. Она изначально создавалась для мобильных интерфейсов (Android), отлично масштабируется и полностью бесплатна.
2. Flaticon — огромная база иконок, где можно найти целые тематические пакеты в едином стиле.
3. Icons8 — отличный ресурс не только для статических картинок, но и для анимаций. Однако стоит учитывать, что часть SVG-векторов там предоставляется на платной основе.
4. Freepik — содержит масштабную коллекцию как платных, так и бесплатных векторов и SVG-файлов.
5. Font Awesome и Bootstrap Icons — популярнейшие наборы веб-иконок. Их можно скачивать в формате SVG поштучно и без проблем интегрировать в дерево метаданных конфигурации.

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