SVG позволяет превращать изображения в виджеты. Объекты, из которых состоит изображение, можно параметризировать: стилизовать, фильтровать, подсвечивать, добавлять подписи и т.д. Это создает возможность интерактивных элементов, которые реагируют на действия пользователя, такие как клики, наведение курсора и другие события.
SVG идеально подходит для адаптивного дизайна, так как векторные изображения масштабируются без потери качества. Это делает их подходящими для устройств с различными разрешениями — от мобильных телефонов до больших дисплеев.
В целом, использование SVG в веб-дизайне и разработке не только улучшает визуальную привлекательность, но и увеличивает функциональность приложений, позволяя пользователям более эффективно взаимодействовать с графическими элементами.
Рассмотрим ключевые аспекты при формировании SVG-файла для виджета SVG:
1. Подготовка SVG файла. Для редактирования файла используйте графический редактор Figma или другие аналоги. Для создания области, где будут выводиться подписи из датасета, выполните следующие шаги:
- Разместите прямоугольник или другую фигуру на месте будущей подписи.
- Задайте элементу ID (ID = значению из датасета).
- Важно! Установите минимальные свойства элемента (например, прозрачная рамка с минимальной толщиной), чтобы он не был заметен в самом SVG. Если это не сделать, может возникнуть ошибка при экспорте из Figma.
- Также учитывайте запасы по ширине и высоте для элемента подписи, иначе текст может обрезаться.
2. Выгрузка. Выгрузку необходимо осуществлять с включенным атрибутом ID.
3. Корректировка выгруженного файла. После выгрузки бывает, что в файле присутствует “Лишняя группа”. Для того, чтобы определить наличие этой группы необходимо:
- Открыть svg в браузере и запустить консоль разработчика (ПКМ “Посмотреть код” или F12)
- Найти первую группу и кликнуть на неё, если подсвечиваются все элементы, то её необходимо удалить (открывающий тег и закрывающий ). Для удаления рекомендуется открыть svg файл в любом редакторе кода (Например: VS Code, Notepad++ и т.д.)
4. Загрузка и подключение в Insight.
-
Загружайте выгруженный SVG файл в менеджер файлов.
Рекомендации по неймингу:
1. Используйте латиницу в названии файла. Пример: вместо “Лого” писать “logo”;
2. Вместо пробелов в названии используйте “_”;
3. Структура наименования должна быть следующей: наименование стенда_наименование виджета_номер :“forum_svg_1” -
Выберите виджет SVG, который уже подключен к датасету. Рекомендуется сначала подготовить датасет, а затем верстать, чтобы избежать проблем с логикой работы виджета. В датасете должны быть два обязательных поля: 1 — ID, 2 — записи, которые будут выводиться на SVG.
-
В настройках объектов выберите SVG файл из менеджера файлов.
-
Перейдите на вкладку “Измерения/метрики” и выберите поле, которое выполняет роль ID (это поле “Айди”).
-
В настройках подписей объектов добавьте новую запись и укажите поле, которое будет выводиться на SVG (это поле “Измерение”).
Выполнив эти шаги, вы сможете создавать уникальные страницы с помощью виджета SVG. Для получения более подробной информации о возможностях виджета SVG, вы можете обратиться к вики https://partner.goodt.me/wiki/#/wiki_svg.
Создано в соавторстве с