Sign in Join

Live chat for Free Pascal, Lazarus, Delphi and every Pascal programmer.

Catalog · How the catalog works
Anything · Lazarus or Delphi
Random projectRandom project

SVG Icons List Maker

Utility and module for developing Lazarus GUI projects with vector SVG icons

View on GitLab

Member rating

No ratings yet.

Sign in to rate this project.

README

# SVG Icons List Maker

О приложении

Утилита SVG Icons List Maker разработана для упрощения замены растровых иконок в проектах GUI-приложений Lazarus на векторные в формате SVG. Это позволяет разработать приложение, хорошо выглядящее на различных устройствах с разной плотностью пикселей (PPI) и разными системными настройками масштаба.

Принципиально это делается следующим образом:

  • в разрабатываемое приложение встраваем иконки в формате SVG (или загружаем из внешнего файла),
  • при запуске приложения происходит рендеринг иконок под требуемое разрешение,
  • если в процессе работы приложения потребуется изменить разрешение иконок, можно запустить процесс рендеринга повторно,
  • готово — теперь приложение имеет масштабируемые иконки!

В IDE Lazarus пока еще нет редактора векторных иконок, похожего на встроенный редактор TImageList. Утилита SVG Icons List Maker восполняет этот пробел.

Дополнение от 2023.10.13: теперь доступен пакет ImageSVGListDsgn, который реализует невизуальный компонент времени разработки TImageSVGList. Этот компонент реализует список векторных изображений SVG, напоминающий TImageList. Он также имеет редактор, похожий на SVG Icons List Maker. Вместо SVG Icons List Maker можно полностью обойтись этим компонентом.

Также в SVG Icons List Maker можно оценить как будет выглядеть иконка в разных разрешениях.

Установка

Утилита SVG Icons List Maker не нуждается в установке (portable), работает из любого каталога. Скачать можно отсюда. Утилита также не хранит никаких данных и настроек.

Использование

Просмотр иконок

При запуске SVG Icons List Maker в селектор автоматически загружаются все файлы SVG (с расширением .svg) из рабочего каталога. По умолчанию рабочий каталог это каталог исполняемого файла. Если требуется изменить рабочий каталог, просто перетащите его или SVG-файл из него в окно утилиты. Рабочий каталог и количество SVG-файлов в нем отображаются в самом верху приложения.

В селекторе отображаются все SVG-файлы, доступные в рабочем каталоге:

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

Ползунок справа позволяет изменять фон иконок, может быть полезно для оценки вида иконок в разных темах.

Иконка в просмотрщике и подпись под ней активные, нажатием на них можно установить соответствующий размер всех иконок в селекторе. Также можно изменять размер всех иконок селектора колесом мыши в селекторе или в просмотрщике.

Если в каталоге файлы изменились, удалены или добавлены новые, то селектор можно обновить кнопкой Update.

Кнопка Export PNG позволит экспортировать иконки в растровом формате PNG. Разрешение задается в поле над кнопкой. Файлы PNG будут сохранены в рабочем каталоге в подкаталоге PNG, в котором будет подкаталог с названием, соответствующим разрешению.

Подготовка пакета иконок

Теперь подготовим пакет иконок для включения его в свой проект приложения Lazarus.

В нижней части окна расположен редактор списка иконок.

По умолчанию кнопка-флаг Add by click нажата, что позволяет добавлять иконки в список, просто щелкнув нужную иконку в селекторе. Иконки, уже присутствующие в списке, вновь не добавляются для исключения дублирования. Однако, если все-таки необходимо иметь несколько одинаковых иконок, можно создать копию файла SVG с другим именем. Это позволит добавить иконку в список, поскольку дублирование проверяется по имени исходного файла SVG. Кнопки Add all, Move Up, Move Down, Delete selected, Clear list позволяют редактировать список иконок. Каждая иконка в списке имеет последовательный индекс, начиная с 0.

После создания списка иконок сохраним его, нажав кнопку Save list … . Список сохраняется в простой текстовый формат с расширением .svglist. Строка 0 и все парные строки содержат имя файла SVG, а непарные строки содержат одной строкой контент SVG-файла, имя которого в предыдущей строке.

Также можно открыть ранее созданный список .svglist, нажав кнопку Open list … или просто перетащив файл в окно. При этом в селектор также будут загружены иконки из списка, независимо от рабочего каталога.

Открытый список можно распаковать на отдельные файлы SVG. Для этого нажмите кнопку Unpack list. Файлы будут сохранены в рабочем каталоге в подкаталоге с названием, соответствующим названию файла списка.

