Начиная с версии платформы 8.3.9, в «1С:Предприятие» была добавлена штатная поддержка векторного формата SVG (Scalable Vector Graphics). Однако при попытке интерактивно вставить такой файл в табличный документ или вывести его на форму разработчики нередко сталкиваются с ситуацией, когда изображение не отображается или предпросмотр показывает пустое поле. Разберем по шагам, как правильно работать с SVG-графикой в 1С, выясним причины возможных ошибок и проанализируем примеры программного вывода векторных изображений.
Прежде чем перейти к практическим способам вывода, проанализируем основные причины, из-за которых SVG-файл может не отображаться платформой 1С:
width, height или viewBox в корневом теге <svg>. Если указан только атрибут xmlns, изображение может отрендериться с нулевым размером.Рассмотрим основной способ работы с SVG-графикой через стандартный объект платформы Картинка. Создадим векторный файл с графическими примитивами и назначим его элементу формы.
Посмотрим на пример формирования файла SVG и его загрузки в элемент формы:
Процедура ОтобразитьВекторныйРисунок()
ИмяФайла = ПолучитьИмяВременногоФайла("svg");
// Формируем структуру SVG-файла с явным указанием пространства имен и параметров
ФайлКартинки = Новый ЗаписьТекста(ИмяФайла, КодировкаТекста.UTF8);
ФайлКартинки.ЗаписатьСтроку("<?xml version=""1.0"" encoding=""UTF-8""?>");
ФайлКартинки.ЗаписатьСтроку("<svg xmlns=""http://www.w3.org/2000/svg"" width=""300"" height=""300"" viewBox=""0 0 300 300"">");
Для инд = 1 По 10 Цикл
ФайлКартинки.ЗаписатьСтроку("<circle cx=""" + (20 * инд) + """ cy=""" + (20 * инд) + """ r=""" + (5 * инд) + """ style=""fill:none; stroke:blue; stroke-width:2""/>");
КонецЦикла;
ФайлКартинки.ЗаписатьСтроку("</svg>");
ФайлКартинки.Закрыть();
// Загружаем полученный файл в объект Картинка
Элементы.ПолеКартинки1.Картинка = Новый Картинка(ИмяФайла);
КонецПроцедуры
Если работа ведется на управляемых формах в клиент-серверном режиме, передачу файла картинки необходимо выполнять через временное хранилище:
&НаСервере
Функция ПолучитьАдресВекторнойКартинки()
ДвоичныеДанныеSVG = Новый ДвоичныеДанные(ПутьКФайлуSVG);
Возврат ПоместитьВоВременноеХранилище(ДвоичныеДанныеSVG, УникальныйИдентификатор);
КонецФункции
&НаКлиенте
Процедура ЗагрузитьКартинкуНаФорму()
// Реквизит формы КартинкаАдрес должен иметь тип Строка и быть связан с Полем картинки
КартинкаАдрес = ПолучитьАдресВекторнойКартинки();
КонецПроцедуры
Если интерактивная вставка через меню табличного документа завершается ошибкой или некорректным предпросмотром, добавим SVG программно через коллекцию Рисунки объекта ТабличныйДокумент.
Разберем процедуру вставки рисунка по шагам:
ТабДок = Новый ТабличныйДокумент;
ОбъектКартинка = Новый Картинка(ПутьКФайлуSVG);
// Добавляем новый рисунок в табличный документ
Рисунок = ТабДок.Рисунки.Добавить(ТипРисункаТабличногоДокумента.Картинка);
Рисунок.Картинка = ОбъектКартинка;
Рисунок.РазмерКартинки = РазмерКартинки.Пропорционально;
// Задаем область расположения рисунка в ячейках
Рисунок.Расположить(ТабДок.Область("R2C2:R15C6"));
ТабДок.Показать();
Если необходимо отобразить сложный SVG с динамической стилизацией, можно использовать элемент формы ПолеHTMLДокумента. Чтобы движок Windows корректно отобразил разметку, обязательно передаем метатег совместимости X-UA-Compatible со значением IE=edge.
Рассмотрим пример формирования HTML-страницы со встроенным SVG-кодом:
ТекстHtml =
"<!DOCTYPE html>
<html>
<head>
<meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />
<meta http-equiv=""Content-Type"" content=""text/html; charset=utf-8"" />
</head>
<body style=""margin:0; padding:10px;"">
<svg xmlns=""http://www.w3.org/2000/svg"" width=""200"" height=""200"" viewBox=""0 0 200 200"">
<circle cx=""100"" cy=""100"" r=""80"" fill=""green"" stroke=""black"" stroke-width=""3"" />
</svg>
</body>
</html>";
Элементы.ПолеHTMLДокумента1.УстановитьТекст(ТекстHtml);
При сохранении табличного документа, содержащего векторные изображения SVG, платформа применяет разные правила в зависимости от результирующего формата: