На портале уже было статья о том, как сделать нестандартный красивый интерфейс с помощью SVG. Также поиск выдает еще несколько статей, но в целом на портале и в сообществе как-то мало информации про этот замечательный формат, который дает много новых возможностей при разработке и реализации интерфейсов.
Что же такое SVG картинка и в чем отличие от обычных картинок?
SVG (от англ. Scalable Vector Graphics — «масштабируемая векторная графика») — это формат для описания двухмерной векторной графики с использованием XML. В отличие от растровых изображений (PNG, JPEG), SVG хранит информацию о графике в виде математических описаний, что позволяет масштабировать изображения без потери качества.
То есть по сути картинка представляет собой XML файл. Если подойти к делу серьезно, то можно реализовать даже редактор картинок в системе 1С, так как с XML платформа отлично работает. В описанном ниже примере я пошел более простым путем, и просто подменяю нужные блоки текста на другие. Статья не претендует на открытие каких-то тайных истин - просто хочу напомнить сообществу о такой возможности и познакомить тех, кто еще не знаком, с данной технологией.
Для примера я решил создать небольшую обработку, в который каждый выбор пользователя будет отображаться на блок схеме, чтобы было наглядно видно, как та или иная настройка повлияет на прохождения процесса.
В интернете множество сайтов, позволяющих создавать и редактировать SVG, в том числе рисовать диаграммы. Я выбрал https://www.iodraw.com/ и накидал небольшую блок схему.
Обратите внимание, каждый объект имеет уникальный идентификатор, он нам понадобится, чтобы найти в тексте описание данного объекта и изменить его свойства.
Сохраняю файл с сайта в формате SVG, вот как он выглядит в блокноте.
Не очень удобно работать, так как файл не форматирован. Но опять же есть множество интернет ресурсов для форматирования SVG. Я воспользовался SVG Formatter and Beautifier online. Читать и работать с файлом стало намного удобнее. Можем найти нужный нам объект, видно все его свойства. Так как это просто текст - свойства легко заменить с помощью простейшего кода из 1С.
В примере я реализовал изменение цвета блоков и линий в зависимости от выбранного пользователем того или иного шага.
Код не зависит от конфигурации, все реализовано внутри обработки. Так как в коде использую ПотокВПамяти, то работать будет на версии 8.3.9 и выше. Но он не обязателен, можно переписать код и отказаться от использования потока.
PS: Формат SVG так же позволяет создавать анимированные изображения, а не только статичные картинки. К сожалению если анимированную картинку вставить в 1С просто как картинка (в поле картинка) - то будет отражен статичный кадр. Но если вывести SVG в поле HTML документа, то анимация будет работать.
Вступайте в нашу телеграмм-группу Инфостарт