Подключение пакета иконок к проекту приложения Lazarus

Чтобы разрабатывать приложение с иконками SVG, потребуется подключить к проекту приложения Lazarus модуль SVGList. Также нужны пакеты BGRABitmap и BGRAControls. Их можно установить при помощи встроенного в Lazarus сетевого диспетчера пакетов или вручную.

Далее рассмотрим практический пример приложения.

Создадим новый проект Lazarus — графическое приложение. Исходные коды сохраним в каталоге src.

С вкладки Common Controls выберем и установим на форму компонент TToolbar, в котором используются иконки кнопок. Добавим несколько кнопок, например, четыре. Зададим каждой кнопке нужный индекс иконки через свойство ImageIndex.

Также добавим на форму компонент TImageList и укажем его в свойстве Toolbar1.Images. Теперь через инспектор проекта (меню Проект) укажем путь к модулю SVGList или скопируем его в папку проекта и также укажем путь. Добавим модуль SVGList в секцию uses:

pascal
uses
  SysUtils, Forms, Controls, ComCtrls, StdCtrls, 
  SVGList; // подключаем модуль SVGList

Подготовим пакет с иконками в SVG Icons List Maker как описано выше и поместим его в каталог res нашего проекта. Теперь откроем Параметры проекта (меню Проект) и перейдем на вкладку Ресурсы. Здесь добавим наш пакет с иконками как ресурс RCDATA. Сохраним изменения в параметрах проекта, нажав OK.

Обратите внимание. Файл пакета иконок должен быть всегда доступен при компиляции проекта, иначе он не будет включен в исполняемый файл разрабатываемого приложения!

В секции глобальных переменных объявим новый список иконок mySvgList:

pascal
var
  Form1:     TForm1;
  mySvgList: TSVGList;

Для формы Form1 создадим обработчик OnCreate:

pascal
procedure TForm1.FormCreate(Sender: TObject);
  begin
    // создаем экземпляр mySvgList класса TSVGList
    mySvgList := TSVGList.Create(ImageList1);
    
    // загружаем иконки из ресурса с именем EXAMPLE
    mySvgList.LoadFromResource('EXAMPLE');
    
    // задаем целевой размер растровой иконки
    mySvgList.RenderSize := 32;
    
    // запускаем однократно рендеринг векторных иконок в растровые изображения в ImageList1
    mySvgList.ForceRendering;
    
    // ...
  end;

Теперь скомпилируем и запустим наше приложение:

Готово. Теперь наше приложение при создании формы рендерит векторные иконки в растровые и использует их. Если необходимо изменить размер иконок, просто укажите его и перезапустите рендеринг:

pascal
// задаем новый размер растровой иконки
mySvgList.RenderSize := 32;

// перезапускаем однократно рендеринг векторных иконок в растровые изображения в ImageList1
mySvgList.ForceRendering;

Если в обработчике OnCreate установить свойство Rendering как True:

pascal
// разрешить рендеринг по изменению свойств
mySvgList.Rendering := True;

то метод ForceRendering не требуется вызывать для запуска рендеринга при изменении размера, это будет происходить автоматически.

Полезно знать. Чтобы автоматически устанавливать размер иконок соответственно системным настройкам плотности пикселей PPI, можно воспользоваться методом формы Scale96ToScreen(). В качестве параметра передаем размер иконки в пикселях для PPI = 96:

pascal
// автоматический расчет размера иконки в зависимости от системного PPI
mySvgList.RenderSize := Scale96ToScreen(16);

Производительность

На среднем ноутбуке 2022 года 200 SVG-файлов общим размером 150 КБ рендерятся в разрешении 32 пкс за 200–250 мс.

Ограничения

Модуль SVGList и утилита SVG Icons List Maker работают с иконками с соотношением сторон 1:1. Свойство TSVGList.RenderSize задает одновременно ширину и высоту иконки для рендеринга.

Дополнительно

Как быстро реализовать темную тему для приложения на Windows (также и для IDE Lazarus) — MetaDarkStyle.

Ответственность

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

Авторство

Copyright 2023 Riva, FreeBSD License. История версий — versions.md.

  • Модуль SVGList — Copyright 2023 Riva, MIT License.

Разработано в Free Pascal RAD IDE Lazarus v2.2.6, компилятор Free Pascal Compiler v3.2.2.

Сторонние компоненты и пакеты:

  • BGRABitmap — a package designed to modify and create images with transparency.
  • BGRA Controls — a set of graphical UI elements. Author: Lainz.